Starter Project Generator
Instructions
IMPORTANT: Execute immediately. If the user provided a category argument, start building. If not, ask the user to choose a template using AskUserQuestion - do NOT print a menu and wait.
Parse arguments:
$1 = category: saas, api, components, cli, ecommerce, game
$2 = project name (if not provided, ask the user)
If no category was provided, use AskUserQuestion to ask which template they want:
- SaaS Web App - Full-stack Next.js with auth and dashboard
- API Service - Node.js REST API with testing
- Component Library - React components with Storybook
- CLI Tool - Command-line application
- E-Commerce Store - Next.js store with Stripe integration
- Browser Game - Canvas/Phaser game
Once you have category and name, proceed immediately to Step 1.
Step 1: Set Up Template Configuration
Based on the category, determine tech stack and which agents to copy:
| Category |
Tech Stack |
Agents |
| saas |
Next.js 14, TypeScript, Tailwind, NextAuth, Drizzle |
All |
| api |
Node.js, Express, TypeScript, Vitest |
explore/*, plan/architecture-planner, implement/api-developer, implement/test-writer, implement/debugger |
| components |
React, TypeScript, Storybook, Vitest, CSS Modules |
explore/pattern-finder, plan/feature-planner, implement/component-builder, implement/test-writer, design/ui-ux-designer |
| cli |
Node.js, TypeScript, Commander.js, Vitest |
explore/pattern-finder, implement/test-writer, implement/debugger |
| ecommerce |
Next.js 14, TypeScript, Stripe, Drizzle |
All |
| game |
TypeScript, Phaser.js, Vite |
explore/codebase-explorer, implement/component-builder, implement/debugger, design/ui-ux-designer |
Step 2: Select CLAUDE.md Template
Map category to template file:
- saas/ecommerce →
templates/claude-md/nextjs-app.md
- api →
templates/claude-md/api-service.md
- components →
templates/claude-md/node-library.md
- cli →
templates/claude-md/cli-tool.md
- game →
templates/claude-md/game-browser.md
Step 3: Create Project Directory
PROJECT_NAME=$(echo "$PROJECT_NAME" | tr '[:upper:]' '[:lower:]' | tr '_' '-' | tr ' ' '-')
TARGET_DIR="../$PROJECT_NAME"
if [ -d "$TARGET_DIR" ]; then
echo "❌ Directory already exists: $TARGET_DIR"
exit 1
fi
mkdir -p "$TARGET_DIR"
cd "$TARGET_DIR" || exit 1
git init -q
echo "✓ Created project directory and initialized git"
Step 4: Copy Agents and Skills
Copy agents from ~/.claude/agents/ to .claude/agents/ based on the agent list for this category (from Step 1).
Copy these workflow skills from ~/.claude/skills/ to .claude/skills/:
- Core:
ship, verify-work, organize-commits, track-progress
- Development:
create-plan, plan-status, generate-tests, performance-check
- Git:
worktree-create, worktree-sync, worktree-cleanup
Step 5: Phase 1 - Setup & Planning
Create plans/active directory
Invoke /create-plan using the Skill tool with name "getting-started" and template "guide"
Use the Task tool to invoke architecture-planner agent: "Design a [TEMPLATE_NAME] project called [PROJECT_NAME] with tech stack: [TECH_STACK]. Include: project structure, data models (if applicable), API endpoints, component hierarchy"
Step 6: Phase 2 - Design
Invoke both agents in parallel using the Task tool in a single message:
ui-ux-designer - "Create a design system for [PROJECT_NAME] ([TEMPLATE_NAME]) with: professional color palette (not AI-generic), typography scale, spacing system, component designs for Button/Input/Card, layout structure appropriate for [TEMPLATE_NAME]"
feature-planner - "Plan the initial features for [PROJECT_NAME] ([TEMPLATE_NAME]). Break down into small tasks for the getting-started plan. Map each task to the appropriate agent"
Step 7: Phase 3 - Implementation
Generate base configuration files (package.json, tsconfig.json, etc.) based on the category
Create CLAUDE.md from the template selected in Step 2:
- Copy template, replace placeholders ([Project Name], etc.) with actual values
- Fill in tech stack, update project structure, add category-specific patterns
- Follow quality standards from
docs/best-practices/claude-md-authoring.md
Use the Task tool to invoke api-developer agent: "Create initial API endpoints for [PROJECT_NAME]: health check at /api/health, auth endpoints (if applicable), one CRUD resource, include Zod validation and error handling"
Use the Task tool to invoke component-builder agent: "Build UI components for [PROJECT_NAME]: apply the design system, include TypeScript props, add accessibility features, create loading/error states, build Button/Input/Card and layout components"
Step 8: Phase 4 - Testing & Quality
Use the Task tool to invoke test-writer agent: "Create comprehensive tests for [PROJECT_NAME]: API endpoint tests, UI component tests, utility tests"
Invoke /generate-tests using the Skill tool to fill any remaining coverage gaps
Invoke both in parallel using the Skill tool in a single message:
/verify-work - validate code quality and security
/performance-check - identify performance issues
Fix any blocking issues found.
Step 9: Phase 5 - Verification
Invoke three agents in parallel using the Task tool in a single message:
- codebase-explorer - verify project structure matches the architecture design
- dependency-analyzer - validate all dependencies are correct
- pattern-finder - ensure code patterns are consistent
Step 10: Phase 6 - Ship
Invoke /organize-commits using the Skill tool to create logical commit history:
chore: initial project setup
feat(db): add database schema (if applicable)
feat(api): add API endpoints
feat(ui): add design system and components
test: add comprehensive test coverage
docs: add CLAUDE.md and README
Invoke /track-progress using the Skill tool to record the generation
Step 11: Display Results
echo "================================================================"
echo "✅ Successfully created [TEMPLATE_NAME]: [PROJECT_NAME]"
echo "================================================================"
echo ""
echo "📁 Location: $TARGET_DIR"
echo "📋 Getting-started plan: plans/active/getting-started/plan.md"
echo ""
echo "🎯 Agents used: architecture-planner, ui-ux-designer, api-developer,"
echo " component-builder, test-writer, codebase-explorer, dependency-analyzer,"
echo " pattern-finder, feature-planner"
echo ""
echo "Next steps:"
echo " 1. cd ../$PROJECT_NAME"
echo " 2. npm install"
echo " 3. npm run dev"
echo ""
echo "💡 Commands:"
echo " /plan-status - View your getting-started plan"
echo " /worktree-create - Parallel feature development"
echo " /ship - End-of-session workflow"
Template Reference
| Category |
Template |
Tech Stack |
| saas |
SaaS Web App |
Next.js 14, TypeScript, Tailwind, NextAuth, Drizzle |
| api |
API Service |
Node.js, Express, TypeScript, Vitest |
| components |
Component Library |
React, TypeScript, Storybook, Vitest, CSS Modules |
| cli |
CLI Tool |
Node.js, TypeScript, Commander.js, Vitest |
| ecommerce |
E-Commerce Store |
Next.js 14, TypeScript, Stripe, Drizzle |
| game |
Browser Game |
TypeScript, Phaser.js, Vite |
What Gets Created
All projects include:
- CLAUDE.md - Generated from template following best practices
- .claude/agents/ - Relevant agents for the project type
- .claude/skills/ - Development workflow skills
- plans/active/getting-started/ - Initial development plan
- README.md - Setup and development instructions
- Git repository - Initialized with logical commit history
Tips
- Choose the right template: Match your project type to get relevant agents
- Review the plan: Each template includes suggested first features
- Explore the agents: Check
.claude/agents/ to see what's available
- Use the skills: Workflow skills help maintain code quality
- Customize freely: The generated project is yours to modify
1---2name: starter-project3description: Generate starter projects pre-configured with Claude Code agents and skills. Choose from SaaS app, API service, component library, CLI tool, e-commerce, or browser game templates.4---5
6# Starter Project Generator
7
8## Instructions
9
10**IMPORTANT: Execute immediately. If the user provided a category argument, start building. If not, ask the user to choose a template using AskUserQuestion - do NOT print a menu and wait.**
11
12Parse arguments:
13- `$1` = category: `saas`, `api`, `components`, `cli`, `ecommerce`, `game`
14- `$2` = project name (if not provided, ask the user)
15
16If no category was provided, use AskUserQuestion to ask which template they want:
17- **SaaS Web App** - Full-stack Next.js with auth and dashboard
18- **API Service** - Node.js REST API with testing
19- **Component Library** - React components with Storybook
20- **CLI Tool** - Command-line application
21- **E-Commerce Store** - Next.js store with Stripe integration
22- **Browser Game** - Canvas/Phaser game
23
24Once you have category and name, proceed immediately to Step 1.
25
26---
27
28### Step 1: Set Up Template Configuration
29
30Based on the category, determine tech stack and which agents to copy:
31
32| Category | Tech Stack | Agents |
33|----------|-----------|--------|
34| saas | Next.js 14, TypeScript, Tailwind, NextAuth, Drizzle | All |
35| api | Node.js, Express, TypeScript, Vitest | explore/*, plan/architecture-planner, implement/api-developer, implement/test-writer, implement/debugger |
36| components | React, TypeScript, Storybook, Vitest, CSS Modules | explore/pattern-finder, plan/feature-planner, implement/component-builder, implement/test-writer, design/ui-ux-designer |
37| cli | Node.js, TypeScript, Commander.js, Vitest | explore/pattern-finder, implement/test-writer, implement/debugger |
38| ecommerce | Next.js 14, TypeScript, Stripe, Drizzle | All |
39| game | TypeScript, Phaser.js, Vite | explore/codebase-explorer, implement/component-builder, implement/debugger, design/ui-ux-designer |
40
41---
42
43### Step 2: Select CLAUDE.md Template
44
45Map category to template file:
46- saas/ecommerce → `templates/claude-md/nextjs-app.md`
47- api → `templates/claude-md/api-service.md`
48- components → `templates/claude-md/node-library.md`
49- cli → `templates/claude-md/cli-tool.md`
50- game → `templates/claude-md/game-browser.md`
51
52---
53
54### Step 3: Create Project Directory
55
56```bash
57PROJECT_NAME=$(echo "$PROJECT_NAME" | tr '[:upper:]' '[:lower:]' | tr '_' '-' | tr ' ' '-')
58TARGET_DIR="../$PROJECT_NAME"
59
60if [ -d "$TARGET_DIR" ]; then
61 echo "❌ Directory already exists: $TARGET_DIR"
62 exit 1
63fi
64
65mkdir -p "$TARGET_DIR"
66cd "$TARGET_DIR" || exit 1
67git init -q
68echo "✓ Created project directory and initialized git"
69```
70
71---
72
73### Step 4: Copy Agents and Skills
74
75Copy agents from `~/.claude/agents/` to `.claude/agents/` based on the agent list for this category (from Step 1).
76
77Copy these workflow skills from `~/.claude/skills/` to `.claude/skills/`:
78- Core: `ship`, `verify-work`, `organize-commits`, `track-progress`
79- Development: `create-plan`, `plan-status`, `generate-tests`, `performance-check`
80- Git: `worktree-create`, `worktree-sync`, `worktree-cleanup`
81
82---
83
84### Step 5: Phase 1 - Setup & Planning
85
861. Create `plans/active` directory
87
882. **Invoke `/create-plan`** using the Skill tool with name "getting-started" and template "guide"
89
903. Use the Task tool to invoke **architecture-planner** agent: "Design a [TEMPLATE_NAME] project called [PROJECT_NAME] with tech stack: [TECH_STACK]. Include: project structure, data models (if applicable), API endpoints, component hierarchy"
91
92---
93
94### Step 6: Phase 2 - Design
95
96**Invoke both agents in parallel** using the Task tool in a single message:
97
981. **ui-ux-designer** - "Create a design system for [PROJECT_NAME] ([TEMPLATE_NAME]) with: professional color palette (not AI-generic), typography scale, spacing system, component designs for Button/Input/Card, layout structure appropriate for [TEMPLATE_NAME]"
99
1002. **feature-planner** - "Plan the initial features for [PROJECT_NAME] ([TEMPLATE_NAME]). Break down into small tasks for the getting-started plan. Map each task to the appropriate agent"
101
102---
103
104### Step 7: Phase 3 - Implementation
105
1061. Generate base configuration files (package.json, tsconfig.json, etc.) based on the category
107
1082. Create CLAUDE.md from the template selected in Step 2:
109 - Copy template, replace placeholders ([Project Name], etc.) with actual values
110 - Fill in tech stack, update project structure, add category-specific patterns
111 - Follow quality standards from `docs/best-practices/claude-md-authoring.md`
112
1133. Use the Task tool to invoke **api-developer** agent: "Create initial API endpoints for [PROJECT_NAME]: health check at /api/health, auth endpoints (if applicable), one CRUD resource, include Zod validation and error handling"
114
1154. Use the Task tool to invoke **component-builder** agent: "Build UI components for [PROJECT_NAME]: apply the design system, include TypeScript props, add accessibility features, create loading/error states, build Button/Input/Card and layout components"
116
117---
118
119### Step 8: Phase 4 - Testing & Quality
120
1211. Use the Task tool to invoke **test-writer** agent: "Create comprehensive tests for [PROJECT_NAME]: API endpoint tests, UI component tests, utility tests"
122
1232. **Invoke `/generate-tests`** using the Skill tool to fill any remaining coverage gaps
124
1253. **Invoke both in parallel** using the Skill tool in a single message:
126 - `/verify-work` - validate code quality and security
127 - `/performance-check` - identify performance issues
128
129Fix any blocking issues found.
130
131---
132
133### Step 9: Phase 5 - Verification
134
135**Invoke three agents in parallel** using the Task tool in a single message:
136
1371. **codebase-explorer** - verify project structure matches the architecture design
1382. **dependency-analyzer** - validate all dependencies are correct
1393. **pattern-finder** - ensure code patterns are consistent
140
141---
142
143### Step 10: Phase 6 - Ship
144
1451. **Invoke `/organize-commits`** using the Skill tool to create logical commit history:
146 - `chore: initial project setup`
147 - `feat(db): add database schema` (if applicable)
148 - `feat(api): add API endpoints`
149 - `feat(ui): add design system and components`
150 - `test: add comprehensive test coverage`
151 - `docs: add CLAUDE.md and README`
152
1532. **Invoke `/track-progress`** using the Skill tool to record the generation
154
155---
156
157### Step 11: Display Results
158
159```bash
160echo "================================================================"
161echo "✅ Successfully created [TEMPLATE_NAME]: [PROJECT_NAME]"
162echo "================================================================"
163echo ""
164echo "📁 Location: $TARGET_DIR"
165echo "📋 Getting-started plan: plans/active/getting-started/plan.md"
166echo ""
167echo "🎯 Agents used: architecture-planner, ui-ux-designer, api-developer,"
168echo " component-builder, test-writer, codebase-explorer, dependency-analyzer,"
169echo " pattern-finder, feature-planner"
170echo ""
171echo "Next steps:"
172echo " 1. cd ../$PROJECT_NAME"
173echo " 2. npm install"
174echo " 3. npm run dev"
175echo ""
176echo "💡 Commands:"
177echo " /plan-status - View your getting-started plan"
178echo " /worktree-create - Parallel feature development"
179echo " /ship - End-of-session workflow"
180```
181
182---
183
184## Template Reference
185
186| Category | Template | Tech Stack |
187|----------|----------|-----------|
188| saas | SaaS Web App | Next.js 14, TypeScript, Tailwind, NextAuth, Drizzle |
189| api | API Service | Node.js, Express, TypeScript, Vitest |
190| components | Component Library | React, TypeScript, Storybook, Vitest, CSS Modules |
191| cli | CLI Tool | Node.js, TypeScript, Commander.js, Vitest |
192| ecommerce | E-Commerce Store | Next.js 14, TypeScript, Stripe, Drizzle |
193| game | Browser Game | TypeScript, Phaser.js, Vite |
194
195## What Gets Created
196
197All projects include:
198- **CLAUDE.md** - Generated from template following best practices
199- **.claude/agents/** - Relevant agents for the project type
200- **.claude/skills/** - Development workflow skills
201- **plans/active/getting-started/** - Initial development plan
202- **README.md** - Setup and development instructions
203- **Git repository** - Initialized with logical commit history
204
205## Tips
206
207- **Choose the right template**: Match your project type to get relevant agents
208- **Review the plan**: Each template includes suggested first features
209- **Explore the agents**: Check `.claude/agents/` to see what's available
210- **Use the skills**: Workflow skills help maintain code quality
211- **Customize freely**: The generated project is yours to modify