@musashishao/agent-kit 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agent/.shared/ui-ux-pro-max/data/charts.csv +26 -0
- package/.agent/.shared/ui-ux-pro-max/data/colors.csv +97 -0
- package/.agent/.shared/ui-ux-pro-max/data/icons.csv +101 -0
- package/.agent/.shared/ui-ux-pro-max/data/landing.csv +31 -0
- package/.agent/.shared/ui-ux-pro-max/data/products.csv +97 -0
- package/.agent/.shared/ui-ux-pro-max/data/prompts.csv +24 -0
- package/.agent/.shared/ui-ux-pro-max/data/react-performance.csv +45 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/jetpack-compose.csv +53 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/react.csv +54 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
- package/.agent/.shared/ui-ux-pro-max/data/stacks/vue.csv +50 -0
- package/.agent/.shared/ui-ux-pro-max/data/styles.csv +59 -0
- package/.agent/.shared/ui-ux-pro-max/data/typography.csv +58 -0
- package/.agent/.shared/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
- package/.agent/.shared/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
- package/.agent/.shared/ui-ux-pro-max/data/web-interface.csv +31 -0
- package/.agent/.shared/ui-ux-pro-max/scripts/core.py +258 -0
- package/.agent/.shared/ui-ux-pro-max/scripts/design_system.py +487 -0
- package/.agent/.shared/ui-ux-pro-max/scripts/search.py +76 -0
- package/.agent/ARCHITECTURE.md +225 -0
- package/.agent/CONTEXT.md +229 -0
- package/.agent/FEATURE_ROADMAP.md +435 -0
- package/.agent/PROMPT_TEMPLATES.md +261 -0
- package/.agent/agents/backend-specialist.md +263 -0
- package/.agent/agents/database-architect.md +226 -0
- package/.agent/agents/debugger.md +225 -0
- package/.agent/agents/devops-engineer.md +242 -0
- package/.agent/agents/documentation-writer.md +104 -0
- package/.agent/agents/explorer-agent.md +73 -0
- package/.agent/agents/frontend-specialist.md +556 -0
- package/.agent/agents/game-developer.md +162 -0
- package/.agent/agents/mobile-developer.md +377 -0
- package/.agent/agents/orchestrator.md +416 -0
- package/.agent/agents/penetration-tester.md +188 -0
- package/.agent/agents/performance-optimizer.md +187 -0
- package/.agent/agents/project-planner.md +403 -0
- package/.agent/agents/security-auditor.md +170 -0
- package/.agent/agents/seo-specialist.md +111 -0
- package/.agent/agents/test-engineer.md +158 -0
- package/.agent/rules/GEMINI.md +251 -0
- package/.agent/skills/api-patterns/SKILL.md +81 -0
- package/.agent/skills/api-patterns/api-style.md +42 -0
- package/.agent/skills/api-patterns/auth.md +24 -0
- package/.agent/skills/api-patterns/documentation.md +26 -0
- package/.agent/skills/api-patterns/graphql.md +41 -0
- package/.agent/skills/api-patterns/rate-limiting.md +31 -0
- package/.agent/skills/api-patterns/response.md +37 -0
- package/.agent/skills/api-patterns/rest.md +40 -0
- package/.agent/skills/api-patterns/scripts/api_validator.py +211 -0
- package/.agent/skills/api-patterns/security-testing.md +122 -0
- package/.agent/skills/api-patterns/trpc.md +41 -0
- package/.agent/skills/api-patterns/versioning.md +22 -0
- package/.agent/skills/app-builder/SKILL.md +75 -0
- package/.agent/skills/app-builder/agent-coordination.md +71 -0
- package/.agent/skills/app-builder/feature-building.md +53 -0
- package/.agent/skills/app-builder/project-detection.md +34 -0
- package/.agent/skills/app-builder/scaffolding.md +118 -0
- package/.agent/skills/app-builder/tech-stack.md +40 -0
- package/.agent/skills/app-builder/templates/SKILL.md +39 -0
- package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md +76 -0
- package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md +92 -0
- package/.agent/skills/app-builder/templates/cli-tool/TEMPLATE.md +88 -0
- package/.agent/skills/app-builder/templates/electron-desktop/TEMPLATE.md +88 -0
- package/.agent/skills/app-builder/templates/express-api/TEMPLATE.md +83 -0
- package/.agent/skills/app-builder/templates/flutter-app/TEMPLATE.md +90 -0
- package/.agent/skills/app-builder/templates/monorepo-turborepo/TEMPLATE.md +90 -0
- package/.agent/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md +82 -0
- package/.agent/skills/app-builder/templates/nextjs-saas/TEMPLATE.md +100 -0
- package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md +106 -0
- package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md +101 -0
- package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md +83 -0
- package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md +93 -0
- package/.agent/skills/architecture/SKILL.md +55 -0
- package/.agent/skills/architecture/context-discovery.md +43 -0
- package/.agent/skills/architecture/examples.md +94 -0
- package/.agent/skills/architecture/pattern-selection.md +68 -0
- package/.agent/skills/architecture/patterns-reference.md +50 -0
- package/.agent/skills/architecture/trade-off-analysis.md +77 -0
- package/.agent/skills/bash-linux/SKILL.md +199 -0
- package/.agent/skills/behavioral-modes/SKILL.md +242 -0
- package/.agent/skills/brainstorming/SKILL.md +163 -0
- package/.agent/skills/brainstorming/dynamic-questioning.md +350 -0
- package/.agent/skills/clean-code/SKILL.md +201 -0
- package/.agent/skills/code-review-checklist/SKILL.md +109 -0
- package/.agent/skills/database-design/SKILL.md +52 -0
- package/.agent/skills/database-design/database-selection.md +43 -0
- package/.agent/skills/database-design/indexing.md +39 -0
- package/.agent/skills/database-design/migrations.md +48 -0
- package/.agent/skills/database-design/optimization.md +36 -0
- package/.agent/skills/database-design/orm-selection.md +30 -0
- package/.agent/skills/database-design/schema-design.md +56 -0
- package/.agent/skills/database-design/scripts/schema_validator.py +172 -0
- package/.agent/skills/deployment-procedures/SKILL.md +241 -0
- package/.agent/skills/doc.md +177 -0
- package/.agent/skills/docker-expert/SKILL.md +409 -0
- package/.agent/skills/documentation-templates/SKILL.md +194 -0
- package/.agent/skills/frontend-design/SKILL.md +396 -0
- package/.agent/skills/frontend-design/animation-guide.md +331 -0
- package/.agent/skills/frontend-design/color-system.md +311 -0
- package/.agent/skills/frontend-design/decision-trees.md +418 -0
- package/.agent/skills/frontend-design/motion-graphics.md +306 -0
- package/.agent/skills/frontend-design/scripts/accessibility_checker.py +183 -0
- package/.agent/skills/frontend-design/scripts/ux_audit.py +722 -0
- package/.agent/skills/frontend-design/typography-system.md +345 -0
- package/.agent/skills/frontend-design/ux-psychology.md +541 -0
- package/.agent/skills/frontend-design/visual-effects.md +383 -0
- package/.agent/skills/game-development/2d-games/SKILL.md +119 -0
- package/.agent/skills/game-development/3d-games/SKILL.md +135 -0
- package/.agent/skills/game-development/SKILL.md +167 -0
- package/.agent/skills/game-development/game-art/SKILL.md +185 -0
- package/.agent/skills/game-development/game-audio/SKILL.md +190 -0
- package/.agent/skills/game-development/game-design/SKILL.md +129 -0
- package/.agent/skills/game-development/mobile-games/SKILL.md +108 -0
- package/.agent/skills/game-development/multiplayer/SKILL.md +132 -0
- package/.agent/skills/game-development/pc-games/SKILL.md +144 -0
- package/.agent/skills/game-development/vr-ar/SKILL.md +123 -0
- package/.agent/skills/game-development/web-games/SKILL.md +150 -0
- package/.agent/skills/geo-fundamentals/SKILL.md +156 -0
- package/.agent/skills/geo-fundamentals/scripts/geo_checker.py +289 -0
- package/.agent/skills/i18n-localization/SKILL.md +154 -0
- package/.agent/skills/i18n-localization/scripts/i18n_checker.py +241 -0
- package/.agent/skills/lint-and-validate/SKILL.md +45 -0
- package/.agent/skills/lint-and-validate/scripts/lint_runner.py +172 -0
- package/.agent/skills/lint-and-validate/scripts/type_coverage.py +173 -0
- package/.agent/skills/mcp-builder/SKILL.md +176 -0
- package/.agent/skills/mobile-design/SKILL.md +394 -0
- package/.agent/skills/mobile-design/decision-trees.md +516 -0
- package/.agent/skills/mobile-design/mobile-backend.md +491 -0
- package/.agent/skills/mobile-design/mobile-color-system.md +420 -0
- package/.agent/skills/mobile-design/mobile-debugging.md +122 -0
- package/.agent/skills/mobile-design/mobile-design-thinking.md +357 -0
- package/.agent/skills/mobile-design/mobile-navigation.md +458 -0
- package/.agent/skills/mobile-design/mobile-performance.md +767 -0
- package/.agent/skills/mobile-design/mobile-testing.md +356 -0
- package/.agent/skills/mobile-design/mobile-typography.md +433 -0
- package/.agent/skills/mobile-design/platform-android.md +666 -0
- package/.agent/skills/mobile-design/platform-ios.md +561 -0
- package/.agent/skills/mobile-design/scripts/mobile_audit.py +670 -0
- package/.agent/skills/mobile-design/touch-psychology.md +537 -0
- package/.agent/skills/nestjs-expert/SKILL.md +552 -0
- package/.agent/skills/nextjs-best-practices/SKILL.md +203 -0
- package/.agent/skills/nodejs-best-practices/SKILL.md +333 -0
- package/.agent/skills/parallel-agents/SKILL.md +175 -0
- package/.agent/skills/performance-profiling/SKILL.md +143 -0
- package/.agent/skills/performance-profiling/scripts/lighthouse_audit.py +76 -0
- package/.agent/skills/plan-writing/SKILL.md +152 -0
- package/.agent/skills/powershell-windows/SKILL.md +167 -0
- package/.agent/skills/prisma-expert/SKILL.md +355 -0
- package/.agent/skills/python-patterns/SKILL.md +441 -0
- package/.agent/skills/react-patterns/SKILL.md +198 -0
- package/.agent/skills/red-team-tactics/SKILL.md +199 -0
- package/.agent/skills/seo-fundamentals/SKILL.md +129 -0
- package/.agent/skills/seo-fundamentals/scripts/seo_checker.py +219 -0
- package/.agent/skills/server-management/SKILL.md +161 -0
- package/.agent/skills/systematic-debugging/SKILL.md +109 -0
- package/.agent/skills/tailwind-patterns/SKILL.md +269 -0
- package/.agent/skills/tdd-workflow/SKILL.md +149 -0
- package/.agent/skills/testing-patterns/SKILL.md +178 -0
- package/.agent/skills/testing-patterns/scripts/test_runner.py +219 -0
- package/.agent/skills/typescript-expert/SKILL.md +429 -0
- package/.agent/skills/typescript-expert/references/tsconfig-strict.json +92 -0
- package/.agent/skills/typescript-expert/references/typescript-cheatsheet.md +383 -0
- package/.agent/skills/typescript-expert/references/utility-types.ts +335 -0
- package/.agent/skills/typescript-expert/scripts/ts_diagnostic.py +203 -0
- package/.agent/skills/ui-ux-pro-max/SKILL.md +351 -0
- package/.agent/skills/ui-ux-pro-max/data/charts.csv +26 -0
- package/.agent/skills/ui-ux-pro-max/data/colors.csv +97 -0
- package/.agent/skills/ui-ux-pro-max/data/icons.csv +101 -0
- package/.agent/skills/ui-ux-pro-max/data/landing.csv +31 -0
- package/.agent/skills/ui-ux-pro-max/data/products.csv +97 -0
- package/.agent/skills/ui-ux-pro-max/data/prompts.csv +24 -0
- package/.agent/skills/ui-ux-pro-max/data/react-performance.csv +45 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/flutter.csv +53 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv +56 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/nextjs.csv +53 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv +51 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv +59 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/react-native.csv +52 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/react.csv +54 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/shadcn.csv +61 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/svelte.csv +54 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/swiftui.csv +51 -0
- package/.agent/skills/ui-ux-pro-max/data/stacks/vue.csv +50 -0
- package/.agent/skills/ui-ux-pro-max/data/styles.csv +59 -0
- package/.agent/skills/ui-ux-pro-max/data/typography.csv +58 -0
- package/.agent/skills/ui-ux-pro-max/data/ui-reasoning.csv +101 -0
- package/.agent/skills/ui-ux-pro-max/data/ux-guidelines.csv +100 -0
- package/.agent/skills/ui-ux-pro-max/data/web-interface.csv +31 -0
- package/.agent/skills/ui-ux-pro-max/scripts/core.py +257 -0
- package/.agent/skills/ui-ux-pro-max/scripts/design_system.py +487 -0
- package/.agent/skills/ui-ux-pro-max/scripts/search.py +76 -0
- package/.agent/skills/vulnerability-scanner/SKILL.md +276 -0
- package/.agent/skills/vulnerability-scanner/checklists.md +121 -0
- package/.agent/skills/vulnerability-scanner/scripts/security_scan.py +458 -0
- package/.agent/skills/webapp-testing/SKILL.md +187 -0
- package/.agent/skills/webapp-testing/scripts/playwright_runner.py +173 -0
- package/.agent/workflows/brainstorm.md +113 -0
- package/.agent/workflows/create.md +59 -0
- package/.agent/workflows/debug.md +103 -0
- package/.agent/workflows/deploy.md +176 -0
- package/.agent/workflows/enhance.md +63 -0
- package/.agent/workflows/orchestrate.md +237 -0
- package/.agent/workflows/plan.md +89 -0
- package/.agent/workflows/preview.md +80 -0
- package/.agent/workflows/status.md +86 -0
- package/.agent/workflows/test.md +144 -0
- package/.agent/workflows/ui-ux-pro-max.md +231 -0
- package/LICENSE +21 -0
- package/README.md +101 -0
- package/bin/cli.js +235 -0
- package/index.js +1 -0
- package/package.json +43 -0
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# tRPC Principles
|
|
2
|
+
|
|
3
|
+
> End-to-end type safety for TypeScript monorepos.
|
|
4
|
+
|
|
5
|
+
## When to Use
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
✅ Perfect fit:
|
|
9
|
+
├── TypeScript on both ends
|
|
10
|
+
├── Monorepo structure
|
|
11
|
+
├── Internal tools
|
|
12
|
+
├── Rapid development
|
|
13
|
+
└── Type safety critical
|
|
14
|
+
|
|
15
|
+
❌ Poor fit:
|
|
16
|
+
├── Non-TypeScript clients
|
|
17
|
+
├── Public API
|
|
18
|
+
├── Need REST conventions
|
|
19
|
+
└── Multiple language backends
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Key Benefits
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
Why tRPC:
|
|
26
|
+
├── Zero schema maintenance
|
|
27
|
+
├── End-to-end type inference
|
|
28
|
+
├── IDE autocomplete across stack
|
|
29
|
+
├── Instant API changes reflected
|
|
30
|
+
└── No code generation step
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Integration Patterns
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
Common setups:
|
|
37
|
+
├── Next.js + tRPC (most common)
|
|
38
|
+
├── Monorepo with shared types
|
|
39
|
+
├── Remix + tRPC
|
|
40
|
+
└── Any TS frontend + backend
|
|
41
|
+
```
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# Versioning Strategies
|
|
2
|
+
|
|
3
|
+
> Plan for API evolution from day one.
|
|
4
|
+
|
|
5
|
+
## Decision Factors
|
|
6
|
+
|
|
7
|
+
| Strategy | Implementation | Trade-offs |
|
|
8
|
+
|----------|---------------|------------|
|
|
9
|
+
| **URI** | /v1/users | Clear, easy caching |
|
|
10
|
+
| **Header** | Accept-Version: 1 | Cleaner URLs, harder discovery |
|
|
11
|
+
| **Query** | ?version=1 | Easy to add, messy |
|
|
12
|
+
| **None** | Evolve carefully | Best for internal, risky for public |
|
|
13
|
+
|
|
14
|
+
## Versioning Philosophy
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
Consider:
|
|
18
|
+
├── Public API? → Version in URI
|
|
19
|
+
├── Internal only? → May not need versioning
|
|
20
|
+
├── GraphQL? → Typically no versions (evolve schema)
|
|
21
|
+
├── tRPC? → Types enforce compatibility
|
|
22
|
+
```
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: app-builder
|
|
3
|
+
description: Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
|
|
4
|
+
allowed-tools: Read, Write, Edit, Glob, Grep, Bash, Agent
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# App Builder - Application Building Orchestrator
|
|
8
|
+
|
|
9
|
+
> Analyzes user's requests, determines tech stack, plans structure, and coordinates agents.
|
|
10
|
+
|
|
11
|
+
## 🎯 Selective Reading Rule
|
|
12
|
+
|
|
13
|
+
**Read ONLY files relevant to the request!** Check the content map, find what you need.
|
|
14
|
+
|
|
15
|
+
| File | Description | When to Read |
|
|
16
|
+
|------|-------------|--------------|
|
|
17
|
+
| `project-detection.md` | Keyword matrix, project type detection | Starting new project |
|
|
18
|
+
| `tech-stack.md` | 2025 default stack, alternatives | Choosing technologies |
|
|
19
|
+
| `agent-coordination.md` | Agent pipeline, execution order | Coordinating multi-agent work |
|
|
20
|
+
| `scaffolding.md` | Directory structure, core files | Creating project structure |
|
|
21
|
+
| `feature-building.md` | Feature analysis, error handling | Adding features to existing project |
|
|
22
|
+
| `templates/SKILL.md` | **Project templates** | Scaffolding new project |
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## 📦 Templates (13)
|
|
27
|
+
|
|
28
|
+
Quick-start scaffolding for new projects. **Read the matching template only!**
|
|
29
|
+
|
|
30
|
+
| Template | Tech Stack | When to Use |
|
|
31
|
+
|----------|------------|-------------|
|
|
32
|
+
| [nextjs-fullstack](templates/nextjs-fullstack/TEMPLATE.md) | Next.js + Prisma | Full-stack web app |
|
|
33
|
+
| [nextjs-saas](templates/nextjs-saas/TEMPLATE.md) | Next.js + Stripe | SaaS product |
|
|
34
|
+
| [nextjs-static](templates/nextjs-static/TEMPLATE.md) | Next.js + Framer | Landing page |
|
|
35
|
+
| [nuxt-app](templates/nuxt-app/TEMPLATE.md) | Nuxt 3 + Pinia | Vue full-stack app |
|
|
36
|
+
| [express-api](templates/express-api/TEMPLATE.md) | Express + JWT | REST API |
|
|
37
|
+
| [python-fastapi](templates/python-fastapi/TEMPLATE.md) | FastAPI | Python API |
|
|
38
|
+
| [react-native-app](templates/react-native-app/TEMPLATE.md) | Expo + Zustand | Mobile app |
|
|
39
|
+
| [flutter-app](templates/flutter-app/TEMPLATE.md) | Flutter + Riverpod | Cross-platform mobile |
|
|
40
|
+
| [electron-desktop](templates/electron-desktop/TEMPLATE.md) | Electron + React | Desktop app |
|
|
41
|
+
| [chrome-extension](templates/chrome-extension/TEMPLATE.md) | Chrome MV3 | Browser extension |
|
|
42
|
+
| [cli-tool](templates/cli-tool/TEMPLATE.md) | Node.js + Commander | CLI app |
|
|
43
|
+
| [monorepo-turborepo](templates/monorepo-turborepo/TEMPLATE.md) | Turborepo + pnpm | Monorepo |
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## 🔗 Related Agents
|
|
48
|
+
|
|
49
|
+
| Agent | Role |
|
|
50
|
+
|-------|------|
|
|
51
|
+
| `project-planner` | Task breakdown, dependency graph |
|
|
52
|
+
| `frontend-specialist` | UI components, pages |
|
|
53
|
+
| `backend-specialist` | API, business logic |
|
|
54
|
+
| `database-architect` | Schema, migrations |
|
|
55
|
+
| `devops-engineer` | Deployment, preview |
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## Usage Example
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
User: "Make an Instagram clone with photo sharing and likes"
|
|
63
|
+
|
|
64
|
+
App Builder Process:
|
|
65
|
+
1. Project type: Social Media App
|
|
66
|
+
2. Tech stack: Next.js + Prisma + Cloudinary + Clerk
|
|
67
|
+
3. Create plan:
|
|
68
|
+
├─ Database schema (users, posts, likes, follows)
|
|
69
|
+
├─ API routes (12 endpoints)
|
|
70
|
+
├─ Pages (feed, profile, upload)
|
|
71
|
+
└─ Components (PostCard, Feed, LikeButton)
|
|
72
|
+
4. Coordinate agents
|
|
73
|
+
5. Report progress
|
|
74
|
+
6. Start preview
|
|
75
|
+
```
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# Agent Coordination
|
|
2
|
+
|
|
3
|
+
> How App Builder orchestrates specialist agents.
|
|
4
|
+
|
|
5
|
+
## Agent Pipeline
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
9
|
+
│ APP BUILDER (Orchestrator) │
|
|
10
|
+
└─────────────────────────────────────────────────────────────┘
|
|
11
|
+
│
|
|
12
|
+
▼
|
|
13
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
14
|
+
│ PROJECT PLANNER │
|
|
15
|
+
│ • Task breakdown │
|
|
16
|
+
│ • Dependency graph │
|
|
17
|
+
│ • File structure planning │
|
|
18
|
+
│ • Create {task-slug}.md in project root (MANDATORY) │
|
|
19
|
+
└─────────────────────────────────────────────────────────────┘
|
|
20
|
+
│
|
|
21
|
+
▼
|
|
22
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
23
|
+
│ CHECKPOINT: PLAN VERIFICATION │
|
|
24
|
+
│ 🔴 VERIFY: Does {task-slug}.md exist in project root? │
|
|
25
|
+
│ 🔴 If NO → STOP → Create plan file first │
|
|
26
|
+
│ 🔴 If YES → Proceed to specialist agents │
|
|
27
|
+
└─────────────────────────────────────────────────────────────┘
|
|
28
|
+
│
|
|
29
|
+
┌───────────────────┼───────────────────┐
|
|
30
|
+
▼ ▼ ▼
|
|
31
|
+
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
|
32
|
+
│ DATABASE │ │ BACKEND │ │ FRONTEND │
|
|
33
|
+
│ ARCHITECT │ │ SPECIALIST │ │ SPECIALIST │
|
|
34
|
+
│ │ │ │ │ │
|
|
35
|
+
│ • Schema design │ │ • API routes │ │ • Components │
|
|
36
|
+
│ • Migrations │ │ • Controllers │ │ • Pages │
|
|
37
|
+
│ • Seed data │ │ • Middleware │ │ • Styling │
|
|
38
|
+
└─────────────────┘ └─────────────────┘ └─────────────────┘
|
|
39
|
+
│ │ │
|
|
40
|
+
└───────────────────┼───────────────────┘
|
|
41
|
+
▼
|
|
42
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
43
|
+
│ PARALLEL PHASE (Optional) │
|
|
44
|
+
│ • Security Auditor → Vulnerability check │
|
|
45
|
+
│ • Test Engineer → Unit tests │
|
|
46
|
+
│ • Performance Optimizer → Bundle analysis │
|
|
47
|
+
└─────────────────────────────────────────────────────────────┘
|
|
48
|
+
│
|
|
49
|
+
▼
|
|
50
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
51
|
+
│ DEVOPS ENGINEER │
|
|
52
|
+
│ • Environment setup │
|
|
53
|
+
│ • Preview deployment │
|
|
54
|
+
│ • Health check │
|
|
55
|
+
└─────────────────────────────────────────────────────────────┘
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Execution Order
|
|
59
|
+
|
|
60
|
+
| Phase | Agent(s) | Parallel? | Prerequisite | CHECKPOINT |
|
|
61
|
+
|-------|----------|-----------|--------------|------------|
|
|
62
|
+
| 0 | Socratic Gate | ❌ | - | ✅ Ask 3 questions |
|
|
63
|
+
| 1 | Project Planner | ❌ | Questions answered | ✅ **PLAN.md created** |
|
|
64
|
+
| 1.5 | **PLAN VERIFICATION** | ❌ | PLAN.md exists | ✅ **File exists in root** |
|
|
65
|
+
| 2 | Database Architect | ❌ | Plan ready | Schema defined |
|
|
66
|
+
| 3 | Backend Specialist | ❌ | Schema ready | API routes created |
|
|
67
|
+
| 4 | Frontend Specialist | ✅ | API ready (partial) | UI components ready |
|
|
68
|
+
| 5 | Security Auditor, Test Engineer | ✅ | Code ready | Tests & audit pass |
|
|
69
|
+
| 6 | DevOps Engineer | ❌ | All code ready | Deployment ready |
|
|
70
|
+
|
|
71
|
+
> 🔴 **CRITICAL:** Phase 1.5 is MANDATORY. No specialist agents proceed without PLAN.md verification.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Feature Building
|
|
2
|
+
|
|
3
|
+
> How to analyze and implement new features.
|
|
4
|
+
|
|
5
|
+
## Feature Analysis
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
Request: "add payment system"
|
|
9
|
+
|
|
10
|
+
Analysis:
|
|
11
|
+
├── Required Changes:
|
|
12
|
+
│ ├── Database: orders, payments tables
|
|
13
|
+
│ ├── Backend: /api/checkout, /api/webhooks/stripe
|
|
14
|
+
│ ├── Frontend: CheckoutForm, PaymentSuccess
|
|
15
|
+
│ └── Config: Stripe API keys
|
|
16
|
+
│
|
|
17
|
+
├── Dependencies:
|
|
18
|
+
│ ├── stripe package
|
|
19
|
+
│ └── Existing user authentication
|
|
20
|
+
│
|
|
21
|
+
└── Estimated Time: 15-20 minutes
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Iterative Enhancement Process
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
1. Analyze existing project
|
|
28
|
+
2. Create change plan
|
|
29
|
+
3. Present plan to user
|
|
30
|
+
4. Get approval
|
|
31
|
+
5. Apply changes
|
|
32
|
+
6. Test
|
|
33
|
+
7. Show preview
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Error Handling
|
|
37
|
+
|
|
38
|
+
| Error Type | Solution Strategy |
|
|
39
|
+
|------------|-------------------|
|
|
40
|
+
| TypeScript Error | Fix type, add missing import |
|
|
41
|
+
| Missing Dependency | Run npm install |
|
|
42
|
+
| Port Conflict | Suggest alternative port |
|
|
43
|
+
| Database Error | Check migration, validate connection |
|
|
44
|
+
|
|
45
|
+
## Recovery Strategy
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
1. Detect error
|
|
49
|
+
2. Try automatic fix
|
|
50
|
+
3. If failed, report to user
|
|
51
|
+
4. Suggest alternative
|
|
52
|
+
5. Rollback if necessary
|
|
53
|
+
```
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# Project Type Detection
|
|
2
|
+
|
|
3
|
+
> Analyze user requests to determine project type and template.
|
|
4
|
+
|
|
5
|
+
## Keyword Matrix
|
|
6
|
+
|
|
7
|
+
| Keywords | Project Type | Template |
|
|
8
|
+
|----------|--------------|----------|
|
|
9
|
+
| blog, post, article | Blog | astro-static |
|
|
10
|
+
| e-commerce, product, cart, payment | E-commerce | nextjs-saas |
|
|
11
|
+
| dashboard, panel, management | Admin Dashboard | nextjs-fullstack |
|
|
12
|
+
| api, backend, service, rest | API Service | express-api |
|
|
13
|
+
| python, fastapi, django | Python API | python-fastapi |
|
|
14
|
+
| mobile, android, ios, react native | Mobile App (RN) | react-native-app |
|
|
15
|
+
| flutter, dart | Mobile App (Flutter) | flutter-app |
|
|
16
|
+
| portfolio, personal, cv | Portfolio | nextjs-static |
|
|
17
|
+
| crm, customer, sales | CRM | nextjs-fullstack |
|
|
18
|
+
| saas, subscription, stripe | SaaS | nextjs-saas |
|
|
19
|
+
| landing, promotional, marketing | Landing Page | nextjs-static |
|
|
20
|
+
| docs, documentation | Documentation | astro-static |
|
|
21
|
+
| extension, plugin, chrome | Browser Extension | chrome-extension |
|
|
22
|
+
| desktop, electron | Desktop App | electron-desktop |
|
|
23
|
+
| cli, command line, terminal | CLI Tool | cli-tool |
|
|
24
|
+
| monorepo, workspace | Monorepo | monorepo-turborepo |
|
|
25
|
+
|
|
26
|
+
## Detection Process
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
1. Tokenize user request
|
|
30
|
+
2. Extract keywords
|
|
31
|
+
3. Determine project type
|
|
32
|
+
4. Detect missing information → forward to conversation-manager
|
|
33
|
+
5. Suggest tech stack
|
|
34
|
+
```
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# Project Scaffolding
|
|
2
|
+
|
|
3
|
+
> Directory structure and core files for new projects.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Next.js Full-Stack Structure (2025 Optimized)
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
project-name/
|
|
11
|
+
├── src/
|
|
12
|
+
│ ├── app/ # Routes only (thin layer)
|
|
13
|
+
│ │ ├── layout.tsx
|
|
14
|
+
│ │ ├── page.tsx
|
|
15
|
+
│ │ ├── globals.css
|
|
16
|
+
│ │ ├── (auth)/ # Route group - auth pages
|
|
17
|
+
│ │ │ ├── login/page.tsx
|
|
18
|
+
│ │ │ └── register/page.tsx
|
|
19
|
+
│ │ ├── (dashboard)/ # Route group - dashboard layout
|
|
20
|
+
│ │ │ ├── layout.tsx
|
|
21
|
+
│ │ │ └── page.tsx
|
|
22
|
+
│ │ └── api/
|
|
23
|
+
│ │ └── [resource]/route.ts
|
|
24
|
+
│ │
|
|
25
|
+
│ ├── features/ # Feature-based modules
|
|
26
|
+
│ │ ├── auth/
|
|
27
|
+
│ │ │ ├── components/
|
|
28
|
+
│ │ │ ├── hooks/
|
|
29
|
+
│ │ │ ├── actions.ts # Server Actions
|
|
30
|
+
│ │ │ ├── queries.ts # Data fetching
|
|
31
|
+
│ │ │ └── types.ts
|
|
32
|
+
│ │ ├── products/
|
|
33
|
+
│ │ │ ├── components/
|
|
34
|
+
│ │ │ ├── actions.ts
|
|
35
|
+
│ │ │ └── queries.ts
|
|
36
|
+
│ │ └── cart/
|
|
37
|
+
│ │ └── ...
|
|
38
|
+
│ │
|
|
39
|
+
│ ├── shared/ # Shared utilities
|
|
40
|
+
│ │ ├── components/ui/ # Reusable UI components
|
|
41
|
+
│ │ ├── lib/ # Utils, helpers
|
|
42
|
+
│ │ └── hooks/ # Global hooks
|
|
43
|
+
│ │
|
|
44
|
+
│ └── server/ # Server-only code
|
|
45
|
+
│ ├── db/ # Database client (Prisma)
|
|
46
|
+
│ ├── auth/ # Auth config
|
|
47
|
+
│ └── services/ # External API integrations
|
|
48
|
+
│
|
|
49
|
+
├── prisma/
|
|
50
|
+
│ ├── schema.prisma
|
|
51
|
+
│ ├── migrations/
|
|
52
|
+
│ └── seed.ts
|
|
53
|
+
│
|
|
54
|
+
├── public/
|
|
55
|
+
├── .env.example
|
|
56
|
+
├── .env.local
|
|
57
|
+
├── package.json
|
|
58
|
+
├── tailwind.config.ts
|
|
59
|
+
├── tsconfig.json
|
|
60
|
+
└── README.md
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## Structure Principles
|
|
66
|
+
|
|
67
|
+
| Principle | Implementation |
|
|
68
|
+
|-----------|----------------|
|
|
69
|
+
| **Feature isolation** | Each feature in `features/` with its own components, hooks, actions |
|
|
70
|
+
| **Server/Client separation** | Server-only code in `server/`, prevents accidental client imports |
|
|
71
|
+
| **Thin routes** | `app/` only for routing, logic lives in `features/` |
|
|
72
|
+
| **Route groups** | `(groupName)/` for layout sharing without URL impact |
|
|
73
|
+
| **Shared code** | `shared/` for truly reusable UI and utilities |
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## Core Files
|
|
78
|
+
|
|
79
|
+
| File | Purpose |
|
|
80
|
+
|------|---------|
|
|
81
|
+
| `package.json` | Dependencies |
|
|
82
|
+
| `tsconfig.json` | TypeScript + path aliases (`@/features/*`) |
|
|
83
|
+
| `tailwind.config.ts` | Tailwind config |
|
|
84
|
+
| `.env.example` | Environment template |
|
|
85
|
+
| `README.md` | Project documentation |
|
|
86
|
+
| `.gitignore` | Git ignore rules |
|
|
87
|
+
| `prisma/schema.prisma` | Database schema |
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## Path Aliases (tsconfig.json)
|
|
92
|
+
|
|
93
|
+
```json
|
|
94
|
+
{
|
|
95
|
+
"compilerOptions": {
|
|
96
|
+
"paths": {
|
|
97
|
+
"@/*": ["./src/*"],
|
|
98
|
+
"@/features/*": ["./src/features/*"],
|
|
99
|
+
"@/shared/*": ["./src/shared/*"],
|
|
100
|
+
"@/server/*": ["./src/server/*"]
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## When to Use What
|
|
109
|
+
|
|
110
|
+
| Need | Location |
|
|
111
|
+
|------|----------|
|
|
112
|
+
| New page/route | `app/(group)/page.tsx` |
|
|
113
|
+
| Feature component | `features/[name]/components/` |
|
|
114
|
+
| Server action | `features/[name]/actions.ts` |
|
|
115
|
+
| Data fetching | `features/[name]/queries.ts` |
|
|
116
|
+
| Reusable button/input | `shared/components/ui/` |
|
|
117
|
+
| Database query | `server/db/` |
|
|
118
|
+
| External API call | `server/services/` |
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# Tech Stack Selection (2025)
|
|
2
|
+
|
|
3
|
+
> Default and alternative technology choices for web applications.
|
|
4
|
+
|
|
5
|
+
## Default Stack (Web App - 2025)
|
|
6
|
+
|
|
7
|
+
```yaml
|
|
8
|
+
Frontend:
|
|
9
|
+
framework: Next.js 16 (Stable)
|
|
10
|
+
language: TypeScript 5.7+
|
|
11
|
+
styling: Tailwind CSS v4
|
|
12
|
+
state: React 19 Actions / Server Components
|
|
13
|
+
bundler: Turbopack (Stable for Dev)
|
|
14
|
+
|
|
15
|
+
Backend:
|
|
16
|
+
runtime: Node.js 23
|
|
17
|
+
framework: Next.js API Routes / Hono (for Edge)
|
|
18
|
+
validation: Zod / TypeBox
|
|
19
|
+
|
|
20
|
+
Database:
|
|
21
|
+
primary: PostgreSQL
|
|
22
|
+
orm: Prisma / Drizzle
|
|
23
|
+
hosting: Supabase / Neon
|
|
24
|
+
|
|
25
|
+
Auth:
|
|
26
|
+
provider: Auth.js (v5) / Clerk
|
|
27
|
+
|
|
28
|
+
Monorepo:
|
|
29
|
+
tool: Turborepo 2.0
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Alternative Options
|
|
33
|
+
|
|
34
|
+
| Need | Default | Alternative |
|
|
35
|
+
|------|---------|-------------|
|
|
36
|
+
| Real-time | - | Supabase Realtime, Socket.io |
|
|
37
|
+
| File storage | - | Cloudinary, S3 |
|
|
38
|
+
| Payment | Stripe | LemonSqueezy, Paddle |
|
|
39
|
+
| Email | - | Resend, SendGrid |
|
|
40
|
+
| Search | - | Algolia, Typesense |
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: templates
|
|
3
|
+
description: Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
|
|
4
|
+
allowed-tools: Read, Glob, Grep
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Project Templates
|
|
8
|
+
|
|
9
|
+
> Quick-start templates for scaffolding new projects.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## 🎯 Selective Reading Rule
|
|
14
|
+
|
|
15
|
+
**Read ONLY the template matching user's project type!**
|
|
16
|
+
|
|
17
|
+
| Template | Tech Stack | When to Use |
|
|
18
|
+
|----------|------------|-------------|
|
|
19
|
+
| [nextjs-fullstack](nextjs-fullstack/TEMPLATE.md) | Next.js + Prisma | Full-stack web app |
|
|
20
|
+
| [nextjs-saas](nextjs-saas/TEMPLATE.md) | Next.js + Stripe | SaaS product |
|
|
21
|
+
| [nextjs-static](nextjs-static/TEMPLATE.md) | Next.js + Framer | Landing page |
|
|
22
|
+
| [express-api](express-api/TEMPLATE.md) | Express + JWT | REST API |
|
|
23
|
+
| [python-fastapi](python-fastapi/TEMPLATE.md) | FastAPI | Python API |
|
|
24
|
+
| [react-native-app](react-native-app/TEMPLATE.md) | Expo + Zustand | Mobile app |
|
|
25
|
+
| [flutter-app](flutter-app/TEMPLATE.md) | Flutter + Riverpod | Cross-platform |
|
|
26
|
+
| [electron-desktop](electron-desktop/TEMPLATE.md) | Electron + React | Desktop app |
|
|
27
|
+
| [chrome-extension](chrome-extension/TEMPLATE.md) | Chrome MV3 | Browser extension |
|
|
28
|
+
| [cli-tool](cli-tool/TEMPLATE.md) | Node.js + Commander | CLI app |
|
|
29
|
+
| [monorepo-turborepo](monorepo-turborepo/TEMPLATE.md) | Turborepo + pnpm | Monorepo |
|
|
30
|
+
| [astro-static](astro-static/TEMPLATE.md) | Astro + MDX | Blog / Docs |
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
|
|
36
|
+
1. User says "create [type] app"
|
|
37
|
+
2. Match to appropriate template
|
|
38
|
+
3. Read ONLY that template's TEMPLATE.md
|
|
39
|
+
4. Follow its tech stack and structure
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: astro-static
|
|
3
|
+
description: Astro static site template principles. Content-focused websites, blogs, documentation.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Astro Static Site Template
|
|
7
|
+
|
|
8
|
+
## Tech Stack
|
|
9
|
+
|
|
10
|
+
| Component | Technology |
|
|
11
|
+
|-----------|------------|
|
|
12
|
+
| Framework | Astro 4.x |
|
|
13
|
+
| Content | MDX + Content Collections |
|
|
14
|
+
| Styling | Tailwind CSS |
|
|
15
|
+
| Integrations | Sitemap, RSS, SEO |
|
|
16
|
+
| Output | Static/SSG |
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Directory Structure
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
project-name/
|
|
24
|
+
├── src/
|
|
25
|
+
│ ├── components/ # .astro components
|
|
26
|
+
│ ├── content/ # MDX content
|
|
27
|
+
│ │ ├── blog/
|
|
28
|
+
│ │ └── config.ts # Collection schemas
|
|
29
|
+
│ ├── layouts/ # Page layouts
|
|
30
|
+
│ ├── pages/ # File-based routing
|
|
31
|
+
│ └── styles/
|
|
32
|
+
├── public/ # Static assets
|
|
33
|
+
├── astro.config.mjs
|
|
34
|
+
└── package.json
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Key Concepts
|
|
40
|
+
|
|
41
|
+
| Concept | Description |
|
|
42
|
+
|---------|-------------|
|
|
43
|
+
| Content Collections | Type-safe content with Zod schemas |
|
|
44
|
+
| Islands Architecture | Partial hydration for interactivity |
|
|
45
|
+
| Zero JS by default | Static HTML unless needed |
|
|
46
|
+
| MDX Support | Markdown with components |
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## Setup Steps
|
|
51
|
+
|
|
52
|
+
1. `npm create astro@latest {{name}}`
|
|
53
|
+
2. Add integrations: `npx astro add mdx tailwind sitemap`
|
|
54
|
+
3. Configure `astro.config.mjs`
|
|
55
|
+
4. Create content collections
|
|
56
|
+
5. `npm run dev`
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## Deployment
|
|
61
|
+
|
|
62
|
+
| Platform | Method |
|
|
63
|
+
|----------|--------|
|
|
64
|
+
| Vercel | Auto-detected |
|
|
65
|
+
| Netlify | Auto-detected |
|
|
66
|
+
| Cloudflare Pages | Auto-detected |
|
|
67
|
+
| GitHub Pages | Build + deploy action |
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## Best Practices
|
|
72
|
+
|
|
73
|
+
- Use Content Collections for type safety
|
|
74
|
+
- Leverage static generation
|
|
75
|
+
- Add islands only where needed
|
|
76
|
+
- Optimize images with Astro Image
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: chrome-extension
|
|
3
|
+
description: Chrome Extension template principles. Manifest V3, React, TypeScript.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Chrome Extension Template
|
|
7
|
+
|
|
8
|
+
## Tech Stack
|
|
9
|
+
|
|
10
|
+
| Component | Technology |
|
|
11
|
+
|-----------|------------|
|
|
12
|
+
| Manifest | V3 |
|
|
13
|
+
| UI | React 18 |
|
|
14
|
+
| Language | TypeScript |
|
|
15
|
+
| Styling | Tailwind CSS |
|
|
16
|
+
| Bundler | Vite |
|
|
17
|
+
| Storage | Chrome Storage API |
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Directory Structure
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
project-name/
|
|
25
|
+
├── src/
|
|
26
|
+
│ ├── popup/ # Extension popup
|
|
27
|
+
│ ├── options/ # Options page
|
|
28
|
+
│ ├── background/ # Service worker
|
|
29
|
+
│ ├── content/ # Content scripts
|
|
30
|
+
│ ├── components/
|
|
31
|
+
│ ├── hooks/
|
|
32
|
+
│ └── lib/
|
|
33
|
+
│ ├── storage.ts # Chrome storage helpers
|
|
34
|
+
│ └── messaging.ts # Message passing
|
|
35
|
+
├── public/
|
|
36
|
+
│ ├── icons/
|
|
37
|
+
│ └── manifest.json
|
|
38
|
+
└── package.json
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## Manifest V3 Concepts
|
|
44
|
+
|
|
45
|
+
| Component | Purpose |
|
|
46
|
+
|-----------|---------|
|
|
47
|
+
| Service Worker | Background processing |
|
|
48
|
+
| Content Scripts | Page injection |
|
|
49
|
+
| Popup | User interface |
|
|
50
|
+
| Options Page | Settings |
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Permissions
|
|
55
|
+
|
|
56
|
+
| Permission | Use |
|
|
57
|
+
|------------|-----|
|
|
58
|
+
| storage | Save user data |
|
|
59
|
+
| activeTab | Current tab access |
|
|
60
|
+
| scripting | Inject scripts |
|
|
61
|
+
| host_permissions | Site access |
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## Setup Steps
|
|
66
|
+
|
|
67
|
+
1. `npm create vite {{name}} -- --template react-ts`
|
|
68
|
+
2. Add Chrome types: `npm install -D @types/chrome`
|
|
69
|
+
3. Configure Vite for multi-entry
|
|
70
|
+
4. Create manifest.json
|
|
71
|
+
5. `npm run dev` (watch mode)
|
|
72
|
+
6. Load in Chrome: `chrome://extensions` → Load unpacked
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## Development Tips
|
|
77
|
+
|
|
78
|
+
| Task | Method |
|
|
79
|
+
|------|--------|
|
|
80
|
+
| Debug Popup | Right-click icon → Inspect |
|
|
81
|
+
| Debug Background | Extensions page → Service worker |
|
|
82
|
+
| Debug Content | DevTools console on page |
|
|
83
|
+
| Hot Reload | `npm run dev` with watch |
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## Best Practices
|
|
88
|
+
|
|
89
|
+
- Use type-safe messaging
|
|
90
|
+
- Wrap Chrome APIs in promises
|
|
91
|
+
- Minimize permissions
|
|
92
|
+
- Handle offline gracefully
|