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.
flow skill Runs Flow type checking in a React project and reports errors with file locations. Useful when you edit code and don't want to look up the right renderer flag each time.
CX Codex +1
1,100installs
nextjs-app-router-patterns skill This skill covers Next.js App Router patterns for rendering, routing, and data fetching. Use it when starting an App Router project or moving from Pages Router.
CX Codex
32,529installs
react skill This skill turns json-render JSON specs into React component trees. Use it when building JSON-driven UIs or defining a component catalog for generated specs.
CX Codex +1
16,300installs
chakra-ui-builder skill Build responsive, accessible interfaces with Chakra UI v3, add the library to a project, and shape its theme. Useful for components, pages, and layouts.
CX Codex +1
3,500installs
frontend-design skill The skill picks an aesthetic direction before the agent writes any code. Useful when you want a landing page, dashboard or component that does not look auto-generated.
CX Codex +1
3,700installs
ai-elements skill React component library for AI interfaces: messages, conversation history, prompt inputs, tool call displays. Built on shadcn/ui.
CX Codex +1
20,400installs
agentation skill Adds a visual feedback toolbar to a Next.js project and, on request, wires it to your coding agent over MCP.
CX Codex +1
13,600installs
chakra-ui-refactor skill Reviews components against Chakra UI v3 patterns and converts markup from HTML, Tailwind, or styled-components. Useful for UI refactoring and accessibility audits.
CX Codex +1
2,800installs
figma-code-connect-components
official skill Maps published Figma design components to codebase implementations using Figma Code Connect. It inspects component properties and pairs them with repository files.
CX Codex +1
2,700installs
power-apps-code-app-scaffold
official skill Scaffolds a Power Apps Code App using React and TypeScript. Use it to start a project with a Power Platform connector.
8,700installs
react-vite-dashboard
official skill This skill converts Stitch designs into production React and Vite dashboards. It maps tokens from DESIGN.md and integrates async data fetching with TanStack Query.
CX Codex +1
5,500installs
opentui skill Gives your agent OpenTUI reference documentation: Core, React and Solid bindings, components, application APIs, testing and deployment.
CX Codex +1
3,700installs
frontend-design skill Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards.
CX Codex +1
4,800installs
interaction-design skill This skill helps design microinteractions, transitions, and feedback states. Use it when polishing a UI or building loading and gesture patterns.
CX Codex
16,146installs
design-system-patterns skill Guides the design of design tokens, theme switching, and component library architecture. Use it when establishing shared UI foundations for a project.
CX Codex
15,953installs
next skill Converts JSON specs into Next.js apps with routes, layouts, SSR, and metadata. Handy when building AI-generated multi-page apps with @json-render/next.
CX Codex +1
8,600installs
react-best-practices skill 27 React performance and quality rules, priority-ordered: from eliminating request waterfalls to strict typing.
CX Codex +1
2,800installs
devtools skill Debug panel for json-render apps: component tree, state editor, actions log, streaming patches, and element picker.
CX Codex +1
8,300installs
react-state-management skill Helps choose and structure React state management for local, global, server, URL, and form data.
CX Codex
15,286installs
chakra-ui-migrate skill A migration skill that guides projects from Chakra UI v2 to v3. It handles package cleanups, codemods, provider setup, and updated component props.
CX Codex +1
1,800installs
directives skill Pre-built directives for json-render: formatting, math, string handling, i18n. Wire them into your catalog and renderer with one import.
CX Codex +1
8,000installs
e2e-tests-studio skill A skill that automatically generates Playwright E2E tests when you modify playground components. Tests product behavior—data persistence, feature workflows, action side effects—not just UI states.
CX Codex +1
2,500installs
typescript-write skill Skill for writing and editing TypeScript and JavaScript code to Metabase standards. Enforces strict typing without any and requires type checking before completion.
CX Codex +1
2,100installs
web-component-design skill This skill helps design reusable components for React, Vue, and Svelte. Use it for UI libraries, design systems, or legacy component refactors.
CX Codex
13,167installs
premium-frontend-ui
official skill Guides GitHub Copilot when building animated web interfaces. Use it for a visually distinctive landing page or interactive portfolio.
4,900installs
react-modernization skill This skill upgrades React codebases, moves class components to hooks, and guides React 18 adoption. Use it when a legacy React app needs a structured migration.
CX Codex
12,625installs
opentui skill Guides coding agents through building OpenTUI terminal interfaces, from choosing Core, React, or Solid to handling input, animations, and tests.
CX Codex +1
64,500installs
material-ui-nextjs skill A skill for wiring Material UI into Next.js: SSR, Emotion cache, next/font, CSS layers, Link, and useSearchParams. Use it when setting up or debugging MUI in a Next.js app.
CX Codex +1
727installs
presentation skill Turns a technical-spec directory into an interactive web presentation. Use it when a specification needs a shareable deck with a clear narrative.
CX Codex +1
3,500installs
dependency-upgrade skill This skill plans major dependency upgrades, checks compatibility, and stages changes with tests. Use it for framework updates or library breaking changes.
CX Codex
11,079installs
web-artifacts-builder skill Builds HTML artifacts for claude.ai with React and Tailwind — Anthropic's reference workflow for embeddable interfaces.
CX Codex +1
2,800installs
mcp skill This skill helps build MCP servers that render interactive json-render UIs in Claude, ChatGPT, Cursor, and VS Code.
CX Codex +1
5,800installs
artifacts-builder skill A skill designed for generating multi-component claude.ai HTML artifacts. It uses React and Tailwind CSS alongside shadcn/ui components.
CX Codex +1
2,800installs
design-motion-principles skill Builds or audits UI motion with rules based on project context and interaction frequency. Use it for transitions, hover states, and micro-interactions.
CX Codex +1
12,700installs
magic-ui skill The magic-ui skill teaches Claude Code to work with Magic UI components in React and Next.js: select animations, install via shadcn registry, and check accessibility.
CX Codex +1
1,200installs
material-ui-theming skill Skill for building and managing Material UI themes: palettes, color schemes, CSS variables, light/dark switching, and TypeScript augmentation. Use it when designing your app's visual system or implementing theme customization.
CX Codex +1
607installs
improve-react skill Audits an entire React codebase with React Doctor and drafts self-contained implementation plans for other agents. Operates in read-only mode.
CX Codex +1
2,500installs
expo-dom skill Runs web code in a webview on native platforms and renders as-is on web. Lets you use web libraries like recharts or react-syntax-highlighter in Expo without rewriting.
CX Codex +1
21,000installs
streamdown skill Renders Markdown in React components with streaming support for AI agents, Shiki syntax highlighting, Mermaid diagrams, and KaTeX math rendering.
CX Codex +1
3,200installs
debugging-streamlit skill Runs Streamlit full-stack debugging with hot-reload, dedicated session logs, and Playwright UI screenshot helpers for testing frontend and backend changes.
CX Codex +1
493installs
41–80 of 649
