# Rtl Aware Development

OpenCode Desktop should be RTL-aware.

- Repository: https://github.com/Kilo-Org/kilocode (27829 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Kilo-Org/kilocode --skill rtl-aware-development -g -a claude-code -y`
Codex: `npx skills add Kilo-Org/kilocode --skill rtl-aware-development -g -a codex -y`
Cursor: `npx skills add Kilo-Org/kilocode --skill rtl-aware-development -g -a cursor -y`
Gemini CLI: `npx skills add Kilo-Org/kilocode --skill rtl-aware-development -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

```css
/* 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.

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

The rest: https://github.com/Kilo-Org/kilocode/blob/HEAD/.opencode/skills/rtl-aware-development/SKILL.md