AgentSkillsCN

starter-project

生成预配置了 Claude Code 代理与技能的入门项目模板。您可以从 SaaS 应用、API 服务、组件库、CLI 工具、电商网站,或浏览器游戏模板中自由选择。

SKILL.md
--- frontmatter
name: starter-project
description: 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.

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:

CategoryTech StackAgents
saasNext.js 14, TypeScript, Tailwind, NextAuth, DrizzleAll
apiNode.js, Express, TypeScript, Vitestexplore/*, plan/architecture-planner, implement/api-developer, implement/test-writer, implement/debugger
componentsReact, TypeScript, Storybook, Vitest, CSS Modulesexplore/pattern-finder, plan/feature-planner, implement/component-builder, implement/test-writer, design/ui-ux-designer
cliNode.js, TypeScript, Commander.js, Vitestexplore/pattern-finder, implement/test-writer, implement/debugger
ecommerceNext.js 14, TypeScript, Stripe, DrizzleAll
gameTypeScript, Phaser.js, Viteexplore/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

bash
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

  1. Create plans/active directory

  2. Invoke /create-plan using the Skill tool with name "getting-started" and template "guide"

  3. 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:

  1. 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]"

  2. 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

  1. Generate base configuration files (package.json, tsconfig.json, etc.) based on the category

  2. 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
  3. 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"

  4. 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

  1. Use the Task tool to invoke test-writer agent: "Create comprehensive tests for [PROJECT_NAME]: API endpoint tests, UI component tests, utility tests"

  2. Invoke /generate-tests using the Skill tool to fill any remaining coverage gaps

  3. 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:

  1. codebase-explorer - verify project structure matches the architecture design
  2. dependency-analyzer - validate all dependencies are correct
  3. pattern-finder - ensure code patterns are consistent

Step 10: Phase 6 - Ship

  1. 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
  2. Invoke /track-progress using the Skill tool to record the generation


Step 11: Display Results

bash
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

CategoryTemplateTech Stack
saasSaaS Web AppNext.js 14, TypeScript, Tailwind, NextAuth, Drizzle
apiAPI ServiceNode.js, Express, TypeScript, Vitest
componentsComponent LibraryReact, TypeScript, Storybook, Vitest, CSS Modules
cliCLI ToolNode.js, TypeScript, Commander.js, Vitest
ecommerceE-Commerce StoreNext.js 14, TypeScript, Stripe, Drizzle
gameBrowser GameTypeScript, 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