תחילת העבודה עם מדריך האינטרנט המודרני

‫Modern Web Guidance היא קבוצת מיומנויות שמשלבת מומחיות בפלטפורמות אינטרנט, שיטות מומלצות ונתוני תאימות לדפדפנים ישירות בסוכני התכנות. הוא עוזר להרחיק את סוכני התכנות מדפוסים מיושנים, ובמקום זאת לכוון אותם לפתרונות שרותמים את הכוח והיכולות של פלטפורמת האינטרנט המודרנית.

התקנה

אפשר להתקין את Modern Web Guidance ולהשתמש בו עם כל סוכן תכנות שתומך במיומנויות.

שיטת ההתקנה המומלצת היא באמצעות ה-CLI של modern-web-guidance שפותח על ידי צוות Chrome. התקנת Modern Web Guidance דרך ה-CLI של modern-web-guidance תפעיל עדכונים אוטומטיים. אפשר להתקין מ-CLI של modern-web-guidance באופן הבא:

npx modern-web-guidance@latest install

אם אתם מפתחים תוספים ל-Chrome, מומלץ להשתמש בפקודה הבאה:

npx modern-web-guidance@latest install --choose

הפקודה הזו מפעילה אשף אינטראקטיבי להתקנת המיומנויות לפי ההעדפות שלכם.

אם אתם מעדיפים להתקין את Modern Web Guidance בלי להשתמש ב-CLI של modern-web-guidance, אתם יכולים לפעול לפי ההוראות הבאות, בהתאם לסוכן שבו אתם משתמשים. חשוב לזכור שרוב האפשרויות האלה לא תומכות בעדכונים אוטומטיים.

Antigravity

מורידים את Antigravity ומפעילים את modern-web-guidance בתהליך ההתקנה, או בדף ההגדרות בקטע התאמות אישיות ואז פיתוח פתרונות עם יישומי פלאגין של Google.

Antigravity CLI

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Gemini CLI

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

JetBrains WebStorm

התכונה Modern Web Guidance נמצאת במנהל המיומנויות, בקטע הגדרות > עוזר אישי מבוסס-AI > מיומנויות. בוחרים מיומנות כדי לפתוח את דף הפרטים שלה. כדי להתקין את המיומנות, לוחצים על הלחצן Install כדי להחיל אותה על המכונה הנוכחית של ה-IDE.

‫GitHub CLI

gh skill install GoogleChrome/modern-web-guidance

npx skills

npx skills add GoogleChrome/modern-web-guidance

Claude Code

claude plugin install modern-web-guidance@claude-plugins-official

Claude Code CLI

כדי להתקין את Modern Web Guidance לשימוש עם Claude Code CLI, צריך לבצע שלושה שלבים:

1. מוסיפים את זירת המסחר:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. מתקינים את הפלאגין מזירת המסחר:

/plugin install modern-web-guidance@googlechrome

3. טעינה מחדש של פלאגינים:

/reload-plugins

Codex

codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome

Copilot CLI

כדי להתקין את Modern Web Guidance לשימוש עם Copilot, צריך לבצע שני שלבים:

1. מוסיפים את זירת המסחר:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. מתקינים את הפלאגין מזירת המסחר:

/plugin install modern-web-guidance@googlechrome

אווז

goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update

Grok

grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust

Kimi Code

/plugins install https://github.com/GoogleChrome/modern-web-guidance

לבדוק את האפליקציה לפני ההתקנה

כדי להעריך את ספריית המדריכים של Modern Web Guidance לפני ההתקנה, אפשר לחפש באמצעות שאילתה או לאחזר את המדריכים לפי מזהה. כדי לעשות את זה, משתמשים בפקודה search של ה-CLI כדי למצוא את מזהה תרחיש השימוש באמצעות הנחיה:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

הפעולה הזו תוציא אובייקט JSON בטרמינל:

[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]

קוראים את הערכים של description, בוחרים את id שהכי מתאים ליעד ומשתמשים בפקודה retrieve:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

במקרה כזה, המדריך בפורמט Markdown לתרחיש לדוגמה animate-to-from-top-layer יוצג בטרמינל. במדריכים אחרים, מחליפים את animate-to-from-top-layer במזהה מדריך חוקי.

