アプリ全体のモックアップ生成
複数の機能を統合し、ナビゲーション・レイアウト付きのアプリ全体のHTMLモックアップを生成するワークフローです。
前提条件
各機能のモックアップが先に生成されている必要があります。
# 各機能のモックアップを先に生成
/teamkit:generate-mock FacilityManagement
/teamkit:generate-mock ReservationManagementワークフロー概要
README.md（アプリ概要）
│
▼
plan-app ─→ 0_navigation.yml
│
▼
design-app ─→ 1_layout.yml, 1_pages.yml,
1_sitemap.yml, common_layout.html, css/custom.css
│
▼
create-app ─→ 各ページの HTML ファイル
ステップ1: plan-app（ナビゲーション計画）
/teamkit:plan-app対話形式でアプリの計画を進めます。
- アプリの概要を説明する
- AIがナビゲーション構造を提案する
- 内容を確認し、承認する
生成されるファイル
.teamkit/app/README.md- アプリの概要-
.teamkit/app/0_navigation.yml- ナビゲーション定義（ヘッダー、フッター、認証ページ、メニュー項目）
ステップ2: design-app（レイアウト設計）
/teamkit:design-appナビゲーション定義をもとに、アプリ全体のレイアウトを設計します。
処理内容
- 入力の検証（
0_navigation.ymlとREADME.mdの存在確認） - レイアウトタイプの決定（sidebar-main / header-main / centered-card）
-
1_pages.ymlの作成（ナビゲーション項目とUI定義の統合） -
1_sitemap.ymlの生成（ナビ階層、親子関係） common_layout.htmlの作成（TailwindCSS + カスタムCSS）css/custom.cssの生成version.jsonの出力
生成されるファイル
| ファイル | 内容 |
|---|---|
1_layout.yml |
レイアウト定義 |
1_pages.yml |
ページ一覧（ナビ項目とUI統合） |
1_sitemap.yml |
サイトマップ（nav_level、parent関係） |
common_layout.html |
共通HTMLテンプレート |
css/custom.css |
カスタムスタイルシート |
version.json |
バージョン情報 |
ステップ3: create-app（ページ生成）
/teamkit:create-app設計情報をもとに、各ページのHTMLファイルを生成します。
| オプション | 説明 |
|---|---|
-o, --output |
出力ディレクトリを指定（デフォルト:
app）
|
特徴
- 全ページで共通のナビゲーションを維持
- ページ間のリンクは相対パス（同一ディレクトリ内）
- TailwindCSS CDN + カスタムCSSによるスタイリング
-
各ページは
common_layout.htmlのテンプレートに従う - 処理は中断せず、エラーが発生してもログを出力して続行
生成物の確認
生成されたHTMLファイルをブラウザで開くと、ナビゲーション付きのアプリ全体を確認できます。サイドバーまたはヘッダーによるページ間の移動、各ページのレイアウトとコンテンツ、レスポンシブデザインを確認できます。