导航技能创建器

创建项目特定的技能，通过分析代码库模式并自动化重复的工作流程。

何时调用

自动调用当用户提到：

“为[模式]创建一个技能”
“自动化这个工作流程”
“我们一直在手动做X”
“强制执行这个模式”
“为[功能类型]生成样板代码”
“我们需要[任务类型]的一致性”

这个做了什么

分析代码库以理解项目模式
从现有代码中识别最佳实践
生成技能，包括：
- 自动调用触发器
- 预定义函数
- 模板
- 示例
测试生成的技能
文档化新技能

执行步骤

第1步：理解技能请求

询问澄清问题：

要自动化什么模式/工作流程？
应该触发这个技能的是什么？
期望的输出格式是什么？
代码库中有现有的例子吗？

示例对话：

用户："为添加React组件创建一个技能"
助手："我将分析你的代码库以理解React组件模式。
- 组件在哪个目录？
- 你使用TypeScript还是JavaScript？
- 你想自动生成测试吗？
- 每个组件都有样式文件（CSS/SCSS）吗？"

第2步：分析代码库模式

使用任务代理来探索（节省60-80%的令牌）：

使用任务代理与子代理类型=探索：
"在代码库中查找现有的[模式类型]：
 - 定位所有[匹配模式的文件]
 - 识别共同结构
 - 提取最佳实践
 - 查找配置文件
 - 返回调查结果摘要"

寻找什么：

文件命名约定（kebab-case, PascalCase等）
目录结构模式
导入/导出模式
测试模式
配置模式
文档模式

React组件示例：

任务代理发现：
- 组件在src/components/
- PascalCase命名（UserProfile.tsx）
- 同位置测试（UserProfile.test.tsx）
- Props接口定义在组件上方
- 底部导出默认

第3步：设计技能结构

确定技能元数据：

name: [项目]-[模式类型]
description: [何时自动调用 + 它做什么]
allowed-tools: [读取，写入，编辑，Grep，Glob，Bash，任务]
version: 1.0.0

计划目录结构：

skills/[技能名称]/
├── SKILL.md              # 主要指令
├── functions/            # Python辅助脚本
│   └── [生成器].py
├── examples/             # 参考实现
│   └── [示例].[扩展]
└── templates/            # 输出格式模板
    └── [模板].[扩展]

设计预定义函数：

哪些重复逻辑可以自动化？
应该执行哪些验证？
什么格式化确保一致性？

前端组件技能的示例函数：

component_generator.py - 生成组件样板
test_generator.py - 生成测试文件
style_generator.py - 生成样式文件
name_validator.py - 验证组件命名

第4步：生成技能文件

4.1 创建SKILL.md

---
name: [技能名称]
description: [自动调用触发器 + 目的]
allowed-tools: [工具列表]
version: 1.0.0
---

# [技能标题]

[这个技能做什么的简要描述]

## 何时调用

自动调用当用户说：
- "[触发短语1]"
- "[触发短语2]"
- "[触发短语3]"

## 这个做了什么

1. [步骤1概述]
2. [步骤2概述]
3. [步骤3概述]

## 执行步骤

### 第1步：[步骤名称]

[这一步的详细说明]

**使用预定义函数**：`functions/[函数名称].py`

4.2 创建预定义函数

# functions/[生成器].py

def generate_[输出](name, config):
    """
    根据项目模式生成[输出类型]。

    参数：
        name: [描述]
        config: [描述]

    返回：
        [输出]：[描述]
    """
    # 根据代码库分析实现
    pass

4.3 创建示例

examples/
└── [参考实现].[扩展]
    - 代码库中的实际示例（最佳实践）
    - 显示预期结构
    - 演示约定

4.4 创建模板

templates/
└── [输出模板].[扩展]
    - 带有占位符的骨架结构
    - ${VAR_NAME}用于替换
    - 注释解释部分

第5步：测试生成的技能

5.1 验证技能加载：

# 在项目根目录
grep -r "name: [技能名称]" skills/

5.2 测试自动调用：

在Claude Code对话中：
"[使用自动调用触发短语之一]"

预期：技能应被检测到并加载

5.3 测试执行：

执行技能步骤
验证函数工作正确
检查输出是否符合模板
验证生成的代码是否遵循模式

5.4 如有需要则迭代：

修复函数错误
改进模板
添加缺失的示例
澄清说明

第6步：文档化新技能

更新项目文档：

CLAUDE.md - 添加到技能部分：

#### [技能名称]
**自动调用**："[触发短语]"
**目的**：[它做什么]
**生成**：[输出类型]

README.md - 添加到技能列表：

- **[技能名称]**：[简要描述]

.agent/system/plugin-patterns.md - 添加到技能注册表：

### [技能名称]
**创建**：[日期]
**模式**：[它强制执行的模式]
**函数**：[预定义函数列表]

在plugin.json中注册（如果适用）：

{
  "skills": [
    {
      "name": "[技能名称]",
      "path": "skills/[技能名称]/SKILL.md"
    }
  ]
}

示例工作流程

示例1：为添加API端点创建技能

用户：“为添加REST API端点创建一个技能”

执行：

澄清：
- 哪个框架？（Express, Fastify等）
- 路由在哪里定义？
- 需要认证吗？
- 测试策略？

