Hebrew Rtl Best Practices
Ship Hebrew web UIs with correct RTL layout, bidi text, logical CSS, and Next/React setup without guessing mirror and typography rules.
Overview
Hebrew RTL Best Practices is an agent skill for the Build phase that implements correct right-to-left Hebrew web layouts, bidi text, and typography.
Install
npx skills add https://github.com/skills-il/localization --skill hebrew-rtl-best-practicesWhat is this skill?
- CSS logical properties and :dir() for direction-aware layout without hard-coded left/right
- Tailwind RTL patterns and React/Next.js RTL configuration
- Hebrew typography and font-selection guidance distinct from Arabic RTL
- Icon mirroring and bidirectional (bidi) text handling for mixed Hebrew/Latin UI
- Explicit out-of-scope: native mobile RTL unless user requests shared patterns only
Adoption & trust: 1 installs on skills.sh; 18 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You are building a Hebrew web UI but physical CSS and LTR defaults break navigation, forms, and mixed-direction content.
Who is it for?
Solo builders localizing a SaaS or marketing site for Hebrew speakers on React, Next.js, or modern CSS stacks.
Skip if: Arabic-first RTL typography, native mobile RTL (React Native I18nManager, SwiftUI, Android), or back-end-only localization with no UI work.
When should I use this skill?
When the user asks about RTL layout, Hebrew text direction, bidirectional text, Hebrew CSS, or building a Hebrew web UI.
What do I get? / Deliverables
Your agent applies logical layout, Tailwind/React RTL setup, mirroring, and Hebrew font guidance so the interface reads naturally in RTL.
- RTL-correct layout and component CSS patterns
- React/Next direction configuration steps
- Icon mirroring and font recommendations for Hebrew
Recommended Skills
Journey fit
Hebrew RTL is applied while building the product UI, before ship and launch polish. Covers CSS logical properties, Tailwind RTL, React/Next RTL, icons, and fonts—core frontend implementation guidance.
How it compares
Use instead of generic “RTL tutorial” chats when you need Hebrew-specific typography and web stack checklists, not a one-size-fits-all Arabic guide.
Common Questions / FAQ
Who is hebrew-rtl-best-practices for?
Developers and agent users implementing Hebrew-language web frontends who need dependable RTL, bidi, and typography patterns in CSS and React/Next.
When should I use hebrew-rtl-best-practices?
Use it during Build while scaffolding layouts, styling components, or configuring Next/React for Hebrew—whenever the user mentions RTL, עברית, or right-to-left on the web.
Is hebrew-rtl-best-practices safe to install?
It is documentation-style frontend guidance with no implied shell access; still review the Security Audits panel on this Prism page before installing any skill from the catalog.
SKILL.md
READMESKILL.md - Hebrew Rtl Best Practices
{ "author": "skills-il", "version": "1.3.0", "category": "localization", "tags": { "he": [ "ימין-לשמאל", "עברית", "CSS", "פריסה", "טיפוגרפיה", "דו-כיווני" ], "en": [ "rtl", "hebrew", "css", "layout", "typography", "bidi" ] }, "display_name": { "he": "שיטות עבודה מומלצות ל-RTL", "en": "Hebrew RTL Best Practices" }, "display_description": { "he": "בניית פריסות RTL (ימין לשמאל) לאפליקציות ווב בעברית. השתמשו כשהמשתמש שואל על פריסת RTL, כיוון טקסט עברי, טקסט דו-כיווני (bidi), CSS עברי, או כשצריך לבנות ממשק ווב בעברית. מכסה תכונות CSS לוגיות, הפסבדו-קלאס :dir(), Tailwind RTL, הגדרת React/Next.js ל-RTL, שיקוף אייקונים, טיפוגרפיה עברית ובחירת גופנים. אל תשתמשו ל-RTL בערבית (טיפוגרפיה שונה) אלא אם המשתמש מבקש במפורש דפוסי RTL משותפים, או ל-RTL במובייל נייטיב (React Native, SwiftUI, Android) שנמצא מחוץ להיקף.", "en": "Implement 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." }, "supported_agents": [ "claude-code", "cursor", "github-copilot", "windsurf", "opencode", "codex", "antigravity", "gemini-cli" ] } # CSS Logical Properties Quick Reference for Hebrew RTL ## Property Mapping Table ### Margin | Physical | Logical | Notes | |----------|---------|-------| | `margin-left` | `margin-inline-start` | Start of reading direction | | `margin-right` | `margin-inline-end` | End of reading direction | | `margin-top` | `margin-block-start` | Top in both LTR and RTL | | `margin-bottom` | `margin-block-end` | Bottom in both LTR and RTL | ### Padding | Physical | Logical | |----------|---------| | `padding-left` | `padding-inline-start` | | `padding-right` | `padding-inline-end` | | `padding-top` | `padding-block-start` | | `padding-bottom` | `padding-block-end` | ### Border | Physical | Logical | |----------|---------| | `border-left` | `border-inline-start` | | `border-right` | `border-inline-end` | | `border-top` | `border-block-start` | | `border-bottom` | `border-block-end` | ### Positioning | Physical | Logical | |----------|---------| | `left` | `inset-inline-start` | | `right` | `inset-inline-end` | | `top` | `inset-block-start` | | `bottom` | `inset-block-end` | ### Text and Alignment | Physical | Logical | |----------|---------| | `text-align: left` | `text-align: start` | | `text-align: right` | `text-align: end` | | `float: left` | `float: inline-start` | | `float: right` | `float: inline-end` | ### Sizing | Physical | Logical | |----------|---------| | `width` | `inline-size` | | `height` | `block-size` | | `min-width` | `min-inline-size` | | `max-width` | `max-inline-size` | ## Hebrew Font Stack Recommendations ### Sans-Serif (recommended for web) ```css font-family: 'Heebo', 'Assistant', 'Rubik', 'Noto Sans Hebrew', 'Arial Hebrew', sans-serif; ``` ### Serif (for formal/print-style content) ```css font-family: 'Frank Ruhl Libre', 'David Libre', 'Noto Serif Hebrew', serif; ``` ### Monospace (for code with Hebrew comments) ```css font-family: 'Cousine', 'Noto Sans Mono', monospace; ``` ## Browser Support Notes - CSS Logical Properties are supported in all modern browsers (Chrome 89+, Firefox 66+, Safari 15+, Edge 89+) - For older browser support, use PostCSS plugin `postcss-logical` as a fallback - Flexbox and Grid automatically respect `dir="rtl"` -- no additional CSS needed for basic layout reversal --- name: hebrew-rtl-best-practices description: >-