Agent Skills

---
theme: default
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
highlighter: shiki
lineNumbers: false
info: |
  ## Agent Skills Presentation
  Shared by FE Team
drawings:
  persist: false
transition: slide-left
title: Agent Skills
---

# Agent Skills

<div class="pt-12 opacity-60 text-sm">
  2025-12-24 • Frontend Team Sharing
</div>

---

# 目录

<div class="grid grid-cols-2 gap-4 mt-8">

<div>

## 1. 什么是 Skills?

核心概念与 Anthropic 愿景

## 2. 行业现状

主流平台支持情况对比

## 3. 实现解析

Codex 与 OpenCode 源码分析

</div>

<div>

## 4. Skills 实战

仓库内复现与演示

## 5. 项目 Demo

内部项目应用展示

</div>

</div>

---

# 1. 什么是 Skills?

<div class="text-xl mt-4 opacity-80">
从 "Chat" 到 "Agent" 的关键跃迁
</div>

<div class="grid grid-cols-2 gap-8 mt-12">

<div class="border-l-4 border-blue-500 pl-4">

### Tool Use / Function Calling [1]

赋予 LLM **"手"** 的能力。
不再只是生成文本，而是生成**结构化的执行指令**。

</div>

<div class="border-l-4 border-green-500 pl-4">

### Anthropic 的愿景 [3]

**Computer Use**: 让 AI 像人一样操作电脑。

**Agentic Loop**:

1. **Reasoning** (思考)
2. **Planning** (规划)
3. **Tool Use** (调用工具)
4. **Observation** (观察结果)

</div>

</div>

<div class="absolute bottom-4 left-8 text-xs opacity-40">
[1] OpenAI Function Calling: https://platform.openai.com/docs/guides/function-calling <br>
[3] Anthropic Computer Use: https://www.anthropic.com/news/computer-use
</div>

---

# Skills vs Tool Use vs MCP

<div class="mt-8">

| 概念         | 定义         | 侧重点                                                 |
| :----------- | :----------- | :----------------------------------------------------- |
| **Tool Use** | 基础能力     | 底层 API，模型调用函数的能力                           |
| **Skills**   | **能力封装** | 面向**用户/开发者**的上下文注入包 (Prompt + Tools) [4] |
| **MCP**      | 通信协议     | **标准化**连接，解决"如何连接万物"的问题 [5]           |

</div>

> **Skills 本质**：一种标准化的**上下文注入**机制，包含 "Prompt (怎么做)" + "Tools (用什么做)"。

<div class="absolute bottom-4 left-8 text-xs opacity-40">
[4] Agent Skills Specification: https://agentskills.io <br>
[5] Model Context Protocol: https://modelcontextprotocol.io
</div>

---

# 2. 行业现状：主流平台支持 [2]

<div class="text-sm">

| 平台            | 配置方式                           | 特点                                                 |
| :-------------- | :--------------------------------- | :--------------------------------------------------- |
| **Claude Code** | `.claude/skills/SKILL.md`          | **最早提出 Skills 概念**，标准化的 SKILL.md 格式 [2] |
| **Codex CLI**   | `.codex/skills/SKILL.md`           | **最完善**，支持 Scripts, Assets, 自动发现 [7]       |
| **OpenCode**    | `.opencode/skills/SKILL.md`        | 兼容 Anthropic 规范，开源实现 [8]                    |
| **Cursor**      | `.cursor/skills/` + `.cursorrules` | 支持 Skills + MCP，`.cursorrules` 用于项目规则 [6]   |
| **VS Code**     | `.github/skills/SKILL.md`          | Copilot Workspace 的标准，跨工具可移植 [10]          |
| **Gemini CLI**  | **不支持 Skills**                  | 使用 `Extensions` 机制 + MCP 作为替代方案            |

</div>

<div class="absolute bottom-4 left-8 text-xs opacity-40">
[2] Claude Skills Explained: https://claude.com/blog/skills-explained <br>
[6] Cursor Skills: https://cursor.com/docs/context/skills <br>
[7] OpenAI Codex CLI: https://github.com/openai/codex <br>
[8] OpenCode: https://github.com/sst/opencode <br>
[10] VS Code Agent Skills: https://code.visualstudio.com/docs/copilot/customization/agent-skills
</div>

