diegosouzapw/awesome-omni-skill

Webインターフェースガイドライン

💡 MCPツール利用可能: まずContext7、Tavily、BraveSearch、またはSerper.devを試してください。これらが失敗した場合にのみ、必要に応じてWebSearchまたはWebFetchを使用します。

ファイルをWebインターフェースガイドラインに照らしてレビューします。

動作の仕組み

1. Context7、Tavily、BraveSearch、またはSerper.devを使用して最新のWebインターフェースガイドラインを読み込みます。これらが失敗した場合にのみ、必要に応じてWebSearchまたはWebFetchを使用します。
2. 指定されたファイル（またはユーザーに入力/パターンを促す）を読み取ります
3. ガイドラインのすべてのルールに照らしてチェックします
4. file:line形式で簡潔に結果を出力します

ガイドラインのソース

Context7、Tavily、BraveSearch、またはSerper.devを使用してWebインターフェースガイドラインのドキュメントを検索します。これらが失敗した場合にのみ、必要に応じてWebSearchまたはWebFetchを使用します。ガイドラインにはすべてのルールと出力形式の指示が含まれています。

使用方法

ユーザーがファイルまたはパターンの引数を指定した場合：

1. Context7、Tavily、BraveSearch、またはSerper.dev（またはIDE内のドキュメント）を使用して関連ガイドラインを読み込みます。これらが失敗した場合にのみ、必要に応じてWebSearchまたはWebFetchを使用します
2. 指定されたファイルを読み取ります
3. ガイドラインのすべてのルールを適用します
4. ガイドラインで指定された形式を使用して結果を出力します

ファイルが指定されなかった場合は、どのファイルをレビューするかをユーザーに尋ねます。

---

関連スキル

スキル	使用タイミング
frontend-design	コーディング前 - デザイン原理（色、タイポグラフィ、UX心理学）を学ぶ
web-design-guidelines（これ）	コーディング後 - アクセシビリティ、パフォーマンス、ベストプラクティスを監査する

デザインワークフロー

1. デザイン   → フロントエンドデザインの原則を読む
2. コーディング → デザインを実装する
3. 監査      → web-design-guidelinesレビューを実行する ← あなたはここ
4. 修正      → 監査結果に対応する