Israeli UI Design System
Verified91/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 Pro), 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 91/100 (Verified) · 132+ 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.
npx skills-il add skills-il/localization --skill israeli-ui-design-system -a claude-codeInstall on Claude.ai, Claude Desktop, ChatGPT, Manus, or other platforms
- 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.
When 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
Related Skills
Guide developers in using Hebrew NLP models and tools including DictaLM, DictaBERT, AlephBERT, and ivrit.ai. Use when user asks about Hebrew text processing, Hebrew NLP, "ivrit", Hebrew tokenization, Hebrew NER, Hebrew sentiment analysis, Hebrew speech-to-text, or needs to process Hebrew language text programmatically. Covers model selection, preprocessing, and Hebrew-specific NLP challenges. Do NOT use for Arabic NLP (different tools) or general English NLP tasks.
Implement right-to-left (RTL) layouts for Hebrew web and mobile applications. Use when user asks about RTL layout, Hebrew text direction, bidirectional (bidi) text, Hebrew CSS, "right to left", or needs to build Hebrew UI. Covers CSS logical properties, Tailwind RTL, React/Next.js RTL setup, Hebrew typography, and font selection. Do NOT use for Arabic RTL (similar but different typography) unless user explicitly asks for shared RTL patterns.
Access Jewish calendar data and Shabbat times via Hebcal API. Use when building apps with Shabbat times, Jewish holidays, Hebrew dates, or Zmanim. Triggers on Shabbat times, Hebcal, Jewish calendar, Hebrew date, Zmanim.
Use at your own risk. Terms of Use · Security
Want to build your own skill? Try the Skill Creator · Submit a Skill