app-builder
starsforks
How to install app-builder?
softspark/ai-toolkit/app-builder
$npx -y skills add softspark/ai-toolkit --skill app-builderApp scaffolding: Next.js, Vite, Nuxt, Astro, FastAPI, Django, Laravel, RN, Flutter. Triggers: scaffold, bootstrap, new project, starter, dashboard, mobile app.
SKILL.md
| 1 | # App Builder Skill |
| 2 | |
| 3 | ## Project Type Detection |
| 4 | |
| 5 | | Keywords | Project Type | Primary Agents | |
| 6 | |----------|--------------|----------------| |
| 7 | | landing, website, marketing | Static Site | frontend-specialist | |
| 8 | | dashboard, admin, crud | Web App | frontend + backend | |
| 9 | | api, rest, graphql | API Only | backend-specialist | |
| 10 | | mobile, ios, android | Mobile App | mobile-developer | |
| 11 | | cli, command, terminal | CLI Tool | backend-specialist | |
| 12 | | game, unity, godot | Game | game-developer | |
| 13 | | ai, ml, rag | AI/ML | ai-engineer | |
| 14 | | e-commerce, shop, store | E-commerce | backend + frontend | |
| 15 | |
| 16 | --- |
| 17 | |
| 18 | ## Tech Stack Selection (2025) |
| 19 | |
| 20 | ### Web Applications |
| 21 | |
| 22 | | Scenario | Stack | |
| 23 | |----------|-------| |
| 24 | | Full-stack, SSR | Next.js 14+ (App Router) | |
| 25 | | SPA with API | React + Vite | |
| 26 | | Vue ecosystem | Nuxt 3 | |
| 27 | | Static/Blog | Astro | |
| 28 | | E-commerce | Next.js + Medusa/Shopify | |
| 29 | |
| 30 | ### Mobile Applications |
| 31 | |
| 32 | | Scenario | Stack | |
| 33 | |----------|-------| |
| 34 | | Cross-platform (JS team) | React Native + Expo | |
| 35 | | Cross-platform (any) | Flutter | |
| 36 | | iOS only | SwiftUI | |
| 37 | | Android only | Kotlin + Jetpack Compose | |
| 38 | |
| 39 | ### Backend/API |
| 40 | |
| 41 | | Scenario | Stack | |
| 42 | |----------|-------| |
| 43 | | Node.js, edge-ready | Hono | |
| 44 | | Node.js, high perf | Fastify | |
| 45 | | Python, async | FastAPI | |
| 46 | | PHP, full-featured | Laravel | |
| 47 | | E-commerce | Magento/Sylius/PrestaShop | |
| 48 | |
| 49 | ### Database |
| 50 | |
| 51 | | Scenario | Stack | |
| 52 | |----------|-------| |
| 53 | | General purpose | PostgreSQL | |
| 54 | | Serverless | Neon (PG), Turso (SQLite) | |
| 55 | | Document store | MongoDB | |
| 56 | | Vector search | PostgreSQL + pgvector | |
| 57 | | Cache | Redis / Upstash | |
| 58 | |
| 59 | --- |
| 60 | |
| 61 | ## Project Templates |
| 62 | |
| 63 | ### Next.js Full-Stack |
| 64 | |
| 65 | ``` |
| 66 | project/ |
| 67 | ├── src/ |
| 68 | │ ├── app/ # App Router |
| 69 | │ │ ├── (auth)/ # Auth group |
| 70 | │ │ ├── api/ # API routes |
| 71 | │ │ ├── layout.tsx |
| 72 | │ │ └── page.tsx |
| 73 | │ ├── components/ # Shared components |
| 74 | │ │ └── ui/ # UI primitives |
| 75 | │ ├── lib/ # Utilities |
| 76 | │ └── server/ # Server-only code |
| 77 | ├── prisma/ # Database schema |
| 78 | ├── public/ |
| 79 | ├── next.config.ts |
| 80 | ├── tailwind.config.ts |
| 81 | └── package.json |
| 82 | ``` |
| 83 | |
| 84 | ### FastAPI Backend |
| 85 | |
| 86 | ``` |
| 87 | project/ |
| 88 | ├── app/ |
| 89 | │ ├── api/ |
| 90 | │ │ └── v1/ |
| 91 | │ │ └── endpoints/ |
| 92 | │ ├── core/ # Config, security |
| 93 | │ ├── models/ # Pydantic models |
| 94 | │ ├── db/ # Database |
| 95 | │ └── main.py |
| 96 | ├── tests/ |
| 97 | ├── alembic/ # Migrations |
| 98 | ├── pyproject.toml |
| 99 | └── Dockerfile |
| 100 | ``` |
| 101 | |
| 102 | ### React Native + Expo |
| 103 | |
| 104 | ``` |
| 105 | project/ |
| 106 | ├── app/ # Expo Router |
| 107 | │ ├── (tabs)/ |
| 108 | │ ├── _layout.tsx |
| 109 | │ └── index.tsx |
| 110 | ├── components/ |
| 111 | ├── hooks/ |
| 112 | ├── store/ # State management |
| 113 | ├── services/ # API clients |
| 114 | ├── app.json |
| 115 | └── package.json |
| 116 | ``` |
| 117 | |
| 118 | --- |
| 119 | |
| 120 | ## Agent Coordination |
| 121 | |
| 122 | ### New Project Flow |
| 123 | |
| 124 | ``` |
| 125 | 1. project-planner → Task breakdown |
| 126 | 2. database-architect → Schema design |
| 127 | 3. backend-specialist → API implementation |
| 128 | 4. frontend-specialist → UI implementation |
| 129 | 5. test-engineer → Test coverage |
| 130 | 6. devops-implementer → Deployment |
| 131 | ``` |
| 132 | |
| 133 | ### Feature Addition Flow |
| 134 | |
| 135 | ``` |
| 136 | 1. explorer-agent → Understand codebase |
| 137 | 2. project-planner → Plan changes |
| 138 | 3. [appropriate agent] → Implement |
| 139 | 4. test-engineer → Add tests |
| 140 | 5. code-reviewer → Review |
| 141 | ``` |
| 142 | |
| 143 | --- |
| 144 | |
| 145 | ## Common Patterns |
| 146 | |
| 147 | ### Authentication |
| 148 | - JWT for APIs |
| 149 | - Session for web apps |
| 150 | - OAuth for third-party |
| 151 | |
| 152 | ### State Management |
| 153 | - Server state: TanStack Query |
| 154 | - Client state: Zustand/Jotai |
| 155 | - Form state: React Hook Form |
| 156 | |
| 157 | ### Styling |
| 158 | - Tailwind CSS as default |
| 159 | - CSS Modules for isolation |
| 160 | - Styled Components for dynamic |
| 161 | |
| 162 | ### Testing |
| 163 | - Unit: Jest/Vitest |
| 164 | - E2E: Playwright |
| 165 | - API: Supertest |
| 166 | |
| 167 | --- |
| 168 | |
| 169 | ## Best Practices |
| 170 | |
| 171 | - ✅ Start with TypeScript |
| 172 | - ✅ Add linting (ESLint/Biome) |
| 173 | - ✅ Use environment variables |
| 174 | - ✅ Set up CI/CD from start |
| 175 | - ✅ Document as you build |
| 176 | |
| 177 | - ❌ Don't skip tests |
| 178 | - ❌ Don't hardcode config |
| 179 | - ❌ Don't ignore accessibility |
| 180 | - ❌ Don't over-engineer early |
| 181 | |
| 182 | ## Rules |
| 183 | |
| 184 | - **MUST** confirm the stack selection with the user before scaffolding — the matrix above is a default, not a verdict |
| 185 | - **MUST** include `.gitignore`, `.env.example`, a README, a linter config, and a working test harness in every scaffold |
| 186 | - **NEVER** overwrite an existing project directory without the user's explicit go-ahead |
| 187 | - **NEVER** scaffold Create React App or other EOL starters — steer to Vite, Next.js, or Astro instead |
| 188 | - **CRITICAL**: prefer the team's existing expertise over trend-chasing. If the team ships Laravel, scaffolding FastAPI "because it's faster" creates training debt that outweighs the runtime gain. |
| 189 | |
| 190 | ## Gotchas |
| 191 | |
| 192 | - Next.js App Router (`app/`) and Pages Router (`pages/`) can coexist technically, but middleware, layouts, and loading-state conventions diverge. Pick one router per project and never mix inside a single feature — debugging the overl |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
