App Builder

App Builder - Application Building Orchestrator

Analyzes user's requests, determines tech stack, plans structure, and coordinates agents.

🎯 Selective Reading Rule

Read ONLY files relevant to the request! Check the content map, find what you need.

---

📦 Templates (13)

Quick-start scaffolding for new projects. Read the matching template only!

---

🔗 Related Agents

---

Usage Example

User: "Make an Instagram clone with photo sharing and likes"

App Builder Process:
1. Project type: Social Media App
2. Tech stack: Next.js + Prisma + Cloudinary + Clerk
3. Create plan:
   ├─ Database schema (users, posts, likes, follows)
   ├─ API routes (12 endpoints)
   ├─ Pages (feed, profile, upload)
   └─ Components (PostCard, Feed, LikeButton)
4. Coordinate agents
5. Report progress
6. Start preview

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Agent Coordination

How App Builder orchestrates specialist agents.

Agent Pipeline

┌─────────────────────────────────────────────────────────────┐
│                   APP BUILDER (Orchestrator)                 │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                     PROJECT PLANNER                          │
│  • Task breakdown                                            │
│  • Dependency graph                                          │
│  • File structure planning                                   │
│  • Create {task-slug}.md in project root (MANDATORY)             │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│              CHECKPOINT: PLAN VERIFICATION                   │
│  🔴 VERIFY: Does {task-slug}.md exist in project root?       │
│  🔴 If NO → STOP → Create plan file first                    │
│  🔴 If YES → Proceed to specialist agents                    │
└─────────────────────────────────────────────────────────────┘
                              │
          ┌───────────────────┼───────────────────┐
          ▼                   ▼                   ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ DATABASE        │ │ BACKEND         │ │ FRONTEND        │
│ ARCHITECT       │ │ SPECIALIST      │ │ SPECIALIST      │
│                 │ │                 │ │                 │
│ • Schema design │ │ • API routes    │ │ • Components    │
│ • Migrations    │ │ • Controllers   │ │ • Pages         │
│ • Seed data     │ │ • Middleware    │ │ • Styling       │
└─────────────────┘ └─────────────────┘ └─────────────────┘
          │                   │                   │
          └───────────────────┼───────────────────┘
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                 PARALLEL PHASE (Optional)                    │
│  • Security Auditor → Vulnerability check                   │
│  • Test Engineer → Unit tests                               │
│  • Performance Optimizer → Bundle analysis                  │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                     DEVOPS ENGINEER                          │
│  • Environment setup                                         │
│  • Preview deployment                                        │
│  • Health check                                              │
└─────────────────────────────────────────────────────────────┘

Execution Order

🔴 CRITICAL: Phase 1.5 is MANDATORY. No specialist agents proceed without PLAN.md verification.

Feature Building

How to analyze and implement new features.

Feature Analysis

Request: "add payment system"

Analysis:
├── Required Changes:
│   ├── Database: orders, payments tables
│   ├── Backend: /api/checkout, /api/webhooks/stripe
│   ├── Frontend: CheckoutForm, PaymentSuccess
│   └── Config: Stripe API keys
│
├── Dependencies:
│   ├── stripe package
│   └── Existing user authentication
│
└── Estimated Time: 15-20 minutes

Iterative Enhancement Process

1. Analyze existing project
2. Create change plan
3. Present plan to user
4. Get approval
5. Apply changes
6. Test
7. Show preview

Error Handling

Recovery Strategy

1. Detect error
2. Try automatic fix
3. If failed, report to user
4. Suggest alternative
5. Rollback if necessary

Project Type Detection

Analyze user requests to determine project type and template.

Keyword Matrix

Detection Process

1. Tokenize user request
2. Extract keywords
3. Determine project type
4. Detect missing information → forward to conversation-manager
5. Suggest tech stack

Project Scaffolding

Directory structure and core files for new projects.

---

Next.js Full-Stack Structure (2025 Optimized)

project-name/
├── src/
│   ├── app/                        # Routes only (thin layer)
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── globals.css
│   │   ├── (auth)/                 # Route group - auth pages
│   │   │   ├── login/page.tsx
│   │   │   └── register/page.tsx
│   │   ├── (dashboard)/            # Route group - dashboard layout
│   │   │   ├── layout.tsx
│   │   │   └── page.tsx
│   │   └── api/
│   │       └── [resource]/route.ts
│   │
│   ├── features/                   # Feature-based modules
│   │   ├── auth/
│   │   │   ├── components/
│   │   │   ├── hooks/
│   │   │   ├── actions.ts          # Server Actions
│   │   │   ├── queries.ts          # Data fetching
│   │   │   └── types.ts
│   │   ├── products/
│   │   │   ├── components/
│   │   │   ├── actions.ts
│   │   │   └── queries.ts
│   │   └── cart/
│   │       └── ...
│   │
│   ├── shared/                     # Shared utilities
│   │   ├── components/ui/          # Reusable UI components
│   │   ├── lib/                    # Utils, helpers
│   │   └── hooks/                  # Global hooks
│   │
│   └── server/                     # Server-only code
│       ├── db/                     # Database client (Prisma)
│       ├── auth/                   # Auth config
│       └── services/               # External API integrations
│
├── prisma/
│   ├── schema.prisma
│   ├── migrations/
│   └── seed.ts
│
├── public/
├── .env.example
├── .env.local
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── README.md

