Skip to main content
app-builder Analyzes user's requests, determines tech stack, plans structure, and coordinates agents.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/HaoNgo232/agent-bridge-kit --skill app-builderThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... agent-coordination.md 5.4 KB feature-building.md 1.1 KB project-detection.md 1.3 KB name app-builder description Analyzes user's requests, determines tech stack, plans structure, and coordinates agents.
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.
File Description When to Read project-detection.mdKeyword matrix, project type detection Starting new project tech-stack.md2026 default stack, alternatives Choosing technologies agent-coordination.mdAgent pipeline, execution order Coordinating multi-agent work scaffolding.mdDirectory structure, core files Creating project structure feature-building.mdFeature analysis, error handling Adding features to existing project templates/SKILL.mdProject templates Scaffolding new project
๐ฆ Templates (13)
Quick-start scaffolding for new projects. Read the matching template only!
nuxt-app Nuxt 3 + Pinia Vue full-stack app
๐ Related Agents Agent Role project-plannerTask breakdown, dependency graph frontend-specialistUI components, pages backend-specialistAPI, business logic database-architectSchema, migrations devops-engineerDeployment, preview
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
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 Phase Agent(s) Parallel? Prerequisite CHECKPOINT 0 Socratic Gate โ - โ
Ask 3 questions 1 Project Planner โ Questions answered โ
PLAN.md created 1.5 PLAN VERIFICATION โ PLAN.md exists โ
File exists in root 2 Database Architect โ Plan ready Schema defined 3 Backend Specialist โ Schema ready API routes created 4 Frontend Specialist โ
API ready (partial) UI components ready 5 Security Auditor, Test Engineer โ
Code ready Tests & audit pass 6 DevOps Engineer โ All code ready Deployment ready
๐ด 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 Error Type Solution Strategy TypeScript Error Fix type, add missing import Missing Dependency Run npm install Port Conflict Suggest alternative port Database Error Check migration, validate connection
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 Keywords Project Type Template blog, post, article Blog astro-static e-commerce, product, cart, payment E-commerce nextjs-saas dashboard, panel, management Admin Dashboard nextjs-fullstack api, backend, service, rest API Service express-api python, fastapi, django Python API python-fastapi mobile, android, ios, react native Mobile App (RN) react-native-app flutter, dart Mobile App (Flutter) flutter-app portfolio, personal, cv Portfolio nextjs-static crm, customer, sales CRM nextjs-fullstack saas, subscription, stripe SaaS nextjs-saas landing, promotional, marketing Landing Page nextjs-static docs, documentation Documentation astro-static extension, plugin, chrome Browser Extension chrome-extension desktop, electron Desktop App electron-desktop cli, command line, terminal CLI Tool cli-tool monorepo, workspace Monorepo monorepo-turborepo
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 (2026+ Next.js 16 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 Principle Implementation Feature isolation Each feature in features/ with its own components, hooks, actions Server/Client separation Server-only code in server/, prevents accidental client imports Thin routes app/ only for routing, logic lives in features/Route groups (groupName)/ for layout sharing without URL impactShared code shared/ for truly reusable UI and utilities
File Purpose proxy.tsNext.js 16 Network boundary logic (auth, redirects) package.jsonDependencies tsconfig.jsonTypeScript + path aliases (@/features/*) tailwind.config.tsTailwind config .env.exampleEnvironment template README.mdProject documentation .gitignoreGit ignore rules prisma/schema.prismaDatabase schema src/server/cache-handler.tsNext.js 16 Cache Components Manager
Path Aliases (tsconfig.json) {
"compilerOptions" : {
"paths" : {
"@/*" : [ "./src/*" ] ,
"@/features/*" : [ "./src/features/*" ] ,
"@/shared/*" : [ "./src/shared/*" ] ,
"@/server/*" : [ "./src/server/*" ]
}
}
}
When to Use What Need Location New page/route app/(group)/page.tsxFeature component features/[name]/components/Server action features/[name]/actions.tsData fetching features/[name]/queries.tsReusable button/input shared/components/ui/Database query server/db/External API call server/services/
Tech Stack Selection (2026)
Default and alternative technology choices for web applications.
Default Stack (Web App - 2026) Frontend:
framework: Next.js 16 (Stable)
language: TypeScript 5.7 +
styling: Tailwind CSS v4
state: React 19 Actions / Server Components
caching: Next.js 16 Cache Components (Stable)
bundler: Turbopack (Stable for Dev & Build)
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 Need Default Alternative Real-time - Supabase Realtime, Socket.io File storage - Cloudinary, S3 Payment Stripe LemonSqueezy, Paddle Email - Resend, SendGrid Search - Algolia, Typesense
More from this repository API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
AI operational modes (brainstorm, implement, debug, review, teach, ship, orchestrate). Use to adapt behavior based on task type.
Related occupations SOC
Based on SOC occupation classification
