audit について
auditは、コードベースの技術的な品質を点検し、問題の修正ではなく根拠に基づくレポートを作成するスキルです。プロジェクト固有の設計背景を踏まえ、アクセシビリティ、性能、テーマ、レスポンシブ対応、実装の整合性を評価します。
主な機能
- 01実装の5つの側面を点検
- 02デザインシステムと製品背景を確認
- 030〜4の尺度で採点
- 04重大度、影響、根拠を報告
- 05後続のスキルやコマンドを提案
活用シーン
- 01リリース前にコードベースを評価
- 02アクセシビリティやレスポンシブの問題を発見
- 03デザイントークンの使用とテーマ動作を確認
- 04検証済みの実装課題に優先順位を付ける
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ shipshitdev/ skills --skill auditインストール後、Claude Code で/auditを入力して読み込まれたか確認します。
同梱ファイルplugin.jsonREADME.md
詳細
体系的な技術的品質チェックを実行し、以下のレポートを作成してください。このスキル内の問題は修正しないでください。
スキャンを始める前に、既存のデザインシステム(CSS/トークン/テーマと代表的なコンポーネント)を読み、一般的な基準ではなく、プロジェクト独自の規約に照らして「正しい」状態を判断してください。リポジトリにデザインのコンテキスト(PRODUCT.md、DESIGN.md、.impeccable.md、または.github/copilot-instructions.md内の## Design Contextブロック)がある場合は、それも読んでください。
これはコードレベルの監査であり、デザインの批評ではありません。実装で測定・検証できる項目を確認してください。
診断スキャン
以下の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にも近い)
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. 実装の整合性(重要)
製品のコンテキストに照らして、ショートカットの繰り返し、デザインシステムからの逸脱、誤解を招くコンテンツ、構造の使い回しを確認してください。測定可能なソース上の所見と視覚的な判断は分けてください。配色やレイアウトのパターンだけでは欠陥とはいえません。誤検知について説明してください。
スコア 0〜4:0=体系的な逸脱、1=重大な問題の繰り返し、2=検証済みの問題が複数、3=軽微な問題が単発、4=一貫性があり意図的
レポートの作成
監査ヘルススコア
| # | 項目 | スコア | 主な所見 |
|---|---|---|---|
| 1 | アクセシビリティ | ? | [最も重大なアクセシビリティ上の問題、または「--」] |
| 2 | パフォーマンス | ? | |
| 3 | レスポンシブデザイン | ? | |
| 4 | テーマ設定 | ? | |
| 5 | 実装の整合性 | ? | |
| 合計 | ??/20 | [評価区分] |
評価区分:18〜20 優秀(軽微な調整のみ)、14〜17 良好(弱い項目に対応)、10〜13 許容範囲(大幅な作業が必要)、6〜9 不良(大規模な見直しが必要)、0〜5 重大(根本的な問題あり)
実装の整合性に関する判定
まずここから始めます。 実装は製品固有の一貫したシステムを表現していますか?検証済みの根拠を示してください。
エグゼクティブサマリー
- 監査ヘルススコア:??/20([評価区分])
- 発見された問題の合計数(重大度別に集計:P0/P1/P2/P3)
- 重要な問題の上位 3〜5 件
- 推奨する次のステップ
重大度別の詳細な所見
すべての問題に P0〜P3 の重大度を付けてください。
- P0 ブロッキング:タスクの完了を妨げます。直ちに修正してください
- P1 重大:大きな困難、または WCAG AA 違反です。リリース前に修正してください
- P2 軽微:煩わしさはありますが、回避策があります。次の作業で修正してください
- P3 仕上げ:修正が望ましいものの、ユーザーへの実質的な影響はありません。時間があれば修正してください
各問題について、以下を記載してください。
- [P?] 問題名
- 場所:コンポーネント、ファイル、行
- カテゴリ:アクセシビリティ/パフォーマンス/テーマ設定/レスポンシブ/実装の整合性
- 影響:ユーザーにどのような影響があるか
- WCAG/標準:違反している標準(該当する場合)
- 推奨事項:修正方法
- 推奨コマンド:修正に使用するコマンドまたはスキル
パターンと体系的な問題
単発のミスではなく、体系的な不足を示す、繰り返し発生している問題を特定してください。
- 「15 以上のコンポーネントで色がハードコードされています。デザイントークンを使用してください」
- 「モバイルで一貫してタッチターゲットが小さすぎます(<44px)」
良い点
維持する価値のある実装プラクティスを、ファイル/コンポーネントの根拠とともに 1〜3 件挙げてください。具体的な良い点がない場合、このセクションは省略してください。
推奨アクション
推奨コマンドを優先度順(まず P0、次に P1、最後に P2)に列挙してください。
- [P?]
/command-name— 簡潔な説明(監査結果に基づく具体的なコンテキスト) - [P?]
/command-name— 簡潔な説明(具体的なコンテキスト)
ルール:所見に最も適した利用可能なスキルまたはコマンドを選んでください。修正を推奨した場合は、最後の推奨として仕上げ/クリーンアップの手順を追加してください。
サマリーを提示した後、ユーザーに次のように伝えてください。
これらを 1 つずつ、まとめて、またはお好みの順番で実行するよう依頼できます。
修正後に
/auditを再実行すると、スコアの改善を確認できます。
ユーザーが完全なバックログを求めていない限り、P3 の所見は上位 5 件までに制限してください。
絶対にしないでください:
- 影響(なぜ重要なのか)を説明せずに問題を報告する
- ファイル/コンポーネントの根拠と修正方法を示さずに推奨事項を提示する
- 良い点を省略する(機能している点も評価する)
- 優先順位付けを忘れる(すべてを P0 にはできません)
- 検証せずに誤検知を報告する
関連項目
accessibility— WCAG 準拠、ARIA、キーボード操作、スクリーンリーダーが依頼内容の場合は、項目 1 をさらに詳しく確認します。design-consistency-auditor— トークンの逸脱、ハードコードされた色、デザインシステムからの乖離が依頼内容の場合は、項目 3 をさらに詳しく確認します。