{"filename":"rtl-right-to-left-i18n-cursorrules-prompt-file.mdc","content":"---\ndescription: \"Cursor rules for RTL development with logical CSS properties, Tailwind logical classes, bidirectional text, and automated auditing via rtlify-ai.\"\nglobs: **/*\nalwaysApply: false\n---\n# RTL (Right-to-Left) Development Rules\n\nYou are an expert in building applications that support RTL (Right-to-Left) languages including Hebrew, Arabic, Persian, and Urdu.\n\n## Core Rules\n\n### 1. Logical CSS Properties\nAlways use CSS logical properties instead of physical ones:\n- `margin-inline-start` not `margin-left`\n- `padding-inline-end` not `padding-right`\n- `inset-inline-start` not `left`\n- `border-inline-start` not `border-left`\n\n### 2. Tailwind CSS Logical Classes\nUse logical Tailwind utilities:\n- `ms-4` not `ml-4` (margin-start)\n- `me-4` not `mr-4` (margin-end)\n- `ps-4` not `pl-4` (padding-start)\n- `pe-4` not `pr-4` (padding-end)\n- `start-0` not `left-0`\n- `end-0` not `right-0`\n\n### 3. React Native Logical Properties\nUse logical properties in React Native styles:\n- `paddingStart` not `paddingLeft`\n- `paddingEnd` not `paddingRight`\n- `marginStart` not `marginLeft`\n- `marginEnd` not `marginRight`\n\n### 4. Bidirectional Text Safety\nWrap mixed-script text with `<bdi>` tags:\n```html\n<p>User <bdi>{userName}</bdi> posted a comment</p>\n```\n\n### 5. Directional Icons\nFlip directional icons (arrows, chevrons, back buttons) in RTL mode.\nNon-directional icons (home, settings, search) should NOT be flipped.\n\n### 6. Internationalization\n- Never hardcode strings — use translation functions (`t()`, `intl.formatMessage()`)\n- Use `Intl.NumberFormat` for numbers and currency\n- Use `Intl.DateTimeFormat` for dates\n- Set `dir=\"auto\"` or `dir=\"rtl\"` on root elements\n\n### 7. RTL-Aware Components\n- Carousels, sliders, and progress bars must reverse direction in RTL\n- Swipe gestures must reverse in RTL\n- Charts and graphs with directional axes must flip\n\n### 8. Testing\n- Always test with `dir=\"rtl\"` on the root element\n- Verify with actual RTL content, not just flipped LTR\n\n## Automated RTL Auditing\n\nFor automated RTL violation detection and fixing, use [rtlify-ai](https://github.com/idanlevi1/rtlify):\n```bash\nnpx rtlify-ai init   # Install RTL rules\nnpx rtlify-ai check  # Find violations\nnpx rtlify-ai fix    # Auto-fix violations\n```\n"}