create-claude-webapp

v1.0.3

Published

3 months ago

TypeScript boilerplate with skills and sub-agents for Claude Code. Prevents context exhaustion through role-based task splitting.

AI Coding Project Boilerplate 🤖

🔱 This is an opinionated version of shinpr/ai-coding-project-boilerplate
🛠️ Tech Stack: TypeScript · Supabase · Vercel · Stack Auth

⚡ This boilerplate is for developers who want to:

Build production-ready TypeScript projects faster with AI
Avoid context exhaustion in long AI coding sessions
Standardize team workflows with specialized AI agents

📖 Table of Contents

⚡ Quick Start (3 Steps)

# 1. Create your project (30 seconds)
npx create-claude-webapp my-project

# 2. Install dependencies (automatic)
cd my-project && npm install

# 3. Launch Claude Code and configure
claude                    # Launch Claude Code
/project-inject          # Configure project context
/implement <your feature> # Start building!

💡 First time? Check the Quick Start Guide for detailed setup instructions

🚀 Why Sub Agents?

Traditional AI coding struggles with:

❌ Losing context in long sessions
❌ Declining code quality over time
❌ Frequent session restarts for large tasks

Sub agents solve this by:

✅ Splitting work into specialized roles (design, implementation, review)
✅ Keeping context fresh and quality consistent
✅ Handling large projects without degradation

Each agent focuses on one thing and does it well. No context exhaustion, no quality drop.

👉 Learn more about Sub Agents (Anthropic docs)

🎨 Skills System

This boilerplate provides the principles used in agentic implementation workflows as skills, making them available for reference in everyday tasks as needed.

Applied Skills

| Skill | Purpose | |-------|---------| | coding-standards | Universal coding principles, anti-patterns, debugging | | typescript-rules | TypeScript type safety, async patterns, refactoring | | typescript-testing | Vitest, TDD, coverage requirements | | documentation-criteria | PRD, ADR, Design Doc standards | | technical-spec | Architecture, environment, build commands | | implementation-approach | Strategy patterns, task decomposition | | integration-e2e-testing | Integration/E2E test design, ROI-based selection | | project-context | Project-specific configuration (customizable) | | supabase | Database design, RLS policies, type generation | | supabase-edge-functions | Edge Functions with Deno runtime | | supabase-local | Local development, CLI, migrations | | supabase-testing | Testing Supabase with Vitest | | stack-auth | Authentication flows, MCP server integration | | vercel-deployment | Vercel config, environment variables | | vercel-edge | Edge runtime, middleware patterns | | fullstack-integration | Cross-service integration patterns | | subagents-orchestration-guide | Subagent coordination and distribution | | task-analyzer | Task essence analysis, skill selection | | interview | Technical interview & spec generation |

Frontend-specific skills are also available under frontend/ (e.g., frontend/typescript-rules).

👉 Learn how Skills work (Claude Code docs)

🎯 Real-World Results

⏱️ Time Comparison

Without this boilerplate: ~1 week for setup + infrastructure
With this boilerplate: ~2 days to production-ready application

📚 Documentation & Guides

Quick Start Guide - Get running in 5 minutes
Use Cases & Commands - Daily workflow reference
Rule Editing Guide - Customize for your project

📝 Slash Commands

Essential commands for Claude Code:

| Command | Purpose | When to Use | |---------|---------|-------------| | /implement | End-to-end feature development | New features (Backend) | | /task | Single task with rule precision | Bug fixes, small changes | | /design | Create design docs only | Architecture planning (Backend) | | /plan | Create work plan from design | After design approval (Backend) | | /build | Execute from existing plan | Resume work (Backend) | | /review | Check code compliance | Post-implementation (Backend) | | /front-design | Create frontend design docs | React/Vite architecture planning | | /front-plan | Create frontend work plan | After frontend design approval | | /front-build | Execute frontend implementation | React component development | | /front-review | Check frontend code compliance | Post-implementation (Frontend) | | /diagnose | Root cause analysis workflow | Debugging, troubleshooting | | /reverse-engineer | Generate PRD/Design Docs from code | Legacy system documentation (Backend) | | /front-reverse-design | Generate frontend Design Docs | Existing frontend code documentation | | /add-integration-tests | Add integration/E2E tests | When Design Doc exists but tests missing | | /setup-supabase | Initialize Supabase in project | New project with Supabase | | /setup-vercel | Initialize Vercel configuration | Deploying to Vercel | | /setup-auth | Initialize Stack-auth integration | Adding authentication | | /deploy | Orchestrate full deployment | Production deployment | | /db-migrate | Create/run database migrations | Schema changes | | /local-dev | Start local development environment | Local development | | /refine-skill | Implement skill change requests | Customizing skills | | /sync-skills | Synchronize skill metadata | After skill edits |

Full command reference →

🤖 Claude Code Workflow

graph LR
    A[Requirements] --> B[Scale Detection]
    B -->|Small| C[Direct Implementation]
    B -->|Medium| D[Design → Implementation]
    B -->|Large| E[PRD → Design → Implementation]

    C --> F[Quality Check → Commit]
    D --> F
    E --> F

Reverse Engineering Workflow

Generate PRD and Design Docs from existing code:

graph TB
    subgraph Phase1[Phase 1: PRD Generation]
        CMD["/reverse-engineer"] --> SD1[scope-discoverer]
        SD1 --> PRD[prd-creator]
        PRD --> CV1[code-verifier]
        CV1 --> DR1[document-reviewer]
    end

    subgraph Phase2[Phase 2: Design Doc Generation]
        SD2[scope-discoverer] --> DD[technical-designer]
        DD --> CV2[code-verifier]
        CV2 --> DR2[document-reviewer]
        DR2 --> DONE[Complete]
    end

    DR1 --> |All PRDs Approved| SD2

