免费在 GitHub 公开

rtl-aware-development

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.

Kilo-Org/kilocode

查看安装方法

适用场景

Reviewing CSS layouts for right-to-left support
Displaying mixed-direction text, code, and paths
Checking menus, scrolling, and resize interactions
Adapting Electron title bars to both directions

包含的文件（1）

SKILL.md4.0 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

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

References

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

chart

免费

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.

中文简介正在准备中。当前显示英语简介。

Comparing values across categories with a bar chart
Showing monthly changes with a line chart
Displaying proportions with a pie or doughnut chart