name: web-app-builder description: Build production-ready full-stack web applications from a plain-language description. Use when the user wants to create a web app, SaaS product, dashboard, CRUD app, portal, or any browser-based application. Triggers on phrases like "build me a web app", "create a platform", "I need a website that does X", "build a full-stack app". Generates TypeScript React frontend + Express/Node backend + PostgreSQL schema + auth + API routes + deployment config. metadata: version: '1.0' category: build icon: 🌐 color: '#3b82f6'

Web App Builder

When to Use This Skill

Apply this skill when the user wants to build any browser-based application:

• "Build me a web app for managing X"
• "Create a platform where users can Y"
• "I need a full-stack application with auth and a dashboard"
• "Build a React app with a backend"
• Any request for a web application, portal, or browser-based tool

What This Skill Builds

A production-ready full-stack web application:

Frontend (React + TypeScript)

• Multi-page app with React Router
• Authentication UI (login, register, protected routes)
• Dashboard with metric cards, charts (recharts), data tables
• Responsive design with Tailwind CSS
• Dark/light mode support
• Form validation and error states

Backend (Node.js + Express + TypeScript)

• REST API with JWT authentication
• User management endpoints (register, login, profile)
• Resource CRUD endpoints specific to the app domain
• Input validation with Zod
• Error handling middleware
• CORS configuration

Database (PostgreSQL)

• Full schema with users table + app-specific tables
• Proper indexes and foreign keys
• Row-level security policies
• Migration files

Infrastructure

• docker-compose.yml (frontend + backend + postgres)
• .github/workflows/deploy.yml (CI/CD)
• .env.example with all required variables
• README.md with setup instructions

Instructions

1. Parse the user's description — extract: app name, core features, user roles, data entities, integrations needed (Stripe, email, etc.)

2. Generate a build plan first — list the pages, API endpoints, and database tables before writing any code. Show this plan to the user.

3. Build in 6 passes:

   • Pass 1: Config files (package.json, tsconfig, vite.config, docker-compose, CI/CD)
   • Pass 2: Types + constants + app shell (App.tsx, Router, Layout, Nav)
   • Pass 3: Auth flow (login, register, protected routes, JWT handling)
   • Pass 4: Core feature pages (dashboard, main CRUD views, forms)
   • Pass 5: Backend API (routes, middleware, services, DB queries)
   • Pass 6: Integration + README

4. Code quality rules:

   • TypeScript everywhere — no any types
   • MemoryRouter for Sandpack preview compatibility
   • All imports resolved — no missing dependencies
   • Real data, not Lorem ipsum
   • Mobile responsive

5. After build: Show quality score summary covering frontend, backend, database, tests, security

Output Format

Each file in its own fenced code block with path:

// complete code

Example Input → Output

Input: "Build a project management tool where teams can create projects, assign tasks, set deadlines, and track progress"

Output includes:

• /src/pages/Dashboard.tsx — project overview with stats
• /src/pages/Projects.tsx — project list + create modal
• /src/pages/Tasks.tsx — kanban board or list view
• /server/routes/projects.ts — CRUD API
• /database/schema.sql — projects, tasks, team_members, assignments tables
• docker-compose.yml, README.md, CI/CD config