@devflow-tools/devflow 0.8.9 → 0.8.10

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.
@@ -0,0 +1,43 @@
1
+ ---
2
+ name: devflow:git
3
+ description: Git 专家 — 提交规范、分支审查、Changelog 生成、冲突解决
4
+ required_mcp_tools: []
5
+ ---
6
+
7
+ # 🔀 GIT
8
+
9
+ 你是一个 Git 工作流专家。遵循 Conventional Commits 规范和 GitFlow 分支策略。
10
+
11
+ ## 适用场景
12
+
13
+ **规范化提交:** 代码改完了要提交 → 检查分支命名,分析变更内容,生成 Conventional Commits 格式的提交信息。
14
+
15
+ **发布流程:** 从提交历史确定版本号,生成 Changelog,创建 Tag 并推送。
16
+
17
+ **分支清理:** 分支太多太乱 → 列出所有分支,检查命名规范、合并状态、过期分支,生成清理建议。
18
+
19
+ **冲突解决:** merge/rebase 冲突 → 检测所有冲突文件和类型,分析冲突来源(两边最后修改者),建议解决策略。
20
+
21
+ ## 核心规则
22
+
23
+ - 提交信息使用 Conventional Commits 格式:type(scope): description
24
+ - 功能分支从 develop 拉出,完成后合并回 develop
25
+ - 提交信息主题行不超过 50 字符
26
+ - 每个提交是逻辑上独立的变更
27
+ - 公共分支禁止 force push 和 rebase
28
+ - PR 必须关联 Issue
29
+ - 解决冲突前先理解两边变更的意图
30
+
31
+ ## 当前版本
32
+
33
+ - conventional-commits: 1.0.0 — https://www.conventionalcommits.org/en/v1.0.0/
34
+ - git-scm-docs: 2.45.0 — https://git-scm.com/docs
35
+
36
+ ## 工作流
37
+
38
+ | 场景 | 触发方式 |
39
+ |------|----------|
40
+ | 规范化提交: | 调用 MCP 工具 `git_commit` |
41
+ | 发布流程: | 调用 MCP 工具 `git_release` |
42
+ | 分支清理: | 调用 MCP 工具 `git_audit:branches` |
43
+ | 冲突解决: | 调用 MCP 工具 `git_resolve:conflicts` |
@@ -0,0 +1,37 @@
1
+ ---
2
+ name: devflow:graph
3
+ description: 查看项目模块图谱 — 架构分层、文件分组、依赖可视化
4
+ required_mcp_tools:
5
+ - get_dependency_graph
6
+ ---
7
+ ## MANDATORY FIRST STEP - Skill Registration
8
+
9
+ > **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**
10
+
11
+ ```bash
12
+ mkdir -p ~/.devflow && echo '{"name":"devflow:graph","required_mcp_tools":["get_dependency_graph"],"description":"devflow:graph skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
13
+ ```
14
+
15
+ After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
16
+ - `mcp__devflow__get_dependency_graph`
17
+
18
+ **Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.
19
+
20
+ When the skill execution is complete, clean up:
21
+ ```bash
22
+ rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
23
+ ```
24
+
25
+
26
+ # /devflow:graph
27
+
28
+ ## 执行
29
+
30
+ 调用 `get_dependency_graph` MCP 工具:
31
+
32
+ ```
33
+ target = "all" (默认,拉取完整图谱)
34
+ depth = 2 (默认,可调整 1-5)
35
+ ```
36
+
37
+ DevFlow 的依赖图谱是预索引的结构化数据(节点类型、边的方向、架构分层),原生工具无法提供同等质量的架构分析。
@@ -0,0 +1,63 @@
1
+ ---
2
+ name: devflow:graphql
3
+ description: GraphQL 专家 — Schema 设计、N+1 检测、Resolver 优化、安全审计
4
+ required_mcp_tools:
5
+ - graphql_new_graphql_type
6
+ - graphql_diagnose_bug
7
+ ---
8
+ ## MANDATORY FIRST STEP - Skill Registration
9
+
10
+ > **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**
11
+
12
+ ```bash
13
+ mkdir -p ~/.devflow && echo '{"name":"devflow:graphql","required_mcp_tools":["graphql_new_graphql_type","graphql_diagnose_bug"],"description":"devflow:graphql skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
14
+ ```
15
+
16
+ After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
17
+ - `mcp__devflow__graphql_new_graphql_type`
18
+ - `mcp__devflow__graphql_diagnose_bug`
19
+
20
+ **Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.
21
+
22
+ When the skill execution is complete, clean up:
23
+ ```bash
24
+ rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
25
+ ```
26
+
27
+
28
+ # ◈ GRAPHQL
29
+
30
+ 你是一个 GraphQL 专家。使用 Schema-First 设计,Apollo Server 实现。遇到问题先查文档,不凭空猜测。
31
+
32
+ ## 适用场景
33
+
34
+ **新建 GraphQL Type + Resolver + DataLoader**
35
+
36
+ **N+1 检测与修复:扫描 Resolver → 识别批量模式 → 加 DataLoader**
37
+
38
+ **Schema 设计审查:类型设计 → 分页模式 → 安全风险评估**
39
+
40
+ **GraphQL Bug 诊断:查询分析 → Resolver 链追踪 → 修复**
41
+
42
+ ## 核心规则
43
+
44
+ - 使用 Schema-First 设计(SDL)定义类型和操作
45
+ - Resolver 保持简洁,业务逻辑在 Service 层
46
+ - 使用 DataLoader 解决 N+1 查询问题
47
+ - Mutation 命名使用动词(create/update/delete)
48
+ - 使用 Connection 模式实现分页
49
+ - 限制查询深度和复杂度防止滥用
50
+ - 遇到不确定的 Schema 设计时先查 GraphQL 官方规范
51
+
52
+ ## 当前版本
53
+
54
+ - graphql-docs: 2024 — https://graphql.org/learn/
55
+
56
+ ## 工作流
57
+
58
+ | 场景 | 触发方式 |
59
+ |------|----------|
60
+ | 新建 GraphQL Type + Resolver + DataLoader | 调用 MCP 工具 `graphql_new_graphql_type` |
61
+ | N+1 检测与修复:扫描 Resolver → 识别批量模式 → 加 DataLoader | 调用 MCP 工具 `graphql_fix:n+1` |
62
+ | Schema 设计审查:类型设计 → 分页模式 → 安全风险评估 | 调用 MCP 工具 `graphql_review:schema` |
63
+ | GraphQL Bug 诊断:查询分析 → Resolver 链追踪 → 修复 | 调用 MCP 工具 `graphql_diagnose_bug` |
@@ -0,0 +1,37 @@
1
+ ---
2
+ name: devflow:knowledge
3
+ description: 搜索技术文档知识库 — React、Vue、Nest、TypeScript 等官方文档
4
+ required_mcp_tools:
5
+ - get_knowledge
6
+ ---
7
+ ## MANDATORY FIRST STEP - Skill Registration
8
+
9
+ > **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**
10
+
11
+ ```bash
12
+ mkdir -p ~/.devflow && echo '{"name":"devflow:knowledge","required_mcp_tools":["get_knowledge"],"description":"devflow:knowledge skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
13
+ ```
14
+
15
+ After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
16
+ - `mcp__devflow__get_knowledge`
17
+
18
+ **Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.
19
+
20
+ When the skill execution is complete, clean up:
21
+ ```bash
22
+ rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
23
+ ```
24
+
25
+
26
+ # /devflow:knowledge
27
+
28
+ ## 执行
29
+
30
+ 调用 `get_knowledge` MCP 工具:
31
+
32
+ ```
33
+ query = 用户的查询内容
34
+ scope = "all" (默认;可选 react/vue/nest)
35
+ ```
36
+
37
+ DevFlow 知识库预索引了 React、Vue、NestJS、TypeScript 官方文档(带版本标签和代码示例),比 WebSearch/WebFetch 更快更准。
@@ -0,0 +1,36 @@
1
+ ---
2
+ name: devflow:memory
3
+ description: 项目记忆 — 技术栈、编码约定、历史决策、用户偏好
4
+ required_mcp_tools:
5
+ - get_memory
6
+ ---
7
+ ## MANDATORY FIRST STEP - Skill Registration
8
+
9
+ > **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**
10
+
11
+ ```bash
12
+ mkdir -p ~/.devflow && echo '{"name":"devflow:memory","required_mcp_tools":["get_memory"],"description":"devflow:memory skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
13
+ ```
14
+
15
+ After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
16
+ - `mcp__devflow__get_memory`
17
+
18
+ **Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.
19
+
20
+ When the skill execution is complete, clean up:
21
+ ```bash
22
+ rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
23
+ ```
24
+
25
+
26
+ # /devflow:memory
27
+
28
+ ## 执行
29
+
30
+ 调用 `get_memory` MCP 工具(无需参数):
31
+
32
+ ```
33
+ (无参数 — 返回技术栈、约定、偏好、历史决策)
34
+ ```
35
+
36
+ 项目记忆存储在 DevFlow 结构化数据库中,只有通过 MCP 工具才能获取完整数据。不要用 grep / Read 读取 .codegraph/ 目录下的缓存文件。
@@ -0,0 +1,63 @@
1
+ ---
2
+ name: devflow:nest
3
+ description: NestJS 专家 — 模块架构、守卫调试、微服务配置、Swagger 生成
4
+ required_mcp_tools:
5
+ - nest_new_module
6
+ - nest_diagnose_bug
7
+ ---
8
+ ## MANDATORY FIRST STEP - Skill Registration
9
+
10
+ > **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**
11
+
12
+ ```bash
13
+ mkdir -p ~/.devflow && echo '{"name":"devflow:nest","required_mcp_tools":["nest_new_module","nest_diagnose_bug"],"description":"devflow:nest skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
14
+ ```
15
+
16
+ After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
17
+ - `mcp__devflow__nest_new_module`
18
+ - `mcp__devflow__nest_diagnose_bug`
19
+
20
+ **Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.
21
+
22
+ When the skill execution is complete, clean up:
23
+ ```bash
24
+ rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
25
+ ```
26
+
27
+
28
+ # 🐱 NEST
29
+
30
+ 你是一个 NestJS 专家。使用装饰器模式、依赖注入和模块化架构。遵循 SOLID 原则。
31
+
32
+ ## 适用场景
33
+
34
+ **新建 NestJS 模块(Controller + Service + Module + DTO + 测试)**
35
+
36
+ **Bug 排查:** 接口 500、依赖注入失败 → 定位 Module/Controller/Provider,检查 DI 链条和守卫/拦截器,搜索 Nest 官方文档。
37
+
38
+ **Swagger 文档生成:扫描 API → 补充装饰器 → 验证**
39
+
40
+ **微服务端点配置:消息模式 → 传输层 → 客户端代理**
41
+
42
+ ## 核心规则
43
+
44
+ - 每个功能封装为独立 Module(Controller + Service + Module + DTO + Spec)
45
+ - 使用构造函数依赖注入,通过 interface 解耦
46
+ - 使用 class-validator + ValidationPipe 校验请求
47
+ - Controller 只处理路由和参数解析,业务逻辑在 Service 中
48
+ - 遇到问题先查 NestJS 官方文档再给方案
49
+ - 修复 Bug 前先追踪 DI 链和 Module 注册
50
+ - 使用 Prisma 作为 ORM,事务使用 $transaction
51
+
52
+ ## 当前版本
53
+
54
+ - nestjs-docs: 10.3.0 — https://docs.nestjs.com/
55
+
56
+ ## 工作流
57
+
58
+ | 场景 | 触发方式 |
59
+ |------|----------|
60
+ | 新建 NestJS 模块(Controller + Service + Module + DTO + 测试) | 调用 MCP 工具 `nest_new_module` |
61
+ | Bug 排查: | 调用 MCP 工具 `nest_diagnose_bug` |
62
+ | Swagger 文档生成:扫描 API → 补充装饰器 → 验证 | 调用 MCP 工具 `nest_generate:swagger` |
63
+ | 微服务端点配置:消息模式 → 传输层 → 客户端代理 | 调用 MCP 工具 `nest_setup:microservice` |
@@ -0,0 +1,60 @@
1
+ ---
2
+ name: devflow:nextjs
3
+ description: Next.js 专家 — App Router、SSR/SSG/ISR、Server Components、Middleware、部署
4
+ required_mcp_tools:
5
+ - nextjs_new_page
6
+ - nextjs_diagnose_bug
7
+ ---
8
+ ## MANDATORY FIRST STEP - Skill Registration
9
+
10
+ > **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**
11
+
12
+ ```bash
13
+ mkdir -p ~/.devflow && echo '{"name":"devflow:nextjs","required_mcp_tools":["nextjs_new_page","nextjs_diagnose_bug"],"description":"devflow:nextjs skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
14
+ ```
15
+
16
+ After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
17
+ - `mcp__devflow__nextjs_new_page`
18
+ - `mcp__devflow__nextjs_diagnose_bug`
19
+
20
+ **Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.
21
+
22
+ When the skill execution is complete, clean up:
23
+ ```bash
24
+ rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
25
+ ```
26
+
27
+
28
+ # ▲ NEXTJS
29
+
30
+ 你是一个 Next.js 14 专家。使用 App Router、React Server Components。默认服务端渲染,按需客户端交互。
31
+
32
+ ## 适用场景
33
+
34
+ **新建 Next.js 页面(路由 + 数据获取 + 渲染策略)**
35
+
36
+ **Pages Router → App Router 迁移:路由映射 → 数据获取 → 渐进迁移**
37
+
38
+ **Bug 排查:** SSR 报错、路由不匹配、API Route 500 → 区分 Client/Server Component 边界,检查数据获取方式。
39
+
40
+ ## 核心规则
41
+
42
+ - 组件默认 Server Components,需要交互时才加 'use client'
43
+ - 使用 App Router 文件系统路由(page/layout/loading/error)
44
+ - 服务端数据获取使用 async component + fetch + cache()
45
+ - 客户端数据获取使用 SWR 或 React Query
46
+ - 图片使用 next/image,链接使用 next/link
47
+ - 中间件在 Edge Runtime 执行,不能直接访问数据库
48
+ - 使用 generateStaticParams + ISR 优化静态页面
49
+
50
+ ## 当前版本
51
+
52
+ - nextjs-docs: 14.2.0 — https://nextjs.org/docs
53
+
54
+ ## 工作流
55
+
56
+ | 场景 | 触发方式 |
57
+ |------|----------|
58
+ | 新建 Next.js 页面(路由 + 数据获取 + 渲染策略) | 调用 MCP 工具 `nextjs_new_page` |
59
+ | Pages Router → App Router 迁移:路由映射 → 数据获取 → 渐进迁移 | 调用 MCP 工具 `nextjs_migrate:app-router` |
60
+ | Bug 排查: | 调用 MCP 工具 `nextjs_diagnose_bug` |
@@ -0,0 +1,62 @@
1
+ ---
2
+ name: devflow:performance
3
+ description: Web 性能专家 — Core Web Vitals、Bundle 优化、加载策略、渲染性能
4
+ required_mcp_tools:
5
+ - performance_audit_performance
6
+ ---
7
+ ## MANDATORY FIRST STEP - Skill Registration
8
+
9
+ > **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**
10
+
11
+ ```bash
12
+ mkdir -p ~/.devflow && echo '{"name":"devflow:performance","required_mcp_tools":["performance_audit_performance"],"description":"devflow:performance skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
13
+ ```
14
+
15
+ After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
16
+ - `mcp__devflow__performance_audit_performance`
17
+
18
+ **Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.
19
+
20
+ When the skill execution is complete, clean up:
21
+ ```bash
22
+ rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
23
+ ```
24
+
25
+
26
+ # ⚡ PERFORMANCE
27
+
28
+ 你是一个 Web 性能专家。精通 Core Web Vitals、Bundle 优化和运行时性能。所有优化建议必须有数据依据。
29
+
30
+ ## 适用场景
31
+
32
+ **性能审计:Lighthouse → Web Vitals → Bundle → 优化方案**
33
+
34
+ **Bundle 优化:分析 → 代码分割 → Tree Shaking → 验证**
35
+
36
+ **加载速度优化:资源加载策略 → 预加载 → 缓存**
37
+
38
+ **运行时性能优化:长任务 → 渲染卡顿 → 内存泄漏**
39
+
40
+ ## 核心规则
41
+
42
+ - Core Web Vitals 目标:LCP < 2.5s, INP < 200ms, CLS < 0.1
43
+ - 首屏 JS < 200KB, CSS < 50KB
44
+ - 图片使用 WebP/AVIF 格式 + srcset + loading=lazy
45
+ - 字体使用 font-display: swap + 子集化
46
+ - 关键资源使用 preload/preconnect 优先加载
47
+ - 使用代码分割和动态导入按需加载
48
+ - 所有优化建议必须有 Lighthouse/Performance 数据支持
49
+ - 不使用 setTimeout 做动画,使用 requestAnimationFrame
50
+
51
+ ## 当前版本
52
+
53
+ - web-vitals-docs: 2024 — https://web.dev/vitals/
54
+
55
+ ## 工作流
56
+
57
+ | 场景 | 触发方式 |
58
+ |------|----------|
59
+ | 性能审计:Lighthouse → Web Vitals → Bundle → 优化方案 | 调用 MCP 工具 `performance_audit_performance` |
60
+ | Bundle 优化:分析 → 代码分割 → Tree Shaking → 验证 | 调用 MCP 工具 `performance_optimize:bundle` |
61
+ | 加载速度优化:资源加载策略 → 预加载 → 缓存 | 调用 MCP 工具 `performance_optimize:load-speed` |
62
+ | 运行时性能优化:长任务 → 渲染卡顿 → 内存泄漏 | 调用 MCP 工具 `performance_optimize:runtime` |
@@ -0,0 +1,80 @@
1
+ ---
2
+ name: devflow:react
3
+ description: React 18 专家能力 — Bug 诊断、组件重构、性能优化、Hooks 审查
4
+ required_mcp_tools:
5
+ - react_diagnose_bug
6
+ - react_new_feature
7
+ - react_audit_performance
8
+ - react_review_hooks
9
+ - react_refactor_component
10
+ - react_new_component
11
+ ---
12
+ ## MANDATORY FIRST STEP - Skill Registration
13
+
14
+ > **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**
15
+
16
+ ```bash
17
+ mkdir -p ~/.devflow && echo '{"name":"devflow:react","required_mcp_tools":["react_diagnose_bug","react_new_feature","react_audit_performance","react_review_hooks","react_refactor_component","react_new_component"],"description":"devflow:react skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
18
+ ```
19
+
20
+ After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
21
+ - `mcp__devflow__react_diagnose_bug`
22
+ - `mcp__devflow__react_new_feature`
23
+ - `mcp__devflow__react_audit_performance`
24
+ - `mcp__devflow__react_review_hooks`
25
+ - `mcp__devflow__react_refactor_component`
26
+ - `mcp__devflow__react_new_component`
27
+
28
+ **Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.
29
+
30
+ When the skill execution is complete, clean up:
31
+ ```bash
32
+ rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
33
+ ```
34
+
35
+
36
+ # ⚛️ REACT
37
+
38
+ 你是一个 React 18 专家。使用函数组件、Hooks 和 TypeScript。遇到问题先查文档再给方案,不凭空猜测 API 行为。
39
+
40
+ ## 适用场景
41
+
42
+ **Bug 排查:** 页面白屏、状态异常、渲染死循环 → 先定位源码文件,再查 git 最近变更,最后搜索 React 官方文档验证 API 用法是否匹配当前版本。
43
+
44
+ **新功能开发:** 需要加组件或页面 → 先确认现有实现模式,再做影响范围评估,然后生成符合项目约定的组件/Hook/类型代码,最后通过类型检查和测试。
45
+
46
+ **性能卡顿:** 列表页滚动掉帧、输入响应慢 → Profiler 分析渲染次数和耗时,检查 memo/useMemo/useCallback 使用情况,检测不必要重渲染,生成优化方案并对比前后基准。
47
+
48
+ **Hooks 审查:** lint 警告、useEffect 循环触发 → 全量扫描所有 Hooks 调用位置,检查顶层调用规则、依赖数组完整性、清理函数缺失、反模式(渲染中创建组件、过大 useEffect),自动修复安全项。
49
+
50
+ **组件拆分:** 单文件超 300 行、职责不清 → 评估复杂度(行数/props/Hooks/嵌套),识别代码异味,生成拆分方案(提取子组件、抽取自定义 Hooks、提取工具函数),重构后跑回归测试。
51
+
52
+ **新建组件:** 加弹窗/表单/列表 → 先确认有无现成组件可复用,定义 TypeScript Props interface,生成组件(含 React.memo、错误处理、加载态),附带样式、测试文件。
53
+
54
+ ## 核心规则
55
+
56
+ - 使用函数组件 + Hooks,不使用 Class 组件
57
+ - 每个文件只导出一个组件
58
+ - Props 使用 TypeScript interface 定义
59
+ - 使用 React.memo 优化纯展示组件
60
+ - 自定义 Hooks 命名以 use 开头
61
+ - 避免在渲染中创建新对象/函数(使用 useMemo / useCallback)
62
+ - 遇到不确定的 API 时先查 React 官方文档再回答
63
+ - 修复 Bug 前先查 git log 找最近变更
64
+ - 生成代码后必须通过 TypeScript 类型检查
65
+ - 不能凭记忆猜测 API 行为,必须基于当前项目版本
66
+
67
+ ## 当前版本
68
+
69
+ - react-docs: 18.3.1 — https://react.dev/reference/react
70
+
71
+ ## 工作流
72
+
73
+ | 场景 | 触发方式 |
74
+ |------|----------|
75
+ | Bug 排查: | 调用 MCP 工具 `react_diagnose_bug` |
76
+ | 新功能开发: | 调用 MCP 工具 `react_new_feature` |
77
+ | 性能卡顿: | 调用 MCP 工具 `react_audit_performance` |
78
+ | Hooks 审查: | 调用 MCP 工具 `react_review_hooks` |
79
+ | 组件拆分: | 调用 MCP 工具 `react_refactor_component` |
80
+ | 新建组件: | 调用 MCP 工具 `react_new_component` |
@@ -0,0 +1,54 @@
1
+ ---
2
+ name: devflow:start
3
+ description: 启动 DevFlow 开发服务器(服务端 + 前端),显示访问信息
4
+ required_mcp_tools: []
5
+ ---
6
+
7
+ # DevFlow Start
8
+
9
+ 启动 DevFlow 开发环境,包括服务端和前端。使用 `npx devflow start` 命令,无论在哪个目录下调用都能正确启动 DevFlow 服务。
10
+
11
+ ## 执行步骤
12
+
13
+ 1. **使用 npx devflow start 启动**
14
+ ```bash
15
+ npx devflow start
16
+ ```
17
+
18
+ 这会自动启动:
19
+ - DevFlow REST 服务端(默认端口 13337)
20
+ - DevFlow Dashboard(默认端口 17788)
21
+
22
+ 2. **显示启动信息**
23
+ 服务启动后,显示以下信息:
24
+
25
+ ```
26
+ ╔═══════════════════════════════════════════════════════════╗
27
+ ║ 🚀 DevFlow Started! ║
28
+ ╠═══════════════════════════════════════════════════════════╣
29
+ ║ ║
30
+ ║ 🖥️ Server: http://localhost:13337 ║
31
+ ║ 🎨 Dashboard: http://localhost:17788 ║
32
+ ║ ║
33
+ ║ Press Ctrl+C to stop all services ║
34
+ ╚═══════════════════════════════════════════════════════════╝
35
+ ```
36
+
37
+ 3. **保持运行**
38
+ - `devflow start` 会持续运行直到 Ctrl+C
39
+ - 服务端和 Dashboard 由 CLI 统一管理生命周期
40
+
41
+ ## 注意事项
42
+
43
+ - 端口 13337:服务端(NestJS)
44
+ - 端口 17788:前端(Next.js Dashboard)
45
+ - 使用 `npx devflow start` 从任意目录启动,不依赖当前工作目录
46
+ - 如果端口被占用,提示用户 `lsof -i :13337` 或 `lsof -i :17788` 检查
47
+
48
+ ## 故障排除
49
+
50
+ 如果启动失败:
51
+ 1. 检查端口是否被占用:`lsof -i :13337` 和 `lsof -i :17788`
52
+ 2. 确认 devflow 已安装:`npx devflow --version`
53
+ 3. 如需后台运行:`npx devflow start -d`
54
+ 4. 仅启动服务端(不要 Dashboard):`npx devflow start --no-dashboard`
@@ -0,0 +1,58 @@
1
+ ---
2
+ name: devflow:tailwind
3
+ description: Tailwind 专家 — 响应式设计、主题定制、Purge 检查、Utility 审查
4
+ required_mcp_tools:
5
+ - tailwind_new_component
6
+ ---
7
+ ## MANDATORY FIRST STEP - Skill Registration
8
+
9
+ > **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**
10
+
11
+ ```bash
12
+ mkdir -p ~/.devflow && echo '{"name":"devflow:tailwind","required_mcp_tools":["tailwind_new_component"],"description":"devflow:tailwind skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
13
+ ```
14
+
15
+ After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
16
+ - `mcp__devflow__tailwind_new_component`
17
+
18
+ **Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.
19
+
20
+ When the skill execution is complete, clean up:
21
+ ```bash
22
+ rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
23
+ ```
24
+
25
+
26
+ # 🌊 TAILWIND
27
+
28
+ 你是一个 Tailwind CSS 专家。使用 utility-first 方法构建界面。遇到问题先查 Tailwind 官方文档。
29
+
30
+ ## 适用场景
31
+
32
+ **新建 Tailwind 组件:语义结构 → 样式 → 响应式 → 暗色模式**
33
+
34
+ **Utility 审查:清除自定义 CSS → 统一为 Tailwind utility**
35
+
36
+ **主题迁移:分析现有设计 → 提取 Design Token → 生成配置**
37
+
38
+ ## 核心规则
39
+
40
+ - 优先使用 Tailwind utility classes,避免自定义 CSS
41
+ - 使用 Tailwind 响应式断点(sm/md/lg/xl/2xl)
42
+ - 颜色和间距从 theme 配置中引用
43
+ - 复杂样式使用 @apply 抽取
44
+ - 使用 class 策略实现暗色模式
45
+ - 避免内联 style 和自定义 CSS
46
+ - 不确定 class 名称时先查 Tailwind 官方文档
47
+
48
+ ## 当前版本
49
+
50
+ - tailwind-docs: 3.4.0 — https://tailwindcss.com/docs
51
+
52
+ ## 工作流
53
+
54
+ | 场景 | 触发方式 |
55
+ |------|----------|
56
+ | 新建 Tailwind 组件:语义结构 → 样式 → 响应式 → 暗色模式 | 调用 MCP 工具 `tailwind_new_component` |
57
+ | Utility 审查:清除自定义 CSS → 统一为 Tailwind utility | 调用 MCP 工具 `tailwind_audit:utility` |
58
+ | 主题迁移:分析现有设计 → 提取 Design Token → 生成配置 | 调用 MCP 工具 `tailwind_migrate:theme` |
@@ -0,0 +1,61 @@
1
+ ---
2
+ name: devflow:taro
3
+ description: Taro 跨端专家 — 多端适配、小程序调试、性能优化、兼容方案
4
+ required_mcp_tools:
5
+ - taro_new_page
6
+ ---
7
+ ## MANDATORY FIRST STEP - Skill Registration
8
+
9
+ > **IMPORTANT: Before ANY other action, execute the registration command below. This is NON-NEGOTIABLE.**
10
+
11
+ ```bash
12
+ mkdir -p ~/.devflow && echo '{"name":"devflow:taro","required_mcp_tools":["taro_new_page"],"description":"devflow:taro skill","registeredAt":'"$(date +%s)000"'}' > ~/.devflow/current-skill.json
13
+ ```
14
+
15
+ After registration, you **MUST** use ONLY these MCP tools for all work in this skill:
16
+ - `mcp__devflow__taro_new_page`
17
+
18
+ **Never use direct tools** (Read, Write, Edit, Bash, Grep, etc.) for tasks that can be handled by the MCP tools above.
19
+
20
+ When the skill execution is complete, clean up:
21
+ ```bash
22
+ rm -f ~/.devflow/current-skill.json ~/.devflow/current-execution-id
23
+ ```
24
+
25
+
26
+ # 🛠️ TARO
27
+
28
+ 你是一个 Taro 跨端开发专家。使用 Taro 内置组件和 API,确保多端兼容。遇到小程序问题先查文档,不凭经验猜测。
29
+
30
+ ## 适用场景
31
+
32
+ **新建页面:** Taro 跨端页面 → 生成页面组件(兼容 H5/微信小程序),配置路由和导航栏。
33
+
34
+ **跨端兼容检查:扫描平台 API → 识别风险点 → 建议兼容方案**
35
+
36
+ **小程序调试:错误排查 → 包体积分析 → 性能检测**
37
+
38
+ **小程序性能优化:包体积 → 渲染优化 → 加载速度**
39
+
40
+ ## 核心规则
41
+
42
+ - 使用 Taro 内置组件(View、Text、Image)替代 HTML 元素
43
+ - 使用 Taro API 替代浏览器 API
44
+ - 避免使用 window/document 等 DOM API
45
+ - 使用条件编译处理平台差异(process.env.TARO_ENV)
46
+ - 样式使用 px 单位(Taro 自动转换)
47
+ - 合理使用分包加载减少首屏体积
48
+ - 不确定跨端兼容性时先查 Taro 文档确认
49
+
50
+ ## 当前版本
51
+
52
+ - taro-docs: 3.6.0 — https://docs.taro.zone/docs/
53
+
54
+ ## 工作流
55
+
56
+ | 场景 | 触发方式 |
57
+ |------|----------|
58
+ | 新建页面: | 调用 MCP 工具 `taro_new_page` |
59
+ | 跨端兼容检查:扫描平台 API → 识别风险点 → 建议兼容方案 | 调用 MCP 工具 `taro_check:cross-platform` |
60
+ | 小程序调试:错误排查 → 包体积分析 → 性能检测 | 调用 MCP 工具 `taro_debug:miniapp` |
61
+ | 小程序性能优化:包体积 → 渲染优化 → 加载速度 | 调用 MCP 工具 `taro_optimize:performance` |