@mison/ag-kit-cn 2.0.1

package/.agent/skills/api-patterns/trpc.md

@@ -0,0 +1,41 @@
+# tRPC 原则
+
+> 为 TypeScript monorepos（TS 单仓）提供的端到端类型安全（type safety）。
+
+## 何时使用
+
+```
+✅ 完美契合:
+├── 前后端均为 TypeScript
+├── monorepo（单仓）结构
+├── 内部工具
+├── 快速迭代开发
+├── 类型安全（type safety）至关重要
+
+❌ 不契合:
+├── 非 TypeScript 客户端
+├── 公共 API 服务
+├── 需要遵循 REST 惯例
+├── 多语言后端环境
+```
+
+## 核心优势
+
+```
+为什么要用 tRPC:
+├── 零 Schema（模式）维护成本
+├── 端到端类型推断
+├── 跨技术栈的 IDE（集成开发环境）自动补全
+├── API 变更即时反映在前端
+└── 无需代码生成步骤
+```
+
+## 集成模式
+
+```
+常见配置:
+├── Next.js + tRPC（最常见）
+├── monorepo（单仓）共享类型定义
+├── Remix + tRPC
+└── 任意 TS（TypeScript）前端 + 后端
+```

package/.agent/skills/api-patterns/versioning.md

@@ -0,0 +1,22 @@
+# 版本控制策略
+
+> 从第一天起就规划 API 的演进。
+
+## 决策因素
+
+| 策略 | 实现方式 | 权衡 |
+| :--- | :------- | :---------------- |
+| **URI（路径）** | /v1/users | 清晰，易于缓存 |
+| **Header（请求头）** | Accept-Version: 1 | URL 更整洁，但版本发现较难 |
+| **Query（查询参数）** | ?version=1 | 易于添加，但显得凌乱 |
+| **无（None）** | 小心演进 | 适合内部使用，对公共 API 风险高 |
+
+## 版本哲学
+
+```
+考量:
+├── 公共 API? → 在 URI 中包含版本
+├── 仅内部使用? → 可能不需要版本控制
+├── GraphQL? → 通常无版本（演进 Schema（模式））
+├── tRPC? → 类型系统强制兼容性
+```

