{"id":"2136668e-9ed7-45ca-afc5-88d0031730e2","entityType":"agent","slug":"clawhub-ericn26-star-eric-app-builder","name":"App Builder","canonicalUrl":"https://www.xpersona.co/agent/clawhub-ericn26-star-eric-app-builder","canonicalPath":"/agent/clawhub-ericn26-star-eric-app-builder","generatedAt":"2026-10-14T06:39:24.876Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-12T02:33:02.436Z","emptyReason":null},"description":"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... Skill: App Builder Owner: ericn26-star 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... Tags: latest:11.0.0 Version history: v1.0.5 | 2026-05-05T03:57:21.941Z | auto No changes detected in this release. - Version bump with no modifications to the skill content or logic. - Documentation, configurati","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 954 downloads reported by the source. Last updated 10/12/2026.","installCommand":"clawhub skill install s17a4j37w3f2wyke5hajt5vtad85wyxf:eric-app-builder","sourceUrl":"https://clawhub.ai/ericn26-star/eric-app-builder","homepage":"https://clawhub.ai/ericn26-star/skills/eric-app-builder","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/ericn26-star/eric-app-builder","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/ericn26-star/skills/eric-app-builder","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"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..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-12T02:33:02.436Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-12T02:33:02.436Z","emptyReason":null},"stars":null,"forks":null,"downloads":954,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.0.5","tractionLabel":"954 downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-12T02:33:02.424Z","emptyReason":null},"lastUpdatedAt":"2026-10-12T02:33:02.436Z","lastCrawledAt":"2026-10-12T02:33:02.424Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-13T02:33:02.424Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.5","createdAt":"2026-05-05T03:57:21.941Z","changelog":"No changes detected in this release. - Version bump with no modifications to the skill content or logic. - Documentation, configuration, and implementation remain unchanged.","fileCount":2,"zipByteSize":4401},{"version":"1.0.10","createdAt":"2026-05-04T17:57:01.895Z","changelog":"No changes detected in this release. - Version 1.0.10 contains no file modifications or content updates.","fileCount":2,"zipByteSize":4400},{"version":"11.0.0","createdAt":"2026-05-03T10:03:21.442Z","changelog":"No file changes detected for this version. - No updates or changes have been made since the previous release. - Documentation, functionality, and features remain the same as the prior version.","fileCount":3,"zipByteSize":5463},{"version":"10.0.0","createdAt":"2026-05-03T05:03:16.417Z","changelog":"eric-app-builder 10.0.0 - Major update introducing a comprehensive full-stack app building framework from natural language requests. - Defines structured approaches for project detection, tech stack selection (2025 defaults), scaffolding patterns, implementation planning, and feature building. - Provides detailed project type keyword matrix and matching recommended stacks. - Outlines a modular, feature-isolated Next.js-Tailwind-Prisma-Supabase project structure with sample directory tree and path aliasing. - Includes step-by-step workflows for structured implementation planning, iterative feature building, error handling, and development coordination. - Guides on requirement analysis, task breakdown, error recovery, and user confirmation before code execution.","fileCount":2,"zipByteSize":4401},{"version":"2.0.1","createdAt":"2026-05-02T06:00:49.488Z","changelog":"No changes detected in this version. - Version 2.0.1 has no file changes from the previous version. - No updates to features, content, or documentation.","fileCount":2,"zipByteSize":4401},{"version":"2.0.0","createdAt":"2026-05-01T21:59:46.472Z","changelog":"No source changes were detected, but the version was incremented. No user-facing changes in this release.","fileCount":2,"zipByteSize":4399},{"version":"1.1.0","createdAt":"2026-05-01T20:55:52.296Z","changelog":"No file changes detected for this version. - No updates or modifications were made in this release. - The skill remains functionally and structurally identical to the previous version.","fileCount":2,"zipByteSize":4399},{"version":"1.0.2","createdAt":"2026-05-01T12:57:07.683Z","changelog":"No changes detected in this version. - No file changes were made between the previous and current release. - Functionality, documentation, and behavior remain unchanged from the previous version.","fileCount":2,"zipByteSize":4400}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17a4j37w3f2wyke5hajt5vtad85wyxf:eric-app-builder","setupComplexity":"low","setupSteps":["Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ericn26-star-eric-app-builder/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ericn26-star-eric-app-builder/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ericn26-star-eric-app-builder/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-ericn26-star-eric-app-builder/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-ericn26-star-eric-app-builder/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-ericn26-star-eric-app-builder/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-14T06:39:24.876Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ericn26-star-eric-app-builder/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ericn26-star-eric-app-builder/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ericn26-star-eric-app-builder/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-ericn26-star-eric-app-builder/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-12T02:33:02.436Z","emptyReason":null},"readme":"Skill: App Builder\n\nOwner: ericn26-star\n\nSummary: 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...\n\nTags: latest:11.0.0\n\nVersion history:\n\nv1.0.5 | 2026-05-05T03:57:21.941Z | auto\n\nNo changes detected in this release.\n\n- Version bump with no modifications to the skill content or logic.\n- Documentation, configuration, and implementation remain unchanged.\n\nv1.0.10 | 2026-05-04T17:57:01.895Z | auto\n\nNo changes detected in this release.\n\n- Version 1.0.10 contains no file modifications or content updates.\n\nv11.0.0 | 2026-05-03T10:03:21.442Z | auto\n\nNo file changes detected for this version.\n\n- No updates or changes have been made since the previous release.\n- Documentation, functionality, and features remain the same as the prior version.\n\nv10.0.0 | 2026-05-03T05:03:16.417Z | auto\n\neric-app-builder 10.0.0\n\n- Major update introducing a comprehensive full-stack app building framework from natural language requests.\n- Defines structured approaches for project detection, tech stack selection (2025 defaults), scaffolding patterns, implementation planning, and feature building.\n- Provides detailed project type keyword matrix and matching recommended stacks.\n- Outlines a modular, feature-isolated Next.js-Tailwind-Prisma-Supabase project structure with sample directory tree and path aliasing.\n- Includes step-by-step workflows for structured implementation planning, iterative feature building, error handling, and development coordination.\n- Guides on requirement analysis, task breakdown, error recovery, and user confirmation before code execution.\n\nv2.0.1 | 2026-05-02T06:00:49.488Z | auto\n\nNo changes detected in this version.\n\n- Version 2.0.1 has no file changes from the previous version.\n- No updates to features, content, or documentation.\n\nv2.0.0 | 2026-05-01T21:59:46.472Z | auto\n\nNo source changes were detected, but the version was incremented. No user-facing changes in this release.\n\nv1.1.0 | 2026-05-01T20:55:52.296Z | auto\n\nNo file changes detected for this version.\n\n- No updates or modifications were made in this release.\n- The skill remains functionally and structurally identical to the previous version.\n\nv1.0.2 | 2026-05-01T12:57:07.683Z | auto\n\nNo changes detected in this version.\n\n- No file changes were made between the previous and current release.\n- Functionality, documentation, and behavior remain unchanged from the previous version.\n\nv1.0.1 | 2026-05-01T08:57:30.308Z | auto\n\neric-app-builder 1.0.1\n\n- No file changes detected in this version.\n- Content and functionality remain identical to the previous release.\n- No user-facing changes or updates.\n\nv1.0.0 | 2026-05-01T06:55:53.700Z | auto\n\neric-app-builder v1.0.0\n\n- Initial release of the full-stack application builder skill.\n- Supports project type detection and recommends tech stacks based on user requests.\n- Provides 2025 default technologies and structured scaffolding for web, API, and mobile apps.\n- Includes implementation planning templates, feature-building patterns, and a multi-phase development workflow.\n- Guides users through requirement analysis, task breakdown, and iterative enhancement processes.\n\nArchive index:\n\nArchive v1.0.5: 2 files, 4401 bytes\n\nFiles: _meta.json (135b), SKILL.md (9955b)\n\nFile v1.0.5:SKILL.md\n\n---\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\nFile v1.0.5:_meta.json\n\n{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"1.0.5\",\n  \"publishedAt\": 1777953441941\n}\n\nArchive v1.0.10: 2 files, 4400 bytes\n\nFiles: _meta.json (136b), SKILL.md (9955b)\n\nFile v1.0.10:SKILL.md\n\n---\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\nFile v1.0.10:_meta.json\n\n{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"1.0.10\",\n  \"publishedAt\": 1777917421895\n}\n\nArchive v11.0.0: 3 files, 5463 bytes\n\nFiles: _meta.json (136b), skill-card.md (1925b), SKILL.md (9955b)\n\nFile v11.0.0:SKILL.md\n\n---\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\nFile v11.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"11.0.0\",\n  \"publishedAt\": 1777802601442\n}\n\nFile v11.0.0:skill-card.md\n\n## Description:\n\nApp Builder guides agents through building or enhancing web apps, APIs, mobile apps, and other software projects from natural language requests.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[ericn26-star](https://clawhub.ai/user/ericn26-star)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and external users use this skill to plan, scaffold, implement, test, and deploy full-stack applications or add features to existing projects.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill can guide broad project scaffolding and code changes.\n\nMitigation: Review the proposed implementation plan and file changes before allowing significant modifications.\n\nRisk: The skill may recommend package installation or deployment steps.\n\nMitigation: Confirm dependency, build, and deployment commands before execution.\n\nRisk: The skill may involve external service setup, payment integration, or authentication integration.\n\nMitigation: Confirm service accounts, credentials, permissions, and configuration choices before setup.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/ericn26-star/skills/eric-app-builder)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown plans, code snippets, shell commands, and configuration guidance]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include implementation plans, generated project files, dependency recommendations, and deployment steps.]\n\n## Skill Version(s):\n\n11.0.0 (source: server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v10.0.0: 2 files, 4401 bytes\n\nFiles: _meta.json (136b), SKILL.md (9955b)\n\nFile v10.0.0:SKILL.md\n\n---\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\nFile v10.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"10.0.0\",\n  \"publishedAt\": 1777784596417\n}\n\nArchive v2.0.1: 2 files, 4401 bytes\n\nFiles: _meta.json (135b), SKILL.md (9955b)\n\nFile v2.0.1:SKILL.md\n\n---\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\nFile v2.0.1:_meta.json\n\n{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"2.0.1\",\n  \"publishedAt\": 1777701649488\n}\n\nArchive v2.0.0: 2 files, 4399 bytes\n\nFiles: _meta.json (135b), SKILL.md (9955b)\n\nFile v2.0.0:SKILL.md\n\n---\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\nFile v2.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"2.0.0\",\n  \"publishedAt\": 1777672786472\n}\n\nArchive v1.1.0: 2 files, 4399 bytes\n\nFiles: _meta.json (135b), SKILL.md (9955b)\n\nFile v1.1.0:SKILL.md\n\n---\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\nFile v1.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"1.1.0\",\n  \"publishedAt\": 1777668952296\n}\n\nArchive v1.0.2: 2 files, 4400 bytes\n\nFiles: _meta.json (135b), SKILL.md (9955b)\n\nFile v1.0.2:SKILL.md\n\n---\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\nFile v1.0.2:_meta.json\n\n{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"1.0.2\",\n  \"publishedAt\": 1777640227683\n}\n\nArchive v1.0.1: 2 files, 4400 bytes\n\nFiles: _meta.json (135b), SKILL.md (9955b)\n\nFile v1.0.1:SKILL.md\n\n---\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\nFile v1.0.1:_meta.json\n\n{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1777625850308\n}\n\nArchive v1.0.0: 2 files, 4399 bytes\n\nFiles: _meta.json (135b), SKILL.md (9955b)\n\nFile v1.0.0:SKILL.md\n\n---\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\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1777618553700\n}","readmeExcerpt":"Skill: App Builder Owner: ericn26-star 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... Tags: latest:11.0.0 Version history: v1.0.5 | 2026-05-05T03:57:21.941Z | auto No changes detected in this release. - Version bump with no modifications to the skill content or logic. - Documentation, configurati","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"1. 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"},{"language":"yaml","snippet":"Frontend:\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"},{"language":"text","snippet":"project-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"},{"language":"json","snippet":"{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@/*\": [\"./src/*\"],\n      \"@/features/*\": [\"./src/features/*\"],\n      \"@/shared/*\": [\"./src/shared/*\"],\n      \"@/server/*\": [\"./src/server/*\"]\n    }\n  }\n}"},{"language":"markdown","snippet":"# 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]"},{"language":"text","snippet":"Request: \"[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    ..."}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\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│   ├── ap"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn712egma3976f4b68hksznyrs85wsr5\",\n  \"slug\": \"eric-app-builder\",\n  \"version\": \"1.0.5\",\n  \"publishedAt\": 1777953441941\n}"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"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... Skill: App Builder Owner: ericn26-star 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... Tags: latest:11.0.0 Version history: v1.0.5 | 2026-05-05T03:57:21.941Z | auto No changes detected in this release. - Version bump with no modifications to the skill content or logic. - Documentation, configurati","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":937,"uniquenessScore":51,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-12T02:33:02.436Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-12T02:33:02.436Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-14T06:39:24.876Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}