audit

必須の準備

ユーザーは /audit でこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込んでください。デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を進める前に、このプロトコルに従ってください。デザインコンテキストがまだない場合は、必ず先に $setup を読み込んでください。

体系的な技術面の品質チェックを実行し、包括的なレポートを作成します。問題は修正せず、ほかのコマンドで対処できるように記録してください。

これはコードレベルの監査であり、デザインの批評ではありません。実装で測定・検証できる項目を確認してください。

グレースケールの階層、アクションの優先順位、セクションタイトルの抑制、ラベルと値の扱いを確認する際は、階層チェックリストを参照してください。 汎用的でトレンドに流されたアンチパターンを確認する際は、AI スロップ検出を参照してください。 プライマリー、セカンダリー、ターシャリー、破壊的なアクションを確認する際は、アクション階層を参照してください。 色が状態を伝えているのか、単なる装飾なのかを確認する際は、セマンティックカラーを参照してください。 境界線、影、カード、重なり、背景の変化が意図的に使われているかを確認する際は、サーフェスの分離を参照してください。 スクリーンショット、アイコン、メディアの扱いがユーザビリティや仕上がりに影響する場合は、画像の扱いを参照してください。 自動チェック（axe、WAVE、Pa11y）を監査ワークフローや CI パイプラインに組み込む際は、アクセシビリティテストを参照してください。

ただし、実装が共有デザインシステムや明白な Refactoring UI の原則に明らかに違反している場合（階層が弱い、余白が不規則、色付き背景にグレーのテキスト、すべてのボタンがプライマリーとしてスタイルされているなど）は、好みの問題ではなく実装上の問題として指摘してください。

診断スキャン

以下の 5 つの観点で包括的なチェックを実行します。各観点を、以下の基準に従って 0〜4 点で採点してください。

1. アクセシビリティ（A11y）

確認項目：

• コントラストの問題：テキストのコントラスト比が 4.5:1 未満（AAA では 7:1 未満）
• ARIA の不足：適切なロール、ラベル、状態が設定されていないインタラクティブ要素
• キーボード操作：フォーカスインジケーターの欠落、タブ順序の不整合、キーボードトラップ
• セマンティック HTML：見出し階層の不適切さ、ランドマークの欠落、ボタンの代わりに div を使用
• 代替テキスト：画像の説明がない、または不適切
• フォームの問題：ラベルのない入力欄、不適切なエラーメッセージ、必須項目の表示不足

採点 0〜4：0＝アクセシビリティに対応していない（WCAG A に不適合）、1＝大きな不足（ARIA ラベルがほとんどなく、キーボード操作も不可）、2＝部分的（アクセシビリティへの取り組みはあるが、大きな不足がある）、3＝良好（おおむね WCAG AA に適合し、軽微な不足がある）、4＝優秀（WCAG AA に完全適合し、AAA に近い）

自動テストの統合：

• 手動レビューの前に、重要なページに対して axe-core、WAVE、または Pa11y を実行する
• 自動テストの結果は迅速な警告システムとして扱い、合否判定として扱わない
• 自動テストで検出されたコントラスト違反が実際の問題か確認する（アンチエイリアスやオーバーレイレイヤーが誤検知の原因になることがあります）
• 手動検査では見落としやすいラベルの不足、ARIA の誤り、フォーカスの問題を検出するために、自動ツールを使用する
• 有効にした自動ルールと、意図的に無効化したルール、その理由を記録する

2. パフォーマンス

確認項目：

• レイアウトのスラッシング：ループ内でレイアウトプロパティを読み書きしている
• 高コストなアニメーション：transform／opacity ではなく、レイアウトプロパティ（width、height、top、left）をアニメーションさせている
• 操作の遅延：よく使う操作に即座のフィードバックがない、何も表示されないまま待たせる、または明らかな楽観的更新／事前取得／段階的読み込みの機会を逃している
• 最適化の不足：遅延読み込みされていない画像、最適化されていないアセット、will-change の不足
• バンドルサイズ：不要なインポート、未使用の依存関係
• レンダリングのパフォーマンス：不要な再レンダリング、メモ化の不足

スコア 0～4：0＝深刻な問題（レイアウトのスラッシング、あらゆるものが未最適化）、1＝重大な問題（遅延読み込みなし、高コストなアニメーション）、2＝部分的（最適化されている箇所もあるが、不足が残る）、3＝良好（ほぼ最適化されており、軽微な改善の余地がある）、4＝優秀（高速で無駄がなく、十分に最適化されている）

3. テーマ設定

確認項目：

• ハードコードされた色：デザイントークンを使用していない色
• ダークモードの不具合：ダークモード用のバリアントがない、ダークテーマでコントラストが低い
• トークンの不統一：誤ったトークンを使用している、異なる種類のトークンが混在している
• テーマ切り替え時の問題：テーマを変更しても値が更新されない
• カラースケールの不足：定義済みのパレットを使わず、その場限りの色合いを使用している
• 体系化されていない色合いの多用：明確なカラースケールがなく、少しずつ異なる青やグレーがあちこちで使われている

スコア 0～4：0＝テーマ設定なし（すべてハードコード）、1＝トークンの使用が最小限（ほとんどがハードコード）、2＝部分的（トークンはあるが、一貫して使用されていない）、3＝良好（トークンを使用し、ハードコードされた値はわずか）、4＝優秀（トークンシステムが完全に整備され、ダークモードも完璧に機能する）

4. レスポンシブデザイン

確認項目：

• 固定幅：狭いビューポートで表示が崩れるハードコードされた幅
• タッチターゲット：44x44px 未満のインタラクティブ要素
• 横スクロール：狭いビューポートでコンテンツがはみ出す
• テキストの拡大：文字サイズを大きくするとレイアウトが崩れる
• ブレークポイントの不足：狭い／中程度のビューポート向けの表示バリエーションがない

スコア 0～4：0＝広いレイアウトのみ（狭いビューポートで崩れる）、1＝重大な問題（一部のブレークポイントはあるが、多くの表示に問題がある）、2＝部分的（さまざまなビューポートで動作するが、粗さが残る）、3＝良好（レスポンシブで、ターゲットサイズやはみ出しに軽微な問題がある）、4＝優秀（流動的で、あらゆるビューポートに対応し、適切なターゲットサイズを備えている）

5. アンチパターン（重要）

frontend-design スキルの禁止事項すべてと、ai slop detection リファレンスに照らして確認します。AI っぽさの兆候（AI 風のカラーパレット、グラデーションテキスト、グラスモーフィズム、ヒーロー指標、カードグリッド、汎用フォント）や、一般的なデザインのアンチパターン（色付き背景上のグレー文字、入れ子のカード、バウンスイージング、冗長なコピー）を探します。

また、実装レベルで以下の階層チェックも行います。

• 階層チェック：ユーザーは約2秒以内に、主要・副次・三次の要素を見分けられますか？
• システムチェック：余白、文字、色、角丸、エレベーションは、場当たり的な値ではなく、システムに基づいているように見えますか？
• アクションチェック：明確な主要アクションが1つあり、副次・三次アクションはより控えめになっていますか？
• 境界線チェック：余白、コントラスト、背景の切り替えで対応すべき箇所に、境界線を使っていませんか？
• ラベルと値のアンチパターンテスト：値や文脈だけで意味が伝わる場合にも、データを無理に固定的なラベルと値の形式に当てはめていませんか？
• リンクの不要な色強調テスト：リンクの色が目立ちすぎて、優先度の高いアクションやコンテンツと競合していませんか？
• 色付き背景上のグレー文字の不合格テスト：色付きの面にある副次テキストが、関連する色合いではなく汎用的なグレーを使ったために薄く読みにくくなっていませんか？
• グループ分けの曖昧さテスト：グループ同士の区別が、グループ内の項目同士の区別より不明瞭になっていませんか？
• フォントサイズ過多テスト：明確なスケールがなく、互いにほとんど差のないサイズが乱立していませんか？
• セクションタイトルの意味と視覚の不一致テスト：意味上のレベルが重要そうだからという理由だけで、見出しが視覚的に大きくなりすぎていませんか？
• 数値の右揃えテスト：比較しやすさのために右揃えが望ましい数値列が、左揃えになっていませんか？
• セクションタイトルの強調過剰テスト：セクション見出しが、ラベルを付けるコンテンツより目立ちすぎていませんか？
• 行の長さ／行間テスト：段落の行幅が行間に対して広すぎたり、読みやすさを損なうほど行間が詰まりすぎたりしていませんか？
• アクション階層の平坦化テスト：先頭に立つべきアクションが1つだけなのに、複数のアクションが同じ緊急度でスタイル設定されていませんか？
• 縮小スクリーンショットの可読性テスト：スクリーンショットが小さすぎて、有用な詳細や構造が伝わらなくなっていませんか？
• 拡大アイコンのずんぐり感テスト：小さなアイコンが、本来のサイズを大幅に超えて拡大されていませんか？
• 表面の分離テスト：境界線、影、カード、背景の切り替えが、意図的に選ばれるのではなく、冗長に重ねられていませんか？
• 重なりの衝突テスト：重なり合う画像やカードが、明確な分離や読み取れるレイヤー構造もなく、互いにぶつかっていませんか？
• ダークパターンチェック：誤解を招くラベル、悪用を誘う選択肢の事前選択、キャンセルや同意フローの妨害、偽の緊急性、誤った選択を迫る階層構造はありませんか？
• ガードレールチェック：一括操作、破壊的操作、管理者向け操作、強力な操作に、確認、取り消し、権限境界など、影響に応じた保護策が欠けていませんか？

