React / Next.js 的 AI 扩展

React 组件测试，使用 React Testing Library、Vitest/Jest、MSW 网络 mock 和 axe 无障碍断言，并明确组件测试与 Playwright/Cypress 端到端测试的适用边界。编写或修复 React 组件、hooks 或页面测试时使用。

React 组件测试，使用 React Testing Library、Vitest/Jest、MSW 网络 mock 和 axe 无障碍断言，并明确组件测试与 Playwright/Cypress 端到端测试的适用边界。编写或修复 React 组件、hooks 或页面测试时使用。

React 组件测试，使用 React Testing Library、Vitest/Jest、MSW 网络 mock 和 axe 无障碍断言，并明确组件测试与 Playwright/Cypress 端到端测试的适用边界。编写或修复 React 组件、hooks 或页面测试时使用。

用于加载状态、错误处理和数据获取的现代 React UI 模式。适用于构建 UI 组件、处理异步数据或管理 UI 状态时。

来自官方文档的React useEffect最佳实践。适用于编写/审查useEffect、用useState处理派生值、数据获取或状态同步时。讲解何时不应使用Effect以及更好的替代方案。

将Stitch设计转换为生产级React + Vite仪表板，使用TanStack Query、来自DESIGN.md的可访问令牌，以及面向Web3的模式（ethers/viem）。

Create ANIMATED motion graphics — kinetic word-by-word captions, animated lower-thirds/name tags, branded intro/outro title cards, data-driven graphics (count-ups, growing bars) — as React/Remotion components, rendered to a transparent layer and composited over the footage with ffmpeg. OPTIONAL/heavy (needs Node + a headless-Chromium download, and a Remotion license for company use). Use only when an edit needs genuine motion design that PIL/ffmpeg overlays can't do; for a static label, watermark, or simple fade, use the video-overlay skill instead.

Create and edit motion graphics videos with Remotion (React): intros and outros, logo animations, promos, text animations, captions on footage, and compositing images and B-roll. Use when the user wants a motion graphics video built in Remotion, is working in a Remotion project, or says their Remotion video looks generic or amateur. Read it before writing Remotion code.

适用于启动带有身份验证、数据库、Stripe计费和仪表板的新SaaS应用（Next.js App Router、TypeScript、Tailwind、shadcn/ui、Drizzle）。使用project_bootstrapper.py进行引导。

全面的全栈开发技能，用于使用React、Next.js、Node.js、GraphQL和PostgreSQL构建完整的Web应用。包括项目脚手架、代码质量分析、架构模式和完整技术栈指导。在构建新项目、分析代码质量、实现设计模式或搭建开发工作流时使用。

启动全栈项目或审计代码库：选择技术栈（Next.js、FastAPI、MERN、Django），搭建脚手架并评估代码质量。当用户询问该用哪个技术栈、想要搭建新的 Web 应用，或询问其代码库质量好坏或是否混乱时使用。

面向 ReactJS、NextJS、NodeJS 应用的全面 QA 与测试技能，涵盖质量保证、测试自动化和测试策略。包括测试套件生成、覆盖率分析、E2E 测试搭建和质量指标。适用于设计测试策略、编写测试用例、实施测试自动化、执行手动测试或分析测试覆盖率。

为 React 或 Next.js 应用编写和改进测试：Jest、React Testing Library、MSW 模拟、Playwright E2E、覆盖率缺口。适用于用户要求为组件或页面添加测试、模拟 API、设置端到端测试或提高覆盖率时。

Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.

TanStack Query（React Query）专家——异步状态管理。涵盖数据获取、过期时间配置、变更、乐观更新，以及 Next.js App Router（SSR）集成。

Search shadcn registry items, read props and get exact install commands for React components.

Comprehensive technology stack blueprint generator that analyzes codebases to create detailed architectural documentation. Automatically detects technology stacks, programming languages, and implementation patterns across multiple platforms (.NET, Java, JavaScript, React, Python). Generates configurable blueprints with version information, licensing details, usage patterns, coding conventions, and visual diagrams. Provides implementation-ready templates and maintains architectural consistency for guided development.

会对订单作出反应的模拟股票市场：运行、分叉并为交易智能体评分。

