---

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>

# 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

---