[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10943":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":9,"languages":9,"totalLinesOfCode":9,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":14,"starSnapshotCount":14,"syncStatus":38,"lastSyncTime":39,"discoverSource":40},10943,"awesome-claude-code-skills","helloianneo\u002Fawesome-claude-code-skills","helloianneo","Claude Code 最实用的 Skills \u002F Agents \u002F Plugins 精选合集 | 50+ 精选 | 按场景分类 | 带推荐等级 | 复制即装",null,234,42,3,5,0,19,39,104,57,4.9,"MIT License",false,"main",true,[25,26,27,28,29,30,31,32,33,34],"ai-agents","awesome","awesome-list","claude","claude-code","cursor","design","developer-tools","frontend","skills","2026-06-12 02:02:28","# Awesome Claude Code Skills\n\n> Claude Code 最实用的 Skills \u002F Agents \u002F Plugins 精选合集，按场景分类，带安装命令，复制即用。\n>\n> 50+ 精选 | 按场景分类 | 带推荐等级 | 持续更新\n\n---\n\n## 这个仓库是什么\n\nClaude Code 的 Skill 生态爆发了，但好东西散落在 GitHub、skills.sh、lobehub 各处，找起来费劲。\n\n这个仓库帮你**筛过一遍**：\n\n- 只收有实际价值的 skill，不收凑数的\n- 按使用场景分类，不按作者堆\n- 标注推荐等级：`必装` > `强推` > `好用` > `可选`\n- 每个都带一键安装命令\n\n**怎么安装 Skill：**\n\n```bash\n# 通用安装方式\nnpx skills add \u003C作者>\u002F\u003C仓库>@\u003Cskill名>\n\n# 例子\nnpx skills add vercel-labs\u002Fagent-skills@web-design-guidelines\n\n# 查看已安装\nnpx skills list\n```\n\n---\n\n## 目录\n\n- [必装 Top 10](#必装-top-10)\n- [设计 \u002F UI](#设计--ui)\n- [前端开发](#前端开发)\n- [动效 \u002F 视频](#动效--视频)\n- [营销 \u002F SEO](#营销--seo)\n- [代码质量](#代码质量)\n- [工作流 \u002F 方法论](#工作流--方法论)\n- [无障碍](#无障碍)\n- [合集 \u002F 导航站](#合集--导航站)\n- [怎么选 Skill](#怎么选-skill)\n\n---\n\n## 必装 Top 10\n\n不管你做什么方向，这 10 个装了不亏。\n\n| # | Skill | 作者 | 一句话 | 安装 |\n|---|-------|------|--------|------|\n| 1 | [**Frontend Design**](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code\u002Ftree\u002Fmain\u002Fplugins\u002Ffrontend-design) | Anthropic | 官方出品，让 UI 不像 AI 生成的 | `npx skills add anthropics\u002Fskills@frontend-design` |\n| 2 | [**Context7**](https:\u002F\u002Fskills.sh\u002Fcontext7\u002Fskills\u002Fcontext7) | intellectronica | 上下文窗口内实时拉 API 文档，不用再贴链接 | `npx skills add intellectronica\u002Fagent-skills@context7` |\n| 3 | [**Web Design Guidelines**](https:\u002F\u002Fskills.sh\u002Fvercel-labs\u002Fagent-skills\u002Fweb-design-guidelines) | Vercel Labs | 对照 100+ 最佳实践审查你的 UI | `npx skills add vercel-labs\u002Fagent-skills@web-design-guidelines` |\n| 4 | [**UI-UX-Pro-Max**](https:\u002F\u002Fskills.sh\u002Fnextlevelbuilder\u002Fui-ux-pro-max-skill\u002Fui-ux-pro-max) | Next Level Builder | 视觉层级 x 色彩心理学 x 交互模式 | `npx skills add nextlevelbuilder\u002Fui-ux-pro-max-skill@ui-ux-pro-max` |\n| 5 | [**Emil Kowalski's Skill**](https:\u002F\u002Fskills.sh\u002Femilkowalski\u002Fskill) | Emil Kowalski | 设计 + 动效 + 代码 + 性能，全栈审美 | `npx skills add emilkowalski\u002Fskill` |\n| 6 | [**Superpowers**](https:\u002F\u002Fgithub.com\u002Fobra\u002Fsuperpowers) | obra | TDD \u002F 并行 Agent \u002F 代码审查 \u002F Git 工作流 | `npx skills add obra\u002Fsuperpowers` |\n| 7 | [**shadcn\u002Fui**](https:\u002F\u002Fgithub.com\u002Fshadcn\u002Fui) | shadcn | 官方组件管理 + 表单 + 预览 | `npx skills add shadcn\u002Fui@shadcn` |\n| 8 | [**Remotion**](https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fskills) | Remotion | React 驱动的视频生成，30+ 规则 | `npx skills add remotion-dev\u002Fskills@remotion-best-practices` |\n| 9 | [**Tailwind CSS**](https:\u002F\u002Fskills.sh\u002Fhairyf\u002Fskills\u002Ftailwindcss) | hairyf | Tailwind v4 完整支持 | `npx skills add hairyf\u002Fskills@tailwindcss` |\n| 10 | [**Find Skills**](https:\u002F\u002Fskills.sh\u002Fvercel-labs\u002Fskills\u002Ffind-skills) | Vercel Labs | 让 Agent 自己发现和安装新 Skill | `npx skills add vercel-labs\u002Fskills@find-skills` |\n\n---\n\n## 设计 \u002F UI\n\n让 AI 出的设计不再有「模板感」。\n\n| Skill | 作者 | 推荐 | 一句话 | 安装 |\n|-------|------|------|--------|------|\n| [Frontend Design](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code\u002Ftree\u002Fmain\u002Fplugins\u002Ffrontend-design) | Anthropic | 必装 | 官方设计系统哲学，大胆配色 + 有辨识度的字体 + 有意图的动效 | `npx skills add anthropics\u002Fskills@frontend-design` |\n| [UI-UX-Pro-Max](https:\u002F\u002Fskills.sh\u002Fnextlevelbuilder\u002Fui-ux-pro-max-skill\u002Fui-ux-pro-max) | Next Level Builder | 必装 | 视觉层级 x 色彩心理学 x 交互模式，出图质量显著提升 | `npx skills add nextlevelbuilder\u002Fui-ux-pro-max-skill@ui-ux-pro-max` |\n| [Emil Kowalski's Skill](https:\u002F\u002Fskills.sh\u002Femilkowalski\u002Fskill) | Emil Kowalski | 必装 | 来自 Sonner \u002F Vaul 作者的设计 + 动效 + 代码实践 | `npx skills add emilkowalski\u002Fskill` |\n| [Web Design Guidelines](https:\u002F\u002Fskills.sh\u002Fvercel-labs\u002Fagent-skills\u002Fweb-design-guidelines) | Vercel Labs | 必装 | 对照 100+ 最佳实践审查 UI，找出细节问题 | `npx skills add vercel-labs\u002Fagent-skills@web-design-guidelines` |\n| [Make Interfaces Feel Better](https:\u002F\u002Fskills.sh\u002Fjakubkrehel\u002Fmake-interfaces-feel-better) | Jakub Krehel | 强推 | 对齐 \u002F 阴影 \u002F 间距 \u002F 圆角的细节打磨 | `npx skills add jakubkrehel\u002Fmake-interfaces-feel-better` |\n| [Figma Designer](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code) | Anthropic | 好用 | Claude 进入 Figma 高级设计师思维模式 | `npx claude skills add figma` |\n| [Theme Factory](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code) | Anthropic | 好用 | 10 套配色 + 字体主题，套用到任意 artifact | `npx claude skills add theme-factory` |\n| [Brand Guidelines](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code) | Anthropic | 好用 | Anthropic 官方品牌规范（色 \u002F 字 \u002F 视觉） | `npx claude skills add brand-guidelines` |\n| [Canvas Design](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code) | Anthropic | 好用 | 生成海报 \u002F 插画，输出 PNG \u002F PDF | `npx claude skills add canvas-design` |\n| [SuperKit UI\u002FUX](https:\u002F\u002Fskillsmp.com\u002Fskills\u002Fpixel-process-ug-superkit-agents-templates-skills-ui-ux-pro-max-skill-md) | Pixel Process UG | 好用 | 50+ 风格 \u002F 97 色板 \u002F 57 字体配对 | `npx skills add Pixel-Process-UG\u002Fsuperkit-agents` |\n| [TypeUI Design Skills](https:\u002F\u002Fwww.typeui.sh\u002Fdesign-skills) | TypeUI | 可选 | 手工 skill 文件，复现特定视觉风格 | `npx typeui.sh pull [name]` |\n| [Design.md Generator](https:\u002F\u002Fgithub.com\u002Fgoogle-labs-code\u002Fstitch-skills) | Google Labs | 好用 | 分析项目 → 自动生成 DESIGN.md 设计规范 | `npx skills add google-labs-code\u002Fstitch-skills@design-md` |\n| [Brainstorming](https:\u002F\u002Fgithub.com\u002Fobra\u002Fsuperpowers) | obra | 强推 | 验证设计方案后才允许写代码，防止 AI 乱写 | `npx skills add obra\u002Fsuperpowers@brainstorming` |\n\n---\n\n## 前端开发\n\n组件库、框架支持、开发效率。\n\n| Skill | 作者 | 推荐 | 一句话 | 安装 |\n|-------|------|------|--------|------|\n| [shadcn\u002Fui](https:\u002F\u002Fgithub.com\u002Fshadcn\u002Fui) | shadcn | 必装 | 官方组件管理 + 表单 + 预览 | `npx skills add shadcn\u002Fui@shadcn` |\n| [Context7](https:\u002F\u002Fskills.sh\u002Fcontext7\u002Fskills\u002Fcontext7) | intellectronica | 必装 | 上下文窗口内实时拉准确 API 文档 | `npx skills add intellectronica\u002Fagent-skills@context7` |\n| [Tailwind CSS](https:\u002F\u002Fskills.sh\u002Fhairyf\u002Fskills\u002Ftailwindcss) | hairyf | 必装 | Tailwind CSS v4 完整支持 | `npx skills add hairyf\u002Fskills@tailwindcss` |\n| [Tailwind Design System](https:\u002F\u002Fskills.sh\u002Fwshobson\u002Fagents\u002Ftailwind-design-system) | WS Hobson | 强推 | CSS-first 设计系统 + OKLCH 色彩 | `npx skills add wshobson\u002Fagents@tailwind-design-system` |\n| [Find Skills](https:\u002F\u002Fskills.sh\u002Fvercel-labs\u002Fskills\u002Ffind-skills) | Vercel Labs | 强推 | 让 Agent 自己发现和安装新 Skill | `npx skills add vercel-labs\u002Fskills@find-skills` |\n| [React Best Practices](https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills) | Vercel Labs | 强推 | 45 条 React\u002FNext.js 性能优化规则 | `npx skills add vercel-labs\u002Fagent-skills@react-best-practices` |\n| [Ralph Loop](https:\u002F\u002Fgithub.com\u002Ffrankbria\u002Fralph-claude-code) | Frank Bria | 好用 | 多小时自主编码 Agent，适合长任务 | `npx skills add frankbria\u002Fralph-claude-code` |\n\n---\n\n## 动效 \u002F 视频\n\n让页面动起来，或者直接生成视频。\n\n| Skill | 作者 | 推荐 | 一句话 | 安装 |\n|-------|------|------|--------|------|\n| [Remotion](https:\u002F\u002Fgithub.com\u002Fremotion-dev\u002Fskills) | Remotion | 必装 | React 驱动的视频生成，30+ 规则，3D \u002F 图表 \u002F 参数化内容 | `npx skills add remotion-dev\u002Fskills@remotion-best-practices` |\n| [Motion (Framer Motion)](https:\u002F\u002Fskills.sh\u002Fjezweb\u002Fclaude-skills\u002Fmotion) | Jezweb | 强推 | React 动画：手势 \u002F 滚动 \u002F 弹性 \u002F 布局 | `npx skills add jezweb\u002Fclaude-skills@motion` |\n| [Animation Systems](https:\u002F\u002Flobehub.com\u002Fskills\u002Fguilhermemarketing-gui-marketing-skills-animation-systems) | Guilherme | 强推 | Stripe \u002F Linear \u002F Apple 级别网页动效 | `npx skills add guilhermemarketing\u002Fgui-marketing-skills@animation-systems` |\n| [AI Video Generation](https:\u002F\u002Fgithub.com\u002Finferen-sh\u002Fskills) | inference.sh | 好用 | 40+ AI 视频模型（Veo \u002F Wan \u002F Grok） | `npx skills add inferen-sh\u002Fskills@ai-video-generation` |\n| [Nano Banana 2](https:\u002F\u002Fgithub.com\u002Finferen-sh\u002Fskills) | inference.sh | 好用 | Gemini 文字转图 \u002F 图片编辑，4K 输出 | `npx skills add inferen-sh\u002Fskills@nano-banana-2` |\n\n---\n\n## 营销 \u002F SEO\n\n从 SEO 审查到文案撰写到定价策略。\n\n| Skill | 作者 | 推荐 | 一句话 | 安装 |\n|-------|------|------|--------|------|\n| [SEO Audit](https:\u002F\u002Fgithub.com\u002Fcoreyhaines31\u002Fmarketingskills) | Corey Haines | 强推 | 五优先级 SEO 全面审查框架 | `npx skills add coreyhaines31\u002Fmarketingskills@seo-audit` |\n| [Copywriting](https:\u002F\u002Fgithub.com\u002Fcoreyhaines31\u002Fmarketingskills) | Corey Haines | 强推 | 主页 \u002F 落地页 \u002F 定价页转化文案 | `npx skills add coreyhaines31\u002Fmarketingskills@copywriting` |\n| [Product Marketing Context](https:\u002F\u002Fgithub.com\u002Fcoreyhaines31\u002Fmarketingskills) | Corey Haines | 好用 | 产品定位 \u002F 人群 \u002F 竞品 \u002F 品牌声音 | `npx skills add coreyhaines31\u002Fmarketingskills@product-marketing-context` |\n| [Pricing Strategy](https:\u002F\u002Fgithub.com\u002Fcoreyhaines31\u002Fmarketingskills) | Corey Haines | 好用 | SaaS 定价设计与竞品对比框架 | `npx skills add coreyhaines31\u002Fmarketingskills@pricing-strategy` |\n| [Twitter Automation](https:\u002F\u002Fgithub.com\u002Finferen-sh\u002Fskills) | inference.sh | 可选 | 推文 \u002F 点赞 \u002F 转推 \u002F DM，9 个命令 | `npx skills add inferen-sh\u002Fskills@twitter-automation` |\n\n---\n\n## 代码质量\n\n代码审查、测试、调试。\n\n| Skill | 作者 | 推荐 | 一句话 | 安装 |\n|-------|------|------|--------|------|\n| [Superpowers](https:\u002F\u002Fgithub.com\u002Fobra\u002Fsuperpowers) | obra | 必装 | TDD \u002F 并行 Agent \u002F 代码审查 \u002F Git 工作流，一套全有 | `npx skills add obra\u002Fsuperpowers` |\n| [Code Review](https:\u002F\u002Fskills.sh\u002Fsupercent-io\u002Fskills-template\u002Fcode-review) | Supercent | 强推 | 自动代码审查（注释 \u002F 测试 \u002F 类型 \u002F 质量） | `npx skills add supercent-io\u002Fskills-template@code-review` |\n\n---\n\n## 工作流 \u002F 方法论\n\n改变 Claude Code 的工作方式。\n\n| Skill | 作者 | 推荐 | 一句话 | 安装 |\n|-------|------|------|--------|------|\n| [Superpowers - TDD](https:\u002F\u002Fgithub.com\u002Fobra\u002Fsuperpowers) | obra | 必装 | 强制测试驱动开发：写测试 → 实现 → 重构 | `npx skills add obra\u002Fsuperpowers@test-driven-development` |\n| [Superpowers - Parallel Agents](https:\u002F\u002Fgithub.com\u002Fobra\u002Fsuperpowers) | obra | 强推 | 多个子 Agent 并行执行独立任务 | `npx skills add obra\u002Fsuperpowers@dispatching-parallel-agents` |\n| [Superpowers - Plan Mode](https:\u002F\u002Fgithub.com\u002Fobra\u002Fsuperpowers) | obra | 强推 | 先规划再执行，防止 AI 乱改代码 | `npx skills add obra\u002Fsuperpowers@writing-plans` |\n| [Superpowers - Git Worktrees](https:\u002F\u002Fgithub.com\u002Fobra\u002Fsuperpowers) | obra | 好用 | 隔离工作区，不影响主分支 | `npx skills add obra\u002Fsuperpowers@using-git-worktrees` |\n\n---\n\n## 无障碍\n\n| Skill | 作者 | 推荐 | 一句话 | 安装 |\n|-------|------|------|--------|------|\n| [Web Accessibility](https:\u002F\u002Fskills.sh\u002Fsupercent-io\u002Fskills-template\u002Fweb-accessibility) | Supercent | 好用 | 对比度 \u002F 键盘导航 \u002F 语义结构检查 | `npx skills add supercent-io\u002Fskills-template@web-accessibility` |\n\n---\n\n## 合集 \u002F 导航站\n\n不知道该装什么？先看这些合集。\n\n| 资源 | 说明 | 链接 |\n|------|------|------|\n| **Awesome Agent Skills** | VoltAgent 维护，549+ skills，分类最全 | [GitHub](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-agent-skills) |\n| **Awesome Claude Code Toolkit** | Rohit Ghumare 维护，135 agents + 35 skills | [GitHub](https:\u002F\u002Fgithub.com\u002Frohitg00\u002Fawesome-claude-code-toolkit) |\n| **Awesome Claude Code** | hesreallyhim 维护，skills + hooks + 命令 | [GitHub](https:\u002F\u002Fgithub.com\u002Fhesreallyhim\u002Fawesome-claude-code) |\n| **skills.sh** | Vercel 出的 Skill 包管理器和浏览站 | [skills.sh](https:\u002F\u002Fskills.sh) |\n| **LobeHub Skills** | 232+ skills 的可视化浏览 | [lobehub.com\u002Fskills](https:\u002F\u002Flobehub.com\u002Fskills) |\n| **hotkeys.design** | 设计师向的 Skill 导航站 | [hotkeys.design](https:\u002F\u002Fhotkeys.design) |\n| **awesomeskills.dev** | 跨平台 Agent Skill 目录 | [awesomeskills.dev](https:\u002F\u002Fawesomeskills.dev) |\n\n---\n\n## 怎么选 Skill\n\n装太多 Skill 反而会让 Claude Code 变慢或行为混乱。建议：\n\n**第一步：装 3 个基础 Skill**\n\n```bash\n# 设计质量\nnpx skills add anthropics\u002Fskills@frontend-design\n\n# 代码质量\nnpx skills add obra\u002Fsuperpowers\n\n# 文档查询\nnpx skills add intellectronica\u002Fagent-skills@context7\n```\n\n**第二步：按你的方向加 1-2 个**\n\n| 你的方向 | 加这个 |\n|---------|--------|\n| 做 UI \u002F 前端 | UI-UX-Pro-Max + Emil Kowalski |\n| 做视频 | Remotion |\n| 做营销页 | SEO Audit + Copywriting |\n| 做组件库 | shadcn\u002Fui + Tailwind CSS |\n\n**第三步：用 Find Skills 让 Agent 自己找**\n\n```bash\nnpx skills add vercel-labs\u002Fskills@find-skills\n```\n\n装完之后 Claude 遇到新需求会自动搜索和安装合适的 Skill。\n\n---\n\n## 关于作者\n\n**Ian (伊恩)** — 产品设计师 \u002F 一人公司实践者 \u002F AI Builder\n\n用 AI 团队打造一人公司。\n\n- X\u002FTwitter: [@ianneo_ai](https:\u002F\u002Fx.com\u002Fianneo_ai)\n- 网站: [ianneo.xyz](https:\u002F\u002Fianneo.xyz)\n- 微信: 17855813746\n- 邮箱: hello.neoc@gmail.com\n\n> **🚀 正在开启：内容创作丨AI 工作流围观营，欢迎来玩！** 加微信了解详情。\n\n---\n\n## 其他资源\n\n- [obsidian-ai-second-brain](https:\u002F\u002Fgithub.com\u002Fhelloianneo\u002Fobsidian-ai-second-brain) — Obsidian + Claude AI 个人知识库搭建指南\n- [claude-code-handbook](https:\u002F\u002Fgithub.com\u002Fhelloianneo\u002Fclaude-code-handbook) — Claude Code 高阶使用手册\n\n---\n\n## 贡献\n\n发现好用的 Skill 但这里没收？欢迎提 [Issue](https:\u002F\u002Fgithub.com\u002Fhelloianneo\u002Fawesome-claude-code-skills\u002Fissues) 或 PR。\n\n收录标准：\n- 有实际使用价值（不是 demo）\n- 能正常安装\n- 有人在用（GitHub stars > 10 或明确的用户反馈）\n\n觉得有用？Star 一下方便后续更新时收到通知。\n\n---\n\n## License\n\n[MIT](LICENSE)\n","awesome-claude-code-skills 是一个精选 Claude Code 技能、代理和插件的合集，旨在帮助开发者快速找到并安装实用工具。该项目收录了超过50个经过筛选的技能，并按照使用场景分类，每个技能都标注了推荐等级（必装、强推、好用、可选），并提供了简单的安装命令。适合需要提升开发效率、改善设计质量或优化代码性能的前端开发者及团队使用。无论是寻找设计灵感、改进用户界面还是增强代码质量，都能在这里找到合适的解决方案。",2,"2026-06-11 03:30:54","CREATED_QUERY"]