בעוד ש-Modern Web Guidance נועדו לעזור לכם לפתח אתרים בגישה של 'נכון כברירת מחדל', יכול להיות שתיתקלו מדי פעם בבעיות בהפעלת הסוכן, בדיוק ההטמעה או בגילוי התכונות. בקטע הזה מפורטים שלבי אבחון שיעזרו לכם לפתור בעיות נפוצות, כמו לוודא שההנחיות שלכם מפעילות את המיומנות 'אתר מודרני' בצורה תקינה, או לוודא שגיבוי הקוד תואם לסטטוס הבסיסי שנקבע בפרויקט. אם נתקלתם בבעיות טכניות חוזרות או זיהיתם הנחיות לא עדכניות, מומלץ לשלוח דיווח על בעיה כדי לעזור לנו לשמור על הדיוק והיעילות של מקורות המידע האלה.
אבחון של בעיות שמונעות מהסוכן להשתמש ב-Modern Web Guidance
כשמתקינים את Modern Web Guidance, סוכנים מקבלים הנחיה להשתמש בו לכל משימות פיתוח האינטרנט. עם זאת, לפעמים נציגים מתעלמים מההוראות האלה.
אתם יכולים להנחות את הסוכן באופן מפורש להשתמש בהנחיות לגבי אתרים מודרניים על ידי הוספת ביטוי כמו "use modern-web-guidance" (השתמש בהנחיות לגבי אתרים מודרניים) לסוף ההנחיה.
חלק מהסוכנים תומכים גם בהפעלה ישירה של מיומנות באמצעות תחביר ספציפי, כמו /modern-web-guidance או $modern-web-guidance, בהתאם לסוכן.
אם אתם לא בטוחים, תוכלו לעיין במסמכים של הסוכן או לשאול אותו איך להפעיל ישירות את מיומנות modern-web-guidance.
אבחון של קוד שנוצר על ידי AI או של הטמעות משוערות
זהו מקרה נפוץ שבו מודל ה-LLM משלים פערי ידע בלי להזהיר. כדי למנוע מהסוכן להמציא מידע, מצאנו שמועיל מאוד להוסיף את ההוראה הבאה להנחיות:
Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions.
אבחון של כשל בהפעלת הנחיות ספציפיות
אם אתם מטרגטים תרחיש שימוש בתכונה ספציפית ואתם לא רואים שהסוכן מזהה אותה, חשוב לוודא שההנחיות שלכם כוללות מילות מפתח ספציפיות ודרישות עוגן כדי שהתכונה תהיה ניתנת לגילוי. הוא עוזר לסוכן לזהות את מסלול ההדרכה הרלוונטי (לדוגמה: 'מעברים בין תצוגות', 'אופטימיזציה של LCP').
מעקב אחרי תהליך החשיבה של הסוכן:
- בודקים את הפלט כדי לראות אם הופעלה היכולת
modern-web-guidance. - מאתרים את הקריאה לחיפוש – לדוגמה,
npx -y modern-web-guidance@latest search "carousel scroll snap"– ומזהים אם מילות המפתח וההנחיות שהתקבלו הן אלה שציפיתם להן. - בודקים שבקשת האחזור של השיחה כוללת את המדריך הרלוונטי, לדוגמה:
npx -y modern-web-guidance@latest retrieve "carousel-snap-highlights,carousel-slide-effects,scroll-snap-state-sync".
Create a new folder and create a carousel web app for me that implements scroll-snap.
...
● Bash(npx -y modern-web-guidance@latest search "carousel scroll snap" --skill-version 2026_05_16-c5e7870)
⎿ [{"id":"carousel-snap-highlights","description":"Visually highlight the currently snapped non-interactive item in scroll-snapping carousels, galleries, or full-page swipe experiences. For example, expanding a card when snapped, or revealing hidden
content.","category":"user-experience","featuresUsed":["Container scroll-state queries"],"tokenCount":1442,"similarity":0.7783},
{"id":"carousel-slide-effects","description":"Create a carousel of slides with images or other visual elements, where each slide animates as they enter/center/exit their scroller. For example, the slides may fade-in/fade-out, rotate, get bigger or smaller,
etc.","category":"user-experience","featuresUsed":["Scroll-driven animations","Scroll snap"],"tokenCount":2105,"similarity":0.6625},
{"id":"scroll-snap-state-sync","description":"Synchronize navigation indicators, linked content panels, and analytics tracking with the actively snapped item in a scrollable container.","category":"user-experience","featuresUsed":["Scroll snap events","Scroll
snap"],"tokenCount":1053,"similarity":0.6166},
{"id":"scroll-snap-realtime-feedback","description":"Provide real-time visual feedback in linked UI elements while a user scrolls through snap-aligned content, before the scroll gesture completes.","category":"user-experience","featuresUsed":["Scroll snap events","Scroll
snap"],"tokenCount":1886,"similarity":0.5664},
{"id":"navigation-drawer","description":"Create a navigation drawer component that, when triggered from a menu button, slides in from the side overlayed on top of existing page content, and slides out when dismissed (by swiping away, tapping outside, or pressing
escape).","category":"user-experience","featuresUsed":["inert","Intersection observer","Popover","Registered custom properties","Scroll-driven animations","scroll-initial-target","Scroll snap"],"tokenCount":4317,"similarity":0.5099}]
● Bash(npx -y modern-web-guidance@latest retrieve "carousel-snap-highlights,carousel-slide-effects,scroll-snap-state-sync")
⎿ <output +158 lines>
}, undefined);
if (topEntry) setSelectedParagraph(topEntry.id);
},
{ root: main, threshold: 0.9 // Adjust based on your use case },
);
// Observe all snap targets (e.g., section headers)
document.querySelectorAll('h2').forEach(header => observer.observe(header));
}
- אפשר גם להריץ את פקודות החיפוש בעצמכם במסוף כדי לראות אילו מדריכים מתאימים לשאילתת החיפוש.
# Search for relevant guides
npx modern-web-guidance@latest search "carousel scroll snap"
משוב
אם יש לכם שאלות נוספות או משוב על התכונות החדשות האלה, כדאי קודם לקרוא איך אפשר לתרום ל-Modern Web Guidance לפני שפותחים בעיה במאגר GitHub שלנו. במהלך יצירת הבעיה, צריך לספק את ההנחיות הראשוניות לסוכן, צילומי מסך ויומנים של תהליך החשיבה של הסוכן, ואת השינוי הסופי בקוד שמומלץ על סמך החשיבה הזו.