קורן בן עזרא
skills-ilמה זה שיטות עבודה מומלצות ל-RTL בעברית?
hebrew-rtl-best-practices הוא סקיל של הארגון הישראלי skills-il, שמלמד את Claude לבנות ממשקי ווב בעברית שעובדים נכון מימין לשמאל. הוא מכסה הגדרת כיוון למסמך, מאפייני CSS לוגיים, טקסט שמערבב עברית, אנגלית ומספרים, שיקוף אייקונים, טיפוגרפיה עברית והגדרות ל-Tailwind, ל-Next.js ול-MUI. בסוף הוא מביא רשימת בדיקות לפני עלייה לאוויר, כדי שהתקלות יתגלו אצלכם ולא אצל הלקוחות.
רוב הקוד שמודלי שפה למדו ממנו נכתב לאתרים באנגלית, ולכן Claude נוטה לכתוב margin-left, text-align: left וחץ חזרה שמצביע לכיוון הלא נכון. באתר בעברית התוצאה מוכרת: תפריט צד בצד הלא נכון, מספר טלפון שמתהפך, וכתובת מייל שקופצת לצד השני של השדה בזמן ההקלדה. hebrew-rtl-best-practices נכתב כדי לתפוס את הטעויות האלה כבר בזמן הכתיבה.
הסקיל עובד בשמונה שלבים. הוא מתחיל ב-lang="he" ו-dir="rtl" על תגית ה-html, מחליף מאפיינים פיזיים בלוגיים לפי טבלה, ומטפל בטקסט דו-כיווני עם bdi, bdo ו-unicode-bidi. אחר כך הוא קובע אילו אייקונים משקפים ואילו לא, מגדיר טיפוגרפיה עברית, ונותן הגדרות מוכנות ל-Tailwind v4, ל-Next.js App Router, ל-MUI ולרכיבים שנפתחים בחלון צף. בסוף יש רשימת בדיקות ומחרוזת בדיקה אחת שמערבבת עברית, אנגלית, טלפון בינלאומי וסכום בשקלים.
למשל, מכון כושר בבאר שבע שבנה אתר עם Next.js ו-Tailwind ומגלה שהתפריט נפתח משמאל ושהמחיר מופיע עם סימן השקל בצד הלא נכון, יכול לבקש מ-Claude לעבור על הקוד לפי הסקיל. הוא יחליף ml-4 ב-ms-4, left-0 ב-inset-s-0, יעטוף את המספרים בבידוד הנכון, ויעצב את המחיר עם Intl.NumberFormat של he-IL במקום לכפות עליו כיוון משמאל לימין.
למי זה מתאים
- בוני אתרים ומפתחים שבונים ממשק ווב בעברית ב-HTML, ב-React, ב-Next.js או ב-Tailwind
- בעלי עסקים שבונים אתר עם Claude Code ורוצים שהעברית תיראה נכון מהיום הראשון
- מי שמתרגם אתר קיים מאנגלית לעברית וצריך להפוך את הפריסה
- צוותים שרוצים רשימת בדיקות RTL לפני עלייה לאוויר
מה הוא עושה
מאפייני CSS לוגיים
טבלת המרה מ-margin-left, padding-right, text-align ו-left למאפיינים לוגיים, ושימוש ב-:dir() כשצריך כלל שתלוי בכיוון.
טקסט דו-כיווני
מתי משתמשים ב-bdi, מתי ב-bdo ומתי ב-unicode-bidi, איך מונעים היפוך של טלפונים עם רווחים או עם +972, ולמה לא כופים כיוון על פלט של Intl.
טפסים
dir="auto" לשדות טקסט, שדה טלפון שנשאר משמאל לימין מעצמו, ושדות מייל וכתובת אתר עם כיוון קבוע משמאל לימין.
שיקוף אייקונים
רשימה של מה משקפים (חיצי ניווט, שליחה, פירורי לחם) ומה לא (לוגו, וי, כפתור ניגון, שעון), עם קוד ל-CSS ול-Tailwind.
טיפוגרפיה עברית
רשימת גופנים מומלצת, גובה שורה של 1.7, למה אין טעם ב-uppercase על עברית, ולמה ניקוד צריך מרווח אנכי.
הגדרות למסגרות עבודה
מחלקות לוגיות ב-Tailwind v4 כולל השינוי ל-inset-s ו-inset-e, layout ל-Next.js App Router, הגדרת RTL ל-MUI ו-DirectionProvider ל-Radix.
רשימת בדיקות
עשר מלכודות נפוצות, כמו צללים שלא מתהפכים, גלילה ב-RTL ופס גלילה בצד שמאל, ושלבי בדיקה כולל השוואת צילומי מסך ב-Playwright.
מה יש בפנים
SKILL.mdשמונת השלבים, שלוש דוגמאות לפני ואחרי, מלכודות נפוצות וטבלת מקורות.SKILL_HE.mdגרסה עברית של ההוראות.references/css-logical-properties.mdטבלת המרה מלאה ממאפיינים פיזיים ללוגיים ורשימות גופנים עבריים לטקסט רגיל, לסריף ולקוד.references/domain-checklist.mdמה הסקיל חייב לכסות, מה רצוי, מה מחוץ לתחום, ומאיזה מקור כל נושא נבדק.דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
המרת רכיב קיים לעברית
תשתמש בסקיל hebrew-rtl-best-practices ותעבור על קובץ ה-CSS של כרטיס המוצר באתר שלי. תחליף כל מאפיין פיזי במאפיין לוגי, כדי שהכרטיס יעבוד בעברית.מה מקבלים: קוד מעודכן עם margin-inline-start, padding-inline-end, text-align: start ו-border-inline-start במקום הגרסאות הפיזיות, ובמקביל המחלקות המקבילות ב-Tailwind.
מספרי טלפון שמתהפכים
תשתמש ב-hebrew-rtl-best-practices. באתר של המרפאה שלי מספר הטלפון +972 50 321 4450 מופיע הפוך בתוך הטקסט העברי. תתקן את זה.מה מקבלים: עטיפה של המספר ב-span עם dir="ltr" והסבר למה מספר עם מקפים בלבד, כמו 050-321-4450, לא צריך תיקון.
הגדרת פרויקט Next.js חדש
תשתמש ב-hebrew-rtl-best-practices ותגדיר לי פרויקט Next.js עם App Router ו-Tailwind v4 לאתר בעברית ובאנגלית, עם הגופן Heebo.מה מקבלים: קובץ layout תחת app/[locale] שמגדיר lang ו-dir לפי השפה, טעינת Heebo דרך next/font, ושימוש במחלקות לוגיות של Tailwind.
בדיקה לפני עלייה לאוויר
תשתמש ב-hebrew-rtl-best-practices ותבדוק את האתר שלי לפני עלייה לאוויר: אייקונים, טפסים, חלונות קופצים, מחירים ותאריכים.מה מקבלים: מעבר לפי רשימת המלכודות ושלב הבדיקה בסקיל, כולל מחרוזת הבדיקה המעורבת, פתיחה של כל חלון ותפריט, והצעה להשוואת צילומי מסך ב-RTL וב-LTR.
מה צריך לפני שמתחילים
- Claude Code, Claude.ai או Cursor, לפי שדה התאימות בסקיל, או כל סוכן שקורא SKILL.md
- git להתקנה בפקודה, ואופציונלית Node.js בגרסה 20 ומעלה להתקנה עם ה-CLI של skills-il
- בלי מפתח API, בלי עלות ובלי חיבור לרשת, רישיון MIT
- ההוראות ב-SKILL.md באנגלית, ויש לצידן גרסה עברית ב-SKILL_HE.md
- הסקיל מיועד לאתרים ולאפליקציות ווב. RTL באפליקציות נייטיב וטיפוגרפיה ערבית מחוץ לתחום שלו
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את שיטות עבודה מומלצות ל-RTL בעברית.
יש 3 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה, בלי קוד בכלל.
הכי פשוט: באפליקציה של Claude, בלי שום קוד
מתאים ל-Claude במחשב ובדפדפן. לוקח דקה, ועושים את זה פעם אחת.
- מורידים את הסקילהורדת hebrew-rtl-best-practices.zip (38 KB)לא פותחים את הקובץ, מעלים אותו כמו שהוא.
- מדליקים פעם אחת את היכולתב-Claude נכנסים ל-Settings, ואז Capabilities, ומדליקים את
Code execution and file creation. - מעלים את הקובץנכנסים ל-Customize, ואז Skills, לוחצים על הפלוס, בוחרים
Create skillואזUpload a skill, ובוחרים את הקובץ שהורדתם. - זהו, עובדיםמבקשים מ-Claude את המשימה במילים רגילות, והוא משתמש בסקיל לבד כשהוא רלוונטי.
ב-Claude Code: מדביקים הודעה אחת
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
תתקין לי בבקשה את הסקיל hebrew-rtl-best-practices מהמאגר skills-il/localization לתיקיית הסקילים שלי. תריץ את הפקודה הזו בדיוק: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/skills-il/localization "$D/repo" && mkdir -p ~/.claude/skills && cp -R "$D/repo/hebrew-rtl-best-practices" ~/.claude/skills/ && rm -rf "$D" && echo "הותקן ✓"
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/skills-il/localization "$D/repo" && mkdir -p ~/.claude/skills && cp -R "$D/repo/hebrew-rtl-best-practices" ~/.claude/skills/ && rm -rf "$D" && echo "הותקן ✓" אופציה ב, CLI רשמי, דורש Node.js 20 ומעלה: npx skills-il add skills-il/localization@v1.6.0-hebrew-rtl-best-practices --skill hebrew-rtl-best-practices -a claude-code -y -g
מפעילים מחדש את Claude Code כדי שהסקיל ייטען. אין צורך במפתח API או בהגדרה נוספת.
- מריצים ls ~/.claude/skills/hebrew-rtl-best-practices ומוודאים שמופיעים SKILL.md ו-SKILL_HE.md
- בשיחה חדשה מקלידים / ומחפשים hebrew-rtl-best-practices
- מבקשים מ-Claude כרטיס פשוט בעברית ב-HTML, ובודקים שהוא משתמש ב-margin-inline-start ולא ב-margin-left
מריצים שוב את אותה פקודת התקנה, והיא מעתיקה את הגרסה העדכנית מעל הקיימת. מי שהתקין עם ה-CLI יכול להריץ npx skills-il update.
rm -rf ~/.claude/skills/hebrew-rtl-best-practices
איך משתמשים ביום יום
- כותבים בבקשה תשתמש בסקיל hebrew-rtl-best-practices, במיוחד כשמבקשים לתקן קוד קיים
- מציינים את הטכנולוגיה, למשל HTML, Tailwind, Next.js או MUI, כדי לקבל את ההגדרות הנכונות
- בפרויקט חדש מבקשים להגדיר את הכיוון והגופן כבר בשלד, לפני שבונים רכיבים
- לפני עלייה לאוויר מבקשים מעבר לפי רשימת הבדיקות של הסקיל
טיפים שימושיים
- הוסיפו את מחרוזת הבדיקה מהסקיל לכל שדה טקסט באתר, היא חושפת בבת אחת בעיות של עברית, אנגלית, טלפון ומחיר
- מחירים בשקלים מעצבים עם Intl.NumberFormat של he-IL ומבודדים עם bdi, ולא כופים עליהם dir="ltr"
- חלונות קופצים, תפריטים נפתחים והודעות צפות הם המקום הנפוץ ביותר לטעויות RTL, ולכן פותחים כל אחד מהם בבדיקה
- למערכת עיצוב מלאה עם טוקנים וגופנים, משלבים את הסקיל עם israeli-ui-design-system
- לנגישות לפי התקן הישראלי משתמשים ב-israeli-accessibility-compliance, שמכסה את הצד המשפטי
תקלות נפוצות
Claude ממשיך לכתוב margin-left ו-text-align: left
התפריט הנפתח נפתח בצד הלא נכון
התאריך העברי יוצא בלוח הלועזי
הפקודה מה-README של המאגר לא מתקינה את הסקיל
שאלות ותשובות
זה עולה כסף?
זה עובד בעברית?
זה מתאים גם לאפליקציה בטלפון?
מה ההבדל בינו לבין israeli-ui-design-system?
כמה פופולרי הסקיל?
קרדיט ומקור. שיטות עבודה מומלצות ל-RTL בעברית נכתב על ידי skills-il ונמצא ב-skills-il/localization ברישיון MIT. skills-il הוא פרויקט קוד פתוח ישראלי של סקילים ל-AI, ואפשר למצוא את כל הסקילים שלהם גם ב-agentskills.co.il. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (08.10.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.