---

Structure Principles

---

Core Files

---

Path Aliases (tsconfig.json)

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@/features/*": ["./src/features/*"],
      "@/shared/*": ["./src/shared/*"],
      "@/server/*": ["./src/server/*"]
    }
  }
}

---

When to Use What

Tech Stack Selection (2025)

Default and alternative technology choices for web applications.

Default Stack (Web App - 2025)

Frontend:
  framework: Next.js 16 (Stable)
  language: TypeScript 5.7+
  styling: Tailwind CSS v4
  state: React 19 Actions / Server Components
  bundler: Turbopack (Stable for Dev)

Backend:
  runtime: Node.js 23
  framework: Next.js API Routes / Hono (for Edge)
  validation: Zod / TypeBox

Database:
  primary: PostgreSQL
  orm: Prisma / Drizzle
  hosting: Supabase / Neon

Auth:
  provider: Auth.js (v5) / Clerk

Monorepo:
  tool: Turborepo 2.0

Alternative Options

Astro Static Site Template

Tech Stack

---

Directory Structure

project-name/
├── src/
│   ├── components/      # .astro components
│   ├── content/         # MDX content
│   │   ├── blog/
│   │   └── config.ts    # Collection schemas
│   ├── layouts/         # Page layouts
│   ├── pages/           # File-based routing
│   └── styles/
├── public/              # Static assets
├── astro.config.mjs
└── package.json

---

Key Concepts

---

Setup Steps

1. npm create astro@latest {{name}} 2. Add integrations: npx astro add mdx tailwind sitemap 3. Configure astro.config.mjs 4. Create content collections 5. npm run dev

---

Deployment

---

Best Practices

• Use Content Collections for type safety
• Leverage static generation
• Add islands only where needed
• Optimize images with Astro Image

Chrome Extension Template

Tech Stack

---

Directory Structure

project-name/
├── src/
│   ├── popup/           # Extension popup
│   ├── options/         # Options page
│   ├── background/      # Service worker
│   ├── content/         # Content scripts
│   ├── components/
│   ├── hooks/
│   └── lib/
│       ├── storage.ts   # Chrome storage helpers
│       └── messaging.ts # Message passing
├── public/
│   ├── icons/
│   └── manifest.json
└── package.json

---

Manifest V3 Concepts

---

Permissions

---

Setup Steps

1. npm create vite {{name}} -- --template react-ts 2. Add Chrome types: npm install -D @types/chrome 3. Configure Vite for multi-entry 4. Create manifest.json 5. npm run dev (watch mode) 6. Load in Chrome: chrome://extensions → Load unpacked

---

Development Tips

---

Best Practices

• Use type-safe messaging
• Wrap Chrome APIs in promises
• Minimize permissions
• Handle offline gracefully

CLI Tool Template

Tech Stack

---

Directory Structure

project-name/
├── src/
│   ├── index.ts         # Entry point
│   ├── cli.ts           # CLI setup
│   ├── commands/        # Command handlers
│   ├── lib/
│   │   ├── config.ts    # Config loader
│   │   └── logger.ts    # Styled output
│   └── types/
├── bin/
│   └── cli.js           # Executable
└── package.json

---

CLI Design Principles

---

Key Components

---

Setup Steps

1. Create project directory 2. npm init -y 3. Install deps: npm install commander @inquirer/prompts chalk ora cosmiconfig 4. Configure bin in package.json 5. npm link for local testing

---

Publishing

npm login
npm publish

---

Best Practices

• Provide helpful error messages
• Support both interactive and non-interactive modes
• Use consistent output styling
• Validate inputs with Zod
• Exit with proper codes (0 success, 1 error)

Electron Desktop App Template

Tech Stack

---

Directory Structure

project-name/
├── electron/
│   ├── main.ts          # Main process
│   ├── preload.ts       # Preload script
│   └── ipc/             # IPC handlers
├── src/
│   ├── App.tsx
│   ├── components/
│   │   ├── TitleBar.tsx # Custom title bar
│   │   └── ...
│   └── hooks/
├── public/
└── package.json

---

Process Model

---

Key Concepts

---

Setup Steps

1. npm create vite {{name}} -- --template react-ts 2. Install: npm install -D electron electron-builder vite-plugin-electron 3. Create electron/ directory 4. Configure main process 5. npm run electron:dev

---

Build Targets

---

Best Practices

• Use preload script for main/renderer bridge
• Type-safe IPC with typed handlers
• Custom title bar for native feel
• Handle window state (maximize, minimize)
• Auto-updates with electron-updater

Express.js API Template

Tech Stack

---

Directory Structure

project-name/
├── prisma/
│   └── schema.prisma
├── src/
│   ├── app.ts           # Express setup
│   ├── config/          # Environment
│   ├── routes/          # Route handlers
│   ├── controllers/     # Business logic
│   ├── services/        # Data access
│   ├── middleware/
│   │   ├── auth.ts      # JWT verify
│   │   ├── error.ts     # Error handler
│   │   └── validate.ts  # Zod validation
│   ├── schemas/         # Zod schemas
│   └── utils/
└── package.json

---

Middleware Stack

---

API Response Format

---

Setup Steps

1. Create project directory 2. npm init -y 3. Install deps: npm install express prisma zod bcrypt jsonwebtoken 4. Configure Prisma 5. npm run db:push 6. npm run dev

---

Best Practices

• Layer architecture (routes → controllers → services)
• Validate all inputs with Zod
• Centralized error handling
• Environment-based config
• Use Prisma for type-safe DB access

Flutter App Template

Tech Stack

---

Directory Structure

project_name/
├── lib/
│   ├── main.dart
│   ├── app.dart
│   ├── core/
│   │   ├── constants/
│   │   ├── theme/
│   │   ├── router/
│   │   └── utils/
│   ├── features/
│   │   ├── auth/
│   │   │   ├── data/
│   │   │   ├── domain/
│   │   │   └── presentation/
│   │   └── home/
│   ├── shared/
│   │   ├── widgets/
│   │   └── providers/
│   └── services/
│       ├── api/
│       └── storage/
├── test/
└── pubspec.yaml

---

Architecture Layers

---

Key Packages

---

Setup Steps

1. flutter create {{name}} --org com.{{bundle}} 2. Update pubspec.yaml 3. flutter pub get 4. Run code generation: dart run build_runner build 5. flutter run

---

Best Practices

• Feature-first folder structure
• Riverpod for state, React Query pattern for server state
• Freezed for immutable data classes
• Go Router for declarative navigation
• Material 3 theming

Turborepo Monorepo Template

Tech Stack

---

Directory Structure

project-name/
├── apps/
│   ├── web/             # Next.js app
│   ├── api/             # Express API
│   └── docs/            # Documentation
├── packages/
│   ├── ui/              # Shared components
│   ├── config/          # ESLint, TS, Tailwind
│   ├── types/           # Shared types
│   └── utils/           # Shared utilities
├── turbo.json
├── pnpm-workspace.yaml
└── package.json

---

Key Concepts

---

Turbo Pipeline

---

Setup Steps

1. Create root directory 2. pnpm init 3. Create pnpm-workspace.yaml 4. Create turbo.json 5. Add apps and packages 6. pnpm install 7. pnpm dev

---

Common Commands

---

Best Practices

• Shared configs in packages/config
• Shared types in packages/types
• Internal packages with workspace:*
• Use Turbo remote caching for CI

Next.js Full-Stack Template

Tech Stack

---

Directory Structure

project-name/
├── prisma/
│   └── schema.prisma
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── globals.css
│   │   └── api/
│   ├── components/
│   │   └── ui/
│   ├── lib/
│   │   ├── db.ts        # Prisma client
│   │   └── utils.ts
│   └── types/
├── .env.example
└── package.json

---

Key Concepts

---

Environment Variables

---

Setup Steps

1. npx create-next-app {{name}} --typescript --tailwind --app 2. npm install prisma @prisma/client zod 3. npx prisma init 4. Configure schema 5. npm run db:push 6. npm run dev

---

Best Practices

• Server Components by default
• Server Actions for mutations
• Prisma for type-safe DB
• Zod for validation
• Edge runtime where possible

Next.js SaaS Template

Tech Stack

---

Directory Structure

project-name/
├── prisma/
├── src/
│   ├── app/
│   │   ├── (auth)/      # Login, register
│   │   ├── (dashboard)/ # Protected routes
│   │   ├── (marketing)/ # Landing, pricing
│   │   └── api/
│   │       ├── auth/[...nextauth]/
│   │       └── webhooks/stripe/
│   ├── components/
│   │   ├── auth/
│   │   ├── billing/
│   │   └── dashboard/
│   ├── lib/
│   │   ├── auth.ts      # NextAuth config
│   │   ├── stripe.ts    # Stripe client
│   │   └── email.ts     # Resend client
│   └── config/
│       └── subscriptions.ts
└── package.json

---

SaaS Features

---

Database Schema

---

Environment Variables

---

Setup Steps

1. npx create-next-app {{name}} --typescript --tailwind --app 2. Install: npm install next-auth @auth/prisma-adapter stripe resend 3. Setup Stripe products/prices 4. Configure environment 5. npm run db:push 6. npm run stripe:listen (webhooks) 7. npm run dev

---

Best Practices

• Route groups for layout separation
• Stripe webhooks for subscription sync
• NextAuth with Prisma adapter
• Email templates with React Email

Next.js Static Site Template

Tech Stack

---

Directory Structure

project-name/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx      # Landing
│   │   ├── about/
│   │   ├── contact/
│   │   └── blog/
│   ├── components/
│   │   ├── layout/       # Header, Footer
│   │   ├── sections/     # Hero, Features, CTA
│   │   └── ui/
│   └── lib/
├── content/              # Markdown content
├── public/
└── next.config.js

---

Static Export Config

// next.config.js
const nextConfig = {
  output: 'export',
  images: { unoptimized: true },
  trailingSlash: true,
};

---

Landing Page Sections

---

Animation Patterns

---

Setup Steps

1. npx create-next-app {{name}} --typescript --tailwind --app 2. Install: npm install framer-motion lucide-react next-seo 3. Configure static export 4. Create sections 5. npm run dev

---

Deployment

---

Best Practices

• Static export for maximum performance
• Framer Motion for premium animations
• Responsive mobile-first design
• SEO metadata on every page

Nuxt 3 Full-Stack Template

Tech Stack

---

Directory Structure

project-name/
├── prisma/
│   └── schema.prisma
├── server/
│   ├── api/
│   │   └── [resource]/
│   │       └── index.ts
│   └── utils/
│       └── db.ts         # Prisma client
├── composables/
│   └── useAuth.ts
├── stores/
│   └── user.ts           # Pinia store
├── components/
│   └── ui/
├── pages/
│   ├── index.vue
│   └── [...slug].vue
├── layouts/
│   └── default.vue
├── assets/
│   └── css/
│       └── main.css
├── .env.example
├── nuxt.config.ts
└── package.json

---

Key Concepts

---

Environment Variables

---

Setup Steps

1. npx nuxi@latest init {{name}} 2. cd {{name}} 3. npm install @pinia/nuxt @prisma/client prisma zod 4. npm install -D @nuxtjs/tailwindcss 5. Add modules to nuxt.config.ts:

   modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss']

6. npx prisma init 7. Configure schema 8. npx prisma db push 9. npm run dev

---

Best Practices

• Use <script setup> for components
• Composables for reusable logic
• Pinia stores in stores/ folder
• Server routes for API logic
• Auto-import for clean code
• TypeScript for type safety
• See @[skills/vue-expert] for Vue patterns

FastAPI API Template

Tech Stack

---

Directory Structure

project-name/
├── alembic/             # Migrations
├── app/
│   ├── main.py          # FastAPI app
│   ├── config.py        # Settings
│   ├── database.py      # DB connection
│   ├── models/          # SQLAlchemy models
│   ├── schemas/         # Pydantic schemas
│   ├── routers/         # API routes
│   ├── services/        # Business logic
│   ├── dependencies/    # DI
│   └── utils/
├── tests/
├── .env.example
└── requirements.txt

---

Key Concepts

---

API Structure

---

Setup Steps

1. python -m venv venv 2. source venv/bin/activate 3. pip install fastapi uvicorn sqlalchemy alembic pydantic 4. Create .env 5. alembic upgrade head 6. uvicorn app.main:app --reload

---

Best Practices

• Use async everywhere
• Pydantic v2 for validation
• SQLAlchemy 2.0 async sessions
• Alembic for migrations
• pytest-asyncio for tests

React Native App Template

Tech Stack

---

Directory Structure

project-name/
├── app/                 # Expo Router (file-based)
│   ├── _layout.tsx      # Root layout
│   ├── index.tsx        # Home
│   ├── (tabs)/          # Tab navigation
│   └── [id].tsx         # Dynamic route
├── components/
│   ├── ui/              # Reusable
│   └── features/
├── hooks/
├── lib/
│   ├── api.ts
│   └── storage.ts
├── store/
├── constants/
└── app.json

---

Navigation Patterns

---

State Management

---

Key Packages

---

Setup Steps

1. npx create-expo-app {{name}} -t expo-template-blank-typescript 2. npx expo install expo-router react-native-safe-area-context 3. Install state: npm install zustand @tanstack/react-query 4. npx expo start

---

Best Practices

• Expo Router for navigation
• Zustand for local, React Query for server state
• NativeWind for consistent styling
• Expo SecureStore for tokens
• Test on both iOS and Android