Claude Code Kit：用框架专项 Skills 让 AI 真正懂你的技术栈

你用 Claude Code 写前端，框架专项规范跟上了吗？

Claude Code 很强，但当你让它写 Next.js 页面，它真的知道你项目里 App Router 的 conventions 吗？知道 Server Component 和 Client Component 的边界吗？知道 Prisma 的事务要怎么处理吗？

大多数时候，它靠猜。猜错了，你来擦屁股。

Claude Code Kit 就是来解决这个问题的——它不是一条通用提示词，而是一套框架专项 auto-activating skills。

这是什么？

GitHub：blencorp/claude-code-kit，目前 96 stars，12 个独立 Kit。

每个 Kit = 一个 Skill + 自动触发规则 + 资源文档。当 Claude Code 检测到你在用某个框架，它自动加载对应 Skill，把该框架的最佳实践直接注入上下文。

安装方式：

npx github:blencorp/claude-code-kit

30 秒内，它检测你的技术栈，问你要装哪些 Kit，然后把 hooks、agents、commands、skills 全部拷贝到 .claude/ 目录，配置好 skill-rules.json，之后你根本不用管。

覆盖了哪些框架？

前端三件套：

• Next.js — App Router、Server Components、Server Actions、layouts、loading states、error boundaries
• React — React 19 hooks、Suspense、lazy loading、TypeScript patterns
• shadcn/ui — Radix UI 原子组件 + Tailwind CSS，table/form/dialog/card 全覆盖

样式两件套：

• Tailwind CSS v4 — responsive design、dark mode、custom configuration
• Material-UI v7 — sx prop、theme integration、MUI-specific hooks

路由 & 数据：

• TanStack Router — file-based routing、loaders、type-safe navigation
• TanStack Query v5 — useSuspenseQuery、cache management、mutations

后端三件套：

• Express — routing、middleware、request/response handling
• Node.js — layered architecture、async/await error handling、testing strategies
• Prisma — Client 用法、queries、mutations、relations、transactions

另外两个通用 Skill：

• route-tester — 框架无关的 HTTP API 集成测试，支持 JWT cookie auth
• skill-developer — 教你如何写 SKILL.md，YAML frontmatter、trigger patterns、enforcement levels

为什么值得装？

第一，框架专项规范直接内嵌，不再靠 Claude 瞎猜 Next.js 的 Server Action 怎么写、Prisma 的 relation query 怎么拼。

第二，auto-activation——你不用记装了什么 Kit，它会在合适的场景自动触发，对话里 Claude Code 会自动问你”要不要启用 Next.js Kit？”。

第三，skill-developer 这个 Kit 本身就在教你如何写 Skill，等于同时给你一套写 SKILL.md 的方法论。

目前支持 Claude Code（直接装）、Codex CLI 和 Cursor（手动拷贝），对主流 AI 编程工具都有覆盖。

GitHub 链接

https://github.com/blencorp/claude-code-kit

GitHub: https://github.com/blencorp/claude-code-kit