audit-ui

UI 監査

Web インターフェースの最終チェック用監査ワークフローです。具体的な問題と具体的な修正に焦点を当てます。

トリガーとなる手がかり

次の場合にこのスキルを使用します。

• ユーザーが UI の品質監査、デザイン QA、仕上げの見直し、またはリリース前レビューを依頼している
• アクセシビリティ、キーボード操作、フォームの使いやすさ、タイポグラフィ、またはインタラクションのチェックが必要なタスクである
• リクエストに、読み込み／エラー／空の状態、レスポンシブ対応、または視覚的安定性のチェックが含まれている

監査ワークフロー

監査中にこのチェックリストをコピーして記録します。

Audit progress:
- [ ] Step 1: Scope changed surfaces and select relevant categories
- [ ] Step 2: Run CRITICAL checks first (a11y, interaction, forms)
- [ ] Step 3: Run HIGH/MEDIUM checks for the same surfaces
- [ ] Step 4: Report findings with file:line and concrete fixes
- [ ] Step 5: Re-check touched files and mark passes

1. 全体の確認を依頼されていない限り、変更されたページ／コンポーネントのみを監査します。
2. 中程度の優先度の仕上げより先に、CRITICAL と HIGH の指摘事項を優先します。
3. モーションの動作については、タイミング／イージング／動きの軽減に関する詳細を確認するため、ui-animation も適用します。
4. 修正後、最終確定する前に該当するルールを再実行します。

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	アクセシビリティとセマンティクス	CRITICAL	a11y-
2	キーボード操作とインタラクション	CRITICAL	interaction-
3	フォームとバリデーション	CRITICAL	forms-
4	タイポグラフィと読みやすさ	HIGH	type-
5	ナビゲーションとフィードバック	HIGH	nav-
6	レイアウトと耐障害性	HIGH	layout-
7	パフォーマンスと視覚的安定性	HIGH	perf-
8	モーションとテーマの動作	HIGH	motion-
9	コンテンツとマイクロコピー	MEDIUM	copy-

クイックリファレンス

現在の監査範囲に必要なものだけを読みます。

• カテゴリ一覧と影響度の根拠：rules/_sections.md
• ルールごとのガイダンスと例：rules/<prefix>-*.md
• 全体的な仕上げのチェック：craft-checklist.md
• タイポグラフィの詳細チェック：typography-checklist.md

ルールファイルの例：

rules/a11y-semantic-html-first.md
rules/forms-inline-errors-first-focus.md
rules/perf-image-dimensions-and-priority.md

各ルールファイルには次の内容が含まれています。

• ルールが重要な理由
• 誤った例
• 正しい例

レビュー結果の形式

次の形式で指摘事項を報告します。

## UI Audit Findings

### path/to/file.tsx
- [CRITICAL] `a11y-icon-controls-labeled`: Icon button is missing an accessible name.
  - Fix: Add `aria-label="Close dialog"` (or visible text label).

### path/to/clean-file.tsx
- ✓ pass

• ファイルごとに指摘事項をまとめます。
• 行番号がある場合は file:line を使用します。
• 問題を説明し、具体的な修正案を提示します。
• 問題のないファイルには ✓ pass と記載します。