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

แม้ว่าคำแนะนำเกี่ยวกับเว็บสมัยใหม่จะมีเป้าหมายเพื่อย้ายการพัฒนาของคุณไปสู่แนวทาง "ถูกต้องตั้งแต่เริ่มต้น" แต่คุณอาจพบปัญหาเกี่ยวกับการเปิดใช้งาน Agent, ความแม่นยำในการติดตั้งใช้งาน หรือการค้นพบฟีเจอร์เป็นครั้งคราว ส่วนนี้มีขั้นตอนการวินิจฉัยที่จะช่วยคุณแก้ไขปัญหาที่พบบ่อย เช่น การตรวจสอบว่าพรอมต์ของคุณกระตุ้นให้ทักษะเกี่ยวกับเว็บสมัยใหม่ทำงานอย่างถูกต้อง หรือการยืนยันว่าการสำรองข้อมูลโค้ดสอดคล้องกับสถานะพื้นฐานที่กำหนดไว้ของโปรเจ็กต์ หากพบอุปสรรคทางเทคนิคที่เกิดขึ้นซ้ำๆ หรือพบคำแนะนำที่ล้าสมัย เราขอแนะนำให้คุณยื่นรายงานปัญหาเพื่อช่วยให้เราดูแลให้แหล่งข้อมูลเหล่านี้มีความถูกต้องและมีประสิทธิภาพ

วินิจฉัยว่า Agent ไม่ได้เลือกทักษะเกี่ยวกับเว็บสมัยใหม่

พรอมต์ใดก็ตามที่ติดตั้งส่วนขยายทักษะควรจะเปิดใช้งานได้โดยรวม "คำแนะนำเกี่ยวกับเว็บสมัยใหม่" ไว้ในพรอมต์ด้วยวิธีใดวิธีหนึ่ง แต่หาก Agent ที่คุณใช้อยู่พบปัญหา คุณสามารถเรียกใช้ Agent ได้โดยตรงดังนี้

/modern-web-guidance <your prompt>

วิธีนี้ใช้ได้กับ IDE ที่ขับเคลื่อนด้วย AI ซึ่งยอมรับ npx skills add <skill-extension>

วินิจฉัยโค้ดที่ "สร้างขึ้นเอง" หรือการติดตั้งใช้งานที่คาดเดา

นี่เป็นเหตุการณ์ที่พบบ่อยซึ่งโมเดล LLM จะเติมเต็มช่องว่างของความรู้โดยไม่มีคำเตือน เราพบว่าการเพิ่มคำแนะนำต่อไปนี้ลงในพรอมต์มีประโยชน์มากในการป้องกันไม่ให้ Agent สร้างข้อมูลขึ้นเอง

Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions."

วินิจฉัยว่าไม่สามารถกระตุ้นคำแนะนำที่เฉพาะเจาะจง

หากคุณกำหนดเป้าหมายเป็นกรณีการใช้งานฟีเจอร์ที่เฉพาะเจาะจงและไม่เห็นว่า Agent ค้นพบฟีเจอร์ดังกล่าว โปรดตรวจสอบว่าพรอมต์ของคุณมีคีย์เวิร์ดและข้อกำหนดของ Anchor ที่เฉพาะเจาะจงเพื่อให้ค้นพบได้ง่าย ซึ่งจะช่วยให้ Agent ระบุเส้นทางคำแนะนำที่เกี่ยวข้องได้ (เช่น "การเปลี่ยนมุมมอง" "การเพิ่มประสิทธิภาพ LCP")

/modern-web-guidance Execute LCP optimization against my Progressive Web App.

ติดตามกระบวนการคิดของ Agent โดยทำดังนี้

• ติดตามว่า Agent ค้นพบทักษะคำแนะนำเกี่ยวกับเว็บสมัยใหม่หรือไม่ (เช่น modern-web/SKILL.md)
• ค้นหาการเรียกค้นหา เช่น node modern-web.mjs search "scroll snap" และระบุว่าคีย์เวิร์ดและคำแนะนำที่ได้เป็นสิ่งที่คุณคาดหวังหรือไม่ คำแนะนำอันดับแรกจากผลการค้นหาคือคำแนะนำที่เลือกใช้กับพรอมต์ของคุณ

/modern-web-guidance Create a new folder and create a carousel web app for me that implements scroll-snap.

...