How It Works

Requirement Analysis: /implement command analyzes task scale
Document Generation: Creates necessary docs (PRD, Design Doc, Work Plan)
Task Execution: Specialized agents handle each phase
Quality Assurance: Automatic testing, type checking, and fixes
Commit & Continue: Clean commits for each completed task

📂 Project Structure

claude-boilerplate-4-web/
├── .claude/               # AI agent configurations
│   ├── agents/           # Specialized sub-agent definitions
│   ├── commands/         # Slash command definitions
│   └── skills/           # Skills for automatic context loading
│       ├── coding-standards/       # Universal coding principles
│       ├── typescript-rules/       # TypeScript type safety
│       ├── typescript-testing/     # Vitest, TDD standards
│       ├── documentation-criteria/ # PRD, ADR, Design Doc standards
│       ├── technical-spec/         # Architecture, build commands
│       ├── implementation-approach/# Strategy patterns
│       ├── integration-e2e-testing/# E2E test design
│       ├── project-context/        # Project-specific config
│       ├── supabase/               # Supabase database design
│       ├── supabase-edge-functions/# Edge Functions (Deno)
│       ├── supabase-local/         # Local development
│       ├── supabase-testing/       # Testing Supabase
│       ├── stack-auth/             # Authentication flows
│       ├── vercel-deployment/      # Vercel config
│       ├── vercel-edge/            # Edge runtime
│       ├── fullstack-integration/  # Cross-service patterns
│       ├── subagents-orchestration-guide/
│       ├── task-analyzer/          # Task analysis
│       ├── interview/              # Technical interviews
│       └── frontend/               # Frontend-specific skills
├── docs/
│   ├── guides/           # User documentation
│   ├── adr/              # Architecture decisions
│   ├── design/           # Design documents
│   └── prd/              # Product requirements
├── src/                  # Your source code
├── scripts/              # Utility scripts
└── CLAUDE.md             # Claude Code configuration

🔧 Package Manager Configuration

This boilerplate uses npm by default, but you can switch to your preferred package manager like bun or pnpm.

There are two environment-dependent settings in package.json:

packageManager: The package manager and version to use
scripts: The execution commands for each script

When you change these, Claude Code will recognize them and execute with the appropriate commands.

Switching to bun

{
  "packageManager": "[email protected]",
  "scripts": {
    "build": "bun run tsc && tsc-alias",
    "dev": "bun run src/index.ts",
    "test": "bun test",
    "check": "bunx @biomejs/biome check src",
    "check:all": "bun run check && bun run lint && bun run format:check && bun run check:unused && bun run check:deps && bun run build && bun test"
  }
}

The above are representative examples. The following scripts are referenced in rules and sub-agent definitions. Update them as needed:

build, build:frontend, dev, preview, type-check, test, test:coverage, test:coverage:fresh, test:safe, cleanup:processes, check, check:fix, check:code, check:unused, check:deps, check:all, format, format:check, lint, lint:fix

🤔 FAQ

Q: How do sub agents work?
A: Just use /implement or /task. The right agents activate automatically.

Q: What if there are errors?
A: quality-fixer auto-fixes most issues. If not, it provides clear instructions.

Q: Can I customize for my project?
A: Yes! Run /project-inject to configure project-specific context.

Q: What's the typical workflow?
A: /project-inject (once) → /implement (features) → auto quality checks → commit

Q: How is this different from Copilot/Cursor?
A: Those help write code. This manages entire development lifecycle with specialized agents.

🤖 Complete Sub Agents Roster

| Agent | Specialization | Activation | |-------|---------------|------------| | requirement-analyzer | Scale assessment | Start of /implement | | prd-creator | PRD and business requirements | Large features | | technical-designer | Design documentation | Medium/large features | | technical-designer-frontend | Frontend design docs | React architecture planning | | document-reviewer | Document quality check | After document creation | | design-sync | Design Doc consistency | After Design Doc creation | | acceptance-test-generator | Test skeleton from ACs | After design approval | | work-planner | Task breakdown | After design approval | | task-decomposer | Single-commit task splitting | After work plan creation | | rule-advisor | Optimal ruleset selection | Before any implementation | | task-executor | Backend implementation | During build phase | | task-executor-frontend | React implementation | Frontend build phase | | quality-fixer | Backend automated fixes | On any quality issue | | quality-fixer-frontend | Frontend automated fixes | On React quality issues | | code-reviewer | Compliance check | /review command | | integration-test-reviewer | Test implementation quality | After test implementation | | investigator | Problem investigation | /diagnose Step 1 | | verifier | Investigation verification | /diagnose Step 3 | | solver | Solution derivation | /diagnose Step 4 | | scope-discoverer | PRD/Design Doc scope discovery | /reverse-engineer Step 1 | | code-verifier | Document-code consistency | /reverse-engineer verification | | supabase-migration-generator | Type-safe migrations | /db-migrate command | | rls-policy-designer | Row Level Security design | Supabase security setup | | auth-flow-designer | Stack-auth flows | /setup-auth command | | deployment-executor | Vercel deployments | /deploy command | | environment-validator | Env config validation | Before deployment |

Full agent list →

📄 License

MIT License - Free to use, modify, and distribute

🎯 About This Project

The AI Coding Project Boilerplate is engineered to maximize AI coding productivity while maintaining human-level code quality. By leveraging specialized sub agents and context engineering, it enables teams to build production-ready TypeScript applications at unprecedented speed.

Happy Coding with Claude Code! 🤖✨