Menu
CLAUDE.md のデモ仕様とヒアリング結果に基づき、Next.js デモアプリの画面・コンポーネント・モックデータをゼロから生成するスキル。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
見積方針書に基づき、工程別見積の草案作成・数値整合性チェックを行うスキル。
提案戦略書・チェックリストに基づき、提案書の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 でビルド確認を行う