Hoewel Modern Web Guidance ernaar streeft uw ontwikkeling te laten verlopen volgens een 'standaard correcte' aanpak, kunt u af en toe problemen ondervinden met agentactivering, implementatienauwkeurigheid of het ontdekken van functionaliteiten. Deze sectie biedt diagnostische stappen om u te helpen bij het oplossen van veelvoorkomende problemen, zoals ervoor zorgen dat de Modern Web-skill correct wordt geactiveerd door uw prompts of controleren of de terugvalopties in de code overeenkomen met de vastgestelde basisstatus van uw project. Als u aanhoudende technische problemen ondervindt of verouderde richtlijnen aantreft, raden we u aan een probleem te melden, zodat we deze bronnen accuraat en effectief kunnen houden.
Diagnose: Moderne webvaardigheden worden niet door de agent opgepikt.
Elke prompt die de vaardigheidsuitbreiding heeft geïnstalleerd, zou deze moeten kunnen activeren door op een of andere manier "moderne webbegeleiding" te gebruiken. Mocht de agent die u gebruikt om welke reden dan ook problemen ondervinden, dan kunt u deze rechtstreeks als volgt aanroepen:
/modern-web-guidance <your prompt>
Dit is van toepassing op AI-gestuurde IDE's die npx skills add <skill-extension> accepteren.
Diagnoseer "hallucinerende" code of gegokte implementaties.
Dit komt vaak voor, waarbij het LLM-model de kennishiaten onverwacht aanvult. Om te voorkomen dat de agent informatie verzint, hebben we ontdekt dat het toevoegen van de volgende instructie aan uw prompts zeer nuttig is.
Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions."
Diagnosefout die specifieke richtlijnen niet activeert
Als u zich richt op een specifiek gebruiksscenario voor een bepaalde functie en u merkt dat de agent deze niet vindt, zorg er dan voor dat uw prompts specifieke trefwoorden en ankerpunten bevatten voor een goede vindbaarheid. Dit helpt de agent om het relevante begeleidingstraject te identificeren (bijvoorbeeld: "weergaveovergangen", "LCP-optimalisatie").
/modern-web-guidance Execute LCP optimization against my Progressive Web App.
Volg het denkproces van de agent:
- Volg de instructies als de vaardigheid Modern Web Guidance is gevonden (bijvoorbeeld
modern-web/SKILL.md). - Zoek de zoekopdracht op, bijvoorbeeld `
node modern-web.mjs search "scroll snap", en controleer of de zoekwoorden en de resulterende handleidingen overeenkomen met wat je verwachtte. De bovenste handleiding in de zoekresultaten is degene die je voor je prompt wilt gebruiken.
/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`.
- Voer zelf de zoekopdracht uit om relevante handleidingen te vinden:
# Search for relevant guides
npx modern-web-guidance@latest search "scroll snap"
Diagnoseer ontbrekende alternatieven voor bepaalde webbrowserfuncties.
Dit is afhankelijk van de basisstatus die u in uw project hebt ingesteld. Als de API zeer recent is uitgebracht, heeft de agent mogelijk geen equivalente fallback waarop hij kan terugvallen, of het is een functie die al lang genoeg "Baseline Widely" beschikbaar is, waardoor fallbacks of polyfills mogelijk niet nodig zijn.
Diagnoseer vertekening door verouderde trainingsgegevens
Als de agent een oudere bibliotheek voorstelt in plaats van een moderne browser-API, is deze waarschijnlijk afhankelijk van de basisgegevens voor de training, of is uw basisstatus zo geconfigureerd dat deze die functie nog niet ondersteunt en is de fallback-optie geïmplementeerd.
Om dit te controleren, kunt u de vaardigheid voorrang geven door expliciet in de begeleidingsbibliotheek te zoeken via de CLI:
# Search for a specific feature
npx modern-web-guidance search "<feature>"
Diagnose van verouderde richtlijnen
Het is van het grootste belang dat onze informatie actueel is. Daarom verzoeken wij u vriendelijk om een probleem te melden bij de repository als u code aantreft die is geïmplementeerd op basis van een handleiding en die verouderd is. Verzamel daarbij bewijs dat de aanbeveling van de agent afkomstig is van de modern-web Skill en de bijbehorende handleidingen, en niet van de basis trainingsgegevens van het LLM-model dat uw AI-gestuurde IDE mogelijk gebruikt.
In het venster of de terminal van de agent kunt u mogelijk het denkproces volgen, maar u kunt de agent ook vragen hoe hij tot de codewijziging is gekomen. Zodra u hebt vastgesteld dat de wijziging inderdaad door de skill is doorgevoerd, kunt u die feedback en het bewijsmateriaal aan ons doorgeven.
Feedback
Als u nog vragen of feedback heeft over deze nieuwe functies, lees dan eerst hoe u kunt bijdragen aan Modern Web Guidance voordat u een probleem meldt in onze GitHub-repository. Vermeld bij het aanmaken van het probleem de initiële prompts van de agent, schermafbeeldingen en logboeken van het denkproces van de agent, en de uiteindelijke codewijziging die op basis van dat denkproces wordt aanbevolen.