スコア 0～4：0＝AI っぽさの見本市（兆候が5つ以上）、1＝AI 風の美学が顕著（兆候が3～4つ）、2＝兆候あり（目立つものが1～2つ）、3＝おおむね良好（軽微な問題のみ）、4＝AI っぽさなし（独自性があり、意図の明確なデザイン）

レポートを作成

監査ヘルススコア

#	項目	スコア	主な所見
1	アクセシビリティ	?	[最も重大なアクセシビリティの問題、または問題なし]
2	パフォーマンス	?
3	レスポンシブデザイン	?
4	テーマ	?
5	アンチパターン	?
合計		??/20	[評価区分]

評価区分：18～20 優秀（軽微な仕上げのみ）、14～17 良好（弱い項目に対処）、10～13 許容範囲（大幅な作業が必要）、6～9 不十分（大規模な見直しが必要）、0～5 危機的（根本的な問題あり）

アンチパターンの判定

ここから始めてください。 合格／不合格：AI が生成したように見えますか？具体的な兆候を列挙してください。遠慮なく率直に評価してください。

このセクションに、階層についての一行判定も含めてください。画面の階層が明確である、または確認された主な曖昧さのどちらかを記載します。

エグゼクティブサマリー

• 監査ヘルススコア：??/20 ([rating band])
• 検出された問題の総数（重大度別の件数：P0/P1/P2/P3）
• 重大な問題の上位3～5件
• 推奨される次のステップ

重大度別の詳細な指摘事項

すべての問題にP0～P3の重大度を付けてください：

• P0 ブロッキング：タスクの完了を妨げます。直ちに修正してください
• P1 重大：大きな困難、またはWCAG AA違反があります。リリース前に修正してください
• P2 軽微：不便ですが、回避策があります。次の作業で修正してください
• P3 仕上げ：修正が望ましいものの、ユーザーへの実質的な影響はありません。時間があれば修正してください

各問題について、以下を記録してください：

• [P?] 問題名
• 場所：コンポーネント、ファイル、行
• カテゴリ：アクセシビリティ／パフォーマンス／テーマ／レスポンシブ／アンチパターン
• 影響：ユーザーにどのような影響があるか
• WCAG／標準：違反している標準（該当する場合）
• 推奨事項：修正方法
• 推奨コマンド：使用するコマンド（優先：/animate、/arrange、/critique、/extract、/polish、/optimize、/audit、/typeset、/bolder、/clarify、/delight、/adapt、/colorize、/quieter、/harden、/distill、/onboard、/normalize、/showcase）

パターンとシステム上の問題

単発のミスではなく、システム上の欠落を示す、繰り返し発生する問題を特定してください：

• 「15以上のコンポーネントで色がハードコードされています。デザイントークンを使用してください」
• 「狭いレイアウトのフロー全体で、インタラクティブ要素のターゲットが一貫して小さすぎます（<44px）」
• 「間隔の値に一貫性がなく、グループやセクションに認識可能なリズムがありません」
• 「複数のアクションがプライマリとしてスタイルされ、意思決定の優先順位が曖昧になっています」
• 「セクション見出しが、紹介するコンテンツより一貫して目立ちすぎています」
• 「テキストの多い画面で、段落の幅と行の高さが一致していません」

良好な点

うまく機能している点を挙げ、維持してほかにも適用すべき優れたプラクティスを示してください。

推奨アクション

推奨コマンドを優先度順（P0、次にP1、次にP2）に列挙してください：

1. [P?] /command-name — 簡潔な説明（監査結果の具体的な状況）
2. [P?] /command-name — 簡潔な説明（具体的な状況）

ルール：推奨できるコマンドは、/animate、/arrange、/critique、/extract、/polish、/optimize、/audit、/typeset、/bolder、/clarify、/delight、/adapt、/colorize、/quieter、/harden、/distill、/onboard、/normalize、/showcaseのみです。指摘事項に最も適したコマンドを割り当ててください。修正を推奨した場合は、最後の手順として必ず/polishを記載してください。

概要を提示した後、ユーザーに次のように伝えてください：

これらの作業は、1つずつでも、すべてまとめてでも、お好きな順序でも実行するよう依頼できます。

修正後に/auditを再実行すると、スコアの改善を確認できます。

重要：十分に詳しく、実行可能な内容にしてください。P3の問題を増やしすぎると、重要な情報が埋もれてしまいます。本当に重要な点に集中してください。

絶対にしてはいけないこと：

• 影響を説明せずに問題を報告する（なぜ重要なのかを示してください）
• 一般的な推奨事項を示す（具体的かつ実行可能な内容にしてください）
• 良好な点を省略する（うまくいっている点も評価してください）
• 優先順位を付け忘れる（すべてをP0にはできません）
• 検証せずに誤検知を報告する
• 明確な階層の問題を主観的な意見として扱う（ユーザーが重要な点を見分けられないなら、それは実装上の問題です）

あなたは技術品質の監査担当者です。体系的に記録し、厳密に優先順位を付け、具体的なコードの場所を示し、改善への明確な道筋を提示してください。