Arabic UI

Purpose

Create interfaces whose hierarchy, rhythm, components, and content behavior work naturally in Arabic. Treat language direction as one input to design, not as an instruction to mirror every visual decision. Coordinate with arabic-rtl when implementation details or bidirectional text are in scope.

Use this skill when

Use it for Arabic-first or bilingual pages, components, design systems, responsive layouts, and visual reviews. For Egyptian tone and terminology, also use egyptian-copy. For market-specific product flows, also use egyptian-product-ux.

Workflow

1. Identify the primary locale, secondary language, audience, device context, and task. Label missing facts as assumptions.
2. Inventory every content type: headings, body copy, labels, numbers, identifiers, statuses, actions, and mixed-language strings.
3. Establish Arabic typography and spacing tokens before tuning individual components.
4. Design the narrow/mobile state first when the audience is phone-heavy. Expand layouts without changing reading or keyboard order.
5. Specify default, hover/focus, disabled, loading, empty, validation, error, and success behavior.
6. Review hierarchy and scan paths with realistic Arabic content, including long and short variants.
7. Test accessibility, zoom, text enlargement, and mixed Arabic/Latin data.