63 tools that work with React: 27 MCP servers, 36 Agent Skills and 0 Claude Code plugins. 10 of the remote servers answered our live check, 9 worked without an API key, and 11 come from an official or verified publisher. Ranked by GitHub stars plus official, live and free-to-try signals.
Most common uses: Frontend, UI components & design-to-code (55), Design tools (Figma, Canva...) (3), Code search, analysis, refactoring & languages (3), Video creation & editing (1).
| Tool | Stars | Last update | License | |
|---|---|---|---|---|
| Watermelon UI Search free React, Tailwind, and shadcn components, blocks, and dashboards; get installable source. MCP serverVerified domain · watermelon.shRemote● LiveFree to try | 216 | MIT | ||
| frontend-developer Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend archi SkillInstall · skills CLI | 49,672 | MIT | ||
| react-modernization Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codeb SkillInstall · skills CLI | 42,495 | MIT | ||
| react-state-management Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or SkillInstall · skills CLI | 42,495 | MIT | ||
| web-component-design Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building U SkillInstall · skills CLI | 42,495 | MIT | ||
| lightweight-charts-react-components lightweight-charts-react-components recipes for TradingView lightweight-charts in React. Candlestick, line, and area series; volume and indicator pane SkillInstall · skills CLI | 41,140 | MIT | ||
| Arc UI React components and blocks with motion. Search docs, props and shadcn install commands. MCP serverVerified domain · uiarc.devRemoteSign-in needed | 1,260 | MIT | ||
| vercel-composition-patterns React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or desi SkillInstall · skills CLI | 34,034 | — | ||
| vercel-react-view-transitions Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS SkillInstall · skills CLI | 34,034 | — | ||
| gsap-react Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP SkillInstall · skills CLI | 18,423 | MIT | ||
| affectUI Search, read and install agent-ready React components, screens and blocks for AI products. MCP serverGitHub-verified authorRemote● LiveFree to try | 763 | MIT | ||
| react-vite-dashboard Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/ SkillInstall · skills CLI | 8,771 | Apache-2.0 | ||
| stitch::react-components Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, us SkillInstall · skills CLI | 8,771 | Apache-2.0 | ||
| beam-glow-states Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, but SkillInstall · skills CLI | 7,464 | MIT | ||
| liquid-metal-border Add and tune animated liquid-metal WebGL borders with the React `metal-fx` package. Use when buttons, icon controls, chips, tabs, cards, or selected s SkillInstall · skills CLI | 7,464 | MIT | ||
| thinking-orbs Add accessible animated AI loading and agent-status indicators with the React thinking-orbs library. Use when a chat, copilot, voice, search, generati SkillInstall · skills CLI | 7,464 | MIT | ||
| react-best-practices React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React/Next.js code to ensur SkillInstall · skills CLI | 7,167 | — | ||
| narrow-react-prop-types narrow React component prop types to match live code paths SkillInstall · skills CLI | 5,773 | MIT | ||
| ndekoui Search, read and install ndekoui React components, blocks and templates with the shadcn CLI. MCP serverVerified domain · ui.ndekocode.devRemote● LiveFree to try | 6 | MIT | ||
| frontend-ui-dark-ts Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating da SkillInstall · skills CLI | 3,203 | MIT | ||
| react-flow-node-ts Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creat SkillInstall · skills CLI | 3,203 | MIT | ||
| zustand-store-ts Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, SkillInstall · skills CLI | 3,203 | MIT | ||
| frontend-excellence Modern frontend patterns for React Server Components, performance optimization, and Core Web Vitals SkillInstall · skills CLI | 2,838 | Apache-2.0 | ||
| react-patterns React 19 patterns including Server Components, Actions, Suspense, hooks, and component composition SkillInstall · skills CLI | 2,838 | Apache-2.0 | ||
| Semiotic Verified React chart generation: select, validate, repair, render, and inspect charts through MCP. MCP serverGitHub-verified authorLocal · npm | 2,717 | Apache-2.0 | ||
| mui Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working wi SkillInstall · skills CLI | 2,679 | MIT | ||
| react-dev This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Co SkillInstall · skills CLI | 2,679 | MIT | ||
| react-useeffect React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchron SkillInstall · skills CLI | 2,679 | MIT | ||
| synthetic-ui-demo Product demo and release-notes videos with no screen recording. Rebuild the app's screens as static React from its source code, then drive them in Rem SkillInstall · skills CLI | 2,553 | MIT | ||
| frontend-developer Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend archi SkillInstall · skills CLI | 2,009 | MIT | ||
| postgresql-planning Plan and implement OpenMeld PostgreSQL business persistence, schemas and migrations, transactions, Hyperdrive access, and data cutover. Use for the sh SkillInstall · skills CLI | 1,424 | MIT | ||
| React 最佳实践 React 组件设计模式、Hooks 使用指南、性能优化技巧 SkillInstall · skills CLI | 1,156 | — | ||
| io.github.Nutlope/inspo Real production websites for coding agents: palettes, fonts, fold autopsies and reference JSX. MCP serverGitHub-verified authorLocal · npm | 1,019 | MIT | ||
| Eased Motion-first React components for shadcn: search, read docs and get install commands. MCP serverVerified domain · eased.devRemote● LiveFree to try | 1 | MIT | ||
| engineer-react Build, refactor, debug, and test production React web applications with clear component boundaries, minimal state, disciplined Effects, resilient asyn SkillInstall · skills CLI | 710 | MIT | ||
| review-react Perform a read-only review of React web code for correctness, state ownership, Hook and Effect discipline, async races, component API quality, server/ SkillInstall · skills CLI | 710 | MIT | ||
| react-19 React 19 patterns with React Compiler. Trigger: When writing React components - no useMemo/useCallback needed. SkillInstall · skills CLI | 674 | MIT | ||
| Vlak Accessible React components, tokens, usage guidance, and install commands for product interfaces. MCP serverGitHub-verified authorRemote● LiveFree to try | 34 | MIT | ||
| Beamline UI Polished, editable React UI for coding agents: 240+ components, 340+ complete screens. MCP serverVerified domain · beamline.ioRemote● LiveFree to try | — | — | ||
| Caliper UI Find React UI components, read their docs, and get shadcn install commands. MCP serverVerified domain · caliperui.siteRemote● LiveFree to try | — | — | ||
| Echo UI A tactile React component library, and the design system that keeps your AI agent on-brand. MCP serverVerified domain · echo-ui.comRemote● LiveFree to try | 0 | MIT | ||
| Liro React + Tailwind UI components and recipes your AI coding tool can search and install. MCP serverVerified domain · liro.devRemote● LiveFree to try | — | — | ||
| tanstack-router-best-practices TanStack Router best practices for type-safe routing, data loading, search params, and navigation. Activate when building React applications with comp SkillInstall · skills CLI | 230 | MIT | ||
| tanstack-start-best-practices TanStack Start best practices for full-stack React applications. Server functions, middleware, SSR, authentication, and deployment patterns. Activate SkillInstall · skills CLI | 230 | MIT | ||
| io.github.ganapativs/microcharts Find, wire, and render microcharts — word-sized React charts with generated alt text. MCP serverGitHub-verified authorLocal · npm | 207 | MIT | ||
| motion-design-patterns Framer Motion (Motion) animation patterns for React — springs, staggers, layout animations, micro-interactions, scroll effects, and page transitions. SkillInstall · skills CLI | 180 | MIT | ||
| UI Polish React components and design rules your coding agent installs and follows. MCP serverVerified domain · uipolish.comRemote● LiveAPI key needed | 0 | MIT | ||
| redesign-my-landingpage Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, w SkillInstall · skills CLI | 140 | — | ||
| apollo-client Guide for building React applications with Apollo Client 4.x. Use this skill when: (1) setting up Apollo Client in a React project, (2) writing GraphQ SkillInstall · skills CLI | 130 | MIT | ||
| Hyperiux Vault Browse, inspect, and retrieve installable React and Next.js interaction effects from Hyperiux Vault. MCP serverGitHub-verified authorLocal · npm | 111 | MIT | ||
| state-management React Query and Zustand patterns for state management. Use when implementing data fetching, caching, mutations, or client-side state. Triggers on task SkillInstall · skills CLI | 103 | MIT | ||
| dev.lingo/main Lingo.dev MCP Server - World-class i18n implementation with ICU MessageFormat. MCP serverVerified domain · lingo.devRemoteSign-in needed | — | — | ||
| Wensity Find, plan, and install Wensity UI React components and blocks into your project. MCP serverVerified domain · wensity.comLocal · npm | — | — | ||
| io.github.mahmoudilyan/marmo-ui Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop. MCP serverGitHub-verified authorRemoteDown | 20 | MIT | ||
| onsystem Catches palette colors, native elements and APIs your design system lacks in agent-written React. MCP serverGitHub-verified authorLocal · npm | 20 | MIT | ||
| Bestax Props, examples, CSS variables and Agent Skills for bestax-bulma React components (Bulma v1) MCP serverGitHub-verified authorLocal · npm | 14 | MIT | ||
| io.github.vamsiy78/ballmac Search, inspect and install Ballmac UI React and Tailwind components, blocks and templates. MCP serverGitHub-verified authorLocal · npm | 12 | MIT | ||
| io.github.mpmcgowen/metricui React dashboard components — API lookup, code generation, and prop validation for AI tools. MCP serverGitHub-verified authorLocal · npm | 5 | MIT | ||
| OpenUI MCP Studio Local stdio MCP for UI briefs to React + shadcn with review, proof, and ship. MCP serverGitHub-verified author | 1 | MIT | ||
| VaneUI VaneUI React component docs and per-component prop tables for AI coding agents. MCP serverGitHub-verified authorLocal · npm | 1 | MIT | ||
| Basiiik Design system for coding agents: component specs, rules, tokens, icons and checked React snippets. MCP serverGitHub-verified authorLocal · npm | — | — | ||
| Crispy Profiling Deterministic React render profiling: renders, wasted renders and their causes per component. MCP serverGitHub-verified authorLocal · npm | 0 | MIT | ||
| Hyperblur Search, inspect and install copy-paste React effects, components and page blocks. MCP serverGitHub-verified authorLocal · npm | 0 | MIT |