@devflow-tools/cli 0.3.2 → 0.5.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.
Files changed (37) hide show
  1. package/README.md +50 -0
  2. package/dist/commands/init.d.ts +6 -2
  3. package/dist/commands/init.d.ts.map +1 -1
  4. package/dist/commands/init.js +53 -2
  5. package/dist/commands/init.js.map +1 -1
  6. package/dist/index.js +15 -0
  7. package/dist/index.js.map +1 -1
  8. package/dist/lib/plugin-setup.d.ts +23 -0
  9. package/dist/lib/plugin-setup.d.ts.map +1 -0
  10. package/dist/lib/plugin-setup.js +141 -0
  11. package/dist/lib/plugin-setup.js.map +1 -0
  12. package/dist/plugin-files/.claude-plugin/plugin.json +20 -0
  13. package/dist/plugin-files/CLAUDE.md +34 -0
  14. package/dist/plugin-files/dist/command-registry.json +235 -0
  15. package/dist/plugin-files/dist/skills/devflow:context/SKILL.md +29 -0
  16. package/dist/plugin-files/dist/skills/devflow:docker/SKILL.md +49 -0
  17. package/dist/plugin-files/dist/skills/devflow:electron/SKILL.md +49 -0
  18. package/dist/plugin-files/dist/skills/devflow:graph/SKILL.md +24 -0
  19. package/dist/plugin-files/dist/skills/devflow:graphql/SKILL.md +48 -0
  20. package/dist/plugin-files/dist/skills/devflow:knowledge/SKILL.md +24 -0
  21. package/dist/plugin-files/dist/skills/devflow:memory/SKILL.md +23 -0
  22. package/dist/plugin-files/dist/skills/devflow:nest/SKILL.md +48 -0
  23. package/dist/plugin-files/dist/skills/devflow:nextjs/SKILL.md +45 -0
  24. package/dist/plugin-files/dist/skills/devflow:performance/SKILL.md +49 -0
  25. package/dist/plugin-files/dist/skills/devflow:react/SKILL.md +57 -0
  26. package/dist/plugin-files/dist/skills/devflow:tailwind/SKILL.md +45 -0
  27. package/dist/plugin-files/dist/skills/devflow:taro/SKILL.md +48 -0
  28. package/dist/plugin-files/dist/skills/devflow:vue/SKILL.md +52 -0
  29. package/dist/plugin-files/dist/skills/devflow:workflow/SKILL.md +24 -0
  30. package/dist/plugin-files/hooks/constitution.md +20 -0
  31. package/dist/plugin-files/hooks/post-tool-use +106 -0
  32. package/dist/plugin-files/hooks/pre-tool-use +147 -0
  33. package/dist/plugin-files/hooks/session-start +96 -0
  34. package/dist/plugin-files/hooks/stop +31 -0
  35. package/dist/plugin-files/hooks.json +40 -0
  36. package/dist/plugin-files/package.json +29 -0
  37. package/package.json +25 -23
