แก้ปัญหาคำแนะนำเกี่ยวกับเว็บสมัยใหม่

แม้ว่าคำแนะนำในการพัฒนาเว็บที่ทันสมัยจะมีเป้าหมายเพื่อเปลี่ยนการพัฒนาของคุณไปสู่แนวทาง "ถูกต้องตั้งแต่เริ่มต้น" แต่คุณอาจพบปัญหาเกี่ยวกับการเปิดใช้งาน 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 รวมถึงการเปลี่ยนแปลงโค้ดสุดท้ายที่แนะนำตามกระบวนการคิดดังกล่าว