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

Detection Process

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

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

3. Project Scaffolding

Next.js Full-Stack Structure

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

Path Aliases (tsconfig.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:

# 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

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

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

Recovery Strategy

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

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

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