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

‫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. מתקינים את הפלאגין מה-Marketplace:

/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,‏ 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 משתמש במגוון רחב של תכונות אינטרנט מודרניות. חלק מהתכונות האלה עשויות להיות זמינות לאחרונה או זמינות באופן נרחב, אבל חלקן עשויות להיות זמינות באופן מוגבל. במקרים שבהם תכונה מסוימת לא זמינה באופן נרחב, מדריכים לתרחישי שימוש מספקים לנציגים הוראות ספציפיות איך להבטיח תאימות רחבה יותר בדפדפנים שלא תומכים בתכונה. במקרים רבים, ברירות המחדל מוטמעות כשיפורים הדרגתיים, שבהם אפשר להשתמש בתכונה המודרנית בכל מקום שבו היא נתמכת. אם נדרשים פוליפילים לדפדפנים לא נתמכים, הנציגים תמיד מקבלים הוראה לטעון אותם באופן מותנה, כדי שהם יגרמו לעלות רק במקרים שבהם זה נחוץ.

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

כל תרחיש לדוגמה ב-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. עם זאת, התוצאות עשויות להשתנות בהתאם לדרישות הפרויקט, למודל, להנחיות שאתם כותבים ולכלי התכנות מבוססי-הסוכנים שאתם מעדיפים.

הפעלת הדרכה לגבי תכונות לא יציבות

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

npx modern-web-guidance@latest set-allow-volatile-features

הפעלת הדרכה לתכונות בגרסת מקור לניסיון

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

npx modern-web-guidance@latest set-allow-origin-trials

השלבים הבאים

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