למה כדאי להשתמש ב-Modern Web Guidance?

‫Modern Web Guidance מספק למפתחי אתרים יתרון על פני מודלים של AI ללא סיוע, משלוש סיבות שונות:

  1. סוכני AI לכתיבת קוד נוטים להשתמש כברירת מחדל בפתרונות ישנים ומיושנים לבעיות מודרניות בפיתוח אתרים. הפתרונות האלה מכילים לעיתים קרובות JavaScript כדי לספק פונקציונליות לבעיות שעדיף לפתור באמצעות ממשקי API מודרניים של CSS ו-HTML.
  2. בעבר, מודלים של AI לא הכירו את התכונות החדשות ביותר של פלטפורמת האינטרנט, או שהיה להם מידע שגוי לגביהן.
  3. בנוסף, מודלים של AI נוטים לתת המלצות מיושנות שלא מביאות בחשבון את הדרישות של הפרויקט או את הקריטריונים לתמיכה בדפדפן, במקום להתאים את ההנחיות לדרישות הבסיסיות של פרויקט נתון.

התכונה Modern Web Guidance נותנת מענה לחסרונות האלה, ומבטיחה שתהליך העבודה שלכם בתכנות בעזרת AI יכלול את הכלים לאימוץ תכונות חדשות יותר של פלטפורמת האינטרנט – תוך התחשבות באפשרויות חלופיות.

מה כולל Modern Web Guidance?

הכלי Modern Web Guidance כולל שיטות מומלצות ליותר מ-100 תרחישים לדוגמה של פיתוח אתרים בכמה תחומים עיקריים. מאחורי הקלעים, מדובר במיומנות של הסוכן שמורה לסוכן התכנות איך לקרוא ל-CLI של modern-web-guidance כדי למצוא ולאחזר את ההנחיות הכי טובות לתרחיש לדוגמה שלכם.

  • חוויית המשתמש: מעברים בין תצוגות, עיצוב CSS scrollbar-color ואנימציות כניסה ויציאה.
  • ‫CSS: שאילתות קונטיינר, מרחבי צבעים מודרניים כמו oklch, פריסת CSS subgrid,‏ text-wrap וחיתוך גובה שורה בטיפוגרפיה.
  • ביצועים: אבחון של מהירות התגובה לאינטראקציה באתר (INP), scheduler.yield לפיצול משימות שנמשכות הרבה זמן, תזמון משימות ברקע ותעדוף של טעינת תמונות.
  • טפסים: שדות להזנת קלט שמשנים את הגודל שלהם באופן אוטומטי (field-sizing: content), וסגנונות אימות מדויקים עם :user-invalid.
  • רכיבי ממשק משתמש מובנים: שליטה ישירה בתיבות דו-שיח, מיקום עוגן ב-CSS להסברים קצרים ו-popover.
  • נגישות: הודעות שגיאה נגישות וניהול מיקוד המקלדת.
  • ‫AI מובנה: שימוש במודלים מקומיים של לקוחות במכשיר (ממשקי API מקוריים לזיהוי שפה, סיכום ותרגום).
  • מפתחות גישה: רישום, אימות וניהול של מפתחות גישה.

אלה כמה מהמדריכים בכל קטגוריה. כדי לראות את כל המדריכים, אפשר לעיין ברשימה המלאה של המדריכים.

בסיס להשוואה

Baseline מספק למפתחים מידע ברור לגבי תכונות האינטרנט שפועלות באופן הדדי במנועי הדפדפנים העיקריים. אם תכונת אינטרנט היא חלק מ-Baseline, אתם יכולים לסמוך על רמת התאימות שלה לדפדפנים. תכונות באינטרנט נכללות באחת משלוש קטגוריות שמוגדרות על ידי Baseline:

  • זמינות מוגבלת פירושה שהתכונה לא פועלת עם פלטפורמות אחרות.
  • זמינה לאחרונה פירושה שהתכונה הפכה לאחרונה לניתנת לפעולה הדדית ב-30 החודשים האחרונים.
  • זמינות נרחבת פירושה שהתכונה פועלת באופן הדדי במשך 30 חודשים לפחות.

