# 工具集

> 全部已收录的资源，编辑推荐的排在前面。下面几种条件可以同时用。

- 可以搜索：在地址后加 `?q=<关键词>`，多个关键词用空格分隔，要同时命中。搜的是名称、仓库、标签、职业、简介与 README。
- 可以按类型过滤：在地址后加 `?type=<cli|skill|plugin|mcp>`。
- 可以按职业过滤：在地址后加 `?profession=<职业编号>`，多个用逗号分隔，资源适合其中任意一个即可。编号见 https://hebbmind.com/api/v1/professions
- 可以按标签过滤：在地址后加 `?tag=<标签>`，多个用逗号分隔，资源要同时带有这些标签。标签见 https://hebbmind.com/api/v1/tags

适合全栈 / 独立开发或测试或算法 / AI的资源，带标签 `react`，共 13 项。

> - 全栈 / 独立开发：跨前后端的通用研发：编码 Agent 工作流、代码评审、调试与 Git 协作。
> - 测试：功能测试、自动化测试与质量保障。
> - 算法 / AI：模型训练、评测与大模型应用开发。

- [Web Artifacts Builder](https://hebbmind.com/zh-TW/skill/web-artifacts-builder.md): [Skill] 用 React、Tailwind CSS 与 shadcn/ui 搭建需要状态管理或路由的多组件网页，自带初始化与打包脚本，最终打包成单个 HTML 文件作为 claude.ai Artifact。Anthropic 官方技能。
- [Next.js Skills](https://hebbmind.com/zh-TW/plugin/vercel-skills.md): [Plugin] Next.js 官方插件，随 vercel/next.js 仓库发布：引导启用和优化 Cache Components 与 Partial Prefetching，并结合 Next.js MCP 与 agent-browser 在运行中的 dev server 上验证改动。
- [Next.js Cache Components Optimizer](https://hebbmind.com/zh-TW/skill/next-cache-components-optimizer.md): [Skill] 让 agent 在 Cache Components 下把 Next.js 路由优化成即时导航：先用 @next/playwright 的 instant() 写一个失败的端到端测试，再把 Suspense 边界下推到它保护的数据处、扩大静态外壳，直到测试通过并保留为回归防护；首次加载与客户端导航都覆盖。需要 Next.js 16.3+ 并开启 cacheComponents。
- [shadcn/ui](https://hebbmind.com/zh-TW/skill/shadcn.md): [Skill] shadcn/ui 官方技能：让 agent 借助 shadcn CLI 读取项目配置与组件文档，按规范添加、搜索、组合和修复组件，遵守样式、表单与无障碍规则，也能用预设初始化新项目。
- [shadcn MCP Server](https://hebbmind.com/zh-TW/mcp/shadcn-ui-mcp.md): [MCP] shadcn/ui 官方 CLI 内置的 MCP 服务器：让 agent 浏览、搜索任意已配置 registry（含私有组件库）里的组件、区块与模板，并用自然语言把组件安装进项目。项目中需要有 components.json。
- [shadcn CLI](https://hebbmind.com/zh-TW/cli/shadcn.md): [CLI] shadcn/ui 官方命令行：初始化项目并按需把组件源码加入代码库，可切换预设；v4 起提供 --dry-run、--diff 便于 agent 预览改动，并配套 agent skill。
- [Taro CLI](https://hebbmind.com/zh-TW/cli/taro-cli.md): [CLI] 京东开源多端框架 Taro 的命令行：用 React/Vue 写一套代码，taro init 创建项目，taro build --type 编译到微信、支付宝、抖音等小程序以及 H5、鸿蒙与 React Native。
- [React Composition Patterns](https://hebbmind.com/zh-TW/skill/composition-patterns.md): [Skill] Vercel 出品的 React 组合模式指南：用复合组件、状态提升和清晰的 Context 接口取代布尔 props 泛滥，含 React 19 API 变化，适合重构组件库与评审组件架构。
- [Vercel React Best Practices](https://hebbmind.com/zh-TW/skill/react-best-practices.md): [Skill] Vercel 工程团队整理的 React 与 Next.js 性能规范，70 条规则按影响排序，涵盖消除请求瀑布、包体积、服务端性能与重复渲染，供编写、评审与重构时对照。Vercel 官方维护。
- [Improve React](https://hebbmind.com/zh-TW/skill/improve-react.md): [Skill] 以资深 React 工程师的视角审查整个代码库：先只读运行 React Doctor 扫描作为证据，按缺陷、性能、无障碍、安全、可维护性五类筛选并排序问题，再为选定的问题写出可交给其他 agent 执行的独立实施计划，不改源码。
- [React Doctor](https://hebbmind.com/zh-TW/skill/react-doctor.md): [Skill] 运行 React Doctor（npx react-doctor）扫描 React 代码的安全、性能、正确性、无障碍与架构问题并给出 0–100 健康分；改完代码后只扫改动部分确认分数没有下降，输入 /doctor 时拉取官方排查流程逐项修复。
- [Claude Skills (Fullstack Dev Skills)](https://hebbmind.com/zh-TW/plugin/jeffallan-claude-skills.md): [Plugin] 把 60 多个全栈专家技能打包成一个插件：Python、TypeScript、Go、Rust、Java 等 12 种语言专家，以及 React、Django、Spring Boot 等框架专家，按请求自动激活；另含对接 Jira / Confluence 的项目工作流命令（需 Atlassian MCP）。
- [General Translation CLI](https://hebbmind.com/zh-TW/cli/generaltranslation-cli.md): [CLI] General Translation 的命令行 gt：用向导为 React、Next.js 等项目配置多语言，再把界面文案和 JSON、YAML、Markdown 等内容文件交给平台 AI 翻译并写回项目，可接入 CI。需要 Node.js 项目和 General Translation 账号与 API Key（可免费注册，翻译按用量计费）。
