Project Scaffolder Agent

プロジェクトタイプに応じた初期構造を自動生成するエージェント。 VibeCoder が「〇〇を作りたい」と言うだけで、動くプロジェクトが生成されます。

呼び出し方法

Task tool で subagent_type="project-scaffolder" を指定

入力

{
  "project_name": "string",
  "project_type": "web-app" | "api" | "cli" | "library",
  "stack": {
    "frontend": "next" | "vite" | "none",
    "backend": "next-api" | "fastapi" | "express" | "none",
    "database": "supabase" | "prisma" | "none",
    "styling": "tailwind" | "css-modules" | "none"
  },
  "features": ["auth", "database", "api"]
}

出力

{
  "status": "success" | "partial" | "failed",
  "created_files": ["string"],
  "commands_executed": ["string"],
  "next_steps": ["string"]
}

プロジェクトテンプレート

🌐 Web App (Next.js + Supabase)

# 1. プロジェクト作成
npx create-next-app@latest {{PROJECT_NAME}} \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

cd {{PROJECT_NAME}}

# 2. 追加パッケージ
npm install @supabase/supabase-js @supabase/auth-helpers-nextjs
npm install lucide-react date-fns

# 3. 開発ツール
npm install -D prettier eslint-config-prettier

生成されるファイル構造:

{{PROJECT_NAME}}/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/
│   │   ├── ui/
│   │   │   ├── Button.tsx
│   │   │   └── Input.tsx
│   │   └── layout/
│   │       ├── Header.tsx
│   │       └── Footer.tsx
│   ├── lib/
│   │   ├── supabase.ts
│   │   └── utils.ts
│   ├── hooks/
│   │   └── useAuth.ts
│   └── types/
│       └── index.ts
├── .env.local.example
├── .prettierrc
└── README.md

🔌 API (FastAPI)

# 1. ディレクトリ作成
mkdir {{PROJECT_NAME}} && cd {{PROJECT_NAME}}

# 2. 仮想環境
python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate

# 3. パッケージインストール
pip install fastapi uvicorn sqlalchemy alembic python-dotenv
pip install -D pytest pytest-asyncio httpx

# 4. 設定ファイル生成
pip freeze > requirements.txt

生成されるファイル構造:

{{PROJECT_NAME}}/
├── app/
│   ├── __init__.py
│   ├── main.py
│   ├── config.py
│   ├── routers/
│   │   ├── __init__.py
│   │   └── health.py
│   ├── models/
│   │   └── __init__.py
│   └── schemas/
│       └── __init__.py
├── tests/
│   └── test_health.py
├── .env.example
├── requirements.txt
└── README.md

📦 CLI Tool (Python)

mkdir {{PROJECT_NAME}} && cd {{PROJECT_NAME}}
python -m venv .venv
source .venv/bin/activate
pip install click rich

📚 Library (TypeScript)

mkdir {{PROJECT_NAME}} && cd {{PROJECT_NAME}}
npm init -y
npm install -D typescript @types/node vitest
npx tsc --init

自動生成ファイル例

src/lib/supabase.ts (Next.js + Supabase)

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

src/lib/utils.ts

import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

.env.local.example

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# Optional
DATABASE_URL=

処理フロー

Step 1: 入力の検証

プロジェクト名、タイプ、スタックを確認。

Step 2: プロジェクト作成コマンドの実行

テンプレートに応じたコマンドを実行。

Step 3: 追加ファイルの生成

Write ツールを使用してファイルを生成。

Step 4: Git初期化

git init
git add -A
git commit -m "chore: 初期プロジェクト構造"

Step 5: 結果の報告

{
  "status": "success",
  "created_files": [
    "src/lib/supabase.ts",
    "src/lib/utils.ts",
    "src/components/ui/Button.tsx",
    ".env.local.example"
  ],
  "commands_executed": [
    "npx create-next-app@latest...",
    "npm install @supabase/supabase-js..."
  ],
  "next_steps": [
    "1. .env.local を作成し、Supabase の認証情報を設定",
    "2. npm run dev で開発サーバーを起動",
    "3. http://localhost:3000 で動作確認"
  ]
}

VibeCoder 向けの使い方

このエージェントは /plan-with-agent → /work フローで自動的に呼び出されます。直接呼び出す必要はありません。

「ブログを作りたい」→ 計画作成 → 「作って」→ このエージェントが実行

project-scaffolder