Chociaż przewodnik po współczesnych technologiach internetowych ma na celu ukierunkowanie procesu tworzenia na podejście „correct-by-default”, czasami możesz napotkać problemy z aktywacją agenta, dokładnością implementacji lub wykrywaniem funkcji. W tej sekcji znajdziesz czynności diagnostyczne, które pomogą Ci rozwiązać typowe problemy, takie jak upewnienie się, że umiejętność „Współczesne technologie internetowe” jest prawidłowo wywoływana przez Twoje prompter lub sprawdzenie, czy rezerwowe wersje kodu są zgodne z ustalonym stanem podstawowym projektu. Jeśli napotkasz trwałe problemy techniczne lub zauważysz nieaktualne wskazówki, zachęcamy do zgłoszenia problemu, aby pomóc nam utrzymać te zasoby w aktualnym i skutecznym stanie.
Diagnozowanie, dlaczego agent nie korzysta z przewodnika po współczesnych technologiach internetowych
Gdy przewodnik po współczesnych technologiach internetowych jest zainstalowany, agenci są instruowani, aby używać go do wszystkich zadań związanych z tworzeniem stron internetowych. Czasami jednak agenci ignorują te instrukcje.
Możesz wyraźnie poinstruować agenta, aby korzystał z przewodnika po współczesnych technologiach internetowych, dodając na końcu prompta frazę taką jak „use modern-web-guidance”.
Niektórzy agenci obsługują też bezpośrednie wywoływanie umiejętności za pomocą określonej składni, np. /modern-web-guidance lub $modern-web-guidance, w zależności od agenta.
Jeśli nie masz pewności, jak bezpośrednio wywołać umiejętność modern-web-guidance, zapoznaj się z dokumentacją agenta lub zapytaj go o to.
Diagnozowanie „halucynacji” kodu lub odgadniętych implementacji
Jest to częste zjawisko, w którym LLM wypełnia luki w wiedzy bez ostrzeżenia. Aby zapobiec wymyślaniu informacji przez agenta, stwierdziliśmy, że dodanie do promptów tej instrukcji jest bardzo pomocne:
Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions.
Diagnozowanie problemów z wywoływaniem konkretnych wskazówek
Jeśli kierujesz reklamy na konkretny przypadek użycia funkcji i nie widzisz, że agent ją wykrywa, upewnij się, że Twoje prompter zawierają konkretne słowa kluczowe i wymagania dotyczące kotwic, aby zapewnić prawidłową wykrywalność. Pomaga to agentowi zidentyfikować odpowiednią ścieżkę wskazówek (np. „przejścia między widokami”, „optymalizacja LCP”).
Śledź proces myślowy agenta:
- Sprawdź dane wyjściowe, aby zobaczyć, czy wywołały umiejętność
modern-web-guidance. - Znajdź wywołanie wyszukiwania, np.
npx -y modern-web-guidance@latest search "carousel scroll snap", i sprawdź, czy słowa kluczowe i wynikowe przewodniki są zgodne z Twoimi oczekiwaniami. - Sprawdź, czy wywołanie pobierania zażądało odpowiedniego przewodnika, np.
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));
}
- Możesz też samodzielnie uruchomić polecenia wyszukiwania w terminalu, aby zobaczyć, które przewodniki pasują do Twojego zapytania.
# Search for relevant guides
npx modern-web-guidance@latest search "carousel scroll snap"
Prześlij opinię
Jeśli masz dodatkowe pytania lub opinie na temat tych nowych funkcji, najpierw przeczytaj, jak współtworzyć przewodnik po współczesnych technologiach internetowych, zanim zgłosisz problem w naszym repozytorium GitHub. Podczas tworzenia zgłoszenia podaj początkowe prompter agenta, zrzuty ekranu i logi procesu myślowego agenta oraz ostateczną zmianę kodu zalecaną na podstawie tego procesu.