はじめに

Team Kit のインストールから最初のモックアップ生成までの手順です。

前提条件

  • Claude Code がインストール済みであること
  • bash シェル環境

インストール

# カレントディレクトリにインストール
curl -fsSL https://raw.githubusercontent.com/tango238/teamkit/main/install.sh | bash -s -- .
# 既存ファイルを確認なしで上書き
curl -fsSL https://raw.githubusercontent.com/tango238/teamkit/main/install.sh | bash -s -- --yes .

# 特定のディレクトリを指定
curl -fsSL https://raw.githubusercontent.com/tango238/teamkit/main/install.sh | bash -s -- /path/to/project
オプション 説明
--yes, -y 既存ファイルを確認なしで上書き
--force, -f 同上

インストールスクリプトは .claude/commands/teamkit/ ディレクトリに全22コマンドファイルをコピーします。

クイックスタート

最短3ステップでモックアップを生成できます。

1. 要件をREADME.mdに記述

your-project/
└── .teamkit/
    └── YourFeature/
        └── README.md

README.mdには、背景・目的・主要アクター・業務概要・要件を記述します。

# 施設管理

## 背景
施設の基本情報、部屋タイプ、部屋の管理は施設運営に不可欠です。

## 目的
- 複数施設の基本情報を一元管理し、効率的な運営を実現する
- 各部屋タイプの特性を管理し、多様な宿泊ニーズに対応する

## 主要アクター
- 施設管理者
- 清掃スタッフ

## 業務概要
施設管理では、施設・部屋タイプ・部屋の登録・更新・削除・検索を行います。

## 要件
### 施設管理者
施設情報、部屋タイプ、部屋情報の登録・更新

2. 仕様書とモックアップを一括生成

/teamkit:generate YourFeature

workflow → usecase → UI → screenflow → mock HTML を自動的に順次実行します。workflow.yml が存在しない場合は自動生成されます。

# マニュアル・受入テスト・スクリーンショットもすべて生成
/teamkit:generate YourFeature --all

生成後、.teamkit/YourFeature/mock/index.html をブラウザで開いてモックアップを確認できます。

ディレクトリ構成

すべての成果物は .teamkit/<feature-name>/ 配下に生成されます。 

.teamkit/YourFeature/
├── README.md            # 要件定義（手動作成）
├── workflow.yml         # ワークフロー定義
├── usecase.yml          # ユースケース（ロバストネス分析）
├── ui.yml               # UI定義（画面・フィールド・アクション）
├── screenflow.md        # 画面遷移図
├── manual.md            # 操作マニュアル（--manual時）
├── acceptance-test.md   # 受入テスト（--test時）
├── status.json          # バージョン管理
├── feedback.md          # フィードバック
├── eventstorming.md     # イベントストーミング図
└── mock/
    ├── index.html       # モックアップ一覧
    ├── screens.yml      # 画面生成状況
    ├── *.html           # 各画面のモックアップ
    └── screenshots/     # 画面スクリーンショット（--capture時）

アプリ全体のモックアップ生成時は .teamkit/app/ 配下にレイアウト・ナビゲーション関連ファイルが生成されます。 

.teamkit/app/
├── README.md            # アプリの概要（手動作成）
├── 0_navigation.yml     # ナビゲーション定義
├── 1_layout.yml         # レイアウト定義
├── 1_pages.yml          # ページ一覧
├── 1_sitemap.yml        # サイトマップ
├── common_layout.html   # 共通レイアウトテンプレート
├── css/custom.css       # カスタムCSS
├── version.json         # バージョン情報
└── *.html               # 各ページのHTML

次のステップ