by helloianneo
Claude Code 最实用的 Skills / Agents / Plugins 精选合集 | 50+ 精选 | 按场景分类 | 带推荐等级 | 复制即装
# Add to your Claude Code skills
git clone https://github.com/helloianneo/awesome-claude-code-skillsGuides for using ai agents skills like awesome-claude-code-skills.
Claude Code 最实用的 Skills / Agents / Plugins 精选合集，按场景分类，带安装命令，复制即用。
50+ 精选 | 按场景分类 | 带推荐等级 | 持续更新
Claude Code 的 Skill 生态爆发了，但好东西散落在 GitHub、skills.sh、lobehub 各处，找起来费劲。
这个仓库帮你筛过一遍：
必装 > 强推 > 好用 > 可选怎么安装 Skill：
# 通用安装方式
npx skills add <作者>/<仓库>@<skill名>
# 例子
npx skills add vercel-labs/agent-skills@web-design-guidelines
# 查看已安装
npx skills list
不管你做什么方向，这 10 个装了不亏。
| # | Skill | 作者 | 一句话 | 安装 | |---|-------|------|--------|------| | 1 | Frontend Design | Anthropic | 官方出品，让 UI 不像 AI 生成的 | | | 2 | | intellectronica | 上下文窗口内实时拉 API 文档，不用再贴链接 | | | 3 | | Vercel Labs | 对照 100+ 最佳实践审查你的 UI | | | 4 | | Next Level Builder | 视觉层级 x 色彩心理学 x 交互模式 | | | 5 | | Emil Kowalski | 设计 + 动效 + 代码 + 性能，全栈审美 | | | 6 | | obra | TDD / 并行 Agent / 代码审查 / Git 工作流 | | | 7 | | shadcn | 官方组件管理 + 表单 + 预览 | | | 8 | | Remotion | React 驱动的视频生成，30+ 规则 | | | 9 | | hairyf | Tailwind v4 完整支持 | | | 10 | | Vercel Labs | 让 Agent 自己发现和安装新 Skill | |
No comments yet. Be the first to share your thoughts!
npx skills add anthropics/skills@frontend-designnpx skills add intellectronica/agent-skills@context7npx skills add vercel-labs/agent-skills@web-design-guidelinesnpx skills add nextlevelbuilder/ui-ux-pro-max-skill@ui-ux-pro-maxnpx skills add emilkowalski/skillnpx skills add obra/superpowersnpx skills add shadcn/ui@shadcnnpx skills add remotion-dev/skills@remotion-best-practicesnpx skills add hairyf/skills@tailwindcssnpx skills add vercel-labs/skills@find-skills让 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 审查到文案撰写到定价策略。
| 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 | | **skil