Craft - Ship 10x Faster with AI

Learn how to set up your Craft template in less than 10 minutes. Full-stack boilerplate with Next.js 15, tRPC, Prisma, TanStack Query, Zustand, and more.

Prerequisites

Before you begin, make sure you have:

Node.js 20+ installed
pnpm package manager (npm install -g pnpm)
Git for version control
A code editor (VS Code recommended)

1. Purchase & Download Template

Choose your template from the pricing page:

Available Templates:

Complete Bundle ($175) - All 6 templates

• 🚀 Rapid Web ($99) - Ship in 2 days, 1-2 devs

• ⚖️ Balanced Web ($109) - Production-ready, 3-10 devs

• 🏆 Crafted Web ($119) - Enterprise-grade, 10+ devs

• 🚀 Rapid Web + Mobile ($124) - Fast MVP with mobile app

• ⚖️ Balanced Web + Mobile ($139) - Production with mobile

• 🏆 Crafted Web + Mobile ($149) - Enterprise with mobile

After purchase, you'll receive:

✅ Instant download link via email
✅ ZIP file with complete template
✅ Installation guide (README.md)
✅ Environment variable examples

2. Extract Template

# Unzip the downloaded template
unzip rapid-web.zip -d my-saas
# Navigate to your project
cd my-saas

3. Install Dependencies

# Install all dependencies
pnpm install

💡 Pro Tip: This will install all packages for the entire monorepo. Takes ~2-3 minutes.

🤖

MCP Servers Auto-Configuration

During pnpm install, 13 MCP servers are automatically configured for Claude Code integration. This happens via a postinstall script that runs claude mcp add commands.

✅ Auto-configured (11 servers):

crafted-context, crafted-cli, rules-validator, architecture-guard, typescript, vitest, filesystem, github, sequential-thinking, shadcn, chrome-devtools

⚙️ Requires manual setup (2 servers):

git - Needs git init + first commit
supabase - Needs credentials in .env.local

📖 See the included MCP-SETUP.md file in your template for detailed setup instructions.

4. Environment Setup

Copy the example environment file and configure your variables:

cp apps/web/.env.example apps/web/.env.local

Key environment variables you need to set:

DATABASE_URL - Your PostgreSQL connection string (Supabase)
NEXT_PUBLIC_SUPABASE_URL - Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY - Supabase anonymous key
STRIPE_SECRET_KEY - Stripe secret key (for payments)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - Stripe publishable key
RESEND_API_KEY - Resend API key (for emails)

5. Database Setup

# Generate Prisma client
pnpm db:generate
# Push schema to database
pnpm db:push
# (Optional) Seed database with sample data
pnpm db:seed

6. Start Development Server

# Start all apps in development mode
pnpm dev
# Or start specific app
pnpm dev --filter=web

Your app will be running at http://localhost:3000

Project Structure

Your Craft project has the following structure:

my-saas/
├── apps/
│   └── web/              # Next.js application
│       ├── src/
│       │   ├── app/      # App Router pages
│       │   └── trpc/     # tRPC client setup
│       └── package.json
├── packages/
│   ├── api/              # tRPC routers
│   ├── database/         # Prisma schema & client
│   ├── ui/               # Shared UI components
│   └── validators/       # Zod schemas
├── .claude/
│   ├── agents/           # 8 AI agents
│   ├── skills/           # 10 Official Skills
│   └── mcp-servers/      # 14 MCP servers
├── package.json
└── turbo.json            # Turborepo config

7. Start Building with Claude Code 🤖

This is where the magic happens! Open Claude Code and start shipping features instantly.

✨ Your AI-Powered Development Workflow

Open Claude Code in your project directory:

$ claude-code .

Then type /features to see all available AI Skills!

💡

Pro Tip: Just Describe What You Want!

Instead of coding manually, describe your feature in plain English. Claude will generate production-ready code that matches your quality level, with tests and validation.

Example prompts to try:

"Add user profile management with avatar upload"

"Create a blog with categories, tags, and comments"

"Build a subscription plan selector with Stripe checkout"

✨ Included AI Skills (16 Total):

Level Skills (3)

•
/rapidShip fast mode (MVP validation)
•
/balancedPragmatic quality (startups)
•
/craftedEnterprise-grade (scale)

Workflow Skills (4)

•
/featureAdd new feature
•
/bugfixFix bugs
•
/refactorImprove code
•
/securitySecurity audit

Agent Skills (6)

•
/architectDesign architecture
•
/developerGenerate code
•
/testerWrite tests
•
+ 3 more agents...

Utility Skills (3)

•
/validateQuality check
•
/guardArchitecture guard
•
/coverageTest coverage

💡 How to use: Type /features "your feature description" in Claude Code. The orchestrator will automatically call the agent skills in the right order (architect → developer → tester → reviewer).

🚀 Example: Build a Feature in 2 Minutes

Command:

/features "Add subscription management with upgrade/downgrade flows"

🎯 Detected: Balanced level (auto)

🏗️ architect: Designing 3-layer architecture...

👨‍💻 developer: Router + Service + Repository...

🧪 tester: Unit + integration tests (73%)...

✅ validator: SOLID ✅ | guard: Architecture ✅

✅ Production-ready in 2m 14s!

5 files created, 18 tests passing, architecture validated. Ready to deploy!

Learn more in the AI Skills documentation →

💡 Pro Tip

Start with the Rapid quality level to validate your idea quickly. You can seamlessly upgrade to Balanced or Crafted as your product grows.

📧 Need Help?

Email us at contact@getcraft.dev and we'll help you get set up.

Getting Started with Craft