Awesome Claude Code Skills
Claude Code 最实用的 Skills / Agents / Plugins 精选合集，按场景分类，带安装命令，复制即用。
50+ 精选 | 按场景分类 | 带推荐等级 | 持续更新
这个仓库是什么
Claude Code 的 Skill 生态爆发了，但好东西散落在 GitHub、skills.sh、lobehub 各处，找起来费劲。
这个仓库帮你筛过一遍：
- 只收有实际价值的 skill，不收凑数的
- 按使用场景分类，不按作者堆
- 标注推荐等级：
必装>强推>好用>可选 - 每个都带一键安装命令
怎么安装 Skill：
# 通用安装方式
npx skills add <作者>/<仓库>@<skill名>
# 例子
npx skills add vercel-labs/agent-skills@web-design-guidelines
# 查看已安装
npx skills list
目录
必装 Top 10
不管你做什么方向，这 10 个装了不亏。
| # | Skill | 作者 | 一句话 | 安装 |
|---|---|---|---|---|
| 1 | Frontend Design | Anthropic | 官方出品，让 UI 不像 AI 生成的 | npx skills add anthropics/skills@frontend-design |
| 2 | Context7 | intellectronica | 上下文窗口内实时拉 API 文档，不用再贴链接 | npx skills add intellectronica/agent-skills@context7 |
| 3 | Web Design Guidelines | Vercel Labs | 对照 100+ 最佳实践审查你的 UI | npx skills add vercel-labs/agent-skills@web-design-guidelines |
| 4 | UI-UX-Pro-Max | Next Level Builder | 视觉层级 x 色彩心理学 x 交互模式 | npx skills add nextlevelbuilder/ui-ux-pro-max-skill@ui-ux-pro-max |
| 5 | Emil Kowalski's Skill | Emil Kowalski | 设计 + 动效 + 代码 + 性能，全栈审美 | npx skills add emilkowalski/skill |
| 6 | Superpowers | obra | TDD / 并行 Agent / 代码审查 / Git 工作流 | npx skills add obra/superpowers |
| 7 | shadcn/ui | shadcn | 官方组件管理 + 表单 + 预览 | npx skills add shadcn/ui@shadcn |
| 8 | Remotion | Remotion | React 驱动的视频生成，30+ 规则 | npx skills add remotion-dev/skills@remotion-best-practices |
| 9 | Tailwind CSS | hairyf | Tailwind v4 完整支持 | npx skills add hairyf/skills@tailwindcss |
| 10 | Find Skills | Vercel Labs | 让 Agent 自己发现和安装新 Skill | npx skills add vercel-labs/skills@find-skills |
设计 / UI
让 AI 出的设计不再有「模板感」。
| Skill | 作者 | 推荐 | 一句话 | 安装 |
|---|---|---|---|---|
| Frontend Design | Anthropic | 必装 | 官方设计系统哲学，大胆配色 + 有辨识度的字体 + 有意图的动效 | npx skills add anthropics/skills@frontend-design |
| UI-UX-Pro-Max | Next Level Builder | 必装 | 视觉层级 x 色彩心理学 x 交互模式，出图质量显著提升 | npx skills add nextlevelbuilder/ui-ux-pro-max-skill@ui-ux-pro-max |
| Emil Kowalski's Skill | Emil Kowalski | 必装 | 来自 Sonner / Vaul 作者的设计 + 动效 + 代码实践 | npx skills add emilkowalski/skill |
| Web Design Guidelines | Vercel Labs | 必装 | 对照 100+ 最佳实践审查 UI，找出细节问题 | npx skills add vercel-labs/agent-skills@web-design-guidelines |
| Make Interfaces Feel Better | Jakub Krehel | 强推 | 对齐 / 阴影 / 间距 / 圆角的细节打磨 | npx skills add jakubkrehel/make-interfaces-feel-better |
| Figma Designer | Anthropic | 好用 | Claude 进入 Figma 高级设计师思维模式 | npx claude skills add figma |
| Theme Factory | Anthropic | 好用 | 10 套配色 + 字体主题，套用到任意 artifact | npx claude skills add theme-factory |
| Brand Guidelines | Anthropic | 好用 | Anthropic 官方品牌规范（色 / 字 / 视觉） | npx claude skills add brand-guidelines |
| Canvas Design | Anthropic | 好用 | 生成海报 / 插画，输出 PNG / PDF | npx claude skills add canvas-design |
| SuperKit UI/UX | Pixel Process UG | 好用 | 50+ 风格 / 97 色板 / 57 字体配对 | npx skills add Pixel-Process-UG/superkit-agents |
| TypeUI Design Skills | TypeUI | 可选 | 手工 skill 文件，复现特定视觉风格 | npx typeui.sh pull [name] |
| Design.md Generator | Google Labs | 好用 | 分析项目 → 自动生成 DESIGN.md 设计规范 | npx skills add google-labs-code/stitch-skills@design-md |
| Brainstorming | obra | 强推 | 验证设计方案后才允许写代码，防止 AI 乱写 | npx skills add obra/superpowers@brainstorming |
前端开发
组件库、框架支持、开发效率。
| Skill | 作者 | 推荐 | 一句话 | 安装 |
|---|---|---|---|---|
| shadcn/ui | shadcn | 必装 | 官方组件管理 + 表单 + 预览 | npx skills add shadcn/ui@shadcn |
| Context7 | intellectronica | 必装 | 上下文窗口内实时拉准确 API 文档 | npx skills add intellectronica/agent-skills@context7 |
| Tailwind CSS | hairyf | 必装 | Tailwind CSS v4 完整支持 | npx skills add hairyf/skills@tailwindcss |
| Tailwind Design System | WS Hobson | 强推 | CSS-first 设计系统 + OKLCH 色彩 | npx skills add wshobson/agents@tailwind-design-system |
| Find Skills | Vercel Labs | 强推 | 让 Agent 自己发现和安装新 Skill | npx skills add vercel-labs/skills@find-skills |
| React Best Practices | Vercel Labs | 强推 | 45 条 React/Next.js 性能优化规则 | npx skills add vercel-labs/agent-skills@react-best-practices |
| Ralph Loop | Frank Bria | 好用 | 多小时自主编码 Agent，适合长任务 | npx skills add frankbria/ralph-claude-code |
动效 / 视频
让页面动起来，或者直接生成视频。
| Skill | 作者 | 推荐 | 一句话 | 安装 |
|---|---|---|---|---|
| Remotion | Remotion | 必装 | React 驱动的视频生成，30+ 规则，3D / 图表 / 参数化内容 | npx skills add remotion-dev/skills@remotion-best-practices |
| Motion (Framer Motion) | Jezweb | 强推 | React 动画：手势 / 滚动 / 弹性 / 布局 | npx skills add jezweb/claude-skills@motion |
| Animation Systems | Guilherme | 强推 | Stripe / Linear / Apple 级别网页动效 | npx skills add guilhermemarketing/gui-marketing-skills@animation-systems |
| AI Video Generation | inference.sh | 好用 | 40+ AI 视频模型（Veo / Wan / Grok） | npx skills add inferen-sh/skills@ai-video-generation |
| Nano Banana 2 | inference.sh | 好用 | Gemini 文字转图 / 图片编辑，4K 输出 | npx skills add inferen-sh/skills@nano-banana-2 |
营销 / SEO
从 SEO 审查到文案撰写到定价策略。
| Skill | 作者 | 推荐 | 一句话 | 安装 |
|---|---|---|---|---|
| SEO Audit | Corey Haines | 强推 | 五优先级 SEO 全面审查框架 | npx skills add coreyhaines31/marketingskills@seo-audit |
| Copywriting | Corey Haines | 强推 | 主页 / 落地页 / 定价页转化文案 | npx skills add coreyhaines31/marketingskills@copywriting |
| Product Marketing Context | Corey Haines | 好用 | 产品定位 / 人群 / 竞品 / 品牌声音 | npx skills add coreyhaines31/marketingskills@product-marketing-context |
| Pricing Strategy | Corey Haines | 好用 | SaaS 定价设计与竞品对比框架 | npx skills add coreyhaines31/marketingskills@pricing-strategy |
| Twitter Automation | inference.sh | 可选 | 推文 / 点赞 / 转推 / DM，9 个命令 | npx skills add inferen-sh/skills@twitter-automation |
代码质量
代码审查、测试、调试。
| Skill | 作者 | 推荐 | 一句话 | 安装 |
|---|---|---|---|---|
| Superpowers | obra | 必装 | TDD / 并行 Agent / 代码审查 / Git 工作流，一套全有 | npx skills add obra/superpowers |
| Code Review | Supercent | 强推 | 自动代码审查（注释 / 测试 / 类型 / 质量） | npx skills add supercent-io/skills-template@code-review |
工作流 / 方法论
改变 Claude Code 的工作方式。
| Skill | 作者 | 推荐 | 一句话 | 安装 |
|---|---|---|---|---|
| Superpowers - TDD | obra | 必装 | 强制测试驱动开发：写测试 → 实现 → 重构 | npx skills add obra/superpowers@test-driven-development |
| Superpowers - Parallel Agents | obra | 强推 | 多个子 Agent 并行执行独立任务 | npx skills add obra/superpowers@dispatching-parallel-agents |
| Superpowers - Plan Mode | obra | 强推 | 先规划再执行，防止 AI 乱改代码 | npx skills add obra/superpowers@writing-plans |
| Superpowers - Git Worktrees | obra | 好用 | 隔离工作区，不影响主分支 | npx skills add obra/superpowers@using-git-worktrees |
无障碍
| Skill | 作者 | 推荐 | 一句话 | 安装 |
|---|---|---|---|---|
| Web Accessibility | Supercent | 好用 | 对比度 / 键盘导航 / 语义结构检查 | npx skills add supercent-io/skills-template@web-accessibility |
合集 / 导航站
不知道该装什么？先看这些合集。
| 资源 | 说明 | 链接 |
|---|---|---|
| Awesome Agent Skills | VoltAgent 维护，549+ skills，分类最全 | GitHub |
| Awesome Claude Code Toolkit | Rohit Ghumare 维护，135 agents + 35 skills | GitHub |
| Awesome Claude Code | hesreallyhim 维护，skills + hooks + 命令 | GitHub |
| skills.sh | Vercel 出的 Skill 包管理器和浏览站 | skills.sh |
| LobeHub Skills | 232+ skills 的可视化浏览 | lobehub.com/skills |
| hotkeys.design | 设计师向的 Skill 导航站 | hotkeys.design |
| awesomeskills.dev | 跨平台 Agent Skill 目录 | awesomeskills.dev |
怎么选 Skill
装太多 Skill 反而会让 Claude Code 变慢或行为混乱。建议：
第一步：装 3 个基础 Skill
# 设计质量
npx skills add anthropics/skills@frontend-design
# 代码质量
npx skills add obra/superpowers
# 文档查询
npx skills add intellectronica/agent-skills@context7
第二步：按你的方向加 1-2 个
| 你的方向 | 加这个 |
|---|---|
| 做 UI / 前端 | UI-UX-Pro-Max + Emil Kowalski |
| 做视频 | Remotion |
| 做营销页 | SEO Audit + Copywriting |
| 做组件库 | shadcn/ui + Tailwind CSS |
第三步：用 Find Skills 让 Agent 自己找
npx skills add vercel-labs/skills@find-skills
装完之后 Claude 遇到新需求会自动搜索和安装合适的 Skill。
关于作者
Ian (伊恩) — 产品设计师 / 一人公司实践者 / AI Builder
用 AI 团队打造一人公司。
- X/Twitter: @ianneo_ai
- 网站: ianneo.xyz
- 微信: 17855813746
- 邮箱: hello.neoc@gmail.com
🚀 正在开启：内容创作丨AI 工作流围观营，欢迎来玩！ 加微信了解详情。
其他资源
- obsidian-ai-second-brain — Obsidian + Claude AI 个人知识库搭建指南
- claude-code-handbook — Claude Code 高阶使用手册
贡献
发现好用的 Skill 但这里没收？欢迎提 Issue 或 PR。
收录标准：
- 有实际使用价值（不是 demo）
- 能正常安装
- 有人在用（GitHub stars > 10 或明确的用户反馈）
觉得有用？Star 一下方便后续更新时收到通知。