design-code

スキル：デザインコード

ステップ 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. リクエストから対象のフレームワークとスタイリング方法を特定します（または質問します）。
2. ${CLAUDE_SKILL_DIR}/../../../frameworks/adapter-protocol.md（トークンの解決、コンポーネントの契約、スタイリング、ダークモード、モーション、出力ルールに関する共通仕様）を読み込みます。
3. 該当するアダプターを読み込みます：
   • 詳細なリファレンス：${CLAUDE_SKILL_DIR}/../../../frameworks/react-tailwind.md、${CLAUDE_SKILL_DIR}/../../../frameworks/nextjs.md、${CLAUDE_SKILL_DIR}/../../../frameworks/swiftui.md。
   • 簡潔なアダプター：${CLAUDE_SKILL_DIR}/../../../frameworks/adapters/{vue,svelte,angular,solid,web-components-lit,react-native,flutter,jetpack-compose,vanilla-css,css-in-js}.md。
   • 対象のファイルがない場合： プロトコルの「新しいアダプターを作成する」チェックリストを使って、その場でアダプターを作成します。
4. ${CLAUDE_SKILL_DIR}/../../../components/* からコンポーネント仕様を、${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md から ARIA パターンを取得します。
5. すべての値をトークンに解決します（${CLAUDE_SKILL_DIR}/../../../tokens/*.json）。要望があれば、美的な方向性を適用します（apply-aesthetic スキル）。

出力ルール（必須）

トークンを使用する（ハードコードしない） · すべてのインタラクティブ要素にアクセシビリティ対応を含める · 該当する 8 つの状態すべてに対応する · セマンティックレイヤーでダークモードに対応する · モバイルファースト · 動きを抑える設定に対応する · プレースホルダーを使わず、ファイルを完全な形で提供する（${CLAUDE_SKILL_DIR}/../../../workflows/redesign-audit.md → 出力の完全性）

検証（完了を宣言する前に必ず実施）

コードは最も重要な成果物です。毎回、次の項目を自己チェックしてください。

1. ハードコードされた値がないこと：すべての色／サイズ／角丸／シャドウ／時間／フォントがトークン（CSS 変数／テーマキー／アセット）に由来していることを確認します。出力に対して ${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py を実行し、未加工の hex／px／ms と未加工の Tailwind パレットユーティリティ（bg-gray-500、text-blue-600）がゼロであることを確認します。セマンティックユーティリティ／トークン（bg-surface、text-primary）を使用してください。${CLAUDE_SKILL_DIR}/../../../scripts/validate_theme_refs.py を実行し、すべての var(--…) が定義済みのテーマトークンを参照していること（宙に浮いたトークンがないこと）を確認します。許可される例外は、サードパーティのテーマ設定（MUI／Mantine）で、当社のトークンをその API にマッピングする場合のみです。
2. 該当する状態がすべて揃っていること：Default、Hover、Focus（-visible リング）、Active、Disabled、Loading（＋aria-busy）、Error、Selected、または妥当な理由を示した N/A。
3. アクセシビリティが適切に設定されていること：${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md に従った正しい role／ARIA、キーボード操作モデル、フォーカス管理、24px 以上のターゲットを確認します。新しい色の組み合わせについては、${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py を使ってコントラストを検証します。
4. ダークモード＋動きを抑える設定＋レスポンシブ対応：セマンティックトークンが切り替わること、動きに prefers-reduced-motion のフォールバックがあること、レイアウトがモバイルファーストであることを確認します。
5. 完全性：ファイル全体を含め、// ... を残さないこと。N 個を求められた場合は N 個を提供します。いずれかのチェックに失敗したら、返す前に修正してください（不確かな場合は a11y-audit を実行します）。
6. 単一テーマの一貫性：プロジェクトで共有されている唯一のトークンテーマ（ルートの CSS 変数レイヤー）を使用してください。ページごとのパレットや新しい色は定義しないでください。複数のページ／画面にわたり、同じセマンティックトークンですべてのサーフェスを制御し、製品全体の見た目を統一して、一元的にテーマ設定できるようにします（${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md → Single-Theme Consistency）。
7. 共有プリミティブレイヤーは 1 つだけにすること：各アトム（Button、Input、Modal、Badge）につき再利用可能なコンポーネントを 1 つ（cva／相当するものを使用）構築します。複数ファイル内でユーティリティクラスのまとまりをインラインで繰り返したり、画面ごとに div をモーダルとして独自実装したりしないでください。オーバーレイでは単一の Modal プリミティブを再利用します。フォーカストラップ、role="dialog"、aria-modal="true"、aria-labelledby、Escape キー、閉じたときにフォーカスを元に戻すこと、バックドロップに対応します（WCAG 2.4.3 ＋ 2.1.2）。${CLAUDE_SKILL_DIR}/../../../examples/golden/Button.tsx と ${CLAUDE_SKILL_DIR}/../../../examples/golden/Modal.tsx を参照してください。
8. フォントの読み込み：CSS で Web フォントを @import することは絶対に避けてください（レンダリングをブロックします）。フレームワークのローダー（next/font）、または font-display: swap を指定した <link rel="preconnect"> ＋ <link rel="preload"> を使用します。可能であればセルフホストしてください。フォントファミリーはトークン（--font-sans）から指定し、リテラルで指定しないでください。
9. 意図に沿ったセマンティックトークン＋一貫性：トークンの意味はアクションに一致させます。破壊的な操作（Delete／Remove）には action.destructive（危険）を使い、action.primary は絶対に使いません。セカンダリは濃色テキストを伴う、ニュートラルなアウトライン／透明スタイルにします（色のついた塗りつぶしは絶対に使用しない → 青地に濃色テキストは禁止）。同じアクションには、どこでも同じバリアントを使います（トリガーボタンと確認ボタンの色が、一方では赤、もう一方では青といった不一致にならないようにします）。ゲートでは検出できません。必ず確認してください。
10. アイコンに絵文字を使わないこと：実際のアイコンセット（デフォルトは lucide）をインライン SVG と currentColor で使用してください。JavaScript でラベルを切り替える場合も含め、絵文字は使用しません（テキスト／絵文字の文字列ではなく <svg> を切り替えます）。${CLAUDE_SKILL_DIR}/../../../scripts/lint_taste.py を意識して実行してください（アイコンとして使われた絵文字を検出します）。
11. 破壊的操作の確認 UX：取り消せない操作（アカウント／データの削除、「元に戻せません」と明記された操作など）には、WCAG 3.3.4／3.3.6 に準じた実質的な確認手順が必要です。確認ダイアログを表示し、確認ボタンに操作内容を明記します（「削除」／「OK」／「はい」ではなく「アカウントを削除」）。重大な操作では、入力による確認も必要です。${CLAUDE_SKILL_DIR}/../../../examples/sample-app/preview.html と ${CLAUDE_SKILL_DIR}/../../../content/voice-tone.md を参照してください。
12. 見た目の事前チェック：${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md の 12 項目の美的チェックを実行します。また、HTML をレンダリングする場合は DS_REQUIRE_BROWSER=1 node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs <file> を実行します（レンダリングに基づき、控えめすぎる文字サイズのコントラスト、均一な繰り返し、広すぎる行幅、パレットの乱立を検出します）。見た目の評価はヒューリスティックです。検出結果を重要な手がかりとして扱い、実際のスクリーンショットのレビューも行ってください。正しさのように自動で証明できるものではありません。
13. ゲートを実行し、結果を報告する（必須）：完了を宣言する前に、node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_states.mjs <file> と --dark（すべての要素について default／hover／focus）を実行し、さらに node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs を実行してください。実際の出力を報告します。直近で測定していないコントラスト値や「100%」を入力してはいけません（CLAUDE.md → Verification Protocol）。