Wskazówki dotyczące nowoczesnych technologii internetowych mają na celu ukierunkowanie procesu tworzenia oprogramowania na podejście „prawidłowe domyślnie”, ale czasami możesz napotkać problemy z aktywacją agenta, dokładnością implementacji lub wykrywaniem funkcji. W tej sekcji znajdziesz instrukcje diagnostyczne, które pomogą Ci rozwiązać typowe problemy, np. upewnić się, że umiejętność „Nowoczesne technologie internetowe” jest prawidłowo wywoływana przez Twoje prośby, lub sprawdzić, czy rezerwowe wersje kodu są zgodne z ustalonym stanem podstawowym projektu. Jeśli napotkasz trwałe problemy techniczne lub zauważysz nieaktualne wskazówki, zgłoś problem, aby pomóc nam utrzymać aktualność i skuteczność tych zasobów.
Diagnozowanie problemu z niewykrywaniem umiejętności „Nowoczesne technologie internetowe” przez agenta
Każda prośba, która ma zainstalowane rozszerzenie umiejętności, powinna być w stanie je aktywować, używając w jakiś sposób frazy „wskazówki dotyczące nowoczesnych technologii internetowych”. Jeśli jednak z jakiegoś powodu agent, którego używasz, ma z tym trudności, możesz bezpośrednio wywołać tę umiejętność w ten sposób:
/modern-web-guidance <your prompt>
Dotyczy to IDE opartych na AI, które akceptują npx skills add <skill-extension>.
Diagnozowanie „halucynacji” kodu lub odgadniętych implementacji
Jest to częste zjawisko, w którym model LLM wypełnia luki w wiedzy bez ostrzeżenia. Aby zapobiec wymyślaniu informacji przez agenta, stwierdziliśmy, że dodanie do próśb tej instrukcji jest bardzo pomocne.
Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions."
Diagnozowanie problemu z niewywoł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 prośby zawierają konkretne słowa kluczowe i wymagania dotyczące kotwic, aby zapewnić prawidłowe wykrywanie. Pomaga to agentowi zidentyfikować odpowiednią ścieżkę wskazówek (np. „przejścia widoku”, „optymalizacja LCP”).
/modern-web-guidance Execute LCP optimization against my Progressive Web App.
Śledź proces myślowy agenta:
- Sprawdź, czy wykrył umiejętność „Nowoczesne technologie internetowe” (np.
modern-web/SKILL.md). - Znajdź wywołanie wyszukiwania, np.
node modern-web.mjs search "scroll snap", i sprawdź, czy słowa kluczowe i wynikowe przewodniki są zgodne z Twoimi oczekiwaniami. Najlepszy przewodnik z wyników wyszukiwania jest wybierany do zastosowania w odpowiedzi na Twoją prośbę.
/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`.
- Samodzielnie wykonaj polecenie wyszukiwania odpowiednich przewodników:
# Search for relevant guides
npx modern-web-guidance@latest search "scroll snap"
Diagnozowanie braku rezerwowych wersji kodu dla niektórych funkcji przeglądarki
Zależy to od stanu podstawowego ustawionego w projekcie. Jeśli interfejs API został udostępniony niedawno, agent może nie mieć odpowiedniej rezerwowej wersji kodu, na której mógłby się oprzeć. Może to być też funkcja, która jest dostępna w stanie podstawowym od dłuższego czasu, więc rezerwowe wersje kodu lub polyfille mogą nie być konieczne.
Diagnozowanie problemu z nieaktualnymi danymi treningowymi
Jeśli agent sugeruje starszą bibliotekę zamiast nowoczesnego interfejsu API przeglądarki, prawdopodobnie korzysta z podstawowych danych treningowych lub stan Baseline jest skonfigurowany tak, aby nie obsługiwać jeszcze tej funkcji, a rezerwowa wersja kodu została zaimplementowana.
Aby to sprawdzić, możesz wymusić pierwszeństwo umiejętności, wyszukując w bibliotece przewodników za pomocą interfejsu CLI:
# Search for a specific feature
npx modern-web-guidance search "<feature>"
Diagnozowanie problemu z nieaktualnymi wskazówkami
Zależy nam na tym, aby nasze informacje były aktualne, dlatego prosimy o zgłoszenie problemu w repozytorium, jeśli znajdziesz kod, który został zaimplementowany na podstawie nieaktualnego przewodnika. Podczas zgłaszania problemu zbierz dowody na to, że agent poleca Ci kod z umiejętności modern-web i jej przewodników, a nie z podstawowych danych treningowych z modelu LLM, którego może używać Twoje IDE oparte na AI.
W oknie agenta lub terminalu możesz śledzić jego proces myślowy, ale możesz też poprosić go o wyjaśnienie, jak doszedł do wniosku o zmianie kodu. Gdy dojdziesz do wniosku, że kod pochodzi z umiejętności, przekaż nam opinię i dowody.
Prześlij opinię
Jeśli masz dodatkowe pytania lub opinie na temat tych nowych funkcji, najpierw przeczytaj, jak współtworzyć wskazówki dotyczące nowoczesnych technologii internetowych, a potem zgłoś problem w naszym repozytorium GitHub. Podczas tworzenia zgłoszenia podaj początkowe prośby do agenta, zrzuty ekranu i logi procesu myślowego agenta oraz ostateczną zmianę kodu zalecaną na podstawie tego procesu.