Implement and review interfaces that support both right-to-left and left-to-right reading. Apply guidance for CSS layout, mixed-direction text, menus, scrolling, resizing, and Electron title bars, then verify interactions in both directions.
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.
Review the instructions the agent will receive before you install.
Treat direction as independent from language. Test English in both directions as well as real RTL and mixed-script content.
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.dir; do not add row-reverse, CSS order, or reversed markup just to mirror a layout./* 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;
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>
translateX, SVG transforms, and animation deltas explicitly.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.scrollLeft can start at 0 and become negative. Prefer scrollIntoView({ inline: "nearest" }) or a tested direction-normalizing helper.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.dirscrollLeftNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Creates charts from numerical data using the chart tool and Chart.js v4. Supports bars, lines, pies, scatter plots, and other formats to show comparisons, trends, proportions, and relationships, with options for dataset colors and mixed charts.
Develop TypeScript services and workflows with Effect v4 by checking its source and existing project examples. Guides data schemas, typed errors, explicit dependencies, and tests that follow the project's established patterns.
Create and manage GitHub issues for the Kilo VS Code extension or JetBrains plugin using gh, GitHub's command-line tool. Guides template selection, clear titles, required project board assignment, and authentication permissions.
Create and review SVG icons for IntelliJ New UI. Choose sizes by interface role, prepare matching light and dark versions, refine shapes and strokes, and place the assets in the plugin’s resource folders.
Create and review icons for Kilo’s VS Code extension and webviews, the extension’s embedded interface panels. Choose existing icons or suitable SVG assets, register them correctly, and check theme appearance and accessible button names.
Guides development across the Kilo JetBrains plugin’s shared, frontend, and backend modules. Explains remote calls between modules, UI thread rules, dependency packaging, and testing practices, including serialization failures that require checks in a running IDE.