package/.agent/skills/app-builder/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: app-builder
+description: App Builder（应用构建编排器）主编排器。根据自然语言请求创建全栈应用，确定项目类型、选择技术栈并协调智能体。
+allowed-tools: Read, Write, Edit, Glob, Grep, Bash, Agent
+---
+
+# App Builder - 应用构建编排器
+
+> 分析用户请求，确定技术栈，规划结构，并协调智能体执行。
+
+## 🎯 选择性阅读规则
+
+**只阅读与当前请求相关的文件！** 先查看内容地图，再读取所需文档。
+
+| File（文件） | Description（描述） | When to Read（阅读时机） |
+| --- | --- | --- |
+| `project-detection.md` | 关键词矩阵、项目类型检测 | 开始新项目 |
+| `tech-stack.md` | 2026 默认技术栈及替代方案 | 选择技术时 |
+| `agent-coordination.md` | 智能体流水线、执行顺序 | 协调多智能体协作时 |
+| `scaffolding.md` | 目录结构、核心文件 | 创建项目结构时 |
+| `feature-building.md` | 功能分析、错误处理 | 在现有项目中添加功能时 |
+| `templates/SKILL.md` | **Project templates（项目模板）** | 为新项目搭建脚手架时 |
+
+---
+
+## 📦 模板（13）
+
+用于新项目快速脚手架搭建。**只读取匹配模板！**
+
+| Template（模板） | Tech Stack（技术栈） | When to Use（适用场景） |
+| --- | --- | --- |
+| [nextjs-fullstack](templates/nextjs-fullstack/TEMPLATE.md) | Next.js + Prisma | Full-stack（全栈）Web 应用 |
+| [nextjs-saas](templates/nextjs-saas/TEMPLATE.md) | Next.js + Stripe | SaaS（软件即服务）产品 |
+| [nextjs-static](templates/nextjs-static/TEMPLATE.md) | Next.js + Framer | Landing page（落地页） |
+| [nuxt-app](templates/nuxt-app/TEMPLATE.md) | Nuxt 3 + Pinia | Vue（前端框架）全栈应用 |
+| [express-api](templates/express-api/TEMPLATE.md) | Express + JWT | REST API（接口服务） |
+| [python-fastapi](templates/python-fastapi/TEMPLATE.md) | FastAPI | Python API（Python 接口） |
+| [react-native-app](templates/react-native-app/TEMPLATE.md) | Expo + Zustand | Mobile app（移动端应用） |
+| [flutter-app](templates/flutter-app/TEMPLATE.md) | Flutter + Riverpod | Cross-platform（跨平台）移动端 |
+| [electron-desktop](templates/electron-desktop/TEMPLATE.md) | Electron + React | Desktop app（桌面端应用） |
+| [chrome-extension](templates/chrome-extension/TEMPLATE.md) | Chrome MV3 | Browser extension（浏览器扩展） |
+| [cli-tool](templates/cli-tool/TEMPLATE.md) | Node.js + Commander | CLI（命令行）应用 |
+| [monorepo-turborepo](templates/monorepo-turborepo/TEMPLATE.md) | Turborepo + pnpm | Monorepo（单仓多包） |
+
+---
+
+## 🔗 相关智能体
+
+| Agent（智能体） | 角色 |
+| --- | --- |
+| `project-planner` | 任务拆解、依赖图构建 |
+| `frontend-specialist` | UI（用户界面）组件、页面 |
+| `backend-specialist` | API（接口）、业务逻辑 |
+| `database-architect` | 数据结构（Schema）、迁移 |
+| `devops-engineer` | 部署、预览 |
+
+---
+
+## 使用示例
+
+```
+用户：“做一个带照片分享和点赞功能的 Instagram 克隆”
+
+App Builder（应用构建编排器）过程：
+1. 项目类型：Social Media App（社交媒体应用）
+2. 技术栈：Next.js + Prisma + Cloudinary + Clerk
+3. 创建计划：
+   ├─ Database schema（数据库结构）：users, posts, likes, follows
+   ├─ API routes（API 路由）：12 个 endpoints（端点）
+   ├─ Pages（页面）：feed, profile, upload
+   └─ Components（组件）：PostCard, Feed, LikeButton
+4. 协调智能体
+5. 汇报进度
+6. 启动预览
+```

package/.agent/skills/app-builder/agent-coordination.md

