{"skill":{"slug":"eric-app-builder-v2","displayName":"App Builder","summary":"Full-stack application builder that creates web apps, APIs, mobile apps, and more from natural language requests. Use when the user wants to build a new appl...","description":"---\nname: eric-app-builder\ndescription: \"Full-stack application builder that creates web apps, APIs, mobile apps, and more from natural language requests. Use when the user wants to build a new application, add features to existing projects, scaffold a project structure, or plan an implementation.\"\n---\n\n# App Builder Skill\n\nThis skill provides structured knowledge for building full-stack applications from scratch or enhancing existing projects. It covers project detection, tech stack selection, scaffolding patterns, implementation planning, and feature building.\n\n## Contents\n\n1. **Project Detection** - Keyword matrix for identifying project types\n2. **Tech Stack** - 2025 default technologies and alternatives\n3. **Scaffolding** - Directory structures and core files\n4. **Implementation Planning** - Requirement analysis, task breakdown, and plan format\n5. **Feature Building** - Analysis and implementation patterns\n6. **Coordination** - Multi-phase development workflow\n\n---\n\n## 1. Project Detection\n\n### Keyword Matrix\n\n| Keywords | Project Type | Recommended Stack |\n|----------|--------------|-------------------|\n| blog, post, article | Blog | Next.js Static |\n| e-commerce, product, cart, payment | E-commerce | Next.js + Stripe |\n| dashboard, panel, management | Admin Dashboard | Next.js + Supabase |\n| api, backend, service, rest | API Service | Express or FastAPI |\n| python, fastapi, django | Python API | FastAPI |\n| mobile, android, ios, react native | Mobile App | React Native (Expo) |\n| portfolio, personal, cv | Portfolio | Next.js Static |\n| crm, customer, sales | CRM | Next.js + Supabase |\n| saas, subscription, stripe | SaaS | Next.js + Stripe + Auth |\n| landing, promotional, marketing | Landing Page | Next.js Static |\n| extension, plugin, chrome | Browser Extension | Chrome MV3 |\n| cli, command line, terminal | CLI Tool | Node.js |\n\n### Detection Process\n\n```\n1. Tokenize user request\n2. Extract keywords and match to project type\n3. Identify missing information → ask clarifying questions\n4. Suggest appropriate tech stack\n5. Confirm with user before proceeding\n```\n\n---\n\n## 2. Tech Stack Selection (2025)\n\n### Default Web App Stack\n\n```yaml\nFrontend:\n  framework: Next.js 16 (Stable)\n  language: TypeScript 5.7+\n  styling: Tailwind CSS v4\n  state: React 19 Actions / Server Components\n  bundler: Turbopack (Dev Mode)\n\nBackend:\n  runtime: Node.js 23\n  framework: Next.js API Routes\n  validation: Zod\n\nDatabase:\n  primary: PostgreSQL\n  provider: Supabase\n  orm: Prisma\n\nAuth:\n  provider: Supabase Auth or Clerk\n\nDeployment:\n  tool: Built-in deploy command\n```\n\n### Alternative Options\n\n| Need | Default | Alternative |\n|------|---------|-------------|\n| Real-time | Supabase Realtime | Socket.io |\n| File storage | Supabase Storage | Cloudinary, S3 |\n| Payment | Stripe | LemonSqueezy, Paddle |\n| Email | Resend | SendGrid |\n| Search | - | Algolia, Typesense |\n\n---\n\n## 3. Project Scaffolding\n\n### Next.js Full-Stack Structure\n\n```\nproject-name/\n├── src/\n│   ├── app/                        # Routes only (thin layer)\n│   │   ├── layout.tsx\n│   │   ├── page.tsx\n│   │   ├── globals.css\n│   │   ├── (auth)/                 # Route group - auth pages\n│   │   │   ├── login/page.tsx\n│   │   │   └── register/page.tsx\n│   │   ├── (dashboard)/            # Route group - dashboard\n│   │   │   ├── layout.tsx\n│   │   │   └── page.tsx\n│   │   └── api/\n│   │       └── [resource]/route.ts\n│   │\n│   ├── features/                   # Feature-based modules\n│   │   ├── auth/\n│   │   │   ├── components/\n│   │   │   ├── hooks/\n│   │   │   ├── actions.ts          # Server Actions\n│   │   │   ├── queries.ts          # Data fetching\n│   │   │   └── types.ts\n│   │   └── [other-features]/\n│   │\n│   ├── shared/                     # Shared utilities\n│   │   ├── components/ui/          # Reusable UI components\n│   │   ├── lib/                    # Utils, helpers\n│   │   └── hooks/                  # Global hooks\n│   │\n│   └── server/                     # Server-only code\n│       ├── db/                     # Database client\n│       ├── auth/                   # Auth config\n│       └── services/               # External API integrations\n│\n├── prisma/\n│   ├── schema.prisma\n│   └── seed.ts\n│\n├── public/\n├── .env.example\n├── package.json\n├── tailwind.config.ts\n└── tsconfig.json\n```\n\n### Structure Principles\n\n| Principle | Implementation |\n|-----------|----------------|\n| **Feature isolation** | Each feature in `features/` with its own components, hooks, actions |\n| **Server/Client separation** | Server-only code in `server/`, prevents accidental client imports |\n| **Thin routes** | `app/` only for routing, logic lives in `features/` |\n| **Route groups** | `(groupName)/` for layout sharing without URL impact |\n| **Shared code** | `shared/` for truly reusable UI and utilities |\n\n### Path Aliases (tsconfig.json)\n\n```json\n{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@/*\": [\"./src/*\"],\n      \"@/features/*\": [\"./src/features/*\"],\n      \"@/shared/*\": [\"./src/shared/*\"],\n      \"@/server/*\": [\"./src/server/*\"]\n    }\n  }\n}\n```\n\n---\n\n## 4. Implementation Planning\n\nWhen planning a new project or feature, follow this structured approach before writing any code.\n\n### Requirement Analysis\n\n1. **Break down user requests** into concrete features\n2. **Identify data models** and their relationships\n3. **Determine API endpoints** or server actions needed\n4. **List UI components** required\n5. **Identify potential blockers** early\n\n### Task Breakdown\n\n- Create an ordered task list with dependencies\n- Estimate complexity for each task (simple / medium / complex)\n- Flag tasks that require user decisions or external services\n\n### Plan Output Format\n\nWhen presenting a plan to the user, use this structure:\n\n```markdown\n# Implementation Plan: [Project Name]\n\n## Overview\n[Brief description of what will be built]\n\n## Data Models\n- Model1: [fields and relationships]\n- Model2: [fields and relationships]\n\n## API Routes / Server Actions\n- POST /api/resource - [description]\n- GET /api/resource - [description]\n\n## Pages & Components\n- /page-name\n  - ComponentA\n  - ComponentB\n\n## Implementation Order\n1. [ ] Database schema\n2. [ ] API routes / server actions\n3. [ ] UI components\n4. [ ] Integration & wiring\n5. [ ] Testing & error fixing\n\n## Dependencies\n- [package1]\n- [package2]\n```\n\n### Planning Guidelines\n\n- Be specific and actionable in each task\n- Consider edge cases and error states\n- Plan for input validation and error handling\n- Keep security in mind (auth, authorization, input sanitization)\n- Present the plan to the user and get approval before proceeding\n\n---\n\n## 5. Feature Building\n\n### Feature Analysis Template\n\n```\nRequest: \"[user feature request]\"\n\nAnalysis:\n├── Required Changes:\n│   ├── Database: [tables/columns needed]\n│   ├── Backend: [API routes/actions needed]\n│   ├── Frontend: [components/pages needed]\n│   └── Config: [environment variables needed]\n│\n├── Dependencies:\n│   ├── [npm packages]\n│   └── [existing features required]\n│\n└── Implementation Steps:\n    1. [Step 1]\n    2. [Step 2]\n    ...\n```\n\n### Iterative Enhancement Process\n\n```\n1. Analyze existing project structure\n2. Create detailed change plan\n3. Present plan to user for approval\n4. Get confirmation\n5. Apply changes incrementally\n6. Test after each change\n7. Deploy and show preview\n```\n\n### Error Handling\n\n| Error Type | Solution Strategy |\n|------------|-------------------|\n| TypeScript Error | Fix type, add missing import |\n| Missing Dependency | Install with npm/pnpm |\n| Build Error | Check syntax, verify imports |\n| Database Error | Check schema, validate migrations |\n| Runtime Error | Debug logic, check API responses |\n\n### Recovery Strategy\n\n```\n1. Detect error from build/runtime output\n2. Attempt automatic fix\n3. If failed, report to user with context\n4. Suggest alternative approach\n5. Rollback if necessary (git)\n```\n\n---\n\n## 6. Development Coordination\n\n### Core Workflow\n\n```\n1. ANALYZE → Understand user request, detect project type\n2. PLAN → Create detailed implementation plan, get user approval\n3. BUILD → Scaffold structure, implement features (database → backend → frontend)\n4. TEST → Run build, verify functionality, fix errors\n5. DEPLOY → Deploy application and provide URL\n```\n\n### Execution Phases\n\n| Phase | Focus | Checkpoint |\n|-------|-------|------------|\n| 1. Analysis | Understand requirements | Clear spec confirmed |\n| 2. Planning | Create implementation plan | Plan approved by user |\n| 3. Database | Schema design, migrations | Schema created |\n| 4. Backend | API routes, server actions | Endpoints working |\n| 5. Frontend | Components, pages, styling | UI complete |\n| 6. Testing | Build check, error fixing | Build passes |\n| 7. Deployment | Deploy to production | Live URL provided |\n\n### Quality Gates\n\n- **Before Phase 3**: User must approve the plan\n- **Before Phase 7**: Build must pass without errors\n- **After Deployment**: Verify the live site works\n\n---\n\n## Usage Guidelines\n\n1. **Always start with project type detection** - Match keywords to determine the best approach\n2. **Present plans before implementing** - Get user confirmation on significant decisions\n3. **Build incrementally** - Test after each major change\n4. **Deploy early** - Get a working version deployed quickly, then iterate\n5. **Handle errors gracefully** - Fix issues and continue, don't give up\n6. **Type safety throughout** - Full TypeScript coverage with Zod validation for inputs\n7. **Progressive enhancement** - Start simple, add complexity as needed\n","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":344,"installsAllTime":13,"installsCurrent":0,"stars":0,"versions":1},"createdAt":1778074417103,"updatedAt":1778492859420},"latestVersion":{"version":"1.0.0","createdAt":1778074417103,"changelog":"eric-app-builder-v2 v1.0.0 Changelog\n\n- Initial release of the full-stack application builder skill.\n- Supports detection of common app types, tech stack selection, and scaffolding for modern 2025 web projects.\n- Provides detailed implementation planning and task breakdown templates.\n- Includes patterns for modular project structure, feature isolation, and shared code management.\n- Offers structured guidance on error handling, stepwise development, and user coordination throughout the build process.","license":"MIT-0"},"metadata":null,"owner":{"handle":"ericn26-star","userId":"s17a4j37w3f2wyke5hajt5vtad85wyxf","displayName":"ericn26-star","image":"https://avatars.githubusercontent.com/u/270299470?v=4"},"moderation":null}