@@ -0,0 +1,235 @@
1
+ {
2
+ "version": 1,
3
+ "commands": {
4
+ "devflow:context": {
5
+ "mcpTools": [
6
+ "get_project_context",
7
+ "search_symbol"
8
+ ],
9
+ "blockedNative": [
10
+ "grep",
11
+ "find",
12
+ "rg",
13
+ "ag",
14
+ "Grep",
15
+ "Glob",
16
+ "Explore",
17
+ "WebSearch",
18
+ "WebFetch"
19
+ ]
20
+ },
21
+ "devflow:graph": {
22
+ "mcpTools": [
23
+ "get_dependency_graph"
24
+ ],
25
+ "blockedNative": [
26
+ "grep",
27
+ "find",
28
+ "rg",
29
+ "ag",
30
+ "Grep",
31
+ "Glob",
32
+ "Explore"
33
+ ]
34
+ },
35
+ "devflow:knowledge": {
36
+ "mcpTools": [
37
+ "get_knowledge"
38
+ ],
39
+ "blockedNative": [
40
+ "WebSearch",
41
+ "WebFetch"
42
+ ]
43
+ },
44
+ "devflow:memory": {
45
+ "mcpTools": [
46
+ "get_memory"
47
+ ],
48
+ "blockedNative": [
49
+ "grep",
50
+ "find",
51
+ "rg",
52
+ "ag",
53
+ "Grep",
54
+ "Glob",
55
+ "Explore"
56
+ ]
57
+ },
58
+ "devflow:workflow": {
59
+ "mcpTools": [
60
+ "run_workflow"
61
+ ],
62
+ "blockedNative": []
63
+ },
64
+ "devflow:react": {
65
+ "mcpTools": [
66
+ "react_diagnose_bug",
67
+ "react_new_feature",
68
+ "react_audit_performance",
69
+ "react_review_hooks",
70
+ "react_refactor_component",
71
+ "react_new_component"
72
+ ],
73
+ "blockedNative": [
74
+ "grep",
75
+ "find",
76
+ "rg",
77
+ "ag",
78
+ "Grep",
79
+ "Glob",
80
+ "Explore",
81
+ "WebSearch",
82
+ "WebFetch"
83
+ ]
84
+ },
85
+ "devflow:vue": {
86
+ "mcpTools": [
87
+ "vue_diagnose_bug",
88
+ "vue_new_component",
89
+ "vue_debug_reactivity"
90
+ ],
91
+ "blockedNative": [
92
+ "grep",
93
+ "find",
94
+ "rg",
95
+ "ag",
96
+ "Grep",
97
+ "Glob",
98
+ "Explore",
99
+ "WebSearch",
100
+ "WebFetch"
101
+ ]
102
+ },
103
+ "devflow:tailwind": {
104
+ "mcpTools": [
105
+ "tailwind_new_component"
106
+ ],
107
+ "blockedNative": [
108
+ "grep",
109
+ "find",
110
+ "rg",
111
+ "ag",
112
+ "Grep",
113
+ "Glob",
114
+ "Explore",
115
+ "WebSearch",
116
+ "WebFetch"
117
+ ]
118
+ },
119
+ "devflow:taro": {
120
+ "mcpTools": [
121
+ "taro_new_page"
122
+ ],
123
+ "blockedNative": [
124
+ "grep",
125
+ "find",
126
+ "rg",
127
+ "ag",
128
+ "Grep",
129
+ "Glob",
130
+ "Explore",
131
+ "WebSearch",
132
+ "WebFetch"
133
+ ]
134
+ },
135
+ "devflow:nest": {
136
+ "mcpTools": [
137
+ "nest_new_module",
138
+ "nest_diagnose_bug"
139
+ ],
140
+ "blockedNative": [
141
+ "grep",
142
+ "find",
143
+ "rg",
144
+ "ag",
145
+ "Grep",
146
+ "Glob",
147
+ "Explore",
148
+ "WebSearch",
149
+ "WebFetch"
150
+ ]
151
+ },
152
+ "devflow:graphql": {
153
+ "mcpTools": [
154
+ "graphql_new_graphql_type",
155
+ "graphql_diagnose_bug"
156
+ ],
157
+ "blockedNative": [
158
+ "grep",
159
+ "find",
160
+ "rg",
161
+ "ag",
162
+ "Grep",
163
+ "Glob",
164
+ "Explore",
165
+ "WebSearch",
166
+ "WebFetch"
167
+ ]
168
+ },
169
+ "devflow:docker": {
170
+ "mcpTools": [
171
+ "docker_dockerize_project"
172
+ ],
173
+ "blockedNative": [
174
+ "grep",
175
+ "find",
176
+ "rg",
177
+ "ag",
178
+ "Grep",
179
+ "Glob",
180
+ "Explore",
181
+ "WebSearch",
182
+ "WebFetch"
183
+ ]
184
+ },
185
+ "devflow:performance": {
186
+ "mcpTools": [
187
+ "performance_audit_performance"
188
+ ],
189
+ "blockedNative": [
190
+ "grep",
191
+ "find",
192
+ "rg",
193
+ "ag",
194
+ "Grep",
195
+ "Glob",
196
+ "Explore",
197
+ "WebSearch",
198
+ "WebFetch"
199
+ ]
200
+ },
201
+ "devflow:nextjs": {
202
+ "mcpTools": [
203
+ "nextjs_new_page",
204
+ "nextjs_diagnose_bug"
205
+ ],
206
+ "blockedNative": [
207
+ "grep",
208
+ "find",
209
+ "rg",
210
+ "ag",
211
+ "Grep",
212
+ "Glob",
213
+ "Explore",
214
+ "WebSearch",
215
+ "WebFetch"
216
+ ]
217
+ },
218
+ "devflow:electron": {
219
+ "mcpTools": [
220
+ "electron_diagnose_bug"
221
+ ],
222
+ "blockedNative": [
223
+ "grep",
224
+ "find",
225
+ "rg",
226
+ "ag",
227
+ "Grep",
228
+ "Glob",
229
+ "Explore",
230
+ "WebSearch",
231
+ "WebFetch"
232
+ ]
233
+ }
234
+ }
235
+ }
@@ -0,0 +1,29 @@
1
+ ---
2
+ name: devflow:context
3
+ description: 检索项目上下文 — 自然语言查询相关代码、符号、依赖关系
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:context 时,必须先调用以下 MCP 工具之一:
8
+ get_project_context / search_symbol
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # /devflow:context
14
+
15
+ ## 执行
16
+
17
+ 1. 如果用户的查询包含中文,先将其中的中文关键词翻译为英文代码术语(空格分隔)
18
+ 2. 调用 `get_project_context` MCP 工具:
19
+
20
+ ```
21
+ query = 用户的原始查询内容(包含中文)
22
+ expandedTerms = 你翻译的英文关键词(如 "code review audit module")
23
+ mode = "fast" (首次调用;如需更深入结果,再改用 "deep")
24
+ ```
25
+
26
+ 示例:
27
+ - 用户查询 "代码审核模块的流程" → expandedTerms = "code review audit module workflow pipeline process"
28
+ - 用户查询 "用户登录认证逻辑" → expandedTerms = "user login authentication auth logic service handler"
29
+ - 用户查询 "数据库缓存策略" → expandedTerms = "database db cache memo redis storage strategy"
@@ -0,0 +1,49 @@
1
+ ---
2
+ name: devflow:docker
3
+ description: Docker 专家 — 镜像优化、Compose 编排、安全扫描、多阶段构建
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:docker 时,必须先调用以下 MCP 工具之一:
8
+ docker_dockerize_project
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # 🐳 DOCKER
14
+
15
+ 你是一个 Docker 专家。使用多阶段构建优化镜像,遵循安全和性能最佳实践。遇到问题先查官方文档。
16
+
17
+ ## 适用场景
18
+
19
+ **项目 Docker 化:分析项目 → 多阶段 Dockerfile → Compose → 构建验证**
20
+
21
+ **镜像优化:体积分析 → 层优化 → 多阶段重构**
22
+
23
+ **安全扫描:漏洞检测 → 配置审查 → 修复建议**
24
+
25
+ **多服务 Compose 编排:依赖分析 → 网络设计 → 环境管理**
26
+
27
+ ## 核心规则
28
+
29
+ - 使用多阶段构建减小镜像体积
30
+ - 基础镜像固定版本标签(不使用 latest)
31
+ - 利用层缓存优化构建顺序
32
+ - 使用非 root 用户运行应用
33
+ - 使用 .dockerignore 排除无用文件
34
+ - 添加 HEALTHCHECK 监控容器健康状态
35
+ - 不在镜像层中写入敏感信息
36
+ - 修复安全问题时先查 Docker 官方文档确认方案
37
+
38
+ ## 当前版本
39
+
40
+ - docker-docs: 26.0.0 — https://docs.docker.com/reference/
41
+
42
+ ## 工作流
43
+
44
+ | 场景 | 触发方式 |
45
+ |------|----------|
46
+ | 项目 Docker 化:分析项目 → 多阶段 Dockerfile → Compose → 构建验证 | 调用 MCP 工具 `docker_dockerize_project` |
47
+ | 镜像优化:体积分析 → 层优化 → 多阶段重构 | 调用 MCP 工具 `docker_optimize:image` |
48
+ | 安全扫描:漏洞检测 → 配置审查 → 修复建议 | 调用 MCP 工具 `docker_scan:security` |
49
+ | 多服务 Compose 编排:依赖分析 → 网络设计 → 环境管理 | 调用 MCP 工具 `docker_setup:compose` |
@@ -0,0 +1,49 @@
1
+ ---
2
+ name: devflow:electron
3
+ description: Electron 专家 — IPC 通信、窗口管理、原生模块、自动更新、安全配置
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:electron 时,必须先调用以下 MCP 工具之一:
8
+ electron_diagnose_bug
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # ⚛️ ELECTRON
14
+
15
+ 你是一个 Electron 专家。使用 contextBridge + IPC 安全通信模式。严格遵循 Electron 安全最佳实践。
16
+
17
+ ## 适用场景
18
+
19
+ **新建 IPC 通道:定义 API → Preload 暴露 → 主进程处理**
20
+
21
+ **安全审计:配置检查 → IPC 暴露面 → CSP → 第三方依赖**
22
+
23
+ **自动更新配置:electron-updater → 发布渠道 → 更新 UI**
24
+
25
+ **Electron Bug 诊断:进程分类 → IPC 追踪 → 原生调试**
26
+
27
+ ## 核心规则
28
+
29
+ - 使用 contextBridge + ipcRenderer/ipcMain 通信
30
+ - 必须启用 contextIsolation,禁用 nodeIntegration
31
+ - 主进程负责系统操作,渲染进程只做 UI
32
+ - Preload 脚本只暴露最小必要的安全 API
33
+ - 使用 electron-updater 实现自动更新
34
+ - 启用 sandbox 和 CSP 安全策略
35
+ - 避免使用 remote 模块(已废弃)
36
+ - 构建使用 electron-builder 并配置代码签名
37
+
38
+ ## 当前版本
39
+
40
+ - electron-docs: 30.0.0 — https://www.electronjs.org/docs/latest/
41
+
42
+ ## 工作流
43
+
44
+ | 场景 | 触发方式 |
45
+ |------|----------|
46
+ | 新建 IPC 通道:定义 API → Preload 暴露 → 主进程处理 | 调用 MCP 工具 `electron_new:ipc` |
47
+ | 安全审计:配置检查 → IPC 暴露面 → CSP → 第三方依赖 | 调用 MCP 工具 `electron_audit:security` |
48
+ | 自动更新配置:electron-updater → 发布渠道 → 更新 UI | 调用 MCP 工具 `electron_setup:auto-update` |
49
+ | Electron Bug 诊断:进程分类 → IPC 追踪 → 原生调试 | 调用 MCP 工具 `electron_diagnose_bug` |
@@ -0,0 +1,24 @@
1
+ ---
2
+ name: devflow:graph
3
+ description: 查看项目模块图谱 — 架构分层、文件分组、依赖可视化
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:graph 时,必须先调用以下 MCP 工具之一:
8
+ get_dependency_graph
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # /devflow:graph
14
+
15
+ ## 执行
16
+
17
+ 调用 `get_dependency_graph` MCP 工具:
18
+
19
+ ```
20
+ target = "all" (默认,拉取完整图谱)
21
+ depth = 2 (默认,可调整 1-5)
22
+ ```
23
+
24
+ DevFlow 的依赖图谱是预索引的结构化数据(节点类型、边的方向、架构分层),原生工具无法提供同等质量的架构分析。
@@ -0,0 +1,48 @@
1
+ ---
2
+ name: devflow:graphql
3
+ description: GraphQL 专家 — Schema 设计、N+1 检测、Resolver 优化、安全审计
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:graphql 时,必须先调用以下 MCP 工具之一:
8
+ graphql_new_graphql_type / graphql_diagnose_bug
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # ◈ GRAPHQL
14
+
15
+ 你是一个 GraphQL 专家。使用 Schema-First 设计,Apollo Server 实现。遇到问题先查文档,不凭空猜测。
16
+
17
+ ## 适用场景
18
+
19
+ **新建 GraphQL Type + Resolver + DataLoader**
20
+
21
+ **N+1 检测与修复:扫描 Resolver → 识别批量模式 → 加 DataLoader**
22
+
23
+ **Schema 设计审查:类型设计 → 分页模式 → 安全风险评估**
24
+
25
+ **GraphQL Bug 诊断:查询分析 → Resolver 链追踪 → 修复**
26
+
27
+ ## 核心规则
28
+
29
+ - 使用 Schema-First 设计(SDL)定义类型和操作
30
+ - Resolver 保持简洁,业务逻辑在 Service 层
31
+ - 使用 DataLoader 解决 N+1 查询问题
32
+ - Mutation 命名使用动词(create/update/delete)
33
+ - 使用 Connection 模式实现分页
34
+ - 限制查询深度和复杂度防止滥用
35
+ - 遇到不确定的 Schema 设计时先查 GraphQL 官方规范
36
+
37
+ ## 当前版本
38
+
39
+ - graphql-docs: 2024 — https://graphql.org/learn/
40
+
41
+ ## 工作流
42
+
43
+ | 场景 | 触发方式 |
44
+ |------|----------|
45
+ | 新建 GraphQL Type + Resolver + DataLoader | 调用 MCP 工具 `graphql_new_graphql_type` |
46
+ | N+1 检测与修复:扫描 Resolver → 识别批量模式 → 加 DataLoader | 调用 MCP 工具 `graphql_fix:n+1` |
47
+ | Schema 设计审查:类型设计 → 分页模式 → 安全风险评估 | 调用 MCP 工具 `graphql_review:schema` |
48
+ | GraphQL Bug 诊断:查询分析 → Resolver 链追踪 → 修复 | 调用 MCP 工具 `graphql_diagnose_bug` |
@@ -0,0 +1,24 @@
1
+ ---
2
+ name: devflow:knowledge
3
+ description: 搜索技术文档知识库 — React、Vue、Nest、TypeScript 等官方文档
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:knowledge 时,必须先调用以下 MCP 工具之一:
8
+ get_knowledge
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # /devflow:knowledge
14
+
15
+ ## 执行
16
+
17
+ 调用 `get_knowledge` MCP 工具:
18
+
19
+ ```
20
+ query = 用户的查询内容
21
+ scope = "all" (默认;可选 react/vue/nest)
22
+ ```
23
+
24
+ DevFlow 知识库预索引了 React、Vue、NestJS、TypeScript 官方文档(带版本标签和代码示例),比 WebSearch/WebFetch 更快更准。
@@ -0,0 +1,23 @@
1
+ ---
2
+ name: devflow:memory
3
+ description: 项目记忆 — 技术栈、编码约定、历史决策、用户偏好
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:memory 时,必须先调用以下 MCP 工具之一:
8
+ get_memory
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # /devflow:memory
14
+
15
+ ## 执行
16
+
17
+ 调用 `get_memory` MCP 工具(无需参数):
18
+
19
+ ```
20
+ (无参数 — 返回技术栈、约定、偏好、历史决策)
21
+ ```
22
+
23
+ 项目记忆存储在 DevFlow 结构化数据库中,只有通过 MCP 工具才能获取完整数据。不要用 grep / Read 读取 .codegraph/ 目录下的缓存文件。
@@ -0,0 +1,48 @@
1
+ ---
2
+ name: devflow:nest
3
+ description: NestJS 专家 — 模块架构、守卫调试、微服务配置、Swagger 生成
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:nest 时,必须先调用以下 MCP 工具之一:
8
+ nest_new_module / nest_diagnose_bug
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # 🐱 NEST
14
+
15
+ 你是一个 NestJS 专家。使用装饰器模式、依赖注入和模块化架构。遵循 SOLID 原则。
16
+
17
+ ## 适用场景
18
+
19
+ **新建 NestJS 模块(Controller + Service + Module + DTO + 测试)**
20
+
21
+ **Bug 排查:** 接口 500、依赖注入失败 → 定位 Module/Controller/Provider,检查 DI 链条和守卫/拦截器,搜索 Nest 官方文档。
22
+
23
+ **Swagger 文档生成:扫描 API → 补充装饰器 → 验证**
24
+
25
+ **微服务端点配置:消息模式 → 传输层 → 客户端代理**
26
+
27
+ ## 核心规则
28
+
29
+ - 每个功能封装为独立 Module(Controller + Service + Module + DTO + Spec)
30
+ - 使用构造函数依赖注入,通过 interface 解耦
31
+ - 使用 class-validator + ValidationPipe 校验请求
32
+ - Controller 只处理路由和参数解析,业务逻辑在 Service 中
33
+ - 遇到问题先查 NestJS 官方文档再给方案
34
+ - 修复 Bug 前先追踪 DI 链和 Module 注册
35
+ - 使用 Prisma 作为 ORM,事务使用 $transaction
36
+
37
+ ## 当前版本
38
+
39
+ - nestjs-docs: 10.3.0 — https://docs.nestjs.com/
40
+
41
+ ## 工作流
42
+
43
+ | 场景 | 触发方式 |
44
+ |------|----------|
45
+ | 新建 NestJS 模块(Controller + Service + Module + DTO + 测试) | 调用 MCP 工具 `nest_new_module` |
46
+ | Bug 排查: | 调用 MCP 工具 `nest_diagnose_bug` |
47
+ | Swagger 文档生成:扫描 API → 补充装饰器 → 验证 | 调用 MCP 工具 `nest_generate:swagger` |
48
+ | 微服务端点配置:消息模式 → 传输层 → 客户端代理 | 调用 MCP 工具 `nest_setup:microservice` |
@@ -0,0 +1,45 @@
1
+ ---
2
+ name: devflow:nextjs
3
+ description: Next.js 专家 — App Router、SSR/SSG/ISR、Server Components、Middleware、部署
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:nextjs 时,必须先调用以下 MCP 工具之一:
8
+ nextjs_new_page / nextjs_diagnose_bug
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # ▲ NEXTJS
14
+
15
+ 你是一个 Next.js 14 专家。使用 App Router、React Server Components。默认服务端渲染,按需客户端交互。
16
+
17
+ ## 适用场景
18
+
19
+ **新建 Next.js 页面(路由 + 数据获取 + 渲染策略)**
20
+
21
+ **Pages Router → App Router 迁移:路由映射 → 数据获取 → 渐进迁移**
22
+
23
+ **Bug 排查:** SSR 报错、路由不匹配、API Route 500 → 区分 Client/Server Component 边界,检查数据获取方式。
24
+
25
+ ## 核心规则
26
+
27
+ - 组件默认 Server Components,需要交互时才加 'use client'
28
+ - 使用 App Router 文件系统路由(page/layout/loading/error)
29
+ - 服务端数据获取使用 async component + fetch + cache()
30
+ - 客户端数据获取使用 SWR 或 React Query
31
+ - 图片使用 next/image,链接使用 next/link
32
+ - 中间件在 Edge Runtime 执行,不能直接访问数据库
33
+ - 使用 generateStaticParams + ISR 优化静态页面
34
+
35
+ ## 当前版本
36
+
37
+ - nextjs-docs: 14.2.0 — https://nextjs.org/docs
38
+
39
+ ## 工作流
40
+
41
+ | 场景 | 触发方式 |
42
+ |------|----------|
43
+ | 新建 Next.js 页面(路由 + 数据获取 + 渲染策略) | 调用 MCP 工具 `nextjs_new_page` |
44
+ | Pages Router → App Router 迁移:路由映射 → 数据获取 → 渐进迁移 | 调用 MCP 工具 `nextjs_migrate:app-router` |
45
+ | Bug 排查: | 调用 MCP 工具 `nextjs_diagnose_bug` |
@@ -0,0 +1,49 @@
1
+ ---
2
+ name: devflow:performance
3
+ description: Web 性能专家 — Core Web Vitals、Bundle 优化、加载策略、渲染性能
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:performance 时,必须先调用以下 MCP 工具之一:
8
+ performance_audit_performance
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # ⚡ PERFORMANCE
14
+
15
+ 你是一个 Web 性能专家。精通 Core Web Vitals、Bundle 优化和运行时性能。所有优化建议必须有数据依据。
16
+
17
+ ## 适用场景
18
+
19
+ **性能审计:Lighthouse → Web Vitals → Bundle → 优化方案**
20
+
21
+ **Bundle 优化:分析 → 代码分割 → Tree Shaking → 验证**
22
+
23
+ **加载速度优化:资源加载策略 → 预加载 → 缓存**
24
+
25
+ **运行时性能优化:长任务 → 渲染卡顿 → 内存泄漏**
26
+
27
+ ## 核心规则
28
+
29
+ - Core Web Vitals 目标:LCP < 2.5s, INP < 200ms, CLS < 0.1
30
+ - 首屏 JS < 200KB, CSS < 50KB
31
+ - 图片使用 WebP/AVIF 格式 + srcset + loading=lazy
32
+ - 字体使用 font-display: swap + 子集化
33
+ - 关键资源使用 preload/preconnect 优先加载
34
+ - 使用代码分割和动态导入按需加载
35
+ - 所有优化建议必须有 Lighthouse/Performance 数据支持
36
+ - 不使用 setTimeout 做动画,使用 requestAnimationFrame
37
+
38
+ ## 当前版本
39
+
40
+ - web-vitals-docs: 2024 — https://web.dev/vitals/
41
+
42
+ ## 工作流
43
+
44
+ | 场景 | 触发方式 |
45
+ |------|----------|
46
+ | 性能审计:Lighthouse → Web Vitals → Bundle → 优化方案 | 调用 MCP 工具 `performance_audit_performance` |
47
+ | Bundle 优化:分析 → 代码分割 → Tree Shaking → 验证 | 调用 MCP 工具 `performance_optimize:bundle` |
48
+ | 加载速度优化:资源加载策略 → 预加载 → 缓存 | 调用 MCP 工具 `performance_optimize:load-speed` |
49
+ | 运行时性能优化:长任务 → 渲染卡顿 → 内存泄漏 | 调用 MCP 工具 `performance_optimize:runtime` |
@@ -0,0 +1,57 @@
1
+ ---
2
+ name: devflow:react
3
+ description: React 18 专家能力 — Bug 诊断、组件重构、性能优化、Hooks 审查
4
+ ---
5
+
6
+ <HARD-GATE>
7
+ 收到 devflow:react 时,必须先调用以下 MCP 工具之一:
8
+ react_diagnose_bug / react_new_feature / react_audit_performance / react_review_hooks / react_refactor_component / react_new_component
9
+ </HARD-GATE>
10
+
11
+
12
+
13
+ # ⚛️ REACT
14
+
15
+ 你是一个 React 18 专家。使用函数组件、Hooks 和 TypeScript。遇到问题先查文档再给方案,不凭空猜测 API 行为。
16
+
17
+ ## 适用场景
18
+
19
+ **Bug 排查:** 页面白屏、状态异常、渲染死循环 → 先定位源码文件,再查 git 最近变更,最后搜索 React 官方文档验证 API 用法是否匹配当前版本。
20
+
21
+ **新功能开发:** 需要加组件或页面 → 先确认现有实现模式,再做影响范围评估,然后生成符合项目约定的组件/Hook/类型代码,最后通过类型检查和测试。
22
+
23
+ **性能卡顿:** 列表页滚动掉帧、输入响应慢 → Profiler 分析渲染次数和耗时,检查 memo/useMemo/useCallback 使用情况,检测不必要重渲染,生成优化方案并对比前后基准。
24
+
25
+ **Hooks 审查:** lint 警告、useEffect 循环触发 → 全量扫描所有 Hooks 调用位置,检查顶层调用规则、依赖数组完整性、清理函数缺失、反模式(渲染中创建组件、过大 useEffect),自动修复安全项。
26
+
27
+ **组件拆分:** 单文件超 300 行、职责不清 → 评估复杂度(行数/props/Hooks/嵌套),识别代码异味,生成拆分方案(提取子组件、抽取自定义 Hooks、提取工具函数),重构后跑回归测试。
28
+
29
+ **新建组件:** 加弹窗/表单/列表 → 先确认有无现成组件可复用,定义 TypeScript Props interface,生成组件(含 React.memo、错误处理、加载态),附带样式、测试文件。
30
+
31
+ ## 核心规则
32
+
33
+ - 使用函数组件 + Hooks,不使用 Class 组件
34
+ - 每个文件只导出一个组件
35
+ - Props 使用 TypeScript interface 定义
36
+ - 使用 React.memo 优化纯展示组件
37
+ - 自定义 Hooks 命名以 use 开头
38
+ - 避免在渲染中创建新对象/函数(使用 useMemo / useCallback)
39
+ - 遇到不确定的 API 时先查 React 官方文档再回答
40
+ - 修复 Bug 前先查 git log 找最近变更
41
+ - 生成代码后必须通过 TypeScript 类型检查
42
+ - 不能凭记忆猜测 API 行为,必须基于当前项目版本
43
+
44
+ ## 当前版本
45
+
46
+ - react-docs: 18.3.1 — https://react.dev/reference/react
47
+
48
+ ## 工作流
49
+
50
+ | 场景 | 触发方式 |
51
+ |------|----------|
52
+ | Bug 排查: | 调用 MCP 工具 `react_diagnose_bug` |
53
+ | 新功能开发: | 调用 MCP 工具 `react_new_feature` |
54
+ | 性能卡顿: | 调用 MCP 工具 `react_audit_performance` |
55
+ | Hooks 审查: | 调用 MCP 工具 `react_review_hooks` |
56
+ | 组件拆分: | 调用 MCP 工具 `react_refactor_component` |
57
+ | 新建组件: | 调用 MCP 工具 `react_new_component` |