Modern Web Guidance は、開発を「デフォルトで正しい」アプローチに移行することを目的としていますが、エージェントのアクティベーション、実装の精度、機能の検出で問題が発生することがあります。このセクションでは、プロンプトによって Modern Web スキルが適切にトリガーされるようにする、コードのフォールバックがプロジェクトの確立されたベースライン ステータスと一致していることを確認するなど、一般的な課題を解決するための診断手順について説明します。技術的な問題が解決しない場合や、ガイダンスが古くなっている場合は、issue を提出して、これらのリソースの正確性と有効性を維持するようご協力ください。
エージェントで Modern Web Guidance が使用されていないことを診断する
Modern Web Guidance がインストールされている場合、エージェントはすべてのウェブ開発タスクでこれを使用するように指示されます。ただし、エージェントがこれらの指示を無視することがあります。
プロンプトの末尾に「use modern-web-guidance」などのフレーズを追加することで、エージェントに Modern Web Guidance を使用するように明示的に指示できます。
エージェントによっては、エージェントに応じて /modern-web-guidance や $modern-web-guidance などの特定の構文を使用して、スキルを直接呼び出すこともできます。
不明な場合は、エージェントのドキュメントを参照するか、エージェントに modern-web-guidance スキルを直接呼び出す方法を問い合わせてください。
「幻覚」コードまたは推測された実装を診断する
これは、LLM が警告なしに知識のギャップを埋める場合によく発生します。 エージェントが情報を捏造しないようにするには、プロンプトに次の指示を追加すると非常に効果的です。
Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions.
特定のガイダンスをトリガーできないことを診断する
特定の機能のユースケースをターゲットにしているのに、エージェントによって検出されない場合は、プロンプトに特定のキーワードとアンカー要件を含めて、適切に検出できるようにしてください。 これにより、エージェントは関連するガイダンス トラック（「ビューの切り替え」、「LCP の最適化」など）を特定できます。
エージェントの思考プロセスを追跡します。
- 出力を確認して、
modern-web-guidanceスキルが呼び出されたかどうかを確認します。 - 検索呼び出し（
npx -y modern-web-guidance@latest search "carousel scroll snap"など）を見つけて、キーワードと結果のガイドが想定どおりのものであるかどうかを確認します。 - retrieve 呼び出しが関連するガイドをリクエストしていることを確認します。例:
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));
}
- ターミナルで検索コマンドを自分で実行して、検索クエリに一致するガイドを確認することもできます。
# Search for relevant guides
npx modern-web-guidance@latest search "carousel scroll snap"
フィードバック
これらの新機能についてご質問やフィードバックがある場合は、GitHub リポジトリで issue を提出する前に、Modern Web Guidance への投稿方法をご覧ください。issue を作成する際は、最初のエージェント プロンプト、エージェントの思考プロセスのスクリーンショットとログ、その思考に基づいて推奨される最終的なコード変更を提供してください。