design-pass は何をしますか？
ターゲット: $ARGUMENTS
ツールキット: ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/ · チェックリスト: ${CLAUDE_SKILL_DIR}/reference/review-checklist.md
1. ベースライン（コードを触る前）
開発サーバーが起動していることを確認し（必要ならバックグラウンドで起動、本番ビルドは絶対に実行しないでください）、次を実行します:
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/before
2. 修正前の監査
- ターゲットがレンダリングするすべてのコンポーネントと、同じパターンをレンダリングする他のすべての場所（クラス文字列やコンポーネント名をgrep）を見つけます。
- 新しいものを書く前に、既存のプリミティブ（ボタン、カード、モーダル、セクション見出し）を再利用します。同じマークアップが2回以上出現する場合は、それを抽出してから一度だけスタイルを変更します。
- 依頼されたものだけを正確に構築します。依頼がない限り、新しいセクション、バッジ、トグル、アニメーションは追加しないでください。
- プロジェクトのトークンのみを使用します。スケールにない値は、最も近いステップを使用するか、トークンを提案します（
design-refを参照）。
3. 適用
チェックリストに沿って作業します: ヒエラルキー、ビューごとに1つのプライマリアクション、スペーシングスケール、タイポグラフィスケール、空/ローディング/エラー状態、モバイルで16px以上の入力。
4. 検証
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/after
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/diff.mjs /tmp/design-pass/before /tmp/design-pass/after
- 各幅のライトモードとダークモードのafterシートを読みます。ターゲット外の意図しない変更がないか、差分PNGを確認します。
- グレースケールチェック:
--inject "document.documentElement.style.filter='grayscale(1)'"を付けて1つの幅を再実行します。 - 次に、完全な
ui-auditの幅セットを1回実行し、タイプチェックとリントも行います（ビルドは不要）。 - プロジェクトがコードと同期したFigmaファイルを保持している場合は、同じタスク内で一致するフレームを更新します。
終了条件
- 横スクロールがないこと、beforeと比較して新しいコントラストやaxeの問題がないこと。
- 差分が意図した場所でのみ変更を示していること。
- 既存のコンポーネントを複製する新しいコンポーネントがなく、要求されていないUIがないこと。
- ダークモードがチェックされていること、またはプロジェクトにダークモードがないことが確認されていること。
- タイプチェックとリントにパスしていること。
- ユーザーに短いサマリーと、確認すべき1～2のシートパスを提示すること。