Stats
Actions
Tags
From smorch-dev
MENA Arabic RTL UI compliance checker. 8-point checklist covering dir=rtl, text alignment, icon mirroring, fonts (Cairo/Tajawal), numbers, BiDi, forms, layout primitives. Caps UX hat at 6 if RTL untested for MENA ICP.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smorch-dev:arabic-rtl-checkerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Purpose:** Catch Arabic RTL failures before they ship. MENA ICP means Arabic is primary, not secondary.
Purpose: Catch Arabic RTL failures before they ship. MENA ICP means Arabic is primary, not secondary.
Pillar: EO-specific — MENA quality gate Time cost: 3-5 minutes per PR with UI changes.
Mandatory for any PR that:
Skip only if:
For every changed component, verify:
dir="rtl" respecteddir="rtl"left/right values; use start/end (Tailwind: ms-* / me-* not ml-* / mr-*)transform: scaleX(-1) or RTL-aware icon set)next/font optimization in use (no FOIT/FOUT flash)، or space for Arabic<bdi> or unicode-bidi: isolate for mixed directionflex-row becomes reverse in RTL (use flex-row-reverse or dir-aware CSS)padding-inline-start)float: inline-start / inline-end# 1. Add dir="rtl" to <html> or <body> in your local env
# 2. Toggle language to Arabic in the app
# 3. Walk through:
# - Home page
# - Main form
# - Modal / dialog
# - Navigation
# - Error state
# 4. Screenshot each view
# 5. Compare side-by-side with English version
If the screenshots aren't in the PR description: UX hat caps at 6.
| Failure | Root cause | Fix |
|---|---|---|
| Text left-aligns in Arabic | Hardcoded text-left | Use text-start (Tailwind 3.3+) or conditional class |
| Margin is wrong side | ml-4 / mr-4 | Use ms-4 / me-4 |
| Chevron points wrong way | Static icon | Use rtl:rotate-180 modifier |
| Tofu boxes | Font not loaded | Verify Cairo/Tajawal in next/font + preload |
| Arabic + English mixed oddly | No BiDi isolation | Wrap in <bdi> |
| Currency "100 AED" shows in Arabic as "AED 100" | No locale-aware formatter | Use Intl.NumberFormat('ar-AE', {style:'currency', currency:'AED'}) |
| Form label below input in RTL | flex-row not mirrored | Add rtl:flex-row-reverse |
# grep for hard-coded direction classes that break RTL
grep -rE "\b(ml|mr|pl|pr|left|right)-[0-9]+\b" src/components/ \
--include="*.tsx" --include="*.jsx" \
| grep -v "rtl:" \
| grep -v "// rtl-ok"
If output is non-empty → fail the check. Either refactor to ms-*/me-* or tag with // rtl-ok comment explaining why it's directional.
src/components/**/*.tsxdir="rtl"react-intl or next-intl for locale-aware formattingrtl: modifier (v3.3+)Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub smorchestra-ai/smorch-dev --plugin smorch-dev