Claude Code Skills（SKILL.md）是 2025 年末兴起、2026 年快速普及的能力扩展机制——给 Agent 安装一个 SKILL.md 文件，它就获得了一套专属的指令、模板和上下文，处理特定类型任务时质量大幅提升。
这篇文章整理了 2026 年 3 月最值得安装的 10 个技能，每个都有实际使用效果说明。
什么是 Agent Skills？
SKILL.md 文件：给 Agent 的"说明书"。当 Agent 识别到相关任务时，自动加载对应技能；也可以用斜杠命令显式调用（如 /frontend-design）。
跨工具兼容：相同的 SKILL.md 格式在 Claude Code、Cursor、Gemini CLI、Codex CLI、OpenClaw 等主流 Agent 工具里都能用。
安装来源：
- clawhub.ai — OpenClaw/Claude Code 技能市场
- npm 包（
npx skills add ...） - GitHub 仓库直接安装
技能 1：Frontend Design — 彻底逃离"AI 风格"设计
问题：不带引导直接让 Claude 建页面，99% 会得到同样的结果：Inter 字体、紫色渐变、极简卡片。Anthropic 把这叫"分布式收敛"——模型被训练在统计中心，所以不断重现统计中心。
效果：安装 frontend-design 技能后，Claude 在写 UI 代码前先获得一套设计系统和哲学。输出变成：有个性的排版、有目的感的配色、流畅而不装饰性的动画。
安装：
npx skills add anthropics/claude-code --skill frontend-design
# 在 clawhub.ai 也可以找到，277,000+ 安装量调用：
/frontend-design 给我们的 SaaS 产品做一个定价页，
三个方案，高亮推荐方案，年付折扣切换
对比：没有技能 → 标准模板感极强；有技能 → 像经过设计师 review 过。
技能 2：Browser Use — 给 Agent 真实的浏览器
问题：Agent 只能写爬虫，不能运行。需要填表单、登录 dashboard、验证动态页面、跑端到端验收测试？没有浏览器的 Agent 做不到。
效果：agent 获得操控真实浏览器的能力，可以导航、点击、填表、截图、提取动态内容——像人类一样用浏览器，不需要提前理解 DOM 结构。
安装：
npx skills add https://github.com/browser-use/browser-use --skill browser-use实战示例：
验证 staging 环境的注册流程可以完整跑通，
截图关键步骤，发现任何错误就报告
Agent 执行：
- 打开 staging 注册页
- 填写测试账号信息
- 点击注册
- 跟进邮件验证（如果有）
- 截图 dashboard（确认登录成功）
- 汇报：注册流程正常，注意 mobile 上"验证邮件"按钮在视口以下
额外价值：研究任务、竞品监控、自动化 QA 测试。
技能 3：Code Reviewer — 让 Agent 提交前自我审查
问题：Agent 写代码快，但默认情况下它出手的是"第一稿"。逻辑能跑通，但可能有不必要的抽象、重复逻辑、职责不单一的函数。
效果：code-reviewer 技能让 Agent 在给你看代码前先过一遍质量关：检查并修复可复用性、单一职责、命名清晰度、性能低效、死代码。
安装（Anthropic 官方 simplify 技能）：
npx skills add anthropics/claude-code --skill simplify在 CLAUDE.md 里强化：
## 代码质量标准
每次实现完成后，运行 /simplify 再交付。检查：
- 超过 30 行的函数（可能职责太多）
- 重复超过 2 次的逻辑（提取为工具函数）
- TypeScript any 类型（替换为真实类型）
- 缺少 error handling 的 async 操作实际效果：
// 修复前（Agent 第一稿）
const getUser = async (id) => {
const res = await fetch(`/api/users/${id}`);
return res.json();
};
const getPost = async (id) => {
const res = await fetch(`/api/posts/${id}`);
return res.json();
};
// 修复后（code-reviewer 优化）
const fetchResource = async (path) => {
const res = await fetch(path);
if (!res.ok) throw new Error(`Request failed: ${res.status}`);
return res.json();
};
const getUser = (id) => fetchResource(`/api/users/${id}`);
const getPost = (id) => fetchResource(`/api/posts/${id}`);技能 4：Shannon — AI 自动渗透测试
适合：需要安全审查的项目，尤其是有外部接口的 API 服务。
效果：Shannon 是自主 AI 渗透测试技能，在沙箱环境里模拟攻击者行为，找出 OWASP Top 10 常见漏洞：SQL 注入、XSS、CSRF、不安全反序列化、权限越级。
安装：
npx skills add https://github.com/shannon-security/shannon --skill pentest使用：
/pentest 对 src/api/auth/ 做安全测试，
重点检查登录和 token 刷新端点
重要：只在你有权限测试的系统上运行，不要用于未授权目标。
技能 5：Remotion — 代码生成视频
问题：产品演示视频需要的时间和工具与开发完全不同，结果大多数功能根本没有视频演示。
效果：Remotion 是用 React 代码生成视频的框架，配合 Agent 技能，用自然语言描述视频内容，Claude 生成 Remotion 组件，导出 MP4。
安装：
npx skills add remotion/agent-skills使用：
/remotion 做一个 30 秒的功能演示视频：
展示 API dashboard 的数据可视化，
用动画展示数据实时更新过程，
背景深色，风格现代
生成代码示例：
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
export const ApiDemo = () => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);
return (
<AbsoluteFill style={{ backgroundColor: "#0a0a0a", opacity }}>
{/* 动态图表内容 */}
</AbsoluteFill>
);
};技能 6：Google Workspace — 50+ Google API 自动化
效果：Google Workspace 技能让 Agent 操作 Google 全套服务：Sheets 数据处理、Docs 文档生成、Calendar 事件管理、Gmail 邮件操作、Slides 演示文稿创建。
安装：
npx skills add https://github.com/google-workspace/agent-skill使用示例：
把这次 sprint 的任务数据整理到 Google Sheets，
生成按优先级分组的表格，
再在 Google Calendar 上给下周的 review 会议打个标记
技能 7：PlanetScale Database Skills — 数据库 Schema 和查询优化
效果：针对 PlanetScale（MySQL 兼容）的专属技能，覆盖：Schema branching 工作流、安全迁移策略、查询性能分析、索引优化建议。
安装：
npx skills add planetscale/database-skills使用：
分析 users 表的查询性能，
找出可以加索引优化的字段，
生成 Schema 变更建议（按 PlanetScale 的 branching 流程）
技能 8：Excalidraw 架构图生成
效果：把自然语言描述的系统架构转为 Excalidraw 手绘风格图表，适合文档、PRD、技术分享。
安装：
npx skills add https://github.com/excalidraw/claude-skill使用：
/diagram 画出我们的微服务架构：
API Gateway → Auth Service / Order Service / Payment Service，
Order 依赖 Product Service 和 Inventory Service，
所有服务都连接 Postgres 和 Redis
技能 9：Valyu — 实时网络和专业数据
效果：Valyu 技能给 Agent 连接实时网络搜索能力，而不是依赖训练数据的知识截止日期。支持专业数据源（金融、科学论文、专利数据库）的精准检索。
安装：
npx skills add valyu/web-search区别于普通搜索：专业数据源的结构化访问、引用追踪、来源可信度评估。
技能 10：Antigravity Awesome Skills — 1,200+ 技能合集
效果：curated 技能库，整合了超过 1,200 个社区技能，覆盖从 DevOps 到游戏开发的各种场景。
安装：
npx skills add antigravity/awesome-skills用 /skills list 浏览，找到需要的技能按需激活。
安装技能的通用方法
# 方法 1：npx skills add（推荐）
npx skills add [package-or-github-url] --skill [skill-name]
# 方法 2：从 clawhub.ai 下载 SKILL.md 手动放置
# 把 SKILL.md 放到项目目录或 ~/.claude/skills/
# 查看已安装技能
/skills list
# 调用特定技能
/[skill-name] [指令]来源：medium.com/@unicodeveloper 10 个必备技能 | clawhub.ai | 整理：ClaudeEagle