AgentSkillsCN

app-builder

主应用构建编排器。可根据自然语言请求，快速构建全栈应用。确定项目类型、选择技术栈、协调各代理协作。

SKILL.md
--- frontmatter
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

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.

FileDescriptionWhen to Read
project-detection.mdKeyword matrix, project type detectionStarting new project
tech-stack.md2025 default stack, alternativesChoosing technologies
agent-coordination.mdAgent pipeline, execution orderCoordinating multi-agent work
scaffolding.mdDirectory structure, core filesCreating project structure
feature-building.mdFeature analysis, error handlingAdding features to existing project
feature-building.mdFeature analysis, error handlingAdding features to existing project
templates/SKILL.mdProject templatesScaffolding new project

🖼️ Mandatory Visual Phase

Every new project MUST have unique visual assets generated by AI.

  1. •Logo: Generate a modern, app-appropriate logo.
  2. •Hero Image: Generate a stunning hero section background or mockup.
  3. •Icons/OG: Generate critical UI assets if needed.

🔴 VIOLATION: Creating an app with placeholders (e.g. placeholder.com or plain text logo) is FORBIDDEN. ✅ CORRECT: Invoke aesthetic-agent to create real assets via Pollinations.

📦 Templates (13)

Quick-start scaffolding for new projects. Read the matching template only!

TemplateTech StackWhen to Use
nextjs-fullstackNext.js + PrismaFull-stack web app
nextjs-saasNext.js + StripeSaaS product
nextjs-staticNext.js + FramerLanding page
nuxt-appNuxt 3 + PiniaVue full-stack app
express-apiExpress + JWTREST API
python-fastapiFastAPIPython API
react-native-appExpo + ZustandMobile app
flutter-appFlutter + RiverpodCross-platform mobile
electron-desktopElectron + ReactDesktop app
chrome-extensionChrome MV3Browser extension
cli-toolNode.js + CommanderCLI app
monorepo-turborepoTurborepo + pnpmMonorepo

🔗 Related Agents

AgentRole
project-plannerTask breakdown, dependency graph
frontend-specialistUI components, pages
backend-specialistAPI, business logic
database-architectSchema, migrations
devops-engineerDeployment, preview

Usage Example

code
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. **MANDATORY**: Invoke `aesthetic-agent` to generate Logo, Hero, and Icons.
6. Report progress
6. Start preview