Skill 的定位

Skill 是 Claude 的 能力扩展包，本质是一个包含工作流指令的 Prompt + 可选的脚本/模板资源。

skill-name/
├── SKILL.md (必须)           ← 核心 Prompt 指令
└── Bundled Resources (可选)
    ├── scripts/              ← 可执行脚本
    ├── references/           ← 参考文档
    └── assets/               ← 模板资产

适合 Skill 的前端场景

1. 项目初始化

场景：创建新项目时，需要执行一系列固定步骤

流程：

1. 选择技术栈（React/Vue/Next.js）
2. 初始化项目结构
3. 配置 ESLint/Prettier
4. 配置 Tailwind CSS
5. 设置 Git hooks
6. 生成 README

为什么适合 Skill：

• 固定的多步骤流程
• 需要执行多个命令
• 可以复用初始化模板

2. 组件库开发

场景：开发一个组件时，需要生成多个配套文件

流程：

1. 创建组件文件 Button.tsx
2. 创建样式文件 Button.module.css
3. 创建测试文件 Button.test.tsx
4. 创建 Storybook Button.stories.tsx
5. 更新组件索引 index.ts
6. 生成文档 Button.md

为什么适合 Skill：

• 每个组件都遵循相同模式
• 文件之间有关联性
• 可以用脚本自动化部分工作

3. 打包发布流程

场景：发布 npm 包或部署应用

流程：

1. 运行测试
2. 构建产物
3. 更新版本号
4. 生成 CHANGELOG
5. 发布到 npm/部署到服务器
6. 创建 Git tag

为什么适合 Skill：

• 严格的步骤顺序
• 需要执行多个命令
• 出错需要回滚

4. API 代码生成

场景：根据 OpenAPI/Swagger 规范生成前端代码

流程：

1. 读取 API 规范文件
2. 生成 TypeScript 类型定义
3. 生成 API 请求函数
4. 生成 React Query hooks
5. 更新 API 索引文件

为什么适合 Skill：

• 输入输出明确
• 生成逻辑固定
• 可以用脚本处理 JSON 解析

5. 国际化处理

场景：为应用添加多语言支持

流程：

1. 扫描代码中的文本
2. 提取到语言文件
3. 替换代码中的硬编码文本
4. 生成翻译模板
5. 配置 i18n 库

为什么适合 Skill：

• 涉及多文件修改
• 有固定的处理流程
• 需要脚本辅助扫描

不适合 Skill 的场景（用 Rule）

Skill 脚本的价值

什么时候 Skill 中的脚本有价值？

1. AI 写不好的确定性任务

比如复杂的正则替换、JSON 解析、文件批量操作

2. 重复代码节省 Token

每次都让 AI 生成相同的样板代码很浪费，不如用脚本模板

3. AI 理解意图后灵活调用

脚本作为工具，AI 根据上下文决定何时调用、传什么参数

总结

Skill 适合：有固定流程、需要脚本、生成多文件

Rule 适合：纯约束、无流程、单一规范