Rtl Aware Development
OpenCode Desktop should be RTL-aware.
Install
npx skills add Kilo-Org/kilocode --skill rtl-aware-development -g -a claude-code -y- Repository
- Kilo-Org/kilocode27.8k
- Category
- Design
- Updated
- 4d ago
- License
- MIT
- Context cost
- Lightabout 960 tokens
- Runs scripts
- No, instructions only
What it does
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
langanddiron 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 addrow-reverse, CSSorder, 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>
