标签：react

用 React、Tailwind CSS 与 shadcn/ui 搭建需要状态管理或路由的多组件网页，自带初始化与打包脚本，最终打包成单个 HTML 文件作为 claude.ai Artifact。Anthropic 官方技能。

让 agent 在 Cache Components 下把 Next.js 路由优化成即时导航：先用 @next/playwright 的 instant() 写一个失败的端到端测试，再把 Suspense 边界下推到它保护的数据处、扩大静态外壳，直到测试通过并保留为回归防护；首次加载与客户端导航都覆盖。需要 Next.js 16.3+ 并开启 cacheComponents。

Next.js 官方插件，随 vercel/next.js 仓库发布：引导启用和优化 Cache Components 与 Partial Prefetching，并结合 Next.js MCP 与 agent-browser 在运行中的 dev server 上验证改动。

把 React 项目和 shadcn 组件从 Radix UI 迁移到 Base UI：默认逐个组件渐进迁移，明确要求时才整个项目一起迁；优先用 shadcn CLI 取官方 base 版本并合并用户的定制，调用处按映射表手工改写，每步做类型检查，并在 .migration/ 目录为每个组件写迁移报告。来自 shadcn/ui 官方仓库。

shadcn/ui 官方技能：让 agent 借助 shadcn CLI 读取项目配置与组件文档，按规范添加、搜索、组合和修复组件，遵守样式、表单与无障碍规则，也能用预设初始化新项目。

shadcn/ui 官方命令行：初始化项目并按需把组件源码加入代码库，可切换预设；v4 起提供 --dry-run、--diff 便于 agent 预览改动，并配套 agent skill。

shadcn/ui 官方 CLI 内置的 MCP 服务器：让 agent 浏览、搜索任意已配置 registry（含私有组件库）里的组件、区块与模板，并用自然语言把组件安装进项目。项目中需要有 components.json。

用 React 编写视频，并通过 npx remotion render 在命令行渲染输出，适合 agent 批量生成数据驱动的视频。个人、非营利组织与 3 人以内的公司可免费使用，规模更大的营利公司需购买授权。

京东开源多端框架 Taro 的命令行：用 React/Vue 写一套代码，taro init 创建项目，taro build --type 编译到微信、支付宝、抖音等小程序以及 H5、鸿蒙与 React Native。

Vercel 工程团队整理的 React 与 Next.js 性能规范，70 条规则按影响排序，涵盖消除请求瀑布、包体积、服务端性能与重复渲染，供编写、评审与重构时对照。Vercel 官方维护。

Vercel 出品的 React 组合模式指南：用复合组件、状态提升和清晰的 Context 接口取代布尔 props 泛滥，含 React 19 API 变化，适合重构组件库与评审组件架构。

GSAP 官方动画技能合集：教 agent 正确使用核心 API、时间轴、ScrollTrigger 与各类插件，涵盖 React/Vue/Svelte 集成和动画性能优化。GreenSock 官方维护，所有插件均免费。

运行 React Doctor（npx react-doctor）扫描 React 代码的安全、性能、正确性、无障碍与架构问题并给出 0–100 健康分；改完代码后只扫改动部分确认分数没有下降，输入 /doctor 时拉取官方排查流程逐项修复。

以资深 React 工程师的视角审查整个代码库：先只读运行 React Doctor 扫描作为证据，按缺陷、性能、无障碍、安全、可维护性五类筛选并排序问题，再为选定的问题写出可交给其他 agent 执行的独立实施计划，不改源码。

把文章或讲稿改写成口播稿，再做成点击推进的 16:9 网页演示，录屏即可得到讲解视频，可选合成配音，适合教师录课、B 站/YouTube 教程和产品讲解。需要 Node.js 环境；配音需 MiniMax 或 OpenAI 的 API Key，也可换成其他 TTS。

把 60 多个全栈专家技能打包成一个插件：Python、TypeScript、Go、Rust、Java 等 12 种语言专家，以及 React、Django、Spring Boot 等框架专家，按请求自动激活；另含对接 Jira / Confluence 的项目工作流命令（需 Atlassian MCP）。

Remotion 官方出品、收录于 OpenAI 官方插件市场的 Codex 插件：用 React 以编程方式制作视频，内含新建项目、动画与特效、字幕、地图、预览、导出渲染等 12 个技能。个人、非营利组织与 3 人以内的公司免费，更大的营利公司需购买公司许可。

用轻量 WebGL 库 cobe 在首页或关于页加入可旋转的地球，讲解画布按设备像素比设置尺寸、位置标记、旋转动画、窗口缩放后重建与销毁，可在 React/Next.js 中集成。

用 GSAP 编写或调试网页动画：补间、时间线与位置参数、缓动、错峰，以及 ScrollTrigger 的固定与滚动联动；说明优先动 transform、在 React 中用 gsap.context() 清理、图片加载后刷新等常见问题。

收窄 React 组件的 props 类型，使其只描述线上代码实际用到的状态：找出所有非测试、非 Storybook 的调用处，据此把每个 prop 定为必填、可选或删除，尽量从现有 API 推导类型，并让 stories、测试与 mock 适配新类型，而不是反过来放宽类型。

指导 agent 在 Remotion 视频中处理字幕：统一用 @remotion/captions 的 Caption 类型存成 JSON，可转写音视频生成字幕、导入 .srt 文件，并在合成中显示字幕、制作字幕动画。Remotion 官方技能。

指导 agent 新建 Remotion 视频项目与合成：先检查当前目录再用 create-video 脚手架初始化，动手写画面前先打开 Remotion Studio 预览，并按需参考视频布局、多场景与剪辑时间线等指南。Remotion 官方技能，需要 Node.js 与 Git。

Remotion 官方技能：教 agent 用 React 代码制作程序化视频，涵盖新建项目、动画与排版、字幕、地图动画、多媒体处理与渲染，作为路由按需加载各子主题。

General Translation 的命令行 gt：用向导为 React、Next.js 等项目配置多语言，再把界面文案和 JSON、YAML、Markdown 等内容文件交给平台 AI 翻译并写回项目，可接入 CI。需要 Node.js 项目和 General Translation 账号与 API Key（可免费注册，翻译按用量计费）。