App Builder Skill#

This skill provides structured knowledge for building full-stack applications from scratch or enhancing existing projects. It covers project detection, tech stack selection, scaffolding patterns, implementation planning, and feature building.

Contents#

1. Project Detection - Keyword matrix for identifying project types
2. Tech Stack - 2025 default technologies and alternatives
3. Scaffolding - Directory structures and core files
4. Implementation Planning - Requirement analysis, task breakdown, and plan format
5. Feature Building - Analysis and implementation patterns
6. Coordination - Multi-phase development workflow

---

1. Project Detection#

Keyword Matrix#

KeywordsProject TypeRecommended Stackblog, post, articleBlogNext.js Statice-commerce, product, cart, paymentE-commerceNext.js + Stripedashboard, panel, managementAdmin DashboardNext.js + Supabaseapi, backend, service, restAPI ServiceExpress or FastAPIpython, fastapi, djangoPython APIFastAPImobile, android, ios, react nativeMobile AppReact Native (Expo)portfolio, personal, cvPortfolioNext.js Staticcrm, customer, salesCRMNext.js + Supabasesaas, subscription, stripeSaaSNext.js + Stripe + Authlanding, promotional, marketingLanding PageNext.js Staticextension, plugin, chromeBrowser ExtensionChrome MV3cli, command line, terminalCLI ToolNode.js

Detection Process#

text

1. Tokenize user request
2. Extract keywords and match to project type
3. Identify missing information → ask clarifying questions
4. Suggest appropriate tech stack
5. Confirm with user before proceeding

---

2. Tech Stack Selection (2025)#

Default Web App Stack#

yaml

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

Backend:
  runtime: Node.js 23
  framework: Next.js API Routes
  validation: Zod

Database:
  primary: PostgreSQL
  provider: Supabase
  orm: Prisma

Auth:
  provider: Supabase Auth or Clerk

Deployment:
  tool: Built-in deploy command

Alternative Options#

NeedDefaultAlternativeReal-timeSupabase RealtimeSocket.ioFile storageSupabase StorageCloudinary, S3PaymentStripeLemonSqueezy, PaddleEmailResendSendGridSearch-Algolia, Typesense

---

3. Project Scaffolding#

Next.js Full-Stack Structure#

text

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.tsx
│   │   │   └── page.tsx
│   │   └── api/
│   │       └── [resource]/route.ts
│   │
│   ├── features/                   # Feature-based modules
│   │   ├── auth/
│   │   │   ├── components/
│   │   │   ├── hooks/
│   │   │   ├── actions.ts          # Server Actions
│   │   │   ├── queries.ts          # Data fetching
│   │   │   └── types.ts
│   │   └── [other-features]/
│   │
│   ├── shared/                     # Shared utilities
│   │   ├── components/ui/          # Reusable UI components
│   │   ├── lib/                    # Utils, helpers
│   │   └── hooks/                  # Global hooks
│   │
│   └── server/                     # Server-only code
│       ├── db/                     # Database client
│       ├── auth/                   # Auth config
│       └── services/               # External API integrations
│
├── prisma/
│   ├── schema.prisma
│   └── seed.ts
│
├── public/
├── .env.example
├── package.json
├── tailwind.config.ts
└── tsconfig.json

Structure Principles#

PrincipleImplementationFeature isolationEach feature in features/ with its own components, hooks, actionsServer/Client separationServer-only code in server/, prevents accidental client importsThin routesapp/ only for routing, logic lives in features/Route groups(groupName)/ for layout sharing without URL impactShared codeshared/ for truly reusable UI and utilities

Path Aliases (tsconfig.json)#

json

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

---

4. Implementation Planning#

When planning a new project or feature, follow this structured approach before writing any code.

Requirement Analysis#

1. Break down user requests into concrete features
2. Identify data models and their relationships
3. Determine API endpoints or server actions needed
4. List UI components required
5. Identify potential blockers early

Task Breakdown#

• Create an ordered task list with dependencies
• Estimate complexity for each task (simple / medium / complex)
• Flag tasks that require user decisions or external services

Plan Output Format#

When presenting a plan to the user, use this structure:

markdown

# Implementation Plan: [Project Name]

## Overview
[Brief description of what will be built]

## Data Models
- Model1: [fields and relationships]
- Model2: [fields and relationships]

## API Routes / Server Actions
- POST /api/resource - [description]
- GET /api/resource - [description]

## Pages & Components
- /page-name
  - ComponentA
  - ComponentB

## Implementation Order
1. [ ] Database schema
2. [ ] API routes / server actions
3. [ ] UI components
4. [ ] Integration & wiring
5. [ ] Testing & error fixing

## Dependencies
- [package1]
- [package2]

Planning Guidelines#

• Be specific and actionable in each task
• Consider edge cases and error states
• Plan for input validation and error handling
• Keep security in mind (auth, authorization, input sanitization)
• Present the plan to the user and get approval before proceeding

---

5. Feature Building#

Feature Analysis Template#

text

Request: "[user feature request]"

Analysis:
├── Required Changes:
│   ├── Database: [tables/columns needed]
│   ├── Backend: [API routes/actions needed]
│   ├── Frontend: [components/pages needed]
│   └── Config: [environment variables needed]
│
├── Dependencies:
│   ├── [npm packages]
│   └── [existing features required]
│
└── Implementation Steps:
    1. [Step 1]
    2. [Step 2]
    ...

Iterative Enhancement Process#

text

1. Analyze existing project structure
2. Create detailed change plan
3. Present plan to user for approval
4. Get confirmation
5. Apply changes incrementally
6. Test after each change
7. Deploy and show preview

Error Handling#

Error TypeSolution StrategyTypeScript ErrorFix type, add missing importMissing DependencyInstall with npm/pnpmBuild ErrorCheck syntax, verify importsDatabase ErrorCheck schema, validate migrationsRuntime ErrorDebug logic, check API responses

Recovery Strategy#

text

1. Detect error from build/runtime output
2. Attempt automatic fix
3. If failed, report to user with context
4. Suggest alternative approach
5. Rollback if necessary (git)

---

6. Development Coordination#

Core Workflow#

text

1. ANALYZE → Understand user request, detect project type
2. PLAN → Create detailed implementation plan, get user approval
3. BUILD → Scaffold structure, implement features (database → backend → frontend)
4. TEST → Run build, verify functionality, fix errors
5. DEPLOY → Deploy application and provide URL

Execution Phases#

PhaseFocusCheckpoint1. AnalysisUnderstand requirementsClear spec confirmed2. PlanningCreate implementation planPlan approved by user3. DatabaseSchema design, migrationsSchema created4. BackendAPI routes, server actionsEndpoints working5. FrontendComponents, pages, stylingUI complete6. TestingBuild check, error fixingBuild passes7. DeploymentDeploy to productionLive URL provided

Quality Gates#

• Before Phase 3: User must approve the plan
• Before Phase 7: Build must pass without errors
• After Deployment: Verify the live site works

---

Usage Guidelines#

1. Always start with project type detection - Match keywords to determine the best approach
2. Present plans before implementing - Get user confirmation on significant decisions
3. Build incrementally - Test after each major change
4. Deploy early - Get a working version deployed quickly, then iterate
5. Handle errors gracefully - Fix issues and continue, don't give up
6. Type safety throughout - Full TypeScript coverage with Zod validation for inputs
7. Progressive enhancement - Start simple, add complexity as needed