# Skill 模板规范

> 所有 Skill 文件必须遵循以下五段式结构，确保一致性和 AI 可理解度。

---

## 模板结构

```markdown
# Skill: [Skill 名称]

## Purpose

一句话说明这个 Skill 解决什么问题，面向什么场景。

## When to Use

- 触发条件 1
- 触发条件 2
- 触发条件 3

## Procedure

分步骤实现指南，每步包含代码示例。

### 1. [步骤标题]

说明 + 代码示例

### 2. [步骤标题]

说明 + 代码示例

...

## Constraints

- 边界条件 / 注意事项 1
- 反模式 / 陷阱 1
- 性能 / 安全约束 1

## Expected Output

明确产出物是什么，如何验证。
```

---

## 编写规范

### Purpose

- 一句话，不超过 30 字
- 说明解决什么问题，而非如何解决
- 示例: "管理表单状态、校验和提交，避免受控组件的性能问题"

### When to Use

- 3-5 条触发条件，使用短列表
- 每条以动词或名词开头，避免长句
- 明确说明"什么时候不该用"（如有）
- 示例:
  - 复杂表单（10+ 字段、动态字段、联动校验）
  - 需要高性能输入（避免受控组件的每次键入重渲染）

### Procedure

- 按实施顺序分步骤，每步有编号和标题
- 每个步骤包含：
  - 1-2 句说明
  - 可运行的代码示例（TypeScript 优先）
  - 关键参数的注释说明
- 涉及安装的步骤先给出安装命令
- 代码示例遵循项目已有的编码规范
- 优先展示完整的最小可运行示例，而非片段

### Constraints

- 列出 3-6 条关键约束
- 包括：性能陷阱、安全注意、反模式、兼容性限制
- 每条简洁，必要时附简短解释
- 示例:
  - 虚拟列表中的项目不在 DOM 中直到滚动到，搜索引擎可能无法索引

### Expected Output

- 明确说明产出物是什么
- 如何验证产出是否正确
- 1-3 句话

---

## 代码示例约定

- 使用 TypeScript（.tsx / .ts），除非场景明确要求 JavaScript
- 遵循 React 18+ / Vue 3+ 现代语法
- 变量和函数名语义化，避免缩写（除非是行业约定如 `ctx`、`ref`）
- 关键行添加行内注释说明"为什么"而非"是什么"
- 安装命令使用 `npm install`（不锁包管理器）

---

## Agent 关联

如果 Skill 有对应的 Agent，在文件末尾添加：

```markdown
## Related Agent

- [agent-name](../agents/agent-name.md) — 关联说明
```

---

## 文件命名

- 格式: `fec-{主题}.md`
- 使用小写和连字符
- 示例: `fec-storybook-component-doc.md`、`fec-list-virtualization.md`
