# Rtl UI > Implements right-to-left (RTL) UI patterns for Arabic interfaces using Tailwind CSS, covering layout direction, icon mirroring, typography, and spacing constraints for bidirectional applications - Skill: `majiayu000/rtl-ui` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds add majiayu000/rtl-ui` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/rtl-ui/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/rtl-ui --- # RTL UI Development Standards This skill provides comprehensive guidelines for building right-to-left (RTL) user interfaces, primarily targeting Arabic language support with Tailwind CSS. ## 🚨 CRITICAL REQUIREMENTS - READ FIRST ### MANDATORY Rules (Application Will Break if Violated) **❌ NEVER USE THESE CLASSES - WILL CAUSE RTL BUGS:** ```tsx // BANNED - Physical properties ml-*, mr-*, pl-*, pr-* // ❌ NEVER left-*, right-* // ❌ NEVER text-left, text-right // ❌ NEVER rounded-l-*, rounded-r-* // ❌ NEVER border-l-*, border-r-* // ❌ NEVER ``` **✅ ALWAYS USE THESE INSTEAD - MANDATORY:** ```tsx // REQUIRED - Logical properties ms-*, me-* // ✅ REQUIRED (margin-inline-start/end) ps-*, pe-* // ✅ REQUIRED (padding-inline-start/end) start-*, end-* // ✅ REQUIRED (positioning) text-start, text-end // ✅ REQUIRED (alignment) rounded-s-*, rounded-e-* // ✅ REQUIRED (border-radius) border-s-*, border-e-* // ✅ REQUIRED (borders) ``` **⚠️ ZERO TOLERANCE POLICY:** - Every `ml-*` must be `ms-*` - Every `pl-*` must be `ps-*` - Every `text-left` must be `text-start` - **NO EXCEPTIONS** - Even for "temporary" code ### Next.js 14 Server Actions - MANDATORY PATTERN **❌ ANTI-PATTERN - NEVER DO THIS:** ```tsx // app/login/page.tsx 'use client'; export default function LoginPage() { // ❌ WRONG - Server action inside client component file async function loginAction(formData: FormData) { 'use server'; // ❌ Mixed directives in same file // ... } return
...
} ``` **✅ REQUIRED PATTERN - ALWAYS DO THIS:** ```tsx // app/actions/login.ts 'use server'; // ✅ Dedicated server action file export async function loginAction(formData: FormData) { const supabase = await createClient() // ... implementation } // app/login/page.tsx 'use client'; // ✅ Separate client component file import { loginAction } from '@/app/actions/login' export default function LoginPage() { return
...
} ``` **📁 REQUIRED File Structure:** ``` app/ ├── actions/ ✅ MANDATORY - All server actions here │ ├── login.ts ('use server') │ ├── register.ts ('use server') │ └── ... ├── (auth)/ │ ├── login/ │ │ └── page.tsx ('use client') │ └── register/ │ └── page.tsx ('use client') ``` **🔒 RULE: One directive per file** - Files with `'use server'` → Only server code - Files with `'use client'` → Only client code - **NEVER mix both in same file** ## Core Principles ### 1. Directional Layout System **Always use logical properties over physical properties:** ```jsx // ❌ WRONG - Physical properties
// ✅ CORRECT - Logical properties (auto-flips in RTL)
``` **Tailwind RTL-Safe Utilities:** - `ms-*` / `me-*` instead of `ml-*` / `mr-*` (margin-inline-start/end) - `ps-*` / `pe-*` instead of `pl-*` / `pr-*` (padding-inline-start/end) - `start-*` / `end-*` instead of `left-*` / `right-*` (positioning) - `text-start` / `text-end` instead of `text-left` / `text-right` - `rounded-s-*` / `rounded-e-*` instead of `rounded-l-*` / `rounded-r-*` - `border-s-*` / `border-e-*` instead of `border-l-*` / `border-r-*` ### 2. HTML Direction Attribute Set the direction at the root level: ```html ``` **Dynamic direction switching:** ```jsx // React/Next.js example ``` ### 3. Icon Mirroring Strategy **Icons that MUST mirror in RTL:** - Arrows: → ← ↗ ↙ - Chevrons: › ‹ - Navigation: back, forward, next, previous - Directional actions: undo, redo, reply, forward (email) - Timeline and progress indicators - List indicators and bullet points **Icons that NEVER mirror:** - Media controls: play ▶, pause ⏸, stop ⏹ - Shopping cart 🛒 - Magnifying glass 🔍 - Checkmarks ✓ - Close/X buttons ✕ - Clocks and time 🕐 - Symmetrical icons: +, ×, gear ⚙ **Implementation:** ```jsx // Using Lucide React or similar icon library import { ChevronRight } from 'lucide-react'; // Option 1: CSS transform // Option 2: Conditional rendering {isRTL ? : } // Option 3: Rotate class (for arrows) ``` ### 4. Arabic Typography Rules **Font Selection:** - Use Arabic-optimized fonts: Cairo, Almarai, Tajawal, Noto Sans Arabic - Ensure proper font stack: `'Cairo', 'Segoe UI Arabic', -apple-system, system-ui` **Font Sizing:** - Arabic text needs 10-15% larger font size for equivalent readability - Line height: Use 1.7-1.8 for Arabic (vs 1.5-1.6 for English) ```css /* Tailwind config extension */ .font-arabic { font-family: 'Cairo', 'Segoe UI Arabic', sans-serif; line-height: 1.75; } /* Apply via CSS */ html[dir="rtl"] { font-size: 105%; /* Slightly larger base size */ } ``` **Letter Spacing:** ```jsx // ❌ NEVER use letter-spacing with Arabic

مرحبا

// ✅ Default spacing only

مرحبا

``` ### 5. Spacing and Layout Constraints **Flexbox Direction:** ```jsx // ❌ WRONG - Hardcoded direction
// ✅ CORRECT - Auto-reverses in RTL
{/* Flex items automatically reverse in RTL context */}
// For explicit control when needed
``` **Grid Layouts:** ```jsx // Grids work naturally in RTL - no changes needed
{/* Items flow naturally based on dir attribute */}
``` **Asymmetric Spacing:** ```jsx // ❌ WRONG - Physical spacing
// ✅ CORRECT - Logical spacing
``` ### 6. Forms and Inputs **🚨 MANDATORY Form Pattern:** ```jsx // ✅ REQUIRED - Complete form input with RTL support
// ❌ WRONG - Common mistakes // ❌ NOT px-4 // ❌ NOT pl-/pr-