@@ -0,0 +1,74 @@
+# Agent Coordination（智能体协同）
+
+> App Builder（应用构建编排器）如何编排各领域专家 Agent。
+
+## Agent Pipeline（智能体流水线）
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                 APP BUILDER（编排器）                        │
+└─────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│                PROJECT PLANNER（项目规划）                   │
+│  • 任务拆解                                                  │
+│  • 依赖图                                                    │
+│  • 文件结构规划                                              │
+│  • 在项目根目录创建 {task-slug}.md（MANDATORY）              │
+└─────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│      CHECKPOINT: PLAN VERIFICATION（计划验证）               │
+│  🔴 VERIFY（验证）：项目根目录是否存在 {task-slug}.md？        │
+│  🔴 若否 → 停止 → 先创建计划文件                              │
+│  🔴 若是 → 继续执行专家 Agent                                 │
+└─────────────────────────────────────────────────────────────┘
+                              │
+          ┌───────────────────┼───────────────────┐
+          ▼                   ▼                   ▼
+┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
+│ DATABASE        │ │ BACKEND         │ │ FRONTEND        │
+│ ARCHITECT       │ │ SPECIALIST      │ │ SPECIALIST      │
+│                 │ │                 │ │                 │
+│ • Schema design │ │ • API routes    │ │ • Components    │
+│   （模式设计）  │ │   （接口路由）  │ │   （组件）      │
+│ • Migrations    │ │ • Controllers   │ │ • Pages         │
+│   （迁移）      │ │   （控制器）    │ │   （页面）      │
+│ • Seed data     │ │ • Middleware    │ │ • Styling       │
+│   （种子数据）  │ │   （中间件）    │ │   （样式）      │
+└─────────────────┘ └─────────────────┘ └─────────────────┘
+          │                   │                   │
+          └───────────────────┼───────────────────┘
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│           PARALLEL PHASE（并行阶段，可选）                   │
+│  • Security Auditor（安全审计） → 漏洞检查                    │
+│  • Test Engineer（测试工程） → 单元测试                      │
+│  • Performance Optimizer（性能优化） → 包体分析               │
+└─────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│                     DEVOPS ENGINEER                          │
+│  • 环境设置                                                  │
+│  • 预览部署                                                  │
+│  • 健康检查                                                  │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Execution Order（执行顺序）
+
+| Phase（阶段） | Agent(s)（智能体） | Parallel?（是否并行） | Prerequisite（前置条件） | CHECKPOINT（检查点） |
+| --- | --- | --- | --- | --- |
+| 0 | Socratic Gate（苏格拉底之门） | ❌ | - | ✅ Ask 3 questions（先问 3 个问题） |
+| 1 | Project Planner（项目规划） | ❌ | Questions answered（问题已回答） | ✅ **`{task-slug}.md` created（已创建）** |
+| 1.5 | **PLAN VERIFICATION（计划验证）** | ❌ | `{task-slug}.md` exists（已存在） | ✅ **File exists in root（根目录存在）** |
+| 2 | Database Architect（数据库架构师） | ❌ | Plan ready（计划就绪） | Schema defined（模式已定义） |
+| 3 | Backend Specialist（后端专家） | ❌ | Schema ready（模式就绪） | API routes created（路由已创建） |
+| 4 | Frontend Specialist（前端专家） | ✅ | API ready (partial)（接口部分就绪） | UI components ready（组件就绪） |
+| 5 | Security Auditor（安全审计员）, Test Engineer（测试工程师） | ✅ | Code ready（代码就绪） | Tests & audit pass（测试与审计通过） |
+| 6 | DevOps Engineer（运维工程师） | ❌ | All code ready（代码就绪） | Deployment ready（部署就绪） |
+
+> 🔴 **CRITICAL（关键）：** Phase 1.5 is MANDATORY。没有 `{task-slug}.md` 验证，任何专家 Agent 不得进行后续操作。

package/.agent/skills/app-builder/feature-building.md

@@ -0,0 +1,53 @@
+# Feature Building（功能构建）
+
+> 如何分析并实现新功能。
+
+## Feature Analysis（功能分析）
+
+```
+Request（请求）: “增加支付系统”
+
+Analysis（分析）:
+├── 所需变更:
+│   ├── 数据库: orders, payments 表
+│   ├── 后端: /api/checkout, /api/webhooks/stripe 路由
+│   ├── 前端: CheckoutForm, PaymentSuccess 组件
+│   └── 配置: Stripe API（应用程序接口）密钥
+│
+├── Dependencies（依赖）:
+│   ├── stripe package（stripe 包）
+│   └── 现有的用户认证系统
+│
+└── Estimated Time（预计耗时）: 15-20 分钟
+```
+
+## Iterative Enhancement Process（迭代增强流程）
+
+```
+1. 分析现有项目
+2. 创建变更计划
+3. 向用户展示计划
+4. 获得批准
+5. 应用变更
+6. 测试
+7. 显示预览
+```
+
+## Error Handling（错误处理）
+
+| Error Type（错误类型） | Solution Strategy（处理策略） |
+| --- | --- |
+| TypeScript Error（类型错误） | 修复类型，添加缺失导入 |
+| Missing Dependency（缺失依赖） | 运行 npm install |
+| Port Conflict（端口冲突） | 建议替代端口 |
+| Database Error（数据库错误） | 检查迁移，验证连接 |
+
+## Recovery Strategy（恢复策略）
+
+```
+1. 检测错误
+2. 尝试自动修复
+3. 如果失败，向用户报告
+4. 建议替代方案
+5. 必要时回滚
+```

