แม้ว่าคำแนะนำในการพัฒนาเว็บที่ทันสมัยจะมีเป้าหมายเพื่อเปลี่ยนการพัฒนาของคุณไปสู่แนวทาง "ถูกต้องตั้งแต่เริ่มต้น" แต่คุณอาจพบปัญหาเกี่ยวกับการเปิดใช้งาน Agent, ความถูกต้องของการติดตั้งใช้งาน หรือการค้นพบฟีเจอร์เป็นครั้งคราว ส่วนนี้มีขั้นตอนการวินิจฉัยที่จะช่วยคุณแก้ไขปัญหาที่พบบ่อย เช่น การตรวจสอบว่าพรอมต์ของคุณกระตุ้นให้ทักษะการพัฒนาเว็บที่ทันสมัยทำงานอย่างถูกต้อง หรือการยืนยันว่าการสำรองข้อมูลโค้ดสอดคล้องกับสถานะพื้นฐานที่กำหนดไว้ของโปรเจ็กต์ หากพบอุปสรรคทางเทคนิคที่เกิดขึ้นอย่างต่อเนื่องหรือพบคำแนะนำที่ล้าสมัย เราขอแนะนำให้คุณยื่นรายงานปัญหาเพื่อช่วยให้เราดูแลให้แหล่งข้อมูลเหล่านี้มีความถูกต้องและมีประสิทธิภาพ
วินิจฉัยกรณีที่ Agent ไม่ได้ใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัย
เมื่อติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัยแล้ว ระบบจะสั่งให้ Agent ใช้คำแนะนำนี้สำหรับงานพัฒนาเว็บ อย่างไรก็ตาม บางครั้ง Agent ก็ละเลยคำแนะนำเหล่านี้
คุณสามารถสั่งให้ Agent ใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยอย่างชัดเจนได้โดยการเพิ่มวลี เช่น "use modern-web-guidance" ไว้ท้ายพรอมต์
นอกจากนี้ Agent บางตัวยังรองรับการเรียกใช้ทักษะโดยตรงโดยใช้ไวยากรณ์ที่เฉพาะเจาะจง เช่น /modern-web-guidance หรือ $modern-web-guidance ทั้งนี้ขึ้นอยู่กับ Agent
โปรดดูเอกสารประกอบของ Agent หรือถาม Agent ว่าจะเรียกใช้ทักษะ modern-web-guidance โดยตรงได้อย่างไรหากไม่แน่ใจ
วินิจฉัยโค้ดที่ "สร้างขึ้นเอง" หรือการติดตั้งใช้งานที่คาดเดา
นี่เป็นเหตุการณ์ที่พบบ่อยซึ่ง LLM จะเติมช่องว่างของความรู้โดยไม่มีการเตือน เราพบว่าการเพิ่มคำแนะนำต่อไปนี้ลงในพรอมต์มีประโยชน์มากในการป้องกันไม่ให้ Agent สร้างข้อมูลขึ้นเอง
Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions.
วินิจฉัยกรณีที่ระบบไม่กระตุ้นคำแนะนำที่เฉพาะเจาะจง
หากคุณกำหนดเป้าหมายเป็นกรณีการใช้งานฟีเจอร์ที่เฉพาะเจาะจงและไม่เห็นว่า Agent ค้นพบฟีเจอร์ดังกล่าว โปรดตรวจสอบว่าพรอมต์มีคีย์เวิร์ดและข้อกำหนดของ Anchor ที่เฉพาะเจาะจงเพื่อให้ค้นพบได้ง่าย ซึ่งจะช่วยให้ Agent ระบุเส้นทางคำแนะนำที่เกี่ยวข้องได้ (เช่น "การเปลี่ยนมุมมอง" "การเพิ่มประสิทธิภาพ LCP")
ติดตามกระบวนการคิดของ Agent โดยทำดังนี้
- ตรวจสอบเอาต์พุตเพื่อดูว่าเอาต์พุตเรียกใช้ทักษะ
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"
ความคิดเห็น
หากมีคำถามเพิ่มเติมหรือความคิดเห็นเกี่ยวกับฟีเจอร์ใหม่เหล่านี้ โปรดอ่านวิธีมีส่วนร่วมในคำแนะนำในการพัฒนาเว็บที่ทันสมัยก่อนที่จะยื่นรายงานปัญหาในที่เก็บ GitHub ของเรา ขณะสร้างรายงานปัญหา โปรดระบุพรอมต์เริ่มต้นของ Agent, ภาพหน้าจอและบันทึกกระบวนการคิดของ Agent รวมถึงการเปลี่ยนแปลงโค้ดสุดท้ายที่แนะนำตามกระบวนการคิดดังกล่าว