Get the FREE Ultimate OpenClaw Setup Guide →

app-builder

Scanned
npx machina-cli add skill vudovn/antigravity-kit/app-builder --openclaw
Files (1)
SKILL.md
3.1 KB

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.md2026 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
templates/SKILL.mdProject templatesScaffolding new project

📦 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

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

Source

git clone https://github.com/vudovn/antigravity-kit/blob/main/.agent/skills/app-builder/SKILL.mdView on GitHub

Overview

App Builder analyzes natural language requests to determine the project type, selects the tech stack, plans the project structure, and coordinates multiple agents to deliver full-stack applications. It relies on selective reading of content maps and templates to create scalable scaffolds and MVPs. This speeds up project initiation while standardizing architecture across teams.

How This Skill Works

The tool parses the user request, uses project-detection rules to identify the project type, and selects a tech stack from the tech-stack guidance. It then creates a plan and coordinates specialized agents (frontend, backend, database, devops) to implement features, APIs, and scaffolding, referencing relevant files like scaffolding.md and agent-coordination.md to execute tasks.

When to Use It

  • Starting a new project from natural language input.
  • Choosing an appropriate tech stack for a given idea.
  • Scaffolding project structure and core files for a fresh build.
  • Coordinating multiple agents to implement features across frontend, backend, and deployment.
  • Producing a runnable preview or MVP from a high-level concept.

Quick Start

  1. Step 1: Parse the user request to classify the project type and goals.
  2. Step 2: Select a tech stack and plan the architecture using project-detection and tech-stack guidance.
  3. Step 3: Scaffold the project, coordinate agents, and launch a preview.

Best Practices

  • Provide a clear natural language brief with core features and desired outcomes.
  • Reference a matching template when possible to constrain scope.
  • Let App Builder propose a plan before scaffolding begins.
  • Validate the generated architecture against requirements and desired tech stack.
  • Use iterative reviews and progress reports to adjust scope and milestones.

Example Use Cases

  • Instagram clone with photo sharing and likes using Next.js + Prisma.
  • SaaS product with Next.js + Stripe integration.
  • REST API server built with Express and JWT authentication.
  • Mobile app built with React Native (Expo) and Zustand for state management.
  • Desktop app using Electron with a React frontend.

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers