React / Next.js 的 AI 扩展

9 MCP servers for React/TypeScript — dep auditing, a11y, test gen, and TypeScript enforcement.

MCP server for UI5 Web Components for React - Developer documentation and API assistance

Inspect and operate Next.js Redis caches: health, tag state, SWR simulation, safe invalidation.

Decodes React DevTools Profiler exports into render summaries and memoization advice for AI agents.

Search, read, cite and react to Jake Handy's writing on AI, music tech and agentic engineering.

Search, add, diff and update labsUI React components in your project.

用于以采用 Tailwind 的 Next.js TSX 组件形式创建落地页、营销页或活动页。使用 landing_page_scaffolder.py 构建脚手架，包含 PAS、AIDA 或 BAB 文案、SEO 元信息和 Core Web Vitals 目标。

面向 React / Next.js 的高级动效模式——拖放、手势、文本动画、SVG 路径绘制、自定义钩子、命令式序列（useAnimate）、加载器，以及完整的 API 决策树。需要 motion-foundations。适用于在 React 或 Next.js 中构建拖放、手势、文本或 SVG 动画，或命令式动画序列时。

面向 React / Next.js 的高级动效模式——拖放、手势、文本动画、SVG 路径绘制、自定义钩子、命令式序列（useAnimate）、加载器，以及完整的 API 决策树。需要 motion-foundations。适用于在 React 或 Next.js 中构建拖放、手势、文本或 SVG 动画，或命令式动画序列时。

为混合常规内容与“惊艳”动效的网站进行动画艺术指导——决定哪些元素做动画、哪些保持静止，选择合适的工具（CSS、Motion for React、GSAP + ScrollTrigger、Lenis、Three.js/R3F、Lottie、View Transitions），设定动效系统（时长、缓动、错峰），并保持快速、可访问且移动端安全。适用于用户想要动画化、交互式、获奖风格或“酷炫”的网站、落地页、作品集、首屏、滚动效果、页面过渡，或提出“加点动画”、“让它更有活力”、“像 Awwwards 网站那样”，甚至在选择库之前。

Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this. Use when setting up motion tokens, spring presets, reduced-motion handling, or SSR-safe animation in React or Next.js.

Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this. Use when setting up motion tokens, spring presets, reduced-motion handling, or SSR-safe animation in React or Next.js.

面向 React / Next.js 的生产级动画模式——按钮、模态框、提示消息、交错动画、页面过渡、退出动画、滚动和布局——基于 motion-foundations 的令牌与弹簧动画构建。在 React 或 Next.js 中为特定 UI 元素添加动画时使用——按钮、模态框、提示消息、交错动画、页面过渡或滚动。

面向 React / Next.js 的生产级动画模式——按钮、模态框、提示消息、交错动画、页面过渡、退出动画、滚动和布局——基于 motion-foundations 的令牌与弹簧动画构建。在 React 或 Next.js 中为特定 UI 元素添加动画时使用——按钮、模态框、提示消息、交错动画、页面过渡或滚动。

Search, read and install ndekoui React components, blocks and templates with the shadcn CLI.

Next.js 14+ App Router架构、服务器组件和现代全栈React开发的全面模式。

Next.js App Router 原则：Server Components、数据获取和路由模式。

Supabase Auth 与 Next.js App Router 的专家级集成 使用场景：supabase auth next、authentication next.js、login supabase、auth middleware、protected route。

Next.js 16+ 和 Turbopack：增量打包、文件系统缓存、开发速度，以及何时选择 Turbopack 或 webpack。

Next.js 16+ y Turbopack — bundling incremental, caché en sistema de archivos, velocidad de desarrollo y cuándo usar Turbopack frente a webpack.

Next.js 16+ 和 Turbopack 指导：增量 Rust 打包、文件系统缓存、更快的开发启动与 HMR、Turbopack/webpack 取舍，以及 middleware.ts 改名为 proxy.ts。用于开发或调试 Next.js 16+ 应用、诊断开发启动或热更新缓慢、选择打包器，或审查 middleware/proxy 文件命名。

Next.js 16+ 和 Turbopack：增量打包、文件系统缓存、开发速度，以及何时选择 Turbopack 或 webpack。

Next.js 16+ 和 Turbopack：增量打包、文件系统缓存、开发速度，以及何时选择 Turbopack 或 webpack。

Next.js 16+ 和 Turbopack — 增量打包、文件系统缓存、开发速度，以及何时使用 Turbopack 与 webpack。

Next.js 16+ 和 Turbopack：增量打包、文件系统缓存、开发速度，以及何时选择 Turbopack 或 webpack。

Next.js 16+ 和 Turbopack 指导：增量 Rust 打包、文件系统缓存、更快的开发启动与 HMR、Turbopack/webpack 取舍，以及 middleware.ts 改名为 proxy.ts。用于开发或调试 Next.js 16+ 应用、诊断开发启动或热更新缓慢、选择打包器，或审查 middleware/proxy 文件命名。

Next.js 16+とTurbopack — インクリメンタルバンドリング、FSキャッシング、開発速度、Turbopackとwebpackをいつどちらかどうかを選ぶか。

Specialized dashboard and dense-information UI designer. Produces design specs AND working React prototypes with mock data for three archetypes: executive (KPI-driven, low density), operations (real-time, monitoring-dense), and analyst (exploratory, drill-heavy). ALWAYS trigger on /oc-data-forge, /oc-dash-forge, /dashboard, /dataviz-design. Also trigger on: "design a dashboard", "dashboard mockup", "BI design", "data visualization design", "KPI dashboard", "analytics UI", "monitoring dashboard", "dense information display", "what should the dashboard look like", "design a report view". Invoked by oc-ux-engineer when the UI is data-heavy and by oc-app-architect when the design phase encounters a dashboard surface.

Specialized dashboard and dense-information UI designer. Produces design specs AND working React prototypes with mock data for three archetypes: executive (KPI-driven, low density), operations (real-time, monitoring-dense), and analyst (exploratory, drill-heavy). ALWAYS trigger on /oc-data-forge, /oc-dash-forge, /dashboard, /dataviz-design. Also trigger on: "design a dashboard", "dashboard mockup", "BI design", "data visualization design", "KPI dashboard", "analytics UI", "monitoring dashboard", "dense information display", "what should the dashboard look like", "design a report view". Invoked by oc-ux-engineer when the UI is data-heavy and by oc-app-architect when the design phase encounters a dashboard surface.

Migration and refactor operator for live systems: database migrations (D1 → Postgres, schema overhauls), framework upgrades (Hono v3→v4, React 18→19), auth provider swaps, monorepo restructures, and platform moves (Workers → Vercel). Produces incremental plans with rollback points at every step, executes with verification gates, and validates the end state matches the target spec. ALWAYS trigger on /oc-migrate, /oc-migration, /oc-upgrade, /oc-refactor, /oc-swap, /oc-move-to, /oc-platform-move. Also trigger on "migrate from X to Y", "upgrade to", "swap auth provider", "move database", "restructure the monorepo", "refactor to use", "breaking changes", "deprecation", "end of life". Also covers opchain ecosystem upgrades: "update all skills", "checkpoint protocol upgrade", "bulk update SKILL.md". Trigger when transforming an existing system from one state to another — not greenfield building (oc-app-architect) or documenting what exists (oc-reverse-spec).

Migration and refactor operator for live systems: database migrations (D1 → Postgres, schema overhauls), framework upgrades (Hono v3→v4, React 18→19), auth provider swaps, monorepo restructures, and platform moves (Workers → Vercel). Produces incremental plans with rollback points at every step, executes with verification gates, and validates the end state matches the target spec. ALWAYS trigger on /oc-migrate, /oc-migration, /oc-upgrade, /oc-refactor, /oc-swap, /oc-move-to, /oc-platform-move. Also trigger on "migrate from X to Y", "upgrade to", "swap auth provider", "move database", "restructure the monorepo", "refactor to use", "breaking changes", "deprecation", "end of life". Also covers opchain ecosystem upgrades: "update all skills", "checkpoint protocol upgrade", "bulk update SKILL.md". Trigger when transforming an existing system from one state to another — not greenfield building (oc-app-architect) or documenting what exists (oc-reverse-spec).

OverKill Hill P³ client-only Google Identity Services (GIS) auth workflow. Use when designing, implementing, or troubleshooting client-only Google Identity Services (GIS) OAuth token flows for React or TypeScript SPAs on static hosts. Use for Google Sign-In, Calendar or Tasks read access, popup token acquisition, session-scoped token storage, expiry handling, silent re-authentication, GCP OAuth setup, or porting this pattern without a backend, Client Secret, redirect URI, or refresh token. Keep provider-specific write APIs outside this skill.

Draft an Instagram comment or reply from supplied post and conversation context. Use when the user wants a context-aware response under a named Instagram post or comment thread. It returns a reviewable draft only and does not post, react, follow, message, moderate, or change comment controls.

Draft a Pinterest comment or reply from supplied Pin and conversation context. Use when the user wants a concise, grounded response under a named Pin. It returns a draft only and does not comment, react, highlight, delete, filter, report, message, or moderate content.

Draft a Telegram group reply from supplied group, parent-message, and thread context. Use when the user needs a grounded response in a named Telegram group or topic. It returns a draft only and does not send, direct-message, mention, react, pin, delete, report, moderate, invite, remove, or change group permissions or settings.

Catches palette colors, native elements and APIs your design system lacks in agent-written React.

Search and read the docs and examples of react-three-fiber, drei, zustand, jotai... from your agent

全面的 React 和 Next.js 性能优化指南，包含 40 多条规则，用于消除瀑布式请求、优化打包体积和改善渲染。适用于优化 React 应用、审查性能或重构组件时使用。

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

诊断运行缓慢的 React 组件，并提出针对性的性能修复建议。

当使用 TypeScript 构建 React 组件、为 Hook 添加类型、处理事件，或提及 React TypeScript、React 19、服务器组件时，应使用此技能。涵盖 React 18-19 的类型安全模式，包括泛型组件、正确的事件类型以及路由集成（TanStack Router、React Router）。

Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components.

使用 Motion for React（原 Framer Motion）在 React/Next.js 中构建 UI 动画——微交互、使用 AnimatePresence 的进入/退出、布局与共享元素动画、手势（悬停、点击、拖拽）、滚动联动值、交错列表、模态框、标签页、菜单以及页面过渡。当用户提到 Motion、framer-motion、motion/react、AnimatePresence、layoutId、Next.js 中的页面过渡、动画模态框/菜单/标签页，或希望 React 组件感觉流畅生动时使用。

React 18/19 模式，涵盖 hooks 规范、服务端/客户端组件边界、Suspense 与错误边界、表单 action、数据获取、状态管理决策树，以及优先考虑无障碍的组合方式。编写或审查 React 组件时使用。

现代 React 模式与原则。Hooks、组合、性能、TypeScript 最佳实践。

React 18/19 模式，涵盖 hooks 规范、服务端/客户端组件边界、Suspense 与错误边界、表单 action、数据获取、状态管理决策树，以及优先考虑无障碍的组合方式。编写或审查 React 组件时使用。

React 18/19 模式，涵盖 hooks 规范、服务端/客户端组件边界、Suspense 与错误边界、表单 action、数据获取、状态管理决策树，以及优先考虑无障碍的组合方式。编写或审查 React 组件时使用。

依据 Vercel Engineering 的 React Best Practices（https://github.com/vercel-labs/agent-skills）调整的 React 和 Next.js 性能优化模式。将 70+ 条规则按 8 个优先类别组织：请求瀑布、打包体积、服务端、客户端获取、重复渲染、渲染、JS 微性能和高级模式。为性能而编写、审查或重构 React/Next.js 代码时使用。

依据 Vercel Engineering 的 React Best Practices（https://github.com/vercel-labs/agent-skills）调整的 React 和 Next.js 性能优化模式。将 70+ 条规则按 8 个优先类别组织：请求瀑布、打包体积、服务端、客户端获取、重复渲染、渲染、JS 微性能和高级模式。为性能而编写、审查或重构 React/Next.js 代码时使用。

使用 Redux Toolkit、Zustand、Jotai 和 React Query 掌握现代 React 状态管理。在设置全局状态、管理服务器状态或在状态管理方案之间做选择时使用。