rtl-readiness

RTL is not "flip the page". Direction, layout, and reading order change; icons, numbers, and mixed-language text have their own rules. A half-mirrored site tells RTL readers it was not built for them.

Activate when

• An RTL locale is offered or planned; content includes RTL text; users report backwards layouts.
• Not for LTR-only sites.

Working alone

This skill is self-contained. Its companions (declared in its metadata) are skills whose method it may need to do its own promised work. Use of a companion can be conditional: declaring one does not mean running it. When a companion's lane applies, use the skill if it is installed; if not, follow its short entry in references/companion-methods.md and say in your report which lanes ran inline at reduced depth. Never skip an applicable lane silently. Skills mentioned here only for escalation, referral, documentation, or optional deeper follow-up are not dependencies: report the hand-off and finish honestly.

Companions: design-system-reconnaissance.

Inspect

1. Direction: <html dir="rtl" lang="ar"> (or dir="auto" for user content); set on the document, not by ad-hoc per-element hacks; switching locale switches dir.
2. CSS logic: physical properties (margin-left, padding-right, left: 0, text-align: left, float, border-left) that should be logical (margin-inline-start, padding-inline-end, inset-inline-start, text-align: start, border-inline-start); Tailwind ms-*/me-*/ps-*/pe-* and rtl: variants vs ml-*/mr-*; flexbox/grid order relying on physical direction; transforms/animations translating on X axis; scrollbars and carousels.
3. Rendered pass at desktop and 375px with the RTL locale (observe-runtime --viewport 375x812 --steps steps.json with a goto to the RTL path; --screenshots to look at it; paths relative to this skill's folder): navigation order and alignment, header/logo/menu placement, breadcrumbs, forms (labels, inputs, validation icons on the correct side), tables (column order), dialogs and close buttons, toasts, pagination arrows, progress bars.
4. Icons and media: directional icons (arrows, chevrons, back/forward, send, breadcrumbs) mirror; non-directional icons (logos, play, clock, checkmarks, brand marks, media controls) do not; images with baked-in text or diagrams with left-to-right flow are handled deliberately.
5. Bidi text: mixed RTL/LTR strings (brand names, numbers, URLs, emails, phone numbers, code) render in the correct order; punctuation at the wrong end; <bdi>/dir="auto" for user-generated strings; numerals (Western vs Arabic-Indic) chosen deliberately and consistently; input fields for emails/URLs are LTR.
6. Typography: font supports the script well (weight, diacritics); line-height and size adequate (Arabic/Persian often need more); no letter-spacing on connected scripts (it breaks joining); no forced uppercase.
7. Locale formatting: dates, numbers, currency via Intl for the locale; calendar expectations (a product decision: owner).
8. Metadata and legal: the RTL-language pages have translated trust/legal pages (multilingual-readiness), lang/hreflang, and correct social text.

Evidence that counts

Label each claim OBSERVED, SOURCE-INDICATED, DECLARED, INFERRED, UNKNOWN, or REVIEW REQUIRED. UNKNOWN is never a pass and never a failure.

• Rendered RTL layout at the tested sizes: OBSERVED. CSS using logical properties: SOURCE-INDICATED.
• Language and translation quality need a native reader: UNKNOWN unless one reviewed it.

May change

Design first. Before creating or changing anything visible, inspect the project's existing design system (design-system-reconnaissance) and build from its tokens and components, by the component ladder: reuse, compose, extend, and only then create a matching component. Never impose a ReadyVibe look on the user's site.

Set dir/lang; convert physical CSS to logical properties or add rtl: variants; mirror directional icons; fix flex/grid ordering; wrap mixed-direction strings; adjust typography for the script; fix RTL-specific overflow. Preserve the design system; do not rewrite styles wholesale. Do not mirror logos or media controls, and do not machine-translate copy.

Must not claim

"RTL-ready" or "fully localized". State the pages, sizes, and locales viewed and that a native-speaker review is pending.

Verify

Re-screenshot the same pages in RTL and LTR: LTR unchanged; RTL mirrored where it should be; no overflow at 375px; forms and dialogs operate correctly; keyboard order follows visual order.

Escalate

Content or UX decisions that depend on cultural/locale knowledge; legal translations; complex editors, charts, and maps in RTL.

No change is valid when

No RTL locale is served or planned; or RTL pages already render and behave correctly.