Rtl Skill — Development skill for Claude Code

arabic-rtl-apps

A Claude skill for building Arabic-first, RTL-aware web apps that feel native — not like an English UI with the direction flipped.

What it does

When you ask Claude to build any Arabic interface, this skill ensures it gets the fundamentals right:

• RTL layout — dir="rtl" as the structural foundation, not a CSS patch
• Arabic typography — IBM Plex Sans Arabic with proper line-height (1.7+), zero letter-spacing, and correct font weights
• Icon mirroring — back arrows, chevrons, and directional icons flip automatically; universal icons (play, close, search) stay put
• Navigation placement — sidebars on the right, drawers open from the right
• Form handling — dir="auto" on inputs, phone numbers with dir="ltr", labels above fields
• Bilingual support — language switching pattern with separate font stacks, wrapping for mixed-direction text
• RTL animations — slide-ins, progress bars, and carousels all respect reading direction

Install

Claude Code (terminal)

claude install-skill https://github.com/Maryeus/rtl-skill

Claude.ai (web/app)

Download the `.skill` file from (https://github.com/Maryeus/rtl-skill/raw/main/arabic-rtl.skill) and drag it into your Claude conversation.

When does it trigger?

The skill activates automatically when:

• You write your prompt in Arabic
• You mention Arabic, RTL, or MENA audiences
• You use Arabic UI terms (واجهة، تطبيق، تصميم، صفحة)
• You say "make it Arabic" or "add Arabic support"

No need to explicitly ask for RTL — Claude detects it from context.

What it catches

Common mistakes this skill prevents:

1. Forgetting dir="rtl" on the root element
2. Hardcoding text-align: left
3. Not loading an Arabic font
4. Adding letter-spacing to Arabic text (breaks connected letterforms)
5. Using Latin-optimized line heights (Arabic needs 1.7+)
6. Not flipping directional icons
7. Forgetting dir="auto" on form inputs
8. Using placeholder text