NeVibeCode · 649 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.
design-taste-frontend-v1 skill The original v1 frontend taste skill for clean React and Tailwind CSS output. It keeps strict guardrails for projects that need backward compatibility with early generations.
CX Codex +1
1,700installs
react-expert skill Researches React APIs and internals directly against tests, commits, and pull requests. Useful for writing accurate docs without relying on outdated model memory.
CX Codex +1
1,300installs
extract-design skill This skill analyzes a website URL and generates files describing its design system. Use it to bring a site's colors, typography, and component patterns into a project.
CX Codex +1
2,900installs
remotion skill Teaches AI agents toolkit-specific Remotion patterns, including custom transition shaders and 30 fps video rules.
CX Codex +1
1,200installs
frontend-design skill Teaches the agent to create memorable interfaces instead of generic layouts: picks an aesthetic direction, checks accessibility, writes clean code.
CX Codex +1
2,600installs
design-guide skill This skill defines Paperclip rules for UI components, tokens, typography, and status systems. Use it when building or changing frontend pages.
CX Codex +1
366installs
fullstack-dev skill Guides full-stack backend architecture and frontend integration. It enforces a structured checklist from requirement gathering to verification smoke tests.
CX Codex +1
3,400installs
lottie-bodymovin skill Applies Disney's 12 animation principles to Lottie vector animations. Bridges After Effects setup with runtime JavaScript controls.
CX Codex +1
1,100installs
video-toolkit skill Automates video creation: generates voiceovers, background music, animates talking heads, and composes scenes with Remotion. Requires Node.js, Python3, ffmpeg, and cloud GPU access (Modal or RunPod).
CX Codex +1
1,100installs
remotion-best-practices skill This skill gives coding agents Remotion guidance for React projects, from animation and audio to compositions and video parameters. Use it while building or editing Remotion code.
CX Codex +1
1,500installs
nextjs-developer skill Configures Next.js 14+ application architecture using App Router, React Server Components, and Server Actions. Useful when setting up SSR streaming, SEO metadata, and Vercel deployments.
CX Codex +1
5,800installs
react-expert skill A skill for React 18+, Next.js App Router, and create-react-app work. It writes components and hooks, debugs rendering, and migrates class components to functions.
CX Codex +1
5,500installs
react-nextjs-development skill Walks a React or Next.js 14+ build through eight phases, from scaffolding to a Vercel deploy. Handy when a project starts from scratch or moves to the App Router.
CX Codex +1
2,000installs
react-pdf skill Renders PDF documents from JSON specs using @react-pdf/renderer. Use it when you need to build invoices, reports, or forms programmatically from structured data.
CX Codex +1
2,300installs
zustand skill This skill integrates Zustand into json-render to sync application state. Use it when your project already relies on Zustand and you need to connect it with components rendered by json-render.
CX Codex +1
1,900installs
tamagui skill Teaches coding agents Tamagui v3 flat style grammar and token conventions. It guides cross-platform UI generation for web and native.
CX Codex +1
595installs
frontend-dev-guidelines skill Sets strict React and TypeScript conventions for feature structure, Suspense data fetching, MUI styling, and performance-focused reviews.
CX Codex +1
1,500installs
react19-test-patterns
official skill A migration reference for updating test files to work with React 19. Use it when replacing removed test utilities or revising StrictMode call-count assertions.
1,200installs
remotion skill A skill that turns JSON timeline specs into ready-made video compositions via Remotion. Use it when you need to generate videos programmatically or assemble video clip catalogs from data.
CX Codex +1
1,700installs
kumo-design skill Cloudflare product design rules for coding agents: guides layout, typography, dialogs, and animations in Kumo UI dashboards.
CX Codex +1
1,500installs
react19-concurrent-patterns
official skill Preserves React 18 concurrent patterns during React 19 migrations and guides the adoption of use(), useOptimistic, and Actions.
1,100installs
frontend-developer skill Guides an agent through React and Next.js interface work, from responsive components to client-side state and accessibility. Use it when building pages or fixing UI issues.
CX Codex +1
1,300installs
radix-ui-design-system skill Builds accessible design systems and headless UI components with Radix UI primitives. Useful for custom component libraries and WCAG 2.1 compliance.
CX Codex +1
1,300installs
write-example skill Guides coding agents through creating SDK examples for tldraw, enforcing folder naming, frontmatter fields, and React component conventions.
CX Codex +1
445installs
zustand-5 skill Zustand 5 state management patterns for Claude Code: basic stores, selectors, persist middleware, and slice composition. Prevents unnecessary re-renders and keeps state logic clean.
CX Codex +1
911installs
react-email skill Turns JSON email specs into HTML or plain-text output with React Email. Use it for email catalogs, generated specs, and transactional message templates.
CX Codex +1
1,400installs
image-to-ui skill Turn a screenshot, mockup, or sketch into working interface code. The skill views the image, reproduces it exactly in code, then renders and compares to fix any mismatches.
CX Codex +1
63,500installs
react19-source-patterns
official skill A reference for moving React source files to React 19, covering API changes, refs, context, and props. Useful during an existing project upgrade.
967installs
frontend-ui-dark-ts skill Build dark-themed React interfaces with Tailwind CSS and Framer Motion. It guides dashboard, admin panel, and data-dense UI styling.
CX Codex +1
1,100installs
react-joyride skill Teaches the agent to create step-by-step tours and onboarding flows in React apps using React Joyride v3.
CX Codex +1
686installs
feature-sliced-design skill This skill helps organize frontend code with Feature-Sliced Design and check import boundaries. Use it when creating or migrating a project.
CX Codex +1
23,600installs
react-audit-grep-patterns
official skill Verified grep pattern library for auditing React projects before upgrading to React 18.3.1 or 19. It spots deprecated APIs and syntax breaking changes.
854installs
libraries-dev skill Selects and integrates Libraries.dev React UI effects for AI interfaces, covering loaders, voice glows, animated borders, and bot avatars.
CX Codex +1
1,000installs
create-mcp-app skill Walks the agent through building an MCP App: an MCP tool paired with an HTML resource whose UI the host renders next to the tool result.
CX Codex +1
2,700installs
xstate skill Teaches AI assistants how to hook @xstate/store into json-render's state interface. Useful when driving dynamic UI layouts with an XState atom.
CX Codex +1
1,100installs
jotai skill Turns a Jotai atom into json-render's state backend: install the packages, wrap the atom, share one store with your app.
CX Codex +1
1,100installs
redux skill A Redux adapter for json-render: it points the renderer at a store slice instead of its own state. Useful when app state already lives in Redux.
CX Codex +1
1,100installs
react18-dep-compatibility
official skill Checks minimum dependency versions for React 18.3.1 and React 19. Use it during React upgrades and when resolving peer dependency conflicts.
764installs
react-19 skill Skill for React 19 with React Compiler: no manual memoization, server components first, ref as a prop.
CX Codex +1
671installs
react18-batching-patterns
official skill Diagnoses and fixes React 18 automatic batching bugs in class components. Useful when upgrading from React 17 breaks state assertions or async flows.
754installs
81–120 of 649
