Agent skill · mindrally
rtl-internationalization
Right-to-left (RTL) layout and bidirectional text support for Hebrew, Arabic, Persian, and Urdu interfaces. Use when building UI that must support RTL languages, converting physical CSS/Tailwind properties to logical ones, handling mixed-direction (bidi) text, mirroring directional icons, or testing an app with dir=\"rtl\".
What it needs
About 5k tokens when loaded.
What this skill does
RTL (Right-to-Left) Internationalization Supporting RTL languages such as Hebrew, Arabic, Persian, and Urdu requires building layouts with direction-agnostic CSS and treating text direction as a first-class, runtime-switchable property rather than a fixed assumption baked into left/right styles. Workflow for Making a UI RTL-Safe 1. Audit for physical properties — Search the codebase for margin-left/right, padding-left/right, left/right positioning, text-align: left/right, and Tailwind classes like ml-, mr-, pl-, pr-, left-, right-. 2. Convert to logical properties — Replace each physical property/class with its logical equivalent (margin-inline-start, ms-, etc.) so the browser flips it automatically based on dir. 3. Set direction at the root — Apply dir="rtl" (or dir="auto") on <html> or a top-level container, driven by the active locale, not hardcoded per component. 4. Handle mixed-script text — Wrap user-generated or interpolated strings that may differ in direction from the surrounding text with <bdi>. 5. Audit icons and directional components — Mirror arrows, chevrons, and back/forward buttons; leave non-directional icons (search, settings, home) unmirrored; reverse carousels, sliders, and progress bars. 6. Externalize all strings — Route every user-facing string through a translation function and use Intl APIs for numbers, currency, and dates instead of manual formatting. 7. Test in RTL — Render the app with dir="rtl" and real RTL content (not just mirrored LTR placeholder text) and visually verify every screen. Logical CSS Properties Always use CSS logical properties instead of physical ones — logical properties resolve to the correct physical side automatically based on the element's direction and writing-mode, so the same stylesheet works for LTR and RTL without duplication. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mindrally/rtl-internationalization