Menü
CLAUDE.md のデモ仕様とヒアリング結果に基づき、Next.js デモアプリの画面・コンポーネント・モックデータをゼロから生成するスキル。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
見積方針書に基づき、工程別見積の草案作成・数値整合性チェックを行うスキル。
提案戦略書・チェックリストに基づき、提案書のMarkdownスライド設計書を生成・更新するスキル。
自社（提案主体）と提案先（クライアント）の会社情報をWebから自動取得し、org-data/company-profile.md および source/client-profile.md を充実させるスキル。フルオートモードでは必須。
溜まったタスクの一覧確認・優先度トリアージ・対話的な方針決定と処理を行うスキル。
提案策定中のタスク・検討事項・課題を tasks.md に起票するスキル。人間が直接呼び出すほか、Claudeが会話中に検討事項を発見した際にも使用する。
プロジェクト進行中に追加資料を取り込むスキル。input/配下のファイルを自動分類し、source/ または org-data/ の適切な場所に配置する。docs-catalogの差分更新も実施。
| name | demo-builder |
| description | CLAUDE.md のデモ仕様とヒアリング結果に基づき、Next.js デモアプリの画面・コンポーネント・モックデータをゼロから生成するスキル。 |
| user-invocable | true |
| argument-hint | <画面名またはall> |
| allowed-tools | Read, Grep, Glob, Write, Edit, Bash |
本スキルは /setup で収集されたデモアプリ仕様（CLAUDE.md ## 2. Demo Web App Specification セクション）に基づき、Next.js App Router 構成のデモアプリをゼロから構築する。
テンプレートに依存せず、プロジェクト固有の要件に最適な画面構成・コンポーネント・モックデータを生成する。
/setup が完了し、CLAUDE.md の ## 2. Demo Web App Specification に画面定義が記録されていることDESIGN.md が確定していることdemo-app/ に最小限の Next.js スキャフォールド（layout.tsx, page.tsx, globals.css, utils.ts）が存在することプロジェクトルートの DESIGN.md を読み込む。Phase 2.5 で確定されたデザイン規約（色・タイポ・コンポーネント・Demo App Rules）を抽出する。
DESIGN.md が存在しない場合はエラーを返し、/auto-run 2.5 または Phase 2.5 (Design System) の実行を促す2. Color Palette & Roles の意味名トークンのみを使用する（bg-primary-800 等）8. Demo App Rules の Tailwind 変数ブロックを globals.css の @theme inline に適用するbg-slate-*, bg-blue-*, text-gray-* 等）の使用は禁止CLAUDE.md の ## 2. Demo Web App Specification セクションから以下を読み取る:
DESIGN.md と不整合がある場合は DESIGN.md を優先）demo-app-spec.md がプロジェクトルートに存在する場合はそちらも参照する（Phase 6 で自動生成される詳細仕様）。
最初の画面構築前に、以下の共通ファイルを生成する:
src/lib/types.ts）Demo Screens テーブルと Sample Data Domain から、必要な型定義を設計・生成する。
src/lib/mock-data.ts）Sample Data Domain に基づき、全画面で使用するモックデータを生成する。
new Date() ベース）で生成src/lib/platform-client.ts）環境変数に基づくプラットフォーム接続の抽象化レイヤーを生成する。
getPlatformConfig(): 環境変数から設定を取得isPlatformConfigured(): 接続可能判定platformFetch(): 認証ヘッダー自動付与の fetch ラッパーDESIGN.md §8 Demo App Rules の @theme inline ブロック全体を src/app/globals.css にコピーする。CLAUDE.md の Theme Color は参考値とし、最終確定値は DESIGN.md を信じる（Phase 2.5 で strategist が両者を整合させる）。
src/components/sidebar.tsx）Demo Screens テーブルの全画面を含むナビゲーションを生成する。
src/app/layout.tsx を更新する:
Demo Screens テーブルの各画面について、種類（type）に応じた最適な構成で画面を生成する。
各種類はガイドラインであり、厳密な型ではない。プロジェクトの要件に応じて柔軟に組み合わせ・カスタマイズすること。
| 種類 | 典型的な構成要素 | 推奨ライブラリ |
|---|---|---|
dashboard | KPI カード、グラフ（棒/折れ線/円）、データテーブル、フィルタ | Recharts |
table | 検索・フィルタ、ソート対応テーブル、ページネーション、詳細パネル | — |
chat | メッセージ履歴、入力フォーム、結果表示（テーブル/グラフ切替）、サンプルクエリ | Recharts |
builder | ノードパレット、キャンバス（D&D）、プロパティパネル、ツールバー | Framer Motion |
form | 入力フィールド、バリデーション、プレビュー、送信/保存 | — |
realtime | ライブ指標、ストリーミンググラフ、ステータス一覧、アラート | Recharts, Framer Motion |
demo-app/src/app/[パス]/
page.tsx # ページコンポーネント
demo-app/src/components/[画面名]/
[必要なコンポーネント].tsx # 画面固有コンポーネント（必要に応じて分割）
小規模な画面は page.tsx 1ファイルに収めてよい。複雑な画面のみコンポーネントを分割する。
複数画面で再利用される UI パーツは src/components/ui/ に配置する:
demo-app/src/components/ui/
[コンポーネント名].tsx # 画面定義から必要なものだけ生成
生成すべき共通コンポーネントは画面定義から逆算して決定する。 使わないコンポーネントは生成しない。
src/app/page.tsx を更新し、プロジェクト概要と各画面へのナビゲーションを表示するホーム画面にする:
各画面が必要とする API Route を src/app/api/ 配下に生成する:
"use client" ディレクティブ: インタラクティブなコンポーネントにのみ付与全画面でプラットフォーム未接続時に正常動作することを保証する:
dashboard, analysis 等all を指定: CLAUDE.md に定義された全画面を順次作成/更新/demo-builder all # 全画面を一括生成
/demo-builder dashboard # 特定の画面のみ生成
## 2. Demo Web App Specification が未設定（__VARIABLE__ プレースホルダーが残っている）場合はエラーを表示し、/setup の実行を促すRead で確認してから差分変更するnpm run build でビルド確認を行う