全栈必备的 14 个 AI 技能：前端、后端、数据库与 CI/CD

next-best-practices

Vercel 官方出品 · vercel-labs/next-skills

Claude Code 手写 Next 很容易踩坑：Server Component 和 Client Component 混用、到处乱加 'use client'、路由缓存策略混淆。

这个技能提炼 Next 文档里高频易错规范，明确 App Router 数据获取方式、Server Actions 加载态处理、Image 组件 sizes 配置。团队迁移 App Router 时，能砍掉大量 Code Review 时间。

npx skills add vercel-labs/next-skills --skill next-best-practices

vercel-react-best-practices

57 条规则，卡死组件代码质量

没装技能前，AI 写的组件十有八九陷入 Prop 地狱，isLarge / isDisabled / hasIcon 一堆布尔属性堆在一起。启用后会采用复合组件模式，代码拆分干净。规则覆盖 useEffect 合理使用、Server Component 适用场景，每条附带示例。

npx skills add vercel-labs/agent-skills@react-best-practices

frontend-design

Anthropic 官方审美校正｜累计安装 27 万+

核心目标：干掉 AI 千篇一律的灰蓝渐变、Inter 字体、流水线落地页。

你让它做着陆页，它会先询问风格：brutalist、editorial 还是 maximalist，而不是直接丢一个烂大街模板。

npx skills add https://github.com/anthropics/skills --skill frontend-design

shadcn/ui

shadcn/ui 仓库原生官方技能，仓库 115k Star，比第三方封装靠谱

没有这个技能，AI 会手写 dialog、form、table，不会调用官方 CLI。装上之后，新增 UI 组件优先执行 npx shadcn add，复用项目已有的组件变体与尺寸，风格不会跑偏。

npx skills add shadcn/ui

dr-jskill

JHipster 创始人 Julien Dubois 开发

一键生成 Spring Boot 4.x 脚手架，预置 Java 25、PostgreSQL、Docker，前端可选 Vue.js / React / Angular。Star 数不算高，但作者背书很硬。适合新项目快速搭骨架，兼容 Claude Code、GitHub Copilot CLI、Windsurf。

npx skills add jdubois/dr-jskill

spring-boot-skills

核心思路：AI 写 Python 很强，但写 Spring Boot 极易产生幻觉

仓库自带 SKILL.md + conventions.md + examples + templates。Agent 不光知道编码规则，还能直接套用标准模板。覆盖 REST API、测试策略、数据库迁移、MCP Java SDK，各个技能独立，按需引入。

安装：git clone 仓库，复制需要的 skill 目录到 .claude/skills/

postgres-best-practices

antigravity-awesome-skills（38.9k⭐）｜Supabase 团队出品

PostgreSQL 全套规范：字段类型、索引策略、约束、性能调优、RLS 权限。上层技术栈无关，Spring、Node、原生 psql 都能用。

npx antigravity-awesome-skills --claude

sql-optimization-patterns

同属 antigravity 技能集合

AI 写 JPA / Prisma 查询时，经常忽略执行计划、乱建索引，引发 N+1 问题。这个技能强制 AI 先 分析 explain、设计覆盖索引。修改表结构时主动给出索引建议，分担一部分 DBA 工作。

npx antigravity-awesome-skills --claude

api-design-principles

统一 REST / GraphQL 接口规范，包含状态码、分页格式、错误返回结构

单人全栈开发很难感知问题，多人协作联调时，接口约定不一致是最大坑。这个技能统一 AI 产出接口风格，减少对接矛盾。

npx antigravity-awesome-skills --claude

migration-architect

管控数据库迁移完整生命周期：规划顺序、校验向后兼容、生成回滚脚本

曾经一次生产库变更，AI 写的迁移脚本缺少 CONCURRENTLY，上线锁表三分钟。装上之后，自动评估迁移能否在线执行，给出分批上线方案。

安装：git clone，执行 ./scripts/install.sh --tool claude --target .

env-secrets-manager

.env 泄露检测 + 密钥生命周期管理

自动扫描仓库，定位硬编码变量、Git 历史泄露密钥、提醒待轮换 API Key。上个月我不小心提交 Stripe 测试密钥，在 commit 阶段直接拦截，给出文件+行号，省去后台手动吊销密钥。

安装：git clone，执行 ./scripts/install.sh --tool claude --target .

gh-fix-ci

OpenAI 官方技能

GitHub Actions CI 红了，不用手动翻日志。Agent 读取失败日志，定位代码问题，直接生成修复 PR。我项目 CI 连续三次报同一个 ESLint 问题，它不只修复单次报错，还修正 .eslintrc 里异常的 extends 配置。

npx skills add https://github.com/openai/skills --skill gh-fix-ci

ci-cd-pipeline-builder

根据技术栈自动生成 GitHub Actions / GitLab CI 配置

过去新项目复制旧项目 CI 配置修改，版本杂乱。现在直接输出标准化配置，包含 Docker 镜像构建、多环境部署、缓存策略。兼容 Cursor、Codex、Claude Code。

安装：git clone，执行 ./scripts/install.sh --tool claude --target .

KubeShark

K8s 配置预审查，故障模式分析

检查 Service selector、HPA、资源限制，区分 EKS、GKE 不同云厂商 LB 配置差异。⚠️ 安全提醒：我只用它生成配置，人工 review 后手动执行，不允许 Agent 直接跑 kubectl apply。

npx skills add LukasNiessen/kubernetes-skill

最后一句话：技能不必一次性全装，匹配你的项目技术栈挑选即可。贪多反而干扰 Agent 判断，挑几个核心，就能省下大量重复编码和排错时间。