RTL Safety Check

IMPORTANT: When this command is invoked, you MUST actually SCAN the codebase and REPORT findings. Do NOT just describe what to check.

Step 1: Find Component Files

Use Glob to find React/Next.js components:

{frontend}/app/**/*.tsx
{frontend}/components/**/*.tsx
{frontend}/src/**/*.tsx

Step 2: Check for RTL Violations

2.1 Tailwind Class Violations

Violation	Should Be
ml-*	ms-* (margin-start)
mr-*	me-* (margin-end)
pl-*	ps-* (padding-start)
pr-*	pe-* (padding-end)
left-*	start-*
right-*	end-*
text-left	text-start
text-right	text-end
border-l-*	border-s-*
border-r-*	border-e-*
rounded-l-*	rounded-s-*
rounded-r-*	rounded-e-*

2.2 Inline Style Violations

Violation	Should Be
marginLeft	marginInlineStart
marginRight	marginInlineEnd
paddingLeft	paddingInlineStart
paddingRight	paddingInlineEnd
left:	insetInlineStart
right:	insetInlineEnd
textAlign: 'left'	textAlign: 'start'
textAlign: 'right'	textAlign: 'end'

2.3 Icon Direction Issues

Look for directional icons without RTL handling:

• ChevronLeft, ChevronRight
• ArrowLeft, ArrowRight
• CaretLeft, CaretRight

Step 3: Output Report

FORMAT YOUR OUTPUT EXACTLY LIKE THIS:

╔══════════════════════════════════════════════════════════════╗
║                 RTL SAFETY COMPLIANCE REPORT                 ║
╚══════════════════════════════════════════════════════════════╝

📋 FILES CHECKED: 45 components

✅ CLEAN FILES
────────────────────────
✅ Header.tsx - No RTL issues
✅ Footer.tsx - No RTL issues
✅ Sidebar.tsx - Uses logical properties

❌ FILES WITH VIOLATIONS
────────────────────────
❌ DataTable.tsx - 5 violations
❌ Card.tsx - 3 violations
❌ Modal.tsx - 2 violations

📊 VIOLATIONS DETAIL
────────────────────────

DataTable.tsx:
  Line 23: className="ml-4"      → Should be "ms-4"
  Line 45: className="pr-2"      → Should be "pe-2"
  Line 67: className="text-left" → Should be "text-start"
  Line 89: className="border-l"  → Should be "border-s"
  Line 112: style={{marginLeft}} → Should be marginInlineStart

Card.tsx:
  Line 15: className="mr-2 pl-4" → Should be "me-2 ps-4"
  Line 34: className="left-0"    → Should be "start-0"
  Line 56: className="rounded-l" → Should be "rounded-s"

Modal.tsx:
  Line 28: <ChevronRight />      → Needs RTL flip handling
  Line 45: className="right-4"   → Should be "end-4"

📊 SUMMARY
────────────────────────
Files checked: 45
Files clean: 42
Files with violations: 3
Total violations: 10

🔧 REQUIRED FIXES
────────────────────────
1. Replace directional classes with logical equivalents
2. Replace directional CSS properties with logical properties
3. Add RTL flip handling for directional icons

Step 4: Offer to Fix (If Issues Found)

If violations are found, ask: "Would you like me to fix the RTL violations?"

If user agrees:

Fix Tailwind Classes:

// Before
<div className="ml-4 pr-2 text-left border-l-2">

// After
<div className="ms-4 pe-2 text-start border-s-2">

Fix Inline Styles:

// Before
<div style={{ marginLeft: '1rem', paddingRight: '0.5rem' }}>

// After
<div style={{ marginInlineStart: '1rem', paddingInlineEnd: '0.5rem' }}>

Fix Directional Icons:

// Before
<ChevronRight className="w-4 h-4" />

// After
<ChevronRight className="w-4 h-4 rtl:rotate-180" />

Why RTL Safety?

Applications serving Arabic speakers must mirror layouts:

• Text flows right-to-left
• Navigation items reverse order
• Icons pointing "forward" should flip

Using logical properties (start/end instead of left/right) makes layouts automatically adapt to text direction.

CRITICAL REMINDER

This command MUST:

1. USE Glob to find component files
2. USE Read to examine each file
3. USE Grep to search for violation patterns
4. ACTUALLY check for RTL issues
5. OUTPUT a structured compliance report
6. OFFER to fix violations if found

DO NOT just tell the user to run a script. PERFORM THE CHECK.