Khắc phục sự cố về Hướng dẫn về web hiện đại

Mặc dù Modern Web Guidance hướng đến việc chuyển hoạt động phát triển của bạn sang phương pháp "mặc định là chính xác", nhưng đôi khi bạn có thể gặp phải các vấn đề về việc kích hoạt tác nhân, độ chính xác khi triển khai hoặc việc khám phá tính năng. Phần này cung cấp các bước chẩn đoán để giúp bạn giải quyết những thách thức thường gặp, chẳng hạn như đảm bảo kỹ năng Web hiện đại được kích hoạt đúng cách bằng các câu lệnh của bạn hoặc xác minh rằng các phương án dự phòng về mã phù hợp với trạng thái Cơ sở đã thiết lập của dự án. Nếu gặp phải các rào cản kỹ thuật dai dẳng hoặc phát hiện hướng dẫn đã lỗi thời, bạn nên báo cáo vấn đề để giúp chúng tôi duy trì tính chính xác và hiệu quả của các tài nguyên này.

Chẩn đoán việc tác nhân của bạn không sử dụng Modern Web Guidance

Khi Modern Web Guidance được cài đặt, các tác nhân phần mềm sẽ được hướng dẫn sử dụng hướng dẫn này cho mọi tác vụ phát triển web. Tuy nhiên, đôi khi các tác nhân bỏ qua những chỉ dẫn này.

Bạn có thể hướng dẫn rõ ràng cho tác nhân sử dụng Modern Web Guidance bằng cách thêm một cụm từ như "sử dụng hướng dẫn về web hiện đại" vào cuối câu lệnh.

Một số tác nhân cũng hỗ trợ việc gọi trực tiếp một kỹ năng bằng cú pháp cụ thể, chẳng hạn như /modern-web-guidance hoặc $modern-web-guidance, tuỳ thuộc vào tác nhân.

Tham khảo tài liệu của tác nhân hoặc hỏi tác nhân cách trực tiếp gọi kỹ năng modern-web-guidance nếu bạn không chắc chắn.

Chẩn đoán mã "ảo" hoặc các cách triển khai được đoán

Đây là trường hợp thường gặp khi LLM điền vào các lỗ hổng kiến thức mà không có cảnh báo. Để ngăn chặn tác nhân tạo ra thông tin sai lệch, chúng tôi nhận thấy việc thêm chỉ dẫn sau vào câu lệnh của bạn là rất hữu ích:

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

Chẩn đoán lỗi không kích hoạt được hướng dẫn cụ thể

Nếu bạn đang nhắm đến một trường hợp sử dụng tính năng cụ thể và không thấy tác nhân phát hiện được trường hợp đó, hãy đảm bảo rằng câu lệnh của bạn có các từ khoá cụ thể và yêu cầu về điểm neo để có thể phát hiện đúng. Việc này giúp nhân viên hỗ trợ xác định được hướng dẫn phù hợp (ví dụ: "chuyển đổi chế độ xem", "tối ưu hoá LCP").

Theo dõi quá trình tư duy của tác nhân:

  • Kiểm tra đầu ra để xem liệu thao tác này có kích hoạt kỹ năng modern-web-guidance hay không.
  • Tìm lệnh gọi tìm kiếm (ví dụ: npx -y modern-web-guidance@latest search "carousel scroll snap") và xác định xem từ khoá và hướng dẫn thu được có phải là những từ khoá và hướng dẫn mà bạn mong đợi hay không.
  • Kiểm tra để đảm bảo lệnh gọi truy xuất đã yêu cầu hướng dẫn có liên quan, ví dụ: 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));
      }
  • Bạn cũng có thể tự chạy các lệnh tìm kiếm trong thiết bị đầu cuối để xem những hướng dẫn nào phù hợp với cụm từ tìm kiếm của bạn.
# Search for relevant guides
npx modern-web-guidance@latest search "carousel scroll snap"

Phản hồi

Nếu bạn có thêm câu hỏi hoặc ý kiến phản hồi về những tính năng mới này, trước tiên, hãy đọc về cách đóng góp cho Hướng dẫn về web hiện đại trước khi gửi vấn đề trong kho lưu trữ GitHub của chúng tôi. Khi tạo vấn đề, hãy cung cấp câu lệnh ban đầu cho tác nhân, ảnh chụp màn hình và nhật ký về quy trình suy nghĩ của tác nhân, cũng như thay đổi mã cuối cùng được đề xuất dựa trên quy trình suy nghĩ đó.