蛋炒饭的前端笔记

外观

Agent Skills

Agent Skills 是"带目录的说明书"——把提示词按"元数据 / 指令 / 资源"三层拆开，实现渐进式披露（Progressive Disclosure），让 AI 自动发现可用能力，并在需要时按需加载细节。

前言：从 Prompt 到 Skills

开发中使用 AI 协作大致会经历以下阶段：

阶段说明特点
手写提示词灵活但可复用性差越写越长，维护困难
Commands把提示词模板化适合重复动作；但存在"全加载浪费 token 或不加载不可发现"的矛盾
MCP把"可执行"能力标准化解决"能不能做"的问题（拉接口文档、查数据、操作平台等）
Agent Skills把"怎么做"的能力标准化解决"怎么组织提示词/工作流"的问题，AI 自行决定何时调用

提示词是临时口头交代，Skills 是写好的 SOP（Standard Operating Procedure） 手册。

Vibe Coding 的核心不是"更快输出"，而是"更稳定的状态连续性"：人更专注于意图、方向和验收；AI 更像协作工程师自动组织步骤、选择能力并自我修正。Agent Skills 更贴近这种协作范式：你表达意图，模型决定是否调用 Skill、如何组合多个 Skill。

什么是 Skills

  • 定义：一种结构化的提示词与工作流封装机制，AI 可基于技能元数据自主选择是否使用。
  • 核心设计：三层结构 + 按需加载。
  • 调用时机：模型自主选择（AI 根据你的请求 + 元数据描述决定是否使用）。

三层结构

把 Skill 想象成一本书：

层级类比说明加载时机
元数据（Metadata）目录一定会进入上下文；关键在于描述清楚"什么时候该用"始终加载
指令（Instructions）正文描述具体如何使用这个技能（类似 commands）选中时加载
资源（Resources）附录脚本、范文、规范、图片等需要时读取

当一个项目里有很多 Skills 时，只有"目录"常驻上下文，指令按需拉取，从而在"自动发现能力"与"token 使用效率"之间取得平衡。

目录结构

.claude/skills/
  └── <skill-name>/
      ├── SKILL.md        # 必需文件
      ├── scripts/        # 可执行脚本（可选）
      ├── references/     # 规范/范文/说明（可选）
      └── assets/         # 图片等静态资源（可选）

示例

---
name: explaining-code
description: 使用视觉图表和类比来解释代码。适用于解释代码运作原理、讲解代码库，或当用户提问"这段代码是怎么工作的？"时。
---

在解释代码时，请始终包含以下内容：

1. **从类比开始**：将代码比作日常生活中的某种事物。
2. **绘制图表**：使用 ASCII 艺术图来展示流程、结构或相互关系。
3. **逐步拆解代码**：一步步地解释代码执行过程中发生了什么。
4. **指出一个"陷阱" (Gotcha)**：说明一个常见的错误或容易产生的误解。

保持对话式的语气。对于复杂的概念，可以使用多个类比来辅助理解。

Skills vs Commands vs MCP

Skills vs Commands

维度Agent SkillsCommands
触发方式模型自主选择用户显式触发
加载方式元数据常驻 + 指令/资源按需加载通常一次性加载（或完全不加载导致不可发现）
可发现性高（AI 会扫描元数据）低（需要记住/手动触发）
适合场景多能力模块、复杂工作流、长期维护简单重复动作、一次性任务、强控制执行

Commands 的问题：

  1. 要么全加载浪费 token，要么不加载失去自动发现
  2. 需要你替 AI 做决策：每一步都要你明确告诉 AI 该做什么
  3. 频繁打断对话：破坏思考的连续性
  4. 需要记忆负担：你得记住所有 Commands 的名字和用法

Skills 的优势：

  1. 自动发现 + 按需加载：元数据让 AI 知道有哪些能力，指令按需加载节省 token
  2. AI 自主决策：AI 根据任务自动选择和使用合适的 Skills
  3. 保持对话连续性：你表达意图，AI 自动组织步骤，不被频繁打断
  4. 降低记忆负担：你不需要记住具体命令，只需要表达需求

Skills vs MCP

维度Agent SkillsMCP
解决的问题"怎么做"（提示词/流程/规范组织）"能不能做"（工具调用/外部系统交互）
形态Markdown 为主，可带资源标准化工具/服务（Node/Python 包等）
强项工作流编排、约束内化、知识沉淀稳定执行、可编程能力、对接平台/系统

总结：MCP 擅长工具调用，Skills 擅长工作流编排。二者配合使用效果更佳。

Skills 编排 + MCP 执行

典型前端场景（以 YAPI 为例）：

  1. Skill 负责定义流程与输出规范（文件位置、类型命名、错误处理、是否生成 hooks 等）
  2. MCP 负责拉取接口文档（路径、方法、参数、响应）
  3. AI 在 Skill 约束下生成代码，并在失败时自我修正（补字段、改命名、补边界情况）

团队价值

目前各大主流 AI 编程工具均提供了对 Skills 的支持，作为以 Markdown 文件为主要实现方式的 Skills 也非常方便团队复用。

核心优势

优势说明
效率减少每次"重写一遍提示词"的成本，让 AI 直接按既定流程产出
一致性把代码规范/目录约定/命名规则固化为可复用能力，降低"不同人问出不同结果"的波动
可规模化技能越多越能体现按需加载优势；项目越长期越能体现维护收益

把 Skills 做成"团队能力库"

团队内的 Skills 需要大家共同维护。可以理解为把散落在各个文档中的说明、规范、踩坑指南等都可以做成 Skills，不用担心 Token 爆炸的问题。

最佳实践

使用建议

  1. 不影响现有工作流：Skills 只是在处理部分工作时更加规范，遵循你制定的 SOP
  2. 优先级注意：MCP 提示词的优先级比 Skills 高，如果用户提示词直接命中了 MCP，可能就不会再命中 Skills
  3. 项目规范优先：在成熟项目中，AI 会优先参考当前项目结构。建议在脚手架项目中维护好团队规范和最佳实践，Skills 用在跨项目、通用规范等层面

相关资源