构建并打磨网站 UI，使其看起来像专业设计而非通用模板——布局、排版、间距、颜色、响应式行为、状态和微交互——适用于 React/Next.js、Vue、Tailwind 或纯 HTML/CSS。当用户构建或调整页面、区块、落地页、组件、导航栏、首屏、表单，或说“bikin tampilan”“rapikan UI”“kurang bagus”“buat responsive”“make it look better”时使用，即使他们未提及设计。

Search 267 animated React components and get their props and source to install with shadcn.

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

用于已部署项目上的 Vercel 成本与性能优化，尤其是 Next.js、SvelteKit、Nuxt 以及有限的 Astro 应用。先收集 Vercel 指标、用量、项目配置和代码扫描结果；只调查有指标支撑的候选对象；基于已验证的文件和考虑版本差异的 Vercel/框架文档，给出排序后的建议。触发场景：降低 Vercel 账单、缓慢或昂贵的路由、缓存机会、函数调用、构建分钟数、快速数据传输、核心网页指标、机器人管理、Fluid 计算或成本明细请求。

来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。在编写、审查或重构 React/Next.js 代码以确保最佳性能模式时应使用此技能。在涉及 React 组件、Next.js 页面、数据获取、打包优化或性能改进的任务中触发。

来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。在编写、审查或重构 React/Next.js 代码以确保最佳性能模式时应使用此技能。在涉及 React 组件、Next.js 页面、数据获取、打包优化或性能改进的任务中触发。

使用React的View Transition API（`<ViewTransition>`组件、`addTransitionType`以及CSS视图过渡伪元素）实现流畅、原生感动画的指南。当用户想要添加页面过渡、为路由变化添加动画、创建共享元素动画、为组件的进入/退出添加动画、为列表重排添加动画、实现方向性（前进/后退）导航动画，或在Next.js中集成视图过渡时，使用此技能。当用户提到视图过渡、`startViewTransition`、`ViewTransition`、过渡类型，或询问如何在React中不借助第三方动画库在UI状态之间添加动画时，也可使用。

用于TypeScript项目（Node、bun、React/Next.js、Effect）中的Vitest：编写、运行或调试单元/组件测试、模拟、测试工具及覆盖率。

为网站添加 3D 与 WebGL 效果——交互式主视觉对象、产品查看器、粒子、着色器背景、滚动驱动的 3D 场景——可使用 Three.js 或 React Three Fiber（drei）、Spline 或 model-viewer，同时控制加载时间、移动端性能与降级方案。当用户提到 3D、WebGL、Three.js、R3F、react-three-fiber、着色器、GLB/GLTF 模型、粒子、Spline，或想要沉浸式/“惊艳”的主视觉时使用。

使用 React、Tailwind CSS 和 shadcn/ui 等现代前端技术，创建复杂、多组件 claude.ai HTML 产物的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂产物，不用于简单的单文件 HTML/JSX 产物。

使用 React、Tailwind CSS 和 shadcn/ui 等现代前端技术，创建复杂、多组件 claude.ai HTML 产物的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂产物，不用于简单的单文件 HTML/JSX 产物。

使用 React、Tailwind CSS 和 shadcn/ui 等现代前端技术，创建复杂、多组件 claude.ai HTML 产物的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂产物，不用于简单的单文件 HTML/JSX 产物。

使用 React、Tailwind CSS 和 shadcn/ui 等现代前端技术，创建复杂、多组件 claude.ai HTML 产物的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂产物，不用于简单的单文件 HTML/JSX 产物。

诊断并修复网站速度问题——核心网页指标（LCP、INP、CLS）、打包体积、图片、字体、缓存和渲染策略——适用于 Next.js、React/Vite、Vue/Nuxt、Astro 和静态站点。当用户说网站很慢、"website lemot"、想要更好的 Lighthouse/PageSpeed 分数、提到核心网页指标、打包体积过大，或正在为网站上线做准备时使用。

Comprehensive technology-agnostic prompt generator for documenting end-to-end application workflows. Automatically detects project architecture patterns, technology stacks, and data flow patterns to generate detailed implementation blueprints covering entry points, service layers, data access, error handling, and testing approaches across multiple technologies including .NET, Java/Spring, React, and microservices architectures.

Zod 专家——以 TypeScript 为先的 schema 校验。涵盖解析、自定义错误、细化校验、类型推断，以及与 React Hook Form、Next.js 和 tRPC 的集成。

日本語ヘッドレスCMS。記事の作成・更新・予約公開・画像取り込みをAIから実行できる。APIキーで接続、npm不要。Astro/Next.js等へ配信APIで届く。