● Bash(node --experimental-strip-types serving/bin/modern-web.ts search "carousel scroll-snap")
  ⎿  [{"id":"carousel-item-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"]},
            {"id":"light-dismiss-content-overlay","description":"Create swipeable layered navigation menus using native overlays and scroll gestures.","category":"user-experience","featuresUsed":["Popover","Scroll snap","inert"]},
            {"id":"scroll-target-on-load","description":"Build a scrollable list of elements (e.g. a carousel of images or a chat conversation thread) that can be displayed with a particular element scrolled into view on the initial render.","category":"user-experience","featuresUsed":["scroll-initial-target","scrollIntoView()"]},
            {"id":"parallax-scroll-effects","description":"Create scroll-based effects (such as parallax) where foreground and background layers move at different rates, creating a sense
            of depth as the user scrolls.","category":"user-experience","featuresUsed":["Scroll-driven animations"]},
            {"id":"pull-to-reveal","description":"Build a pull-to-reveal feature that would enable the user to pull down on the screen to reveal more content, like a search bar.", "category":"user-experience","featuresUsed":["scroll-initial-target","Scroll snap"]}]

...

▾ Thought for 1s
  Ah, let's look at the actual folder names under `guides/user-experience/` that we listed earlier to find the exact ID mapping.
  Let's see the folders we found earlier:
  - `carousel-slide-effects`
  - `carousel-snap-highlights`
  - `scroll-snap-realtime-feedback`
  - `scroll-snap-state-sync`

  Ah! The ID in the filesystem is `carousel-slide-effects`, while the search index returns `carousel-item-effects`.

• เรียกใช้คำสั่งค้นหาคำแนะนำที่เกี่ยวข้องด้วยตนเอง

# Search for relevant guides
npx modern-web-guidance@latest search "scroll snap"

วิเคราะห์ว่าไม่มีการสำรองข้อมูลสำหรับฟีเจอร์บางอย่างของเว็บเบราว์เซอร์

วิธีนี้ขึ้นอยู่กับสถานะพื้นฐานที่คุณตั้งค่าไว้ในโปรเจ็กต์ หากมีการเผยแพร่ API เมื่อไม่นานมานี้ Agent อาจไม่มีการสำรองข้อมูลที่เทียบเท่าให้ใช้ หรือฟีเจอร์ดังกล่าวอาจเป็นฟีเจอร์ที่ "พื้นฐานอย่างกว้างขวาง" มานานพอสมควรจนไม่จำเป็นต้องมีการสำรองข้อมูลหรือ Polyfill

วิเคราะห์อคติของข้อมูลฝึกฝนที่ล้าสมัย

หาก Agent แนะนำไลบรารีที่เก่ากว่าแทนที่จะเป็น API ของเบราว์เซอร์สมัยใหม่ แสดงว่า Agent อาจใช้ข้อมูลฝึกฝนพื้นฐาน หรือสถานะBaselineของคุณได้รับการกำหนดค่าให้ยังไม่รองรับฟีเจอร์ดังกล่าวและมีการติดตั้งใช้งานการสำรองข้อมูล

หากต้องการตรวจสอบอีกครั้ง คุณสามารถบังคับให้ทักษะมีความสำคัญมากกว่าได้โดยค้นหาไลบรารีคำแนะนำอย่างชัดเจนโดยใช้ CLI ดังนี้

# Search for a specific feature
npx modern-web-guidance search "<feature>"

วิเคราะห์คำแนะนำที่ล้าสมัย

ข้อมูลของเราต้องเป็นข้อมูลล่าสุด เราจึงขอให้คุณยื่นรายงานปัญหาเกี่ยวกับที่เก็บหากพบโค้ดที่ติดตั้งใช้งานจากคำแนะนำที่ล้าสมัย เมื่อดำเนินการดังกล่าว ให้รวบรวมหลักฐานว่า Agent ที่แนะนำให้คุณมาจากทักษะและคำแนะนำ modern-web ไม่ใช่ข้อมูลฝึกฝนพื้นฐานจากโมเดล LLM ที่ IDE ที่ขับเคลื่อนด้วย AI ของคุณอาจใช้

คุณอาจติดตามความคิดของ Agent ได้ในหน้าต่างหรือเทอร์มินัลของ Agent แต่คุณยังขอให้ Agent แจ้งให้คุณทราบถึงวิธีที่ Agent สรุปการเปลี่ยนแปลงโค้ดได้ด้วย เมื่อสรุปได้ว่าการเปลี่ยนแปลงโค้ดมาจากทักษะดังกล่าวจริงๆ ให้ส่งความคิดเห็นและหลักฐานนั้นมาให้เรา

ความคิดเห็น

หากมีคำถามหรือความคิดเห็นเพิ่มเติมเกี่ยวกับฟีเจอร์ใหม่เหล่านี้ โปรดอ่านเกี่ยวกับวิธีมีส่วนร่วมในคำแนะนำเกี่ยวกับเว็บสมัยใหม่ก่อนที่จะยื่นรายงานปัญหาในที่เก็บ Github ของเรา ขณะสร้างรายงานปัญหา ให้ระบุพรอมต์เริ่มต้นของ Agent, ภาพหน้าจอและบันทึกของกระบวนการคิดของ Agent รวมถึงการเปลี่ยนแปลงโค้ดสุดท้ายที่แนะนำตามความคิดของ Agent