分析（通过任务代理）：

查找现有的API端点：
- 路由在api/routes/
- 控制器在api/controllers/
- 中间件在api/middleware/
- 测试在tests/api/

设计：

name: backend-api-endpoint
description: 添加新的REST API端点，遵循项目约定。当用户说"添加端点", "创建API"或"新路由"时使用。
allowed-tools: 读取，写入，编辑，Grep，Glob，Bash

生成：

skills/backend-api-endpoint/
├── SKILL.md
├── functions/
│   ├── endpoint_generator.py
│   └── route_validator.py
├── examples/
│   └── user-endpoint.ts
└── templates/
    ├── route-template.ts
    └── test-template.spec.ts

测试：

用户："添加一个POST /posts端点"
技能：自动调用，生成路由 + 控制器 + 测试
验证：文件遵循项目约定

文档：更新CLAUDE.md, README.md, plugin-patterns.md

示例2：为React组件创建技能

用户：“自动化创建新的React组件”

执行：

澄清：
- TypeScript或JavaScript？
- 函数式或类组件？
- 样式方法？（CSS模块，styled-components等）
- 测试库？（Jest, React Testing Library等）

分析（通过任务代理）：

查找React组件：
- 组件在src/components/
- PascalCase命名
- TypeScript（.tsx）
- CSS模块（.module.css）
- 测试与RTL

设计：

name: frontend-component
description: 创建新的React组件，使用TypeScript，样式和测试。当用户说"创建组件", "添加组件"或"新的React组件"时使用。
allowed-tools: 读取，写入，编辑，Grep，Glob，Bash

生成：

skills/frontend-component/
├── SKILL.md
├── functions/
│   ├── component_generator.py
│   ├── test_generator.py
│   └── style_generator.py
├── examples/
│   ├── Button.tsx
│   └── Button.test.tsx
└── templates/
    ├── component-template.tsx
    ├── test-template.test.tsx
    └── style-template.module.css

测试：

用户："创建一个UserProfile组件"
技能：自动调用，生成组件 + 测试 + 样式
验证：Props接口，导出，命名正确

文档：更新项目文档

输出格式

生成技能后，显示摘要：

✅ 技能创建：[技能名称]

结构：
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📁 skills/[技能名称]/
   ├── SKILL.md
   ├── functions/
   │   └── [N 个函数创建]
   ├── examples/
   │   └── [N 个示例添加]
   └── templates/
       └── [N 个模板创建]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

自动调用触发器：
- "[触发器1]"
- "[触发器2]"
- "[触发器3]"

下一步：
1. 测试技能："[示例触发短语]"
2. 如有需要则迭代
3. 文档更新

现在就试试："[示例用法]"

最佳实践

模式分析

使用任务代理进行代码库探索（节省60-80%的令牌）
至少查看3-5个示例（找到模式与异常）
明确遵循的约定
在注释中注明边缘情况

技能设计

保持技能专注（每个技能一个模式）
清晰的自动调用触发短语（3-5个短语）
需要的工具最少（只添加所需的）
逐步披露（细节在函数中，不在主要指令中）

函数创建

一个函数=一个责任
需要类型提示和文档字符串
优雅地处理错误
返回结构化数据（不打印语句）

模板设计

使用清晰的占位符（${VAR_NAME}）
包括解释部分的注释
遵循项目风格指南
提供合理的默认值

测试

使用实际的项目上下文进行测试
验证自动调用工作
检查输出是否符合最佳实践
根据实际使用进行迭代

常见模式自动化

后端模式

REST API端点
GraphQL解析器
数据库迁移
后台作业
中间件函数
认证守卫

前端模式

React/Vue/Svelte组件
Redux/Vuex存储模块
API客户端函数
表单验证模式
路由定义
样式组件创建

基础设施模式

Docker服务配置
CI/CD管道步骤
部署脚本
环境配置
监控设置

文档模式

API文档
组件文档
架构决策记录（ADR）
运行手册条目
更改日志条目

故障排除

技能不自动调用

问题：创建的技能但不自动触发

解决方案：

检查描述是否有清晰的触发短语
验证plugin.json是否包含技能注册
重新加载Claude Code以刷新技能索引
使用描述中的确切触发短语进行测试

函数不执行

问题：预定义函数抛出错误

解决方案：

检查Python语法是否有效
验证函数导入是否正确
首先独立测试函数
检查执行日志中的错误消息

模板不匹配输出

问题：生成的代码与项目约定不匹配

解决方案：

重新分析代码库以查找遗漏的模式
使用正确的结构更新模板
添加更多显示变化的示例
根据linter/formatter进行验证

技能太宽泛

问题：技能尝试做太多

解决方案：

分割成多个专注的技能
将可选功能移至单独的技能
保持核心模式简单
将扩展作为单独的技能添加

成功标准

当这个技能成功时：

[ ] 新技能正确自动调用
[ ] 生成的输出遵循项目约定
[ ] 函数执行无错误
[ ] 模板产生有效代码
[ ] 示例清晰相关
[ ] 文档已更新
[ ] 技能节省了与手动工作相比的时间

技能创建器是Navigator的自我改进引擎 - 它学习你的模式并自动化它们 🔄