---
user-invocable: true
description: "[デザイン] 4. variants → 型付きProps/属性にマッピングして結合（再利用UI）"
---

# [デザイン] 4. variants → 型付きProps/属性にマッピングして結合（再利用UI）

## コマンド: /design-assemble [$TARGET]
`doc/input/design/components.json` の variants を **型付きProps/属性** にマッピングし、選択スタックへ**結合（再利用可能UI）**するアダプタ層。
既定は doc/input/rdd.md の技術スタック。引数で変更する際は **ADR-lite承認必須**。

## いつ使う？（位置づけ）
- `/design-ui` → `/design-components` が終わって、見た目の部品が分離できたあと
- `components.json` の variants を「実装の分岐（props/attrs/enum）」に落とし、再利用可能なUIとして仕上げたいとき

## 次に何をする？
- 実装タスクへ合流（状態/データ取得/ルーティング等は別工程で入れる）

## 共通前提（参照）
- 口調・出力規約・差分出力の方針は `CLAUDE.md` に従う。
- `doc/input/rdd.md` を読み、該当する `.claude/skills/*` を適用して判断軸を揃える。
  - 例（ロール）: `frontend-implementation` / `accessibility-engineer`
  - 例（tech）: `react` / `astro` / `svelte` / `tailwind`（※テンプレートでは固定せず、RDDのスタックに合わせて選ぶ）
- 詳細運用（ADR-lite/差分/サンプル運用等）は `doc/guide/ai_guidelines.md` を参照。
- SSOT JSON のスキーマ（variants命名/props/slots）は `doc/input/design/ssot_schema.md` を参照。

### 入力
- $TARGET（任意）: react | vue | svelte | swiftui | flutter | web-components | plain-html …

### 出力（差分のみ）
- スタック別の再利用UI
  - React: `src/components/{Name}.tsx`（Props型: size/tone/state…）, `src/stories/*`, `__tests__/*`
  - Vue: `src/components/{Name}.vue`（props + Story）
  - Svelte: `src/lib/{Name}.svelte`（props + Story）
  - SwiftUI: `Sources/UI/{Name}.swift`（case/enumでvariants）
  - Flutter: `lib/widgets/{name}.dart`（enum/Theme拡張）
  - Web Components: `src/components/{name}.ts`（attrs/reflect + CSS Custom Props）
- すべて **差分リファクタ**（skeleton → 再利用化）。仕様追加禁止。

### マッピング規約（例）
- variants.size → props.size（"sm"|"md"|"lg"）/ enum 等
- variants.tone → tokensのsemantic colorキーにバインド
- state（hover/disabled） → スタック標準のstate表現
- Docコメント（JSDoc/Docstring/Swift Doc/ Dartdoc）必須

### ルール
- **RDD準拠/SOLID**。逸脱は ADR-lite で理由と影響を明記
- **a11y必須**（セマンティックHTML/JSX + 必要最小限のWAI-ARIA）。詳細は `.claude/skills/accessibility-engineer/SKILL.md` に従う。
- Lint/Type/Test/Story すべて緑
- ここで停止

### ゲート
- Storybook/Preview で全variants表示OK
- Lint/Type/Test green（対応スタックのみ）