rtl-readiness

Original：🇺🇸 English

Translated

7 scripts

Use when an RTL language such as Arabic, Hebrew, Persian, or Urdu is served or planned, and layout and behavior must mirror correctly: dir attribute, logical CSS properties, mirrored navigation, bidi text, icons, and forms. It checks rendered pages in RTL and fixes layout logic. Do not use it to mirror non-directional icons, to flip images with text, or on sites with no RTL locale.

5installs

Sourcemoh-obaida/readyvibe-skills

Added on2026-09-30

NPX Install

npx skill4agent add moh-obaida/readyvibe-skills rtl-readiness

SKILL.md Content

View Translation Comparison →

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

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
```
.
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.
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.
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.
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.
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.
Locale formatting: dates, numbers, currency via
```
Intl
```
for the locale; calendar expectations (a product decision: owner).
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.

rtl-readiness

NPX Install

Tags

SKILL.md Content

rtl-readiness

Activate when

Working alone

Inspect

Evidence that counts

May change

Must not claim

Verify

Escalate

No change is valid when