Problemen oplossen met moderne webrichtlijnen

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.

Stel vast of uw agent geen gebruik maakt van de Modern Web Guidance-methode.

Wanneer Modern Web Guidance is geïnstalleerd, krijgen agenten de instructie om het te gebruiken voor alle webontwikkelingstaken. Agenten negeren deze instructies echter soms.

Je kunt de agent expliciet instrueren om Modern Web Guidance te gebruiken door een zin als "use modern-web-guidance" aan het einde van je prompt toe te voegen.

Sommige agents ondersteunen ook het rechtstreeks aanroepen van een vaardigheid met behulp van specifieke syntax, zoals /modern-web-guidance of $modern-web-guidance , afhankelijk van de agent.

Raadpleeg de documentatie van uw agent, of vraag uw agent hoe u de modern-web-guidance direct kunt activeren als u het niet zeker weet.

Diagnoseer "hallucinerende" code of gegokte implementaties.

Dit komt vaak voor: het LLM vult onverwacht kennishiaten aan. Om te voorkomen dat de agent informatie verzint, hebben we gemerkt 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").

Volg het denkproces van de agent:

  • Controleer de uitvoer om te zien of de vaardigheid modern-web-guidance is aangeroepen.
  • Zoek de zoekopdracht op, bijvoorbeeld npx -y modern-web-guidance@latest search "carousel scroll snap" , en controleer of de zoekwoorden en de resulterende handleidingen overeenkomen met wat u verwachtte.
  • Controleer of de ophaalopdracht de relevante handleiding heeft opgevraagd, bijvoorbeeld: 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));
      }
  • Je kunt de zoekopdrachten ook zelf in de terminal uitvoeren om te zien welke handleidingen overeenkomen met je zoekopdracht. 
# Search for relevant guides
npx modern-web-guidance@latest search "carousel scroll snap"

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 eerste 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.