design-qa

スキル：デザイン QA

ステップ 0：キットはありますか？ このスキルはキット内のファイルを読み込みます。次のコマンドを一度実行して確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルフォルダーだけです。これは npx skills add の動作です。その旨を明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、作業を停止してください。開けなかったファイルの内容を推測してはいけません。

品質の低下を防ぐ自動・手動のゲートを整備します。

手順

1. ${CLAUDE_SKILL_DIR}/../../../workflows/design-qa.md を読みます（QA ピラミッド：トークン／リンターのゲート → 自動 a11y → ビジュアルリグレッション → 手動 a11y）。
2. まず 高速ゲート を組み込みます（すべてのコミット／PR で実行）：python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py、python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py（トークンのペアを WCAG に照らして一括チェック）、および python3 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py <src>（コンポーネントコードに生の hex／px／時間指定がないこと）。リポジトリの .github/workflows/ci.yml でこれらを実行します。
3. 自動 a11y を追加し、各コンポーネントの状態（エラー／読み込み中／無効／展開済み／選択済み）に対して axe-core／Pa11y を実行します。重大または深刻な違反が 0 件であることをマージ条件にします。実際のレンダリングでコントラストをチェックするゲート node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs measure_render.mjs <file.html>（および --dark）も実行します。これはヘッドレス Chromium でページを開き、トランジションを無効にして、すべてのテキスト要素の実際の計算済みスタイルとアルファ合成後のコントラストを測定します（静的なトークンチェックでは見逃す問題を検出します）。
4. バリアント × サイズ × 状態 × ライト／ダーク、主要なブレークポイント、RTL を網羅した ビジュアルリグレッション のスナップショットを追加します。アニメーションを停止し、データを一定にします。
5. リリースごとに 手動 a11y チェックリスト（キーボード、スクリーンリーダー、400% リフロー、200% テキスト間隔、動きを減らす設定、強制カラーモード；${CLAUDE_SKILL_DIR}/../../../accessibility/*）を確認し、承認します。

検証（完了の定義）

• 未レビューの PR によって未解決のトークンエイリアス、コントラストの不備、生の hex／px、axe の違反が持ち込まれることを、各ゲートが防ぎます。
• スナップショットは、単に正常な状態だけでなく、ダークモード、RTL、セマンティクスが変化する状態も網羅します。
• リリースの手動 a11y チェックリストが承認済みです。