Fehlerbehebung bei Modern Web Guidance

Modern Web Guidance soll Ihre Entwicklung in Richtung eines „standardmäßig korrekten“ Ansatzes lenken. Gelegentlich können jedoch Probleme mit der Aktivierung des Agenten, der Implementierungsgenauigkeit oder der Funktionserkennung auftreten. In diesem Abschnitt finden Sie Diagnoseschritte, mit denen Sie häufige Probleme beheben können. Sie können beispielsweise prüfen, ob die Modern Web-Funktion ordnungsgemäß durch Ihre Prompts ausgelöst wird, oder bestätigen, dass die Code-Fallbacks mit dem festgelegten Baseline-Status Ihres Projekts übereinstimmen. Wenn Sie auf anhaltende technische Schwierigkeiten stoßen oder veraltete Anleitungen finden, können Sie ein Problem melden, damit wir diese Ressourcen auf dem neuesten Stand halten können.

Diagnose: Modern Web Guidance wird nicht von Ihrem Agenten verwendet

Wenn Modern Web Guidance installiert ist, werden Agenten angewiesen, es für alle Webentwicklungsaufgaben zu verwenden. Manchmal ignorieren Agenten diese Anweisungen jedoch.

Sie können den Agenten explizit anweisen, Modern Web Guidance zu verwenden, indem Sie am Ende Ihres Prompts eine Phrase wie „use modern-web-guidance“ anhängen.

Einige Agenten unterstützen auch den direkten Aufruf einer Funktion mit einer bestimmten Syntax, z. B. /modern-web-guidance oder $modern-web-guidance, je nach Agent.

Wenn Sie sich nicht sicher sind, wie Sie die Funktion modern-web-guidance direkt aufrufen können, sehen Sie in der Dokumentation Ihres Agenten nach oder fragen Sie ihn.

Diagnose: „Halluzinierter“ Code oder erratene Implementierungen

Dies ist ein häufiges Problem, bei dem das LLM Wissenslücken ohne Vorwarnung füllt. Um zu verhindern, dass der Agent Informationen erfindet, hat es sich als sehr hilfreich erwiesen, den Prompts die folgende Anweisung hinzuzufügen:

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

Diagnose: Bestimmte Anleitungen werden nicht ausgelöst

Wenn Sie einen bestimmten Anwendungsfall für eine Funktion anstreben und der Agent ihn nicht erkennt, müssen Ihre Prompts bestimmte Keywords und Ankeranforderungen enthalten, damit er ihn richtig erkennen kann. So kann der Agent die relevante Anleitung identifizieren (z. B. „Übergänge anzeigen“ oder „LCP-Optimierung“).

Verfolgen Sie den Denkprozess des Agenten:

  • Prüfen Sie in der Ausgabe, ob die Funktion modern-web-guidance aufgerufen wurde.
  • Suchen Sie den Suchaufruf, z. B. npx -y modern-web-guidance@latest search "carousel scroll snap", und prüfen Sie, ob die Keywords und die resultierenden Anleitungen die erwarteten waren.
  • Prüfen Sie, ob mit dem Abrufaufruf die relevante Anleitung angefordert wurde, z. B. 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));
      }
  • Sie können die Suchbefehle auch selbst im Terminal ausführen, um zu sehen, welche Anleitungen zu Ihrer Suchanfrage passen.
# Search for relevant guides
npx modern-web-guidance@latest search "carousel scroll snap"

Feedback

Wenn Sie weitere Fragen oder Feedback zu diesen neuen Funktionen haben, lesen Sie zuerst den Artikel zu Beiträgen zu Modern Web Guidance, bevor Sie ein Problem in unserem GitHub-Repository melden. Geben Sie beim Erstellen des Problems die ursprünglichen Agent-Prompts, Screenshots und Logs des Denkprozesses des Agenten sowie die endgültige Codeänderung an, die auf diesem Denkprozess basiert.