NeVibeCode · 717 items
react: skills, IDE rules, MCP servers and more
Cards tagged “react”: skills, IDE rules, MCP servers and more. What each one does, an install command and example prompts.
micro-interaction skill A skill for small UI motion: hover and press feedback, toggles, toasts, drawers, list reordering. Useful when an interface needs to feel responsive.
CX Codex +1
2,500installs
react skill Guidance for building and reviewing React 19 components and hooks with React Compiler in mind. Use it for compiler setup, state and Effects decisions, or component tests.
CX Codex +1
448installs
screenshot-to-code skill Turns a screenshot, mockup or Figma export into working front-end code, then renders it and compares the result against the image. Handy when the design exists but the markup does not.
CX Codex +1
1,300installs
tanstack-pacer skill A skill that tells your agent how to wire up TanStack Pacer: debouncing, throttling, rate limiting, queues and batching in one package.
CX Codex +1
3,900installs
tanstack-start skill Guides agents through building full-stack React apps with TanStack Start, streaming SSR, and type-safe server functions.
CX Codex +1
3,900installs
langsmith-custom-apps skill Walks you through the LangSmith Custom App lifecycle: scaffolding, local dev, push, and handing the source to someone outside your org.
CX Codex +1
398installs
page-transition-animation skill A skill for animating page transitions in Next.js App Router and fixing Framer Motion AnimatePresence exit animations that never fire on navigation.
CX Codex +1
2,300installs
stock-evaluator-v3 skill Skill for full stock evaluation before you buy: applies eight legendary investor frameworks, runs technical and fundamental checks, builds a 60+ metric dashboard, and gives a clear buy, hold, or sell call.
CX Codex +1
374installs
markstream-install
official skill Configures Markstream streaming Markdown renderers across React, Vue, Svelte, and Angular projects. It resolves package selection, CSS ordering, and SSR boundaries.
18installs
no-use-effect skill Enforces a zero-useEffect policy across React and React Native components, redirecting logic to derived state, handlers, and dedicated libraries.
CX Codex +1
729installs
airflow-plugins skill This skill walks your agent through building Airflow 3.1+ plugins with FastAPI endpoints, React pages and custom UI tabs. Useful when you need something custom inside Airflow.
CX Codex +1
594installs
ui-design-system skill A skill for reviewing and building React interfaces with TailwindCSS, Radix UI and shadcn/ui. Useful when your components have drifted apart.
CX Codex +1
3,200installs
storybook-story-writing skill Writes and edits Storybook stories for your components: CSF3 format, every meaningful state, a build that passes. Useful when stories drift and break the build.
CX Codex +1
673installs
markdown skill Tells the agent how to wire markdown rendering for assistant messages in assistant-ui: which renderer to use, how to highlight code, and how to add math or diagrams.
CX Codex +1
4,300installs
next-best-practices skill A skill that hands your agent a set of Next.js rules: file conventions, RSC boundaries, async APIs, metadata, error handling. Useful whenever it writes or reviews Next.js code.
CX Codex +1
383installs
frontend-react-best-practices skill A skill with 33 React performance rules: fewer wasted re-renders, leaner bundles, cleaner component composition. Useful while writing or refactoring components.
CX Codex +1
1,200installs
auditing-performance skill A skill that audits app performance: bundle size, rendering, database queries and Core Web Vitals. Useful when pages load slowly or the UI stutters.
CX Codex +1
476installs
react-flow skill A skill that guides coding agents through React Flow (@xyflow/react): custom nodes and edges, state, layout, typing and debugging.
CX Codex +1
821installs
laravel-inertia-react skill A skill that hands your agent ready rules for Inertia pages, useForm handling and shared data across Laravel and React.
CX Codex +1
1,900installs
shadcn skill Guides AI agents through shadcn/ui and Radix UI best practices. Prevents broken themes and keeps component accessibility intact.
CX Codex +1
369installs
react-data-fetching skill Teaches your agent modern React data fetching: parallel requests, caching, deduplication, Suspense. Useful when components still fetch inside useEffect.
CX Codex +1
1,100installs
react-render-optimization skill A skill that teaches your agent React rendering patterns: kills unnecessary re-renders, fixes memoization and state design.
CX Codex +1
1,100installs
presentational-container-pattern skill Teaches agents the presentational and container pattern to split data fetching from React UI. Useful when isolating state and API calls to simplify testing and component reuse.
CX Codex +1
1,100installs
react-composition-2026 skill A skill that pushes your agent away from boolean props and rigid component APIs toward compound components, explicit variants and children.
CX Codex +1
1,100installs
hooks-pattern skill A skill that teaches your agent React Hooks and helps pull repeated stateful logic into custom hooks. Useful when components start duplicating behaviour.
CX Codex +1
1,100installs
web-accessibility skill A skill that steers your coding agent toward accessible web UI: ARIA patterns, keyboard focus handling, screen reader support, all following WCAG 2.1.
CX Codex +1
454installs
tanstack skill Get focused guidance for React changes involving TanStack Query, Router, or Form. Useful when you need the relevant implementation notes without loading every reference.
CX Codex +1
360installs
react-mcp skill A skill for wiring @assistant-ui/react-mcp into an app: users connect their own MCP servers in the browser and the tools show up in chat.
CX Codex +1
4,000installs
observability skill Wires Langfuse, LangSmith or Helicone into assistant-ui AI SDK backend routes and renders collected spans with the experimental @assistant-ui/react-o11y.
CX Codex +1
4,000installs
motion skill This skill guides Motion and CSS animation work, finds docs and examples, and helps inspect performance issues. Use it when building UI motion or upgrading Motion.
CX Codex +1
717installs
zustand skill A skill that feeds your coding agent Zustand patterns: domain stores, selector hooks, middleware and persistence.
CX Codex +1
353installs
copilots skill An assistant-ui skill that teaches the agent to read page state, click rendered components and mutate their state through React hooks.
CX Codex +1
3,900installs
ui-web skill Design skill enforcing WCAG 2.1 AA accessibility, Tailwind CSS tokens, dark mode contrast, and glassmorphic UI patterns.
CX Codex +1
393installs
nextjs-app-architecture skill A skill that keeps a Next.js 16 App Router codebase on one architecture: pages compose, features fetch. Useful when starting an app or auditing one.
CX Codex +1
485installs
render-props-pattern skill A skill that walks through the render props pattern in React and tells you when a hook is the better call. Useful when rendering logic has to be shared across components.
CX Codex +1
1,000installs
client-side-rendering skill A skill that walks through client-side rendering in React: when CSR fits, and when your page loses on SEO and first paint.
CX Codex +1
1,000installs
hoc-pattern skill Teaches your AI assistant the Higher-Order Component pattern to share logic across React components. Useful for reusable auth, logging, or data fetching.
CX Codex +1
1,000installs
compound-pattern skill Teaches the agent the compound component pattern for shared implicit state. Useful for tabs, accordions and dropdowns whose parts must coordinate without explicit props.
CX Codex +1
1,000installs
nextjs
official skill Guidance for building and debugging Next.js App Router projects. Use it to work through routing, Server Components, data fetching, and rendering choices.
CX Codex GP ChatGPT
50installs
ui-testing skill An accessibility and visual QA checklist for components: detects invisible buttons, failing contrast ratios, and small touch targets.
CX Codex +1
364installs
321–360 of 717