---

# 3. 具体实现深度解析

<div class="grid grid-cols-2 gap-8 mt-8">

<div>

### Codex: "Index + Injection" 三层架构 [7]

1. **Manifest Phase**: 启动时扫描多级目录, 在 System Prompt 中生成 `## Skills` 索引章节 (名称 + 描述).
2. **Injection Phase**: 识别到 `$SkillName` 或语义匹配后, 异步读取 `SKILL.md` 全文并注入对话上下文.
3. **Extension Phase**: 按需执行 `scripts/` 中的确定性工具或读取 `references/` 大文件.

</div>

<div>

### OpenCode: "Two-Phase" Tool Loading [8]

- **Manifest Phase**: 将所有可用 Skill 的名称和描述注入到 `skill` 工具的 `description` 中 (节省 Token).
- **Execution Phase**:
  1. 模型判断需要技能时调用 `skill({name: "..."})`.
  2. 完整 `SKILL.md` 内容作为 **Tool Output** 返回并注入 Context.
- **AGENTS.md**: 作为 Global Rules, 在会话初始化时直接拼接到 System Prompt 顶部.

</div>

</div>

<div class="absolute bottom-4 left-8 text-xs opacity-40">
[7] Codex Source: loader.rs, injection.rs, render.rs <br>
[8] OpenCode Source: packages/opencode/src/tool/skills
</div>

---

# 4. SKILL.md 结构解析

<div class="grid grid-cols-2 gap-8 mt-8">

<div>
以 Codex/OpenCode 标准为例，一个 Skill 通常包含：

1. **Frontmatter**: 元数据 (名称, 描述) [4]
2. **Instructions**: 给 LLM 的系统提示词
3. **Examples**: 少样本学习 (Few-shot)

</div>

```markdown
# Instructions

You are an expert React developer.
When asked to create a component:

1. Use functional components
2. Use TypeScript interfaces for props
3. Use Tailwind CSS for styling

# Examples

User: Create a Button
Assistant:
\`\`\`tsx
interface ButtonProps { ... }
export const Button = ...
\`\`\`
```

</div>

<div class="absolute bottom-4 left-8 text-xs opacity-40">
[4] Agent Skills Specification: https://agentskills.io/specification
</div>

---

# Skills 实战案例

我们将创建一套标准的 Skills 并集成到当前仓库中。

<div class="grid grid-cols-2 gap-4 mt-8">

<div class="bg-gray-100 p-4 rounded dark:bg-gray-800 border-l-4 border-purple-500">
  <div class="text-xl font-bold mb-2">🌍 i18n Workflow</div>
  <div class="text-sm opacity-80 mb-2">全流程国际化重构</div>
  <div class="text-xs text-gray-500">Scan -> Keys -> Code -> JSON</div>
</div>

<div class="bg-gray-100 p-4 rounded dark:bg-gray-800 border-l-4 border-orange-500">
  <div class="text-xl font-bold mb-2">📊 Enterprise Table</div>
  <div class="text-sm opacity-80 mb-2">B端复杂表格生成</div>
  <div class="text-xs text-gray-500">AntD Pro + URL Sync + Types</div>
</div>

</div>

---

# References

- **[1] OpenAI Function Calling**: https://platform.openai.com/docs/guides/function-calling
- **[2] Claude Skills Explained**: https://claude.com/blog/skills-explained
- **[3] Anthropic Computer Use**: https://www.anthropic.com/news/computer-use
- **[4] Agent Skills Specification**: https://agentskills.io
- **[5] Model Context Protocol (MCP)**: https://modelcontextprotocol.io
- **[6] Cursor Skills**: https://cursor.sh/docs/context/skills
- **[7] OpenAI Codex CLI**: https://github.com/openai/codex
- **[8] OpenCode**: https://github.com/sst/opencode
- **[9] Claude Skills Explained (YouTube)**: https://www.youtube.com/watch?v=fOxC44g8vig
- **[10] VS Code Agent Skills**: https://code.visualstudio.com/docs/copilot/customization/agent-skills

---