Arabic RTL Engineering

Purpose

Make direction a supported system property across markup, CSS, components, data display, and tests. dir="rtl" establishes the base direction; it does not solve component geometry, mixed-direction text, icons, charts, or interaction order.

Use this skill when

Use it to implement or review RTL web applications, bilingual components, CSS systems, React/Next.js pages, Tailwind utilities, and bidirectional data. Pair with arabic-ui for visual decisions and egyptian-copy for language.

Workflow

1. Determine direction at the document or locale-root level; use local overrides only for genuinely different content.
2. Audit physical CSS (left, right, margin-left, absolute offsets, directional radii/borders) and classify each as flow-relative or physically anchored.
3. Map DOM, reading, keyboard, and visual order. Fix source order before using CSS reversal.
4. Identify LTR islands: phone numbers, emails, URLs, code, IDs, and sometimes dates/numeric expressions.
5. Classify icons and data visualizations by meaning before flipping.
6. Test both RTL and LTR at narrow and wide widths with realistic mixed content.
7. Add direction-specific regression tests for the risky components.