AI extensions for React / Next.js

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.

Use when asked for a landing, marketing or campaign page as a Next.js TSX component with Tailwind. Scaffolds it with landing_page_scaffolder.py using PAS, AIDA or BAB copy, SEO meta and Core Web Vitals targets.

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations. Use when building drag and drop, gestures, text or SVG animation, or imperative animation sequences in React or Next.js.

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations. Use when building drag and drop, gestures, text or SVG animation, or imperative animation sequences in React or Next.js.

Art-direct animation for websites that mix normal content with "wow" motion — decide what to animate and what to keep still, pick the right tool (CSS, Motion for React, GSAP + ScrollTrigger, Lenis, Three.js/R3F, Lottie, View Transitions), set a motion system (durations, easing, stagger), and keep it fast, accessible and mobile-safe. Use whenever the user wants an animated, interactive, award-style or "keren" website, landing page, portfolio, hero, scroll effect, page transition, or asks "tambahin animasi", "biar lebih hidup", "kayak website Awwwards", even before choosing a library.

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.

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.

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

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Next.js App Router principles. Server Components, data fetching, routing patterns.

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs 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+ and Turbopack guidance — incremental Rust bundling, file-system caching, faster dev startup and HMR, Turbopack vs webpack tradeoffs, and the middleware.ts to proxy.ts filename change. Use when developing or debugging Next.js 16+ apps, diagnosing slow dev startup or hot reload, choosing between bundlers, or reviewing middleware/proxy file naming.

Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.

Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.

Next.js 16+ and Turbopack — incremental bundling, filesystem caching, development speed, and when to use Turbopack versus webpack.

Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.

Next.js 16+ and Turbopack guidance — incremental Rust bundling, file-system caching, faster dev startup and HMR, Turbopack vs webpack tradeoffs, and the middleware.ts to proxy.ts filename change. Use when developing or debugging Next.js 16+ apps, diagnosing slow dev startup or hot reload, choosing between bundlers, or reviewing middleware/proxy file naming.

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

Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components.

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Diagnose slow React components and suggest targeted performance fixes.

This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (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.

Build UI animation in React/Next.js with Motion for React (formerly Framer Motion) — micro-interactions, enter/exit with AnimatePresence, layout and shared-element animations, gestures (hover, tap, drag), scroll-linked values, staggered lists, modals, tabs, menus, and page transitions. Use whenever the user mentions Motion, framer-motion, motion/react, AnimatePresence, layoutId, page transition in Next.js, animated modal/menu/tabs, or wants React components to feel smooth and alive.

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.

React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.

React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.

Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.