菜单
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/sk-labs/copilot-kit --skill app-builder命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Strict Universal Accessibility guidelines (Web, iOS, Android, React Native) for ensuring that UI code meets ADA and WCAG 2.2 AA standards. Prevents keyboard traps, enforces specific touch target rules, and mandates visual contrast compliance.
Strict guidelines for refactoring AI-generated code to appear hand-crafted, maintainable, and free of typical "AI smells" required for marketplace acceptance.
API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.
正在显示 SKILL.md
基于 SOC 职业分类
| name | app-builder |
| description | Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents. |
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 |
The App Builder supports the following architectures. Use these as reference when planning structure:
| Type | Tech Stack | Description |
|---|---|---|
| Next.js Fullstack | Next.js + Prisma | Full-stack web app with database |
| Next.js SaaS | Next.js + Stripe | SaaS product skeleton |
| Next.js Static | Next.js + Framer | High-performance landing page |
| Nuxt App | Nuxt 3 + Pinia | Vue full-stack application |
| Express API | Express + JWT | RESTful API service |
| Python FastAPI | FastAPI | High-performance Python API |
| React Native | Expo + Zustand | Mobile application (iOS/Android) |
| Flutter App | Flutter + Riverpod | Cross-platform mobile app |
| Electron Desktop | Electron + React | Cross-platform desktop app |
| Chrome Extension | Chrome MV3 | Browser extension manifest v3 |
| CLI Tool | Node.js + Commander | Command-line interface tool |
| Monorepo | Turborepo + pnpm | Multi-package workspace |
| 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