# 工具集

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

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

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

> - 全栈 / 独立开发：跨前后端的通用研发：编码 Agent 工作流、代码评审、调试与 Git 协作。
> - 前端开发：网页、H5 与小程序的界面开发、调试与性能优化。
> - 算法 / 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。
- [Migrate Radix to Base UI](https://hebbmind.com/zh-TW/skill/migrate-radix-to-base.md): [Skill] 把 React 项目和 shadcn 组件从 Radix UI 迁移到 Base UI：默认逐个组件渐进迁移，明确要求时才整个项目一起迁；优先用 shadcn CLI 取官方 base 版本并合并用户的定制，调用处按映射表手工改写，每步做类型检查，并在 .migration/ 目录为每个组件写迁移报告。来自 shadcn/ui 官方仓库。
- [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。
- [Remotion CLI](https://hebbmind.com/zh-TW/cli/remotion-dev-cli.md): [CLI] 用 React 编写视频，并通过 npx remotion render 在命令行渲染输出，适合 agent 批量生成数据驱动的视频。个人、非营利组织与 3 人以内的公司可免费使用，规模更大的营利公司需购买授权。
- [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 官方维护。
- [GSAP AI Skills](https://hebbmind.com/zh-TW/skill/gsap-skills.md): [Skill] GSAP 官方动画技能合集：教 agent 正确使用核心 API、时间轴、ScrollTrigger 与各类插件，涵盖 React/Vue/Svelte 集成和动画性能优化。GreenSock 官方维护，所有插件均免费。
- [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）。
- [Remotion](https://hebbmind.com/zh-TW/plugin/remotion.md): [Plugin] Remotion 官方出品、收录于 OpenAI 官方插件市场的 Codex 插件：用 React 以编程方式制作视频，内含新建项目、动画与特效、字幕、地图、预览、导出渲染等 12 个技能。个人、非营利组织与 3 人以内的公司免费，更大的营利公司需购买公司许可。
- [Cobe.js](https://hebbmind.com/zh-TW/skill/cobejs.md): [Skill] 用轻量 WebGL 库 cobe 在首页或关于页加入可旋转的地球，讲解画布按设备像素比设置尺寸、位置标记、旋转动画、窗口缩放后重建与销毁，可在 React/Next.js 中集成。
- [GSAP](https://hebbmind.com/zh-TW/skill/gsap.md): [Skill] 用 GSAP 编写或调试网页动画：补间、时间线与位置参数、缓动、错峰，以及 ScrollTrigger 的固定与滚动联动；说明优先动 transform、在 React 中用 gsap.context() 清理、图片加载后刷新等常见问题。
- [Remotion Best Practices](https://hebbmind.com/zh-TW/skill/remotion-best-practices.md): [Skill] Remotion 官方技能：教 agent 用 React 代码制作程序化视频，涵盖新建项目、动画与排版、字幕、地图动画、多媒体处理与渲染，作为路由按需加载各子主题。
- [Remotion Captions](https://hebbmind.com/zh-TW/skill/remotion-captions.md): [Skill] 指导 agent 在 Remotion 视频中处理字幕：统一用 @remotion/captions 的 Caption 类型存成 JSON，可转写音视频生成字幕、导入 .srt 文件，并在合成中显示字幕、制作字幕动画。Remotion 官方技能。
- [Remotion Create](https://hebbmind.com/zh-TW/skill/remotion-create.md): [Skill] 指导 agent 新建 Remotion 视频项目与合成：先检查当前目录再用 create-video 脚手架初始化，动手写画面前先打开 Remotion Studio 预览，并按需参考视频布局、多场景与剪辑时间线等指南。Remotion 官方技能，需要 Node.js 与 Git。
- [Narrow React Prop Types](https://hebbmind.com/zh-TW/skill/narrow-react-prop-types.md): [Skill] 收窄 React 组件的 props 类型，使其只描述线上代码实际用到的状态：找出所有非测试、非 Storybook 的调用处，据此把每个 prop 定为必填、可选或删除，尽量从现有 API 推导类型，并让 stories、测试与 mock 适配新类型，而不是反过来放宽类型。
- [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（可免费注册，翻译按用量计费）。
- [Design Lab](https://hebbmind.com/zh-TW/skill/design-lab.md): [Skill] 先通过提问了解设计范围、痛点、参考产品、品牌调性与约束，再从项目现有的 Tailwind 配置、CSS 变量或组件库主题中提取视觉语言，在临时路由里生成 5 个不同的界面方案并附带交互式反馈浮层，按反馈迭代后输出实现计划，结束或取消时清理所有临时文件。面向 Next.js、Vite 等 React 项目。
- [Product Film](https://hebbmind.com/zh-TW/skill/product-film.md): [Skill] 用 Remotion 在产品代码库里制作产品宣传片（落地页循环视频、发布片、演示片等），复用产品自己的设计系统、组件与文案语气：先访谈用户确定内容，再写分镜、按音乐节拍卡点、逐轮出静帧评审，最后渲染并校验成片。
- [WebGL Components](https://hebbmind.com/zh-TW/skill/webgl-components.md): [Skill] 在产品界面里嵌入小型常驻 WebGL 视觉元素（头像、光球、玻璃与彩虹质感、动态纹理）时的工程要点：全页共享一个 WebGL 上下文、统一帧循环并限帧、控制片元着色器开销、处理上下文丢失、始终提供非 WebGL 的降级样式，以及 React 服务端渲染下的写法。
- [Micro Interaction](https://hebbmind.com/zh-TW/skill/micro-interaction.md): [Skill] 给界面加功能性的微动效：悬停与按下反馈、开关、点赞按钮、提示条、抽屉、弹窗、列表增删与排序、共享元素过渡，规定 100–250ms 的时长、进入慢退出快的节奏与缓动曲线，只动 transform 与 opacity，并尊重减少动态效果设置。基于 Framer Motion（motion/react）与现代 CSS。
- [Lottie Animation](https://hebbmind.com/zh-TW/skill/lottie-animation.md): [Skill] 把 After Effects 导出的 Lottie 动画接入网页、iOS、Android 与 React Native：优先用 dotLottie 运行时，控制播放、片段与速度，做滚动或悬停驱动的交互，运行时换色，并附 AE 导出检查清单。
- [Page Transition Animation](https://hebbmind.com/zh-TW/skill/page-transition-animation.md): [Skill] 在 Next.js App Router 里实现页面切换动画，并解决 Framer Motion 的 AnimatePresence 退出动画在路由跳转时不触发的问题：用 template.tsx、按路径设置 key 的 AnimatePresence 加 FrozenRouter，或改用 View Transitions API（原生或 next-view-transitions）。
- [Mastering AnimatePresence](https://hebbmind.com/zh-TW/skill/mastering-animate-presence.md): [Skill] 按规则审查 Motion（Framer Motion）代码里的 AnimatePresence 用法：条件渲染的退场是否有包裹、exit 与 key 是否齐全、useIsPresent 与 usePresence 钩子的用法、mode 的选择和嵌套退场的协调，按「文件:行号」列出问题。适用于 React 项目。
- [Morphing Icons](https://hebbmind.com/zh-TW/skill/morphing-icons.md): [Skill] 指导 agent 构建能在任意两个图标之间变形过渡的 SVG 图标组件：每个图标固定由三条线段组成，用不到的线段收缩到中心点，同组的旋转变体用弹簧动画转动，并遵守统一 viewBox、圆角线头、减弱动效偏好与 aria-hidden 等规则。示例基于 React 与 Motion。
- [To Spring or Not to Spring](https://hebbmind.com/zh-TW/skill/to-spring-or-not-to-spring.md): [Skill] 审查动画代码的时间函数选择：手势拖拽和可被打断的动画用弹簧，系统状态变化用缓动曲线，进度类用线性，打字等高频交互不加动画；同时检查弹簧参数与时长是否合理，按「文件:行号」列出问题。示例基于 Motion。
- [Interactive Hit Areas](https://hebbmind.com/zh-TW/skill/interactive-hit-areas.md): [Skill] 修复相邻可交互元素之间的悬停与点击死区：图表柱、列表行、导航项、标签页等用 gap 或 margin 留白时，指针落在间隙里会失效或闪烁；改为让元素紧贴铺满各自的槽位，把视觉间距移到元素内部，附 React/Tailwind 示例。
- [Paper to Code Components](https://hebbmind.com/zh-TW/skill/paper-to-code-components.md): [Skill] 把 Paper 设计稿（经 Paper MCP、Viewfinder 或导出的 JSX）实现为 React/Next.js 代码前先梳理层级、识别可复用组件；每个图标单独成组件，任意值收进 globals.css 令牌，优先复用 shadcn 组件，移植真实字体，图表按数据建模。
- [Product Launch Video](https://hebbmind.com/zh-TW/skill/product-launch-video.md): [Skill] 用 Remotion（React）制作产品发布、宣传与功能介绍视频：先问清产品、受众、时长、配音与发布平台等 9 个问题，提出 2–3 个视觉方向供选择，写出 storyboard.json 分镜后再编码，按需生成配音与补充素材。
- [Animate UI](https://hebbmind.com/zh-TW/skill/animate-ui.md): [Skill] Prototyper UI 组件库的动效规范：浮层、对话框、侧边面板的进出场类名，按压反馈的缩放比例，状态过渡，缓动令牌与选用决策，用于编写、审查或调试组件动画，并统一用 motion-reduce 处理减少动态效果。
- [Build Primitive](https://hebbmind.com/zh-TW/skill/build-primitive.md): [Skill] 在 Base UI 没有现成原语时，按 Prototyper UI 的规范从零构建基础组件：先定 ARIA 契约，再做键盘导航、焦点管理、受控与非受控状态、表单集成与动画，复杂交互优先包装 react-table、cmdk 等无样式库。
- [Create Component](https://hebbmind.com/zh-TW/skill/create-component.md): [Skill] 为 Prototyper UI 组件库新建组件的完整流程：提供包装 Base UI 原语的几类模板（CVA 变体、复合组件与 context），以及登记 registry 条目、编写示例与 MDX 文档页的步骤，主要用于该组件库自身的开发。
- [Prototyper UI](https://hebbmind.com/zh-TW/skill/prototyper-ui.md): [Skill] Prototyper UI 组件库的使用指南：基于 @base-ui/react 与 Tailwind CSS v4，以复制源码的方式分发，采用 OKLCH 配色与 CVA 变体。说明安装依赖、令牌文件、组件选型与常用写法，并提醒它不是 Radix，用 render 属性代替 asChild。