Hebrew RTL Best Practices
Verified90/100Implement right-to-left (RTL) layouts for Hebrew web applications. Use when user asks about RTL layout, Hebrew text direction, bidirectional (bidi) text, Hebrew CSS, "right to left", or needs to build a Hebrew web UI. Covers CSS logical properties, the :dir() pseudo-class, Tailwind RTL, React/Next.js RTL setup, icon mirroring, Hebrew typography, and font selection. Do NOT use for Arabic RTL (similar but different typography) unless user explicitly asks for shared RTL patterns, or for native mobile RTL (React Native I18nManager, SwiftUI, Android) which is out of scope.
Trust score 90/100 (Verified) · 3,462+ installs · 2 GitHub contributors · MIT license
Developing RTL interfaces for Hebrew is full of pitfalls that are invisible until deep testing. Component mirroring, element ordering, spacing, directional icons, and mixed Hebrew-English text create visual bugs that Israeli users spot immediately. Without a structured guide, developers repeat the same mistakes over and over.
skills-ilHow to use this skill
Not sure how? Read the guide- 1. Click "Download ZIP" to download the skill files.
- 2. Open Claude Desktop and go to Customize > Skills.
- 3. Click "+" and select "Upload a skill", then upload the ZIP file.
- 4. Start a new conversation. The skill will activate automatically when relevant.
Developers? Install via command line (CLI)
npx skills-il add skills-il/localization@v1.4.0-hebrew-rtl-best-practices --skill hebrew-rtl-best-practices -a claude-codeWhen to Apply
- When building a new web app with a Hebrew UI
- When converting an existing website from LTR to RTL
- When fixing bidirectional text bugs (numbers, URLs, emails inside Hebrew text)
- When setting up Tailwind CSS, Next.js, or MUI for RTL support
- When choosing Hebrew fonts and configuring typography for a Hebrew interface
Try These Prompts
What are the basic principles for building an RTL interface for a Hebrew app? Including flexbox direction, margin/padding, and icons.
How do I build a navigation bar, breadcrumbs, and menus that work correctly in RTL? I am using React.
What are the correct methods for styling forms in RTL? Including label alignment, input fields, error messages, and submit buttons.
Frequently Asked Questions
Changelog
Refreshed for current tooling (Tailwind v4.3 inset utilities, MUI v9) plus Intl number/date formatting, form dir=auto, portal/modal direction, and an RTL verification checklist.
Jun 21, 2026
Updated the MUI RTL import to the official fork, added :dir() support and an icon-mirroring section, and narrowed scope to web-only.
May 14, 2026
Related Skills
Author: skills-ilGenerate professional Hebrew documents (PDF, DOCX/Word, and PPTX) with correct right-to-left layout, mixed Hebrew-and-English bidi handling, and proper Hebrew typography. Use whenever the output is a Hebrew or mixed Hebrew/English Word document, Hebrew PDF, or Hebrew PowerPoint, including phrasings like "Hebrew Word document", "Word document in Hebrew", "מסמך Word בעברית", "create a .docx in Hebrew", "lehafik heshbonit", and "litstor hozeh", or Israeli templates such as Heshbonit Mas (tax invoice), Hozeh (contract), Hatza'at Mechir (proposal), or Protokol (meeting minutes). ALSO use this for the symptom where a Hebrew document looks correct on screen or in Claude but comes out scrambled, reversed, or broken after export to Word, with English words, numbers, or punctuation landing on the wrong side, phrased as "Hebrew text reversed in Word", "my Hebrew Word file is broken", "fix Hebrew formatting in Word", or "the docx came out messed up"; the fix is regenerating the .docx with paragraph-level RTL/bidi, NOT a web/CSS RTL change. Prefer this over the generic docx or pdf skills ONLY when the document is Hebrew or right-to-left, because those do not set RTL/bidi and produce scrambled Hebrew with English words and punctuation in the wrong place; for English-only documents use the generic skill. Covers reportlab, WeasyPrint, python-docx, and pptxgenjs. Do NOT use for OCR or reading existing documents (use hebrew-ocr-forms instead).
Author: skills-ilWrite and edit professional content in Hebrew including marketing copy, UX text, articles, emails, and social media posts. Use when user asks to write in Hebrew, "ktov b'ivrit", create Hebrew marketing content, edit Hebrew text, write Hebrew UX copy, or optimize Hebrew content for SEO. Covers grammar rules, register from formal to dugri, mixed Hebrew/English, gendered language, nikud and numerals, and Hebrew SEO best practices. Do NOT use for Hebrew NLP/ML tasks (use hebrew-nlp-toolkit) or translation (use a translation skill).
Author: skills-ilImplement Israeli web accessibility compliance per IS 5568 standard, anchored to WCAG 2.0 AA (IS 5568 adds some 2.1-aligned criteria; sources differ), for Hebrew RTL applications. Use when user asks about Israeli accessibility law, "negishot" (accessibility), IS 5568, "teken negishot" (accessibility standard), "nachim" (disabilities), who is exempt from website accessibility, enforcement and penalties, the accessibility coordinator role, Hebrew screen reader support, RTL ARIA patterns, or accessibility audit for Israeli websites. Covers mandatory legal requirements under the Equal Rights for Persons with Disabilities Act, revenue-based exemption tiers, the two enforcement tracks (civil damages and the Commission administrative penalty) and the 60-day cure period, the accessibility coordinator role, Hebrew screen reader compatibility, and RTL-specific ARIA patterns. Do NOT use for general WCAG guidance without Israeli context (use standard a11y resources instead).
Use at your own risk. Terms of Use · Security
Want to build your own skill? Try the Skill Creator · Submit a Skill