Skip to main content

​
Overview

The app-builder skill is the main orchestration skill for building complete applications. It analyzes user requests, determines project type, selects appropriate tech stack, plans structure, and coordinates specialist agents to build the application.

​
What This Skill Provides

  • Project type detection: Keyword matrix to classify project requests
  • Tech stack selection: 2026 default stacks and alternatives
  • Agent coordination: Pipeline for orchestrating specialist agents
  • Project scaffolding: Directory structure and core files
  • Feature building: Feature analysis and implementation
  • 13 project templates: Quick-start scaffolding for common project types

​
Selective Reading Rule

Read ONLY files relevant to the request!
FileDescriptionWhen to Read
project-detection.mdKeyword matrix, project type detectionStarting new project
tech-stack.md2026 default stack, alternativesChoosing technologies
agent-coordination.mdAgent pipeline, execution orderCoordinating multi-agent work
scaffolding.mdDirectory structure, core filesCreating project structure
feature-building.mdFeature analysis, error handlingAdding features to existing project
templates/SKILL.mdProject templatesScaffolding new project

​
Project Templates

The skill includes 13 ready-to-use templates:
TemplateTech StackUse Case
nextjs-fullstackNext.js + PrismaFull-stack web app
nextjs-saasNext.js + StripeSaaS product
nextjs-staticNext.js + FramerLanding page
nuxt-appNuxt 3 + PiniaVue full-stack app
express-apiExpress + JWTREST API
python-fastapiFastAPIPython API
react-native-appExpo + ZustandMobile app
flutter-appFlutter + RiverpodCross-platform mobile
electron-desktopElectron + ReactDesktop app
chrome-extensionChrome MV3Browser extension
cli-toolNode.js + CommanderCLI app
monorepo-turborepoTurborepo + pnpmMonorepo

​
Agent Coordination Pipeline

App Builder (Orchestrator)
    ↓
Project Planner (Task breakdown)
    ↓
Plan Verification Checkpoint
    ↓
┌──────────────┬────────────────┬─────────────────┐
↓              ↓                ↓                 ↓
Database    Backend         Frontend         Mobile
Architect   Specialist      Specialist       Developer
    └──────────┴────────────────┴─────────────────┘
                    ↓
        Parallel Phase (Optional)
        ├─ Security Auditor
        ├─ Test Engineer
        └─ Performance Optimizer
                    ↓
            DevOps Engineer

​
Execution Phases

PhaseAgent(s)Parallel?Checkpoint
0Socratic GateNoAsk 3 questions
1Project PlannerNoPLAN.md created
1.5PLAN VERIFICATIONNoFile exists in root
2Database ArchitectNoSchema defined
3Backend SpecialistNoAPI routes created
4Frontend SpecialistYesUI components ready
5Security, Test EngineersYesTests & audit pass
6DevOps EngineerNoDeployment ready
Critical: Phase 1.5 is MANDATORY. No specialist agents proceed without plan verification.

​
Use Cases

  • Building new applications from scratch
  • Creating MVPs from natural language descriptions
  • Generating full-stack applications
  • Scaffolding projects with best practices
  • Coordinating complex multi-agent builds
  • Template-based rapid prototyping

​
Example Flow

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
AgentRole
project-plannerTask breakdown, dependency graph
frontend-specialistUI components, pages
backend-specialistAPI, business logic
database-architectSchema, migrations
devops-engineerDeployment, preview

​
Which Agents Use This Skill

  • project-planner - Uses app-builder for project initialization and structure
Note: App-builder is primarily used by the project-planner agent as it coordinates other specialist agents.

​
Critical Checkpoints

  1. Socratic Gate: Must ask clarifying questions for complex projects
  2. Plan Verification: PLAN.md file must exist in project root before proceeding
  3. Schema Ready: Database must be designed before backend implementation
  4. API Ready: Backend endpoints must exist before frontend integration
  5. Code Ready: All code complete before security audit and testing
  6. Tests Pass: All tests and audits must pass before deployment

​
Feature Building vs New Projects

The skill adapts its approach: For new projects:
  • Full scaffolding from template
  • Complete agent pipeline
  • Deployment setup
For adding features:
  • Analyze existing codebase structure
  • Identify affected files and dependencies
  • Coordinate only relevant agents
  • Maintain existing patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us