למרות ש-Baseline הוא הגדרה של יכולת פעולה הדדית של תכונות באינטרנט, הוא גם היבט של הפרויקט שניתן להגדיר. אתם יכולים לבחור יעד Baseline, ואז להגדיר את הפרויקט כך שישתמש בו על ידי הוספה שלו לקובץ AGENTS.md או CLAUDE.md, לדוגמה:

This project's Baseline target is Baseline 2024.

<other project info...>

‫Modern Web Guidance וחלופות לתכונות

‫Modern Web Guidance משתמש במגוון רחב של תכונות אינטרנט מודרניות. חלק מהתכונות האלה עשויות להיות זמינות לאחרונה או זמינות באופן נרחב, אבל חלקן עשויות להיות זמינות באופן מוגבל. במקרים שבהם תכונה מסוימת לא זמינה באופן נרחב, מדריכים לתרחישי שימוש מספקים לנציגים הוראות ספציפיות איך להבטיח תאימות רחבה יותר בדפדפנים שלא תומכים בתכונה. במקרים רבים, ברירות המחדל מוטמעות כשיפורים הדרגתיים (progressive enhancements) שבהם אפשר להשתמש בתכונה המודרנית בכל מקום שבו היא נתמכת. אם צריך polyfills לדפדפנים שלא נתמכים, הסוכנים תמיד מקבלים הוראה לטעון אותם באופן מותנה, כדי שהם יגרמו לעלות רק במקרים שבהם הם נחוצים.

איך מוודאים שהמידע מדויק?

כל תרחיש לדוגמה ב-Modern Web Guidance מכיל קבוצה של הערכות שעוברות כיול באופן קבוע כדי להבטיח פלט איכותי.

הערכות של תרחישי שימוש מריצות רתמת QA אוטומטית כדי לבדוק את ההתנהגות הנכונה של הנציג, כאשר Playwright ממלא תפקיד מרכזי:

  1. לכל מדריך מפתחים סקריפט של Playwright כדי לבדוק אם המשתמש פעל לפי פרטי ההטמעה של המדריך – לדוגמה, אם @media (prefers-reduced-motion: reduce) נצפה במקום שבו הוא נדרש.
  2. הסקריפטים האלה של Playwright מכוילים באופן רציף לפי הטמעה של הדגמה "נכונה" שצפויה להשיג שיעור הצלחה של 100%. בצד השני, הסקריפטים בודקים את ההטמעה מול הטמעה פגומה בכוונה, שצפויה להניב שיעור הצלחה של 0%.
  3. אם ההטמעה "הנכונה" או ההטמעה הפגומה בכוונה לא מניבות שיעורי הצלחה של 100% ו-0%, בהתאמה, מחולל מנסה שוב באופן אוטומטי באמצעות הקשר עד להשגת כיול של 100%.
  4. בסיום, מתבצעות הערכות מקצה לקצה באפליקציה בסיסית. אחת מההערכות האלה היא ללא הדרכה, והיא משמשת כקבוצת בקרה. היא משתמשת בנתוני האימון שמוגדרים כברירת מחדל בלי להפעיל את Modern Web Guidance כדי להשלים משימה. הערכה אחרת (הניסוי) מטפלת באותה משימה באמצעות Modern Web Guidance.

ההערכות שלנו פועלות כמה פעמים בשבוע עם מודלים וסוכני תכנות מתקדמים, ומספקות לנו תמונה ברורה של ביצועי הסוכנים עם ההנחיות שלנו ובלעדיהן. בממוצע, התוצאות הראשוניות מראות שיפור של 37 נקודות אחוז בציות לשיטות המומלצות המודרניות כשסוכנים מצוידים ב-Modern Web Guidance. עם זאת, התוצאות עשויות להשתנות בהתאם לדרישות הפרויקט, למודל, להנחיות שאתם כותבים ולכלי התכנות מבוססי-הסוכנים שאתם מעדיפים.

השלבים הבאים

עכשיו יש לכם סקירה כללית על Modern Web Guidance, ועל הפוטנציאל שלו להקל על הטמעת השיטות המומלצות לפיתוח אתרים מודרניים בתהליך העבודה שלכם עם AI לכתיבת קוד. עכשיו אתם יכולים לעיין במדריכים של Modern Web Guidance.