Agent Skills › iamcheyan/oc › rtl-aware-development

rtl-aware-development

GitHub

提供RTL/LTR国际化开发指南，涵盖CSS逻辑属性、DOM语义、混合文本处理及Electron适配。用于实现或审查多语言布局与交互行为。

.opencode/skills/rtl-aware-development/SKILL.md iamcheyan/oc

Trigger Scenarios

实施或审查RTL/LTR布局处理混合方向文本调整CSS逻辑属性配置Electron标题栏

Install

npx skills add iamcheyan/oc --skill rtl-aware-development -g -y

More Options

Non-standard path

npx skills add https://github.com/iamcheyan/oc/tree/main/.opencode/skills/rtl-aware-development -g -y

Use without installing

npx skills use iamcheyan/oc@rtl-aware-development

指定 Agent (Claude Code)

npx skills add iamcheyan/oc --skill rtl-aware-development -a claude-code -g -y

安装 repo 全部 skill

npx skills add iamcheyan/oc --all -g -y

预览 repo 内 skill

npx skills add iamcheyan/oc --list

SKILL.md

Frontmatter

{
    "name": "rtl-aware-development",
    "description": "OpenCode Desktop should be RTL-aware. Use when implementing or reviewing RTL\/LTR behavior in the web app, desktop app, CSS, menus, scrolling, resizing, icons, mixed-direction text, or Electron title bars."
}

RTL-Aware Development

Treat direction as independent from language. Test English in both directions as well as real RTL and mixed-script content.

Guidelines

Set lang and dir on the document, and propagate direction through component providers used by portaled menus and popovers. Do not change the selected locale merely to force RTL.
Keep DOM and focus order semantic. Flexbox and Grid already follow dir; do not add row-reverse, CSS order, or reversed markup just to mirror a layout.
Prefer logical CSS for semantic layout. Reserve physical coordinates for pointer positions, canvas geometry, native window controls, and other genuinely physical placement.

/* Avoid */
padding-left: 12px;
right: 0;
border-right: 1px solid;
text-align: left;

/* Prefer */
padding-inline-start: 12px;
inset-inline-end: 0;
border-inline-end: 1px solid;
text-align: start;

Isolate mixed-direction text. Use dir="auto" or <bdi> for unknown text; keep code, URLs, IDs, and filesystem paths LTR without forcing the surrounding component LTR.

<span class="file-row"><bdi dir="auto">README.md</bdi></span> <bdi dir="ltr"><code>C:\src\app.ts</code></bdi>

Mirror directional meaning, not every image. Back/forward, previous/next, disclosure, indentation, and directional progress may need mirroring. Do not mirror brands, clocks, media controls, charts, or text. Reverse physical gradients, translateX, SVG transforms, and animation deltas explicitly.
Map interactions through direction. clientX remains physical; resizing a logical edge needs an RTL-aware delta. Logical previous/next keyboard controls may swap ArrowLeft/ArrowRight. Follow the relevant WAI-ARIA widget pattern.
Do not assume LTR scrolling. RTL scrollLeft can start at 0 and become negative. Prefer scrollIntoView({ inline: "nearest" }) or a tested direction-normalizing helper.
For Electron title bars, prefer native caption controls and use titleBarOverlay plus env(titlebar-area-*) for the safe content rectangle. Keep Windows/macOS native-control avoidance and trafficLightPosition physical; keep app navigation inside that rectangle logical. Mark interactive titlebar children app-region: no-drag.
Verify behavior, not screenshots alone. Check computed styles, pseudo-element geometry, hit zones, focus order, keyboard behavior, submenu direction, zoom/scaling, and both LTR and RTL scroll endpoints.

Test Matrix

English + LTR
English + forced RTL
A real RTL locale + RTL
Mixed RTL/LTR content, long labels, numbers, code, and paths
Keyboard, pointer resize, scrolling, menus/submenus, and Electron titlebar controls in both directions