开发者 Skill 推荐
代码质量、工程实践、部署发布——开发者常用的 Skill 清单。
开发者的日常：写代码、改代码、写文档、部署。有不少重复劳动，Skill 能帮你把其中一部分固定下来。
快速选择
- 代码质量与调试：用 diagnose 做结构化排错，用 tdd 卡住红-绿-重构节奏。
- 界面设计：用 impeccable 给 AI 生成的页面做设计审查。
- 工程实践：用 improve-codebase-architecture 做架构体检，用 grill-me 在开工前盘问需求，用 git-guardrails 拦截危险 Git 操作。
- 框架与基础设施：Next.js、React、Tailwind、Better Auth、Supabase/Postgres 都有对应 Skill，下面每条都给了安装和第一次使用示例。
- 部署发布：Vercel、Zeabur、Cloudflare 适合不同平台，按你实际部署目标选。
- 浏览器自动化与测试：agent-browser、browser-use、webapp-testing、audit-website 适合上线前验证。
- Skill 工具链：find-skills、skill-creator、mcp-builder 适合找 Skill、造 Skill 和扩展工具能力。
代码质量与调试
diagnose -- 结构化调试
来自 Matt Pocock 的 Skill 套件。跟大多数"帮你看看哪里出错了"不同，diagnose 会先收集信息，形成假设，设计验证方案，再动手改代码。不会上来就瞎猜、乱改一通。
适合那种"不知道哪里出了问题"的场景——报错信息模糊、现象和原因之间的关系不清楚的时候。
npx skills add mattpocock/skills --skill diagnose使用： /diagnose 我的应用启动报错，帮我定位根因
tdd -- 测试驱动开发
同样来自 mattpocock/skills。强制执行红-绿-重构循环：先写一个会失败的测试，再写最少的代码让它通过，最后重构。如果你一直想试试 TDD 但总觉得流程麻烦，让 Skill 来帮你卡住节奏。
npx skills add mattpocock/skills --skill tdd使用： /tdd 为这个用户登录函数写测试用例
界面设计
impeccable -- UI 审美提升
独立开发者最头疼的事之一：功能做出来了，但界面怎么看都不对劲。这个 Skill 专门解决这个问题——它会分析你的 UI，从布局、间距、配色、排版等维度给出改进建议。
npx skills add pbakaus/impeccable -y使用： /impeccable 帮我看一下这个页面的 UI 设计有什么问题
→ 详细使用指南和案例拆解见 设计师 Skill 推荐。
工程实践
improve-codebase-architecture -- 架构审视
不是日常用的 Skill，更像定期触发的"体检"。它会分析整个代码库的结构，找出耦合、分层混乱、职责不清的地方，然后给出重构建议。
适合项目跑到一定规模之后——功能越来越多，但改一个地方总要动三个文件的时候。
npx skills add mattpocock/skills --skill improve-codebase-architecture使用： /improve-codebase-architecture 检查当前项目的架构问题
grill-me -- 需求盘问
名字很直白：让 Claude 来"盘问"你。在动手写代码之前，这个 Skill 会以提问的方式逼你想清楚需求的边界、异常情况、优先级。
很多 Bug 不是代码写错了，是一开始就没想清楚。grill-me 就是帮你在这一步卡一下。
npx skills add mattpocock/skills --skill grill-me使用： /grill-me 我想做一个博客平台，盘问一下我的方案有没有漏洞
git-guardrails -- Git 安全护栏
防止手滑的。它会拦截危险的 git 操作：在 main 上直接 push、force push、删除未合并的分支等。团队多人协作时尤其有用，但哪怕你一个人开发，凌晨三点 commit 的时候也会感谢它。
npx skills add mattpocock/skills --skill git-guardrails-claude-code使用： 自动生效，执行危险 git 操作时自动拦截提示
框架与基础设施
这些 Skill 来自 skills.sh 排名前列的仓库，覆盖日常开发中最常用的框架和工具。
- next-best-practices：Next.js 路由、数据获取和渲染最佳实践。安装：
npx skills add vercel-labs/next-skills --skill next-best-practices。使用技巧：/next-best-practices 帮我检查这个页面的 Next.js 最佳实践。 - vercel-react-best-practices：React 性能优化，减少不必要渲染和包体积。安装：
npx skills add vercel-labs/agent-skills。使用技巧：/vercel-react-best-practices 帮我优化这个 React 组件的性能。 - vercel-composition-patterns：组件组合与 API 的可维护设计模式。安装：
npx skills add vercel-labs/agent-skills。使用技巧：/vercel-composition-patterns 帮我设计这个组件的组合方案。 - vercel-react-native-skills：React Native / Expo 开发，规避常见性能坑。安装：
npx skills add vercel-labs/agent-skills。使用技巧：/vercel-react-native-skills 帮我检查这个 RN 组件的性能。 - tailwind-design-system：用 Tailwind 建设计系统，统一组件规范。安装：
npx skills add wshobson/agents --skill tailwind-design-system。使用技巧：/tailwind-design-system 帮我设计卡片组件的样式规范。 - building-native-ui：原生移动端 UI 组件与交互结构搭建。安装：
npx skills add expo/skills --skill building-native-ui。使用技巧：/building-native-ui 帮我搭建这个移动端 UI。 - better-auth-best-practices：Better Auth 认证流程和安全策略配置。安装：
npx skills add better-auth/skills。使用技巧：/better-auth-best-practices 帮我配置用户认证。 - supabase-postgres-best-practices：Supabase/Postgres 索引与查询优化。安装：
npx skills add supabase/agent-skills --skill supabase-postgres-best-practices。使用技巧：/supabase-postgres-best-practices 帮我优化这个数据库查询。 - schema-markup：为搜索引擎做结构化数据标记。安装：
npx skills add coreyhaines31/marketingskills --skill schema-markup。使用技巧：/schema-markup 为这个页面生成结构化数据。
部署发布
Vercel
一键部署到 Vercel，自动检测 40+ 框架，返回预览 URL。
npx skills add vercel-labs/agent-skills使用： /vercel-deploy-claimable 部署当前项目
包含 vercel-deploy-claimable：自动检测 package.json 中的框架类型，直接部署并返回可认领的预览链接。
Zeabur
Zeabur 官方提供了 23+ 个 Skill，覆盖部署、域名、环境变量、数据库迁移、日志查看等全流程。
npx skills add zeabur/agent-skills使用： /zeabur-deploy 把这个项目部署到 Zeabur — 自动识别项目类型并完成部署
常用子 Skill：
- zeabur-deploy：一键部署本地项目或 GitHub 仓库。使用技巧：
/zeabur-deploy 部署当前项目。 - zeabur-domain-url：配置服务域名和 URL。使用技巧：
/zeabur-domain-url 给这个服务绑定域名。 - zeabur-variables：管理环境变量。使用技巧：
/zeabur-variables 更新生产环境变量。 - zeabur-deployment-logs：查看和筛选服务日志。使用技巧：
/zeabur-deployment-logs 看最近的运行错误。 - zeabur-migration：解决数据库迁移阻塞问题。使用技巧：
/zeabur-migration 排查数据库迁移卡住的问题。 - zeabur-template-deploy：通过模板快速部署。使用技巧：
/zeabur-template-deploy 用模板创建一个新服务。
Cloudflare
Cloudflare 官方 Skill 集，覆盖 Workers、Pages、D1、R2、KV、AI Agents、Durable Objects、Wrangler CLI、Web Perf 等全平台能力。不只是部署，是整个 Cloudflare 开发生态。
npx skills add https://github.com/cloudflare/skills使用： /cloudflare 我想创建一个 Workers 项目
或者通过 Claude Code 插件市场安装：
/plugin marketplace add cloudflare/skills
/plugin install cloudflare@cloudflare包含 8 个 Skill：cloudflare（综合平台）、agents-sdk、durable-objects、sandbox-sdk、wrangler、web-perf，以及 building-mcp-server-on-cloudflare 和 building-ai-agent-on-cloudflare。
→ 完整介绍见 知名公司官方 Skills。
浏览器自动化与测试
npx skills add vercel-labs/agent-browser
npx skills add browser-use/browser-use
npx skills add squirrelscan/skills
npx skills add anthropics/skills --skill webapp-testing- agent-browser：用 AI 自动打开网站、点击、填表、抓取内容。使用技巧：
/agent-browser 打开目标页面并完成一次关键流程。 - browser-use：通用网页自动化，执行浏览器级操作任务。使用技巧：
/browser-use 帮我自动填写这个表单并提交。 - webapp-testing：自动化测试网页功能和交互。使用技巧：
/webapp-testing 测试这个登录页面的功能和交互。 - audit-website：上线前做网站体检，覆盖性能、SEO、可用性。使用技巧：
/audit-website 检查我的网站上线前准备是否完善。
Skill 工具链
这些是创建和管理 Skill 本身的工具：
npx skills add vercel-labs/skills --skill find-skills
npx skills add anthropics/skills --skill skill-creator --skill mcp-builder- find-skills：检索并推荐适合你需求的 Skill。使用技巧：
/find-skills 帮我找适合做 UI 设计的 skill。 - skill-creator：创建和发布符合最佳实践的 Skill。使用技巧：
/skill-creator 把我每周写周报的流程做成 skill。 - mcp-builder：搭建连接外部 API/工具的 MCP 服务。使用技巧：
/mcp-builder 帮我搭建一个连接 GitHub API 的 MCP 服务。
附：Matt Pocock Skill 套件
Matt Pocock 是 TypeScript 领域很有影响力的教育者，前 Vercel Developer Advocate，Total TypeScript 作者，GitHub 62k+ star。他做了一整套面向开发者的 Claude Code Skill，涵盖调试、测试、架构、Git 安全等场景。
本篇介绍的 diagnose、tdd、improve-codebase-architecture、grill-me、git-guardrails 都来自这个套件。一键安装全部：
npx skills add mattpocock/skills完整的 Skill 逐个拆解见 Matt Pocock Skill 套件详解。
下一步
- 想深入 Matt Pocock 的 Skill → Matt Pocock Skill 套件详解
- 做 UI 设计？→ 设计师 Skill 推荐 含 impeccable 完整教程 + UI/UX Skill
- 想系统化工作流？→ 通用方法论 Skill obra/superpowers 全套
- 想自己造 Skill → 进阶：创建自定义 Skill