Israeli UI Design System
Verified90/100Build RTL-first UI component libraries and design systems for Israeli applications with Hebrew typography. Use when user asks about Hebrew UI components, "itzuv" (design), Israeli design system, Hebrew font pairing, RTL component library, "tipografia ivrit" (Hebrew typography), or gov.il design patterns. Covers RTL-first component architecture, Hebrew font pairings (Heebo+Inter, Rubik+Source Sans 3), gov.il design system patterns, Israeli formatting conventions (shekel sign, DD/MM/YYYY dates, 24-hour clock), and culturally appropriate UI for Israeli users. Do NOT use for general RTL CSS (use hebrew-rtl-best-practices) or accessibility audits (use israeli-accessibility-compliance instead).
Trust score 90/100 (Verified) · 521+ installs · 2 GitHub contributors · MIT license
Most popular component libraries were built for LTR languages, and even those that support RTL are not tuned for Hebrew typography, local design conventions, or the specific needs of Israeli products. Developers spend significant time on manual adjustments, and the end product still does not feel natural to Israeli users.
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.3.0-israeli-ui-design-system --skill israeli-ui-design-system -a claude-codeWhen to Apply
- Building a UI for an application targeted at Israeli users
- Picking font pairs for Hebrew and Latin in the same interface
- Adding RTL support to existing UI components (forms, tables, navigation)
- Creating a design system that must work in both Hebrew and English
- Building a gov.il-adjacent product that should align with the Israeli Government Design System (IGDS)
- Adding a dark-mode token tier that works alongside RTL
Try These Prompts
I am building a Hebrew app and need a component library with solid RTL support out of the box. What are the best options and how do I configure them correctly for Hebrew?
Which Hebrew fonts work well in digital interfaces and how should I set line-height and letter-spacing to suit Hebrew text?
My app supports both Hebrew and English. How do I handle bidi correctly inside UI components like forms, buttons, and lists?
How should I display prices with the shekel sign (₪) and format dates for Israeli users? I want consistent behaviour across Chrome, Safari, and Firefox when prices appear inside Hebrew paragraphs.
Frequently Asked Questions
Changelog
Fixed the renamed Source Sans 3 font, added a WCAG contrast contract for color tokens, an oklch ramp recommendation, and a Style Dictionary/DTCG token-pipeline note.
Jun 21, 2026
Grounded the gov.il step in the official IGDS, expanded RTL component mirroring, and added a dark-mode token tier.
May 14, 2026
Added Step 7 on Israeli formatting conventions: shekel sign (₪) placement with bidi isolation, DD/MM/YYYY date format, 24-hour clock, and number separator guidance. Replaced the phone-number gotcha with a more design-system-relevant one on shekel-sign bidi behaviour across browsers.
Apr 20, 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 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.
Use at your own risk. Terms of Use · Security
Want to build your own skill? Try the Skill Creator · Submit a Skill