Claude-skill-registry design-ui

[デザイン] 2. SSOT → 静的UI骨格（見た目のみ）を生成

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/design-ui" ~/.claude/skills/majiayu000-claude-skill-registry-design-ui && rm -rf "$T"

manifest: skills/data/design-ui/SKILL.md

[デザイン] 2. SSOT → 静的UI骨格（見た目のみ）を生成

コマンド: /design-ui [$TARGET] [$PAGE_KEY]

設計JSON（tokens/components/design_context）を参照し、静的UI骨格のみ生成。ロジック/状態/データ取得は入れない。ターゲットは doc/input/rdd.md の技術スタックを既定とし、引数で上書きする場合は ADR-lite承認必須。

いつ使う？（位置づけ）

```
/design-ssot
```
または
```
/design-mock
```
で SSOT（tokens/components/context） が揃ったあと
「実装スタック準拠のファイル配置」で 見た目だけの骨格を先に作りたいとき（後で分割・結合する前提）

次に何をする？

重複UIを減らして保守しやすくする →
```
/design-components
```
variantsを型付きprops/属性に落として再利用UIにする →
```
/design-assemble
```

共通前提（参照）

口調・出力規約・差分出力の方針は
```
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
```
を参照。

見た目の基準（ビューポート）について

まず
```
doc/input/rdd.md
```
の「ターゲット表示環境（事実）」を参照し、プレビュー/Story等の確認は そのビューポートを基準に行う
未記入の場合は、以下を 推奨デフォルトとして仮置きする：
- desktop: 1440x900
- mobile: 390x844
- tablet: 834x1194

入力

$TARGET（任意）: react | vue | svelte | swiftui | flutter | web-components | plain-html など
$PAGE_KEY（任意）: 画面キー（
```
doc/input/design/design_context.json
```
の
```
pages[].key
```
）
- 省略時: 全ページを対象に生成する（複数ページ対応の既定）

出力（差分のみ）

スタック別の標準配置へ静的UIファイル一式
- 例: React →
```
src/components/*
```
  ,
```
src/stories/*
```
  ,
```
tailwind.config.js
```
  (tokens反映)
- 例: Vue →
```
src/components/*.vue
```
  ,
```
src/stories/*
```
- 例: SwiftUI →
```
Sources/UI/*
```
Storybook/プレビュー（対応スタックのみ）

前提（入力ファイル）

```
doc/input/design/design-tokens.json
```
```
doc/input/design/components.json
```
```
doc/input/design/design_context.json
```
```
doc/input/design/copy.json
```
（文言のSSOT。一字一句固定）
```
doc/input/design/assets/assets.json
```
（任意。存在する場合は必ず参照して画像を配置する）（通常は
```
/design-ssot
```
の成果物）

参照（スキーマ）

constraints/resizing/autoLayout の解釈とレスポンシブ対応表は
```
doc/input/design/ssot_schema.md
```
を参照する

レスポンシブ適用規則（Figma→CSS/スタイル）

Auto Layout →
```
flex
```
等 + tokens の
```
gap/padding
```
constraints/resizing マッピング
- horizontal: SCALE →
```
w-full
```
  /
```
flex-grow
```
  等
- vertical: TOP_BOTTOM →
```
h-full
```
  （文脈でcol）
- resizing: FILL →
```
flex-1
```
  /
```
w-full
```
- resizing: HUG →
```
inline-size: max-content
```
  /
```
inline-block
```

breakpoints →

doc/input/design/design-tokens.json

の

primitives.breakpoints

準拠

tokens外の値禁止 / magic number禁止

禁止

状態/ロジック/フェッチの追加
RDD逸脱スタックの導入（$TARGET指定時はADR-lite要）
```
copy.json
```
の文言を推測/言い換えして埋めること（不足は不足として止める）
```
div
```
クリック等でボタン/リンク相当を作ること（セマンティック要素を優先し、必要最小限のWAI-ARIAに限定する）

文言（copy）の適用ルール

```
design_context.json
```
の text ノードは
```
copyKey
```
を持つ前提で、対応する文言を
```
doc/input/design/copy.json
```
から参照して埋め込む
```
copyKey
```
が未定義/不足している場合は、推測で生成しない。ユーザーに以下を依頼して停止する：
- ```
FIGMA_REF
```
  を再提示して
```
/design-ssot
```
  をやり直す
- または
```
copy.json
```
  の差分（追加すべきキーと文言）を提供してもらう

画像アセット（assets.json）の適用ルール

```
doc/input/design/assets/assets.json
```
が存在する場合は、
```
baseDir
```
配下にある画像を参照してUI骨格に反映する
- 例: Next/Astro/React →
```
public/design-assets/*
```
- 例: SvelteKit →
```
static/design-assets/*
```
```
components.json
```
の
```
slots
```
や
```
usedBy
```
情報と照合し、画像が必要な箇所（ロゴ/アイコン/イラスト/写真）の取りこぼしを防ぐ
画像の最適化（次世代フォーマット変換/圧縮/レスポンシブ画像生成等）は、この工程では必須にしない（まず再現性を優先）
```
assets.json
```
に
```
status: "failed"
```
がある場合は、必ずユーザーに不足（動画/画像等）を報告し、手元提供またはFigma Export設定の依頼をして停止する（推測で代替しない）

ゲート

見た目一致（主要variantsのプレビュー/Story）
tokens外の値0件 / Lint/Type green

Agent Browser利用可能時（自律確認）:

# Storybook または開発サーバーを起動後
agent-browser open http://localhost:6006  # Storybook
# または
agent-browser open http://localhost:3000/{対象パス}

# スナップショットで要素構造を確認
agent-browser snapshot -i

# 主要breakpointsでの表示確認（viewport変更）
# 問題発見時は修正後に再スナップショット

デザインとの差異（余白/色/タイポ）を目視確認
レスポンシブ崩れがないか確認
ここで停止