/project スキル

機能名を指定すると、要件定義から実装・テスト・デプロイまで6フェーズで自動実行します。

使用方法

/project ユーザー認証
/project 商品検索機能
/project ダッシュボード

実行フロー

[1/6] 要件定義   (Claude)  → docs/requirements/{feature}.md
[2/6] 設計       (Claude)  → docs/specs/{feature}.md, docs/api/{feature}.yaml
[3/6] 実装       (Codex)   → src/**/*
[4/6] テスト     (Codex)   → tests/**/*
[5/6] レビュー   (Claude)  → docs/reviews/{feature}.md
[6/6] デプロイ   (Claude)  → 最終確認

フェーズ詳細

Phase 1: 要件定義（Claude）

以下のテンプレートで要件定義書を生成:

# 要件定義: {機能名}

## ユーザーストーリー

AS A {ユーザー種別}
I WANT TO {やりたいこと}
SO THAT {達成したい目的}

## 受入条件

### 機能要件
- [ ] {条件1}
- [ ] {条件2}
- [ ] {条件3}

### 非機能要件
- パフォーマンス: {要件}
- セキュリティ: {要件}
- アクセシビリティ: {要件}

## 制約事項
- フレームワーク: {使用技術}
- データ永続化: {方式}

出力先: docs/requirements/{feature}.md 承認: ユーザーに確認 → Y で次へ、reject {理由} で再生成

Phase 2: 設計（Claude）

#### 画面設計

# 画面設計: {画面名}

## 概要
{画面の目的と概要}

## コンポーネント構成
| コンポーネント | 種類 | 説明 |
|--------------|------|------|
| {名前} | {種類} | {説明} |

## 状態遷移
| 状態 | トリガー | 遷移先 |
|------|---------|--------|
| {状態} | {操作} | {次の状態} |

## インタラクション
- {操作}: {動作}

#### API設計（OpenAPI形式）

openapi: 3.0.0
info:
  title: {機能名} API
  version: 1.0.0
paths:
  /{endpoint}:
    post:
      summary: {概要}
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                {field}:
                  type: {type}
      responses:
        '200':
          description: 成功

出力先: docs/specs/{feature}.md, docs/api/{feature}.yaml 承認: ユーザーに確認

Phase 3: 実装（Codex）

設計書を基にCodexで実装を委譲:

# Codexに委譲
codex exec "
以下の設計書を読み込み、実装してください:
- docs/requirements/{feature}.md
- docs/specs/{feature}.md
- docs/api/{feature}.yaml

実装要件:
- Next.js App Router
- TypeScript
- Tailwind CSS
- 既存のコードスタイルに従う
" --full-auto

出力先: src/ 配下 自動実行: 承認不要（full-auto）

Phase 4: テスト（Codex）

# Codexに委譲
codex exec "
実装したコードに対してテストを生成してください:
- E2Eテスト（Playwright）
- 受入条件を全てカバー
" --full-auto

出力先: tests/{feature}.spec.ts 自動実行: 承認不要

Phase 5: レビュー（Claude）

実装コードを設計書と照合し、レビュー:

# コードレビュー: {機能名}

## サマリー
- 受入条件: {N}/{M} クリア
- テストカバレッジ: {X}%
- 改善提案: {N}件

## チェック結果

### 受入条件
- [x] {条件1}
- [x] {条件2}
- [ ] {条件3} → {理由}

### セキュリティ
- {チェック項目}: {結果}

### 改善提案
1. {提案1}
2. {提案2}

出力先: docs/reviews/{feature}.md

Phase 6: デプロイ（Claude）

レビュー結果を確認し、デプロイ判断:

レビュー結果:
  ✅ 受入条件クリア
  ✅ テストパス
  ⚠️ 軽微な改善提案あり（デプロイに影響なし）

本番にデプロイしますか？ [Y/n]

デプロイ承認後:

# Vercelデプロイ
vercel --prod

中断・再開

# 進捗確認
/status

# 特定フェーズから再開
/project {機能名} --from=3

# フェーズスキップ
/project {機能名} --skip=1,2

出力例

> /project ユーザー認証

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🚀 プロジェクト開始: ユーザー認証
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[1/6] 要件定義を生成中... (Claude)
      → docs/requirements/auth.md

📄 要件定義:
───────────────────────────────
# 要件定義: ユーザー認証

## ユーザーストーリー
AS A 一般ユーザー
I WANT TO アカウントでログインしたい
SO THAT 個人データにアクセスできる
...
───────────────────────────────

承認しますか？ [Y/n/reject 理由] > Y
✓ 要件定義を承認しました

[2/6] 設計を生成中... (Claude)
      → docs/specs/auth.md
      → docs/api/auth.yaml
...

[3/6] 実装中... (Codex - full-auto) ★
      → src/app/login/page.tsx
      → src/app/api/auth/login/route.ts
      → src/lib/auth.ts

[4/6] テスト生成中... (Codex)
      → tests/auth.spec.ts

[5/6] レビュー中... (Claude)
      ✓ 受入条件: 5/5 クリア
      ✓ テスト: 6 passed
      ⚠️ 改善提案: 2件

[6/6] デプロイ準備完了
      本番にデプロイしますか？ [Y/n] > Y

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ デプロイ完了！
   URL: https://my-app.vercel.app
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━