package/.agent/skills/app-builder/project-detection.md

@@ -0,0 +1,34 @@
+# Project Type Detection（项目类型检测）
+
+> 分析用户请求，确定项目类型与模板。
+
+## Keyword Matrix（关键词矩阵）
+
+| Keywords（关键词） | Project Type（项目类型） | Template（模板） |
+| --- | --- | --- |
+| blog, post, article | Blog（博客） | astro-static |
+| e-commerce, product, cart, payment | E-commerce（电商） | nextjs-saas |
+| dashboard, panel, management | Admin Dashboard（管理面板） | nextjs-fullstack |
+| api, backend, service, rest | API Service（接口服务） | express-api |
+| python, fastapi, django | Python API（Python 接口） | python-fastapi |
+| mobile, android, ios, react native | Mobile App（移动端应用，RN / React Native） | react-native-app |
+| flutter, dart | Mobile App（Flutter） | flutter-app |
+| portfolio, personal, cv | Portfolio（作品集） | nextjs-static |
+| crm, customer, sales | CRM（客户管理） | nextjs-fullstack |
+| saas, subscription, stripe | SaaS（软件即服务） | nextjs-saas |
+| landing, promotional, marketing | Landing Page（落地页） | nextjs-static |
+| docs, documentation | Documentation（文档） | astro-static |
+| extension, plugin, chrome | Browser Extension（浏览器扩展） | chrome-extension |
+| desktop, electron | Desktop App（桌面应用） | electron-desktop |
+| cli, command line, terminal | CLI Tool（命令行工具） | cli-tool |
+| monorepo, workspace | Monorepo（单体仓库） | monorepo-turborepo |
+
+## Detection Process（检测流程）
+
+```
+1. Tokenize user request（对用户请求分词）
+2. 提取关键词
+3. 确定项目类型
+4. 检测缺失信息 → 转发给 conversation-manager（对话管理器）
+5. 建议技术栈
+```

package/.agent/skills/app-builder/scaffolding.md

