菜单
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server/client-side optimizations.
Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
Automatic agent selection and intelligent task routing. Analyzes user requests and automatically selects the best specialist agent(s) without requiring explicit user mentions.
Automatic quality control, linting, and static analysis procedures. Use after every code modification to ensure syntax correctness and project standards. Triggers onKeywords: lint, format, check, validate, types, static analysis.
| name | app-builder |
| description | Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents. |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash, Agent |
Analyzes user's requests, determines tech stack, plans structure, and coordinates agents.
Read ONLY files relevant to the request! Check the content map, find what you need.
| File | Description | When to Read |
|---|---|---|
project-detection.md | Keyword matrix, project type detection | Starting new project |
tech-stack.md | 2026 default stack, alternatives | Choosing technologies |
agent-coordination.md | Agent pipeline, execution order | Coordinating multi-agent work |
scaffolding.md | Directory structure, core files | Creating project structure |
feature-building.md | Feature analysis, error handling | Adding features to existing project |
templates/SKILL.md | Project templates | Scaffolding new project |
Quick-start scaffolding for new projects. Read the matching template only!
| Template | Tech Stack | When to Use |
|---|---|---|
| nextjs-fullstack | Next.js + Prisma | Full-stack web app |
| nextjs-saas | Next.js + Stripe | SaaS product |
| nextjs-static | Next.js + Framer | Landing page |
| nuxt-app | Nuxt 3 + Pinia | Vue full-stack app |
| express-api | Express + JWT | REST API |
| python-fastapi | FastAPI | Python API |
| react-native-app | Expo + Zustand | Mobile app |
| flutter-app | Flutter + Riverpod | Cross-platform mobile |
| electron-desktop | Electron + React | Desktop app |
| chrome-extension | Chrome MV3 | Browser extension |
| cli-tool | Node.js + Commander | CLI app |
| monorepo-turborepo | Turborepo + pnpm | Monorepo |
| Agent | Role |
|---|---|
project-planner | Task breakdown, dependency graph |
frontend-specialist | UI components, pages |
backend-specialist | API, business logic |
database-architect | Schema, migrations |
devops-engineer | Deployment, preview |
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