@@ -0,0 +1,118 @@
+# 项目脚手架
+
+> 新项目的目录结构与核心文件。
+
+---
+
+## Next.js 全栈结构（2025 优化版）
+
+```
+project-name/
+├── src/
+│   ├── app/                        # 路由层（仅路由，薄层）
+│   │   ├── layout.tsx
+│   │   ├── page.tsx
+│   │   ├── globals.css
+│   │   ├── (auth)/                 # 路由分组 - 认证页面
+│   │   │   ├── login/page.tsx
+│   │   │   └── register/page.tsx
+│   │   ├── (dashboard)/            # 路由分组 - 仪表盘布局
+│   │   │   ├── layout.tsx
+│   │   │   └── page.tsx
+│   │   └── api/
+│   │       └── [resource]/route.ts
+│   │
+│   ├── features/                   # Feature-based（功能模块）
+│   │   ├── auth/
+│   │   │   ├── components/
+│   │   │   ├── hooks/
+│   │   │   ├── actions.ts          # Server Actions（服务端动作）
+│   │   │   ├── queries.ts          # Data fetching（数据获取）
+│   │   │   └── types.ts
+│   │   ├── products/
+│   │   │   ├── components/
+│   │   │   ├── actions.ts
+│   │   │   └── queries.ts
+│   │   └── cart/
+│   │       └── ...
+│   │
+│   ├── shared/                     # Shared utilities（共享工具）
+│   │   ├── components/ui/          # 可复用 UI（用户界面）组件
+│   │   ├── lib/                    # 工具/辅助
+│   │   └── hooks/                  # hooks（钩子）
+│   │
+│   └── server/                     # 仅服务端代码
+│       ├── db/                     # Prisma（ORM）数据库客户端
+│       ├── auth/                   # 认证配置
+│       └── services/               # 外部 API（应用程序接口）集成
+│
+├── prisma/
+│   ├── schema.prisma
+│   ├── migrations/
+│   └── seed.ts
+│
+├── public/
+├── .env.example
+├── .env.local
+├── package.json
+├── tailwind.config.ts
+├── tsconfig.json
+└── README.md
+```
+
+---
+
+## 结构原则
+
+| 原则 | 实现方式 |
+| --- | --- |
+| **Feature isolation（功能隔离）** | 每个功能在 `features/` 下拥有自己的组件、hooks（钩子）、actions |
+| **Server/Client separation（服务端/客户端分离）** | 仅服务端代码放在 `server/`，防止客户端误导入 |
+| **Thin routes（薄路由层）** | `app/` 只负责路由，逻辑放在 `features/` |
+| **Route groups（路由分组）** | 使用 `(groupName)/` 共享布局且不影响 URL |
+| **Shared code（共享代码）** | `shared/` 存放真正可复用的 UI（用户界面）与工具 |
+
+---
+
+## 核心文件
+
+| 文件 | 用途 |
+| --- | --- |
+| `package.json` | 依赖管理 |
+| `tsconfig.json` | TypeScript（类型脚本语言）与路径别名（`@/features/*`） |
+| `tailwind.config.ts` | Tailwind（CSS 框架）配置 |
+| `.env.example` | 环境变量模板 |
+| `README.md` | 项目文档 |
+| `.gitignore` | Git 忽略规则 |
+| `prisma/schema.prisma` | Database schema（数据库结构） |
+
+---
+
+## 路径别名（tsconfig.json）
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/features/*": ["./src/features/*"],
+      "@/shared/*": ["./src/shared/*"],
+      "@/server/*": ["./src/server/*"]
+    }
+  }
+}
+```
+
+---
+
+## 使用位置指引
+
+| 需求 | 位置 |
+| --- | --- |
+| 新页面/路由 | `app/(group)/page.tsx` |
+| 功能组件 | `features/[name]/components/` |
+| Server action（服务端动作） | `features/[name]/actions.ts` |
+| Data fetching（数据获取） | `features/[name]/queries.ts` |
+| 可复用按钮/输入框 | `shared/components/ui/` |
+| 数据库查询 | `server/db/` |
+| 外部 API（应用程序接口）调用 | `server/services/` |

package/.agent/skills/app-builder/tech-stack.md

@@ -0,0 +1,40 @@
+# 技术栈选择（2026）
+
+> Web App（Web 应用）的默认与备选技术方案。
+
+## 默认技术栈（Web App - 2026）
+
+```yaml
+Frontend（前端）:
+  framework（框架）: Next.js 16 (Stable)
+  language（语言）: TypeScript 5.7+
+  styling（样式）: Tailwind CSS v4
+  state（状态）: React 19 Actions / Server Components
+  bundler（构建工具）: Turbopack（Stable for Dev，开发稳定）
+
+Backend（后端）:
+  runtime（运行时）: Node.js 23
+  framework（框架）: Next.js API Routes / Hono（Edge，边缘）
+  validation（校验）: Zod / TypeBox
+
+Database（数据库）:
+  primary（主选）: PostgreSQL
+  orm: Prisma / Drizzle
+  hosting（托管）: Supabase / Neon
+
+Auth（身份认证）:
+  provider（提供商）: Auth.js（v5） / Clerk
+
+Monorepo（多仓）:
+  tool（工具）: Turborepo 2.0
+```
+
+## 替代选项
+
+| Need（需求） | Default（默认） | Alternative（替代方案） |
+| --- | --- | --- |
+| Real-time（实时） | - | Supabase Realtime, Socket.io |
+| File storage（文件存储） | - | Cloudinary, S3 |
+| Payment（支付） | Stripe | LemonSqueezy, Paddle |
+| Email（邮件） | - | Resend, SendGrid |
+| Search（搜索） | - | Algolia, Typesense |

package/.agent/skills/app-builder/templates/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: templates
+description: Project scaffolding templates（项目脚手架模板）。用于从零创建新项目。包含 12 个技术栈模板。
+allowed-tools: Read, Glob, Grep
+---
+
+# Project Templates（项目模板）
+
+> 用于搭建新项目的快速启动模板。
+
+---
+
+## 🎯 Selective Reading Rule（选择性阅读规则）
+
+**仅阅读与用户项目类型匹配的模板！**
+
+| Template（模板） | Tech Stack（技术栈） | When to Use（适用场景） |
+| --- | --- | --- |
+| [nextjs-fullstack](nextjs-fullstack/TEMPLATE.md) | Next.js + Prisma | Full-stack web app（全栈 Web 应用） |
+| [nextjs-saas](nextjs-saas/TEMPLATE.md) | Next.js + Stripe | SaaS product（SaaS 产品） |
+| [nextjs-static](nextjs-static/TEMPLATE.md) | Next.js + Framer | Landing page（落地页） |
+| [express-api](express-api/TEMPLATE.md) | Express + JWT | REST API（接口服务） |
+| [python-fastapi](python-fastapi/TEMPLATE.md) | FastAPI | Python API（Python 接口） |
+| [react-native-app](react-native-app/TEMPLATE.md) | Expo + Zustand | Mobile app（移动应用） |
+| [flutter-app](flutter-app/TEMPLATE.md) | Flutter + Riverpod | Cross-platform（跨平台） |
+| [electron-desktop](electron-desktop/TEMPLATE.md) | Electron + React | Desktop app（桌面应用） |
+| [chrome-extension](chrome-extension/TEMPLATE.md) | Chrome MV3 | Browser extension（浏览器扩展） |
+| [cli-tool](cli-tool/TEMPLATE.md) | Node.js + Commander | CLI app（命令行应用） |
+| [monorepo-turborepo](monorepo-turborepo/TEMPLATE.md) | Turborepo + pnpm | Monorepo（单仓） |
+| [astro-static](astro-static/TEMPLATE.md) | Astro + MDX | Blog / Docs（博客/文档） |
+
+---
+
+## Usage（用法）
+
+1. 用户说 “create [type] app（创建 [type] 应用）”
+2. 匹配到合适模板
+3. **仅**阅读该模板的 `TEMPLATE.md`
+4. 遵循其技术栈和结构

package/.agent/skills/app-builder/templates/astro-static/TEMPLATE.md

@@ -0,0 +1,76 @@
+---
+name: astro-static
+description: Astro static site template principles（静态站点模板原则）。Content-focused websites（内容型网站）、blogs（博客）、documentation（文档）。
+---
+
+# Astro Static Site Template（静态站点模板）
+
+## Tech Stack（技术栈）
+
+| Component（组件） | Technology（技术） |
+| --- | --- |
+| Framework（框架） | Astro 4.x |
+| Content（内容） | MDX + Content Collections |
+| Styling（样式） | Tailwind CSS |
+| Integrations（集成） | Sitemap（站点地图）、RSS、SEO |
+| Output（输出） | Static/SSG（静态/SSG） |
+
+---
+
+## Directory Structure（目录结构）
+
+```
+project-name/
+├── src/
+│   ├── components/      # .astro components（.astro 组件）
+│   ├── content/         # MDX content（MDX 内容）
+│   │   ├── blog/
+│   │   └── config.ts    # Collection schemas（内容集合 Schema）
+│   ├── layouts/         # Page layouts（页面布局）
+│   ├── pages/           # File-based routing（基于文件的路由）
+│   └── styles/
+├── public/              # Static assets（静态资源）
+├── astro.config.mjs
+└── package.json
+```
+
+---
+
+## Key Concepts（关键概念）
+
+| Concept（概念） | Description（说明） |
+| --- | --- |
+| Content Collections（内容集合） | Type-safe content with Zod schemas（使用 Zod Schema 的类型安全内容） |
+| Islands Architecture（群岛架构） | Partial hydration for interactivity（仅对交互部分局部水合） |
+| Zero JS by default（默认零 JS） | Static HTML unless needed（除非需要，否则输出静态 HTML） |
+| MDX Support（MDX 支持） | Markdown with components（带组件的 Markdown） |
+
+---
+
+## Setup Steps（设置步骤）
+
+1. `npm create astro@latest {{name}}`
+2. Add integrations（添加集成）：`npx astro add mdx tailwind sitemap`
+3. Configure `astro.config.mjs`（配置）
+4. Create content collections（创建内容集合）
+5. `npm run dev`
+
+---
+
+## Deployment（部署）
+
+| Platform（平台） | Method（方式） |
+| --- | --- |
+| Vercel | Auto-detected（自动检测） |
+| Netlify | Auto-detected（自动检测） |
+| Cloudflare Pages | Auto-detected（自动检测） |
+| GitHub Pages | Build + deploy action（构建 + 部署工作流） |
+
+---
+
+## Best Practices（最佳实践）
+
+- Use Content Collections for type safety（保证类型安全）
+- Leverage static generation（优先使用静态生成）
+- Add islands only where needed（仅在需要时添加 Islands）
+- Optimize images with Astro Image（使用 Astro Image 优化图片）

package/.agent/skills/app-builder/templates/chrome-extension/TEMPLATE.md

@@ -0,0 +1,92 @@
+---
+name: chrome-extension
+description: Chrome Extension template（扩展模板）原则。Manifest V3（清单规范）、React、TypeScript。
+---
+
+# Chrome Extension Template（扩展模板）
+
+## Tech Stack（技术栈）
+
+| Component（组件） | Technology（技术） |
+| --- | --- |
+| Manifest（清单） | V3 |
+| UI（界面） | React 18 |
+| Language（语言） | TypeScript |
+| Styling（样式） | Tailwind CSS |
+| Bundler（打包器） | Vite |
+| Storage（存储） | Chrome Storage API（存储 API） |
+
+---
+
+## Directory Structure（目录结构）
+
+```
+project-name/
+├── src/
+│   ├── popup/           # Extension popup（扩展弹窗）
+│   ├── options/         # Options page（选项页）
+│   ├── background/      # Service worker（后台）
+│   ├── content/         # Content scripts（内容脚本）
+│   ├── components/
+│   ├── hooks/
+│   └── lib/
+│       ├── storage.ts   # Chrome storage helpers（Chrome 存储助手）
+│       └── messaging.ts # Message passing（消息传递）
+├── public/
+│   ├── icons/
+│   └── manifest.json
+└── package.json
+```
+
+---
+
+## Manifest V3 Concepts（Manifest V3 概念）
+
+| Component（组件） | Purpose（作用） |
+| --- | --- |
+| Service Worker（后台） | Background processing（后台处理） |
+| Content Scripts（内容脚本） | Page injection（页面注入） |
+| Popup（弹窗） | User interface（用户界面） |
+| Options Page（选项页） | Settings（设置） |
+
+---
+
+## Permissions（权限）
+
+| Permission（权限） | Use（用途） |
+| --- | --- |
+| storage | 保存用户数据 |
+| activeTab | 当前标签页访问 |
+| scripting | 注入脚本 |
+| host_permissions | 站点访问 |
+
+---
+
+## Setup Steps（设置步骤）
+
+1. `npm create vite {{name}} -- --template react-ts`
+2. 添加 Chrome 类型：`npm install -D @types/chrome`
+3. 配置 Vite 多入口
+4. 创建 `manifest.json`
+5. `npm run dev`（watch mode，监视模式）
+6. 在 Chrome 中加载：`chrome://extensions` → Load unpacked（加载已解压扩展）
+
+---
+
+## Development Tips（开发提示）
+
+| Task（任务） | Method（方法） |
+| --- | --- |
+| 调试 Popup（弹窗） | 右键图标 → Inspect（检查） |
+| 调试 Background（后台） | Extensions page（扩展管理页） → Service worker（后台） |
+| 调试 Content（内容脚本） | 页面 DevTools（开发者工具）控制台 |
+| Hot Reload（热更新） | `npm run dev`（watch mode） |
+
+---
+
+## Best Practices（最佳实践）
+
+- 使用 type-safe messaging（类型安全的消息传递）
+- 将 Chrome APIs 包装成 Promise（承诺）
+- 最小化权限
+- 优雅处理离线