inertia-react-development
Develops Inertia.js v2 React client-side applications. Activates when creating React pages, forms, or navigation; using <Link>, <Form>, useForm, or router; working with deferred props, prefetching, or polling; or when user mentions React with Inertia, React pages, React forms, or React navigation.
app-store-preflight-compliance
Pre-submission compliance scanner workflow for Apple App Store apps. Use when reviewing iOS, macOS, tvOS, watchOS, or visionOS projects (Swift, Objective-C, React Native, Expo) for App Store rejection risks, submission readiness, privacy compliance, or guideline violations.
Marketgenius
Our free Marketgenius investment tools as live, interactive React MCP Apps.
Shadcn Admin Kit Development Guide
Shadcn Admin Kit is a component library for building admin/CRUD applications using React, TypeScript, and shadcn/ui. It provides 98+ pre-built components on top of **ra-core** (from react-admin), combining react-admin's proven data layer with modern shadcn/ui components styled via Tailwind CSS. Befo
npm-library-setup
Comprehensive guidance on setting up npm libraries with package.json, with a preference for ES Modules (ESM). Use when setting up npm packages, configuring ESM, TypeScript packages, or React component libraries.
Io.Github.MananSingh2001/Figma React
An MCP server that converts Figma designs into React code.
react-native-testing
Write tests using React Native Testing Library (RNTL) v13 and v14 (`@testing-library/react-native`). Use when writing, reviewing, or fixing React Native component tests. Covers: render, screen, queries (getBy/getAllBy/queryBy/findBy), Jest matchers, userEvent, fireEvent, waitFor, and async patterns. Supports v13 (React 18, sync render) and v14 (React 19+, async render). Triggers on: test files for React Native components, RNTL imports, mentions of "testing library", "write tests", "component tests", or "RNTL".
install-wallet-ui-react-native
Use when setting up Wallet UI in a new or existing Expo application. Guides selection between modern @solana/kit (Recommended) or legacy @solana/web3.js.
devup-ui
Zero-runtime CSS-in-JS preprocessor for React. Transforms JSX styles to static CSS at build time. TRIGGER WHEN: - Writing/modifying Devup UI components (Box, Flex, Grid, Text, Button, etc.) - Using styling APIs: css(), globalCss(), keyframes() - Configuring devup.json theme (colors, typography, extends) - Setting up build plugins (Vite, Next.js, Webpack, Rsbuild, Bun) - Debugging "Cannot run on the runtime" errors - Working with responsive arrays, pseudo-selectors (_hover, _dark, etc.) - Using polymorphic `as` prop or `selectors` prop - Working with @devup-ui/components (Button, Input, Select, Toggle, etc.)
smoothui-component-craft
Create, improve, fix, or review SmoothUI components with production-quality animations, accessibility, and performance. Orchestrates interface-craft, web-design-guidelines, rams, and vercel-react-best-practices skills for high-quality output. Use when the user wants to build a new component, add a variant, improve an existing component, fix a component bug, or review component quality in the SmoothUI project. Triggers on "create component", "build component", "new component", "add component", "improve component", "fix component", "review component", "add variant", "refactor component", or any component work in the smoothui monorepo.
loro
Comprehensive guide for using Loro across document modeling, synchronization, versioning, rich text editors, app-state mirroring, performance tradeoffs, and wasm bindings. Use when Codex needs to work with `loro-crdt`, `loro`, `loro-prosemirror`, `loro-mirror`, or `crates/loro-wasm` for: (1) Choosing CRDT container types and document structure, (2) Designing sync, persistence, checkout, or history workflows, (3) Integrating rich-text editors and stable selections, (4) Mirroring app state with schemas and React, (5) Reasoning about versions, events, import status, or Inspector output, or (6) Maintaining the WASM binding layer.
agentation
Add Agentation visual feedback toolbar to any React project
build-frontend
Builds the Fake Survey Generator React frontend with Vite and TypeScript. Use this skill when frontend code changes need to be compiled and validated for TypeScript errors. This skill orchestrates the npm build command and reports build errors.
migrate-to-rsbuild
Migrate webpack, Vite, create-react-app (CRA/CRACO), or Vue CLI projects to Rsbuild.
agents-sdk
Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
uncodixfy
Prevents generic AI/Codex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.
github-actions
GitHub Actions workflow patterns for React Native iOS simulator and Android emulator cloud builds with downloadable artifacts. Use when setting up CI build pipelines or downloading GitHub Actions artifacts via gh CLI and GitHub API.
gesture-handler-3-migration
Migrates files containing React Native components which use the React Native Gesture Handler 2 API to Gesture Handler 3.
skillboss
Multi-AI gateway for fullstack apps. Build/deploy websites, React apps, SaaS, ecommerce to Cloudflare Workers. DB (D1/KV/R2), Stripe payments/subscriptions/checkout, auth (login, OAuth, OTP), AI image/audio/video/TTS generation, UI generation (Google Stitch), email, presentations/slides, web scraping/search, CEO interviews/quotes, document parsing/extraction, SMS verification, serverless deploy/API/webhook.
add-hook
Step-by-step guide for adding a new React hook to the shadcn-hooks project. Use when the user wants to create, add, or implement a new hook in this repository.
React Native New Architecture Migration Skill
This skill audits a bare React Native project and produces a structured `MIGRATION_AUDIT.md` report. It does NOT rewrite code â it identifies what needs to change, classifies severity, and gives the developer a clear, prioritized plan.
zustand-state-management
Build type-safe global state in React with Zustand. Supports TypeScript, persist middleware, devtools, slices pattern, and Next.js SSR with hydration handling. Prevents 6 documented errors. Use when setting up React state, migrating from Redux/Context, or troubleshooting hydration errors, TypeScript inference, infinite render loops, or persist race conditions.
extract-errors
Use when adding new error messages to React, or seeing "unknown error code" warnings.
review-react
React code review guidelines covering Rules of React, re-render optimization, rendering performance, and advanced patterns. Activates when writing, reviewing, or refactoring React components, hooks, or state management code.
Data Table Filters
A shadcn registry for building filterable, sortable data tables with infinite scroll and virtualization. Start with the core block, then extend with optional blocks for command palette, cell renderers, sheet panels, store adapters, schema generation, Drizzle ORM helpers, and React Query integration.
react-router-data-mode
Build React applications using React Router's data mode with createBrowserRouter and RouterProvider. Use when working with route objects, loaders, actions, Form, useFetcher, or pending/optimistic UI without the Vite plugin.
react-doctor
Run after making React changes to catch issues early. Use when reviewing code, finishing a feature, or fixing bugs in a React project.
component-gen
Generate React components
react-developer
React and OpenTUI best practices for building clean, maintainable, performant TUI applications using Feature-Sliced Design architecture. ALWAYS use when working with React/OpenTUI/TUI: (1) Creating or modifying ANY React/OpenTUI components (.tsx files), (2) Organizing code into FSD layers (app/pages/widgets/features/entities/shared), (3) Writing custom hooks or React components, (4) Managing state with Jotai or TanStack Query, (5) Building CLI/TUI/terminal interfaces with OpenTUI, (6) Creating page components, widget components, feature components, or UI components, (7) Structuring React applications with FSD architecture, (8) Any React/OpenTUI development task requiring architectural or code quality guidance. Provides component patterns, hooks best practices, state management strategies, performance optimization, FSD layer organization, and OpenTUI-specific TUI patterns. Auto-triggers for all .tsx files and FSD structure work.
ionic-skills
Ionic Capacitor mobile app development with Angular, React, or Vue. RevenueCat payments, AdMob ads, i18n localization, onboarding flow, paywall, and Ionic Tabs navigation.
Metricui
React dashboard components — API lookup, code generation, and prop validation for AI tools.
react-render-types-composition
Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types. Use when: (1) writing React components that need @renders JSDoc annotations, (2) building a design system with enforced component composition (e.g., Menu only accepts MenuItem), (3) deciding which @renders modifier to use (required, optional, many, unchecked), (4) creating wrapper or transparent components, (5) annotating slot props like children/header/footer, (6) using render chains, union types, or type aliases with @renders, or (7) building app layouts that consume a @renders-annotated design system.
shadcn-designer
Guide for building UIs with shadcn/ui components. Use when (1) creating or styling React components, (2) working with UI elements like buttons, inputs, selects, checkboxes, dialogs, sheets, popovers, tooltips, cards, tables, tabs, accordions, menus, dropdowns, badges, alerts, toasts, forms, calendars, carousels, sidebars, or any other UI component, (3) user mentions "shadcn", "ui components", or asks about component usage, (4) editing files in components/ui directory.
react:components
Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
Streamdown
Streaming-optimized React Markdown renderer. Drop-in replacement for `react-markdown` with built-in streaming support, security, and interactive controls.
tdesign-component-style
This skill should be used when developing or modifying styles for TDesign React components. It provides guidance on BEM naming conventions, CSS Variables usage, state classes, and the relationship between component code and common submodule styles.
koota
Real-time ECS state management for TypeScript and React. Use when the user mentions koota, ECS, entities, traits, queries, or building data-oriented applications.
typescript-react-patterns
Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging, and code review. Use when the user works with TypeScript in React or Next.js: type errors, Props design, generics, API typing, SSR/CSR boundaries, hydration issues, form validation, state management, performance, or code review. Also use for "how should I type this?", "why does this type error happen?", or any architectural decision involving TypeScript in a frontend context.
app-store-review
Evaluates code against Apple's App Store Review Guidelines. Use this skill when reviewing iOS, macOS, tvOS, watchOS, or visionOS app code (Swift, Objective-C, React Native, or Expo) to identify potential App Store rejection issues before submission. Triggers on tasks involving app review preparation, compliance checking, or App Store submission readiness.
react-native-logs-cli
Use rn-logs to read React Native Metro logs via CDP without MCP overhead. Default output is plain text and safe for non-interactive agent runs.
opentui
Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing.
Motion Dev Animations
> **Motion.dev** - 10M+ downloads/month, successor to Framer Motion > 120fps GPU-accelerated animations for React, Next.js, Svelte, Astro, Vue
ui-restructure
Solves UI lock-in. Reverse engineers your existing UI, strips all layout/token decisions, preserves every hook, handler, and API call untouched, then rebuilds the UI from scratch with a fresh design system. Use /ui-restructure to fully redesign, --style apple|linear|minimal|dashboard for named styles, --mode layout|theme|grid for partial rebuilds, --god-mode to redesign from the user's perspective using 100-user mindset simulation and 6 UX principles, --keep-tokens to preserve your token system, --prompt for custom redesigns. Applies mandatory world-class polish: spring motion, 5-state micro-interactions, 8pt spacing grid, WCAG accessibility. Supports Next.js, React, Vue 3, Tailwind, CSS Modules, styled-components, shadcn.
ast-index
This skill should be used when the user asks to "find a class", "search for symbol", "find usages", "find implementations", "search codebase", "find file", "class hierarchy", "find callers", "module dependencies", "unused dependencies", "project map", "project conventions", "project structure", "what frameworks", "what architecture", "find Perl subs", "Perl exports", "find Python class", "Go struct", "Go interface", "find React component", "find TypeScript interface", "find Rust struct", "find Ruby class", "find C# controller", "find Dart class", "find Flutter widget", "find mixin", "find Scala trait", "find case class", "find object", "find PHP class", "find Laravel model", "find PHP trait", or needs fast code search in Android/Kotlin/Java, iOS/Swift/ObjC, Dart/Flutter, TypeScript/JavaScript, Rust, Ruby, C#, Scala, PHP, Perl, Python, Go, C++, or Protocol Buffers projects. Also triggered by mentions of "ast-index" CLI tool.
emilkowal-animations
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
react-native-ai-skills
Provides integration recipes for the React Native AI @react-native-ai packages that wrap the Llama.rn (Llama.cpp), MLC-LLM, Apple Foundation backends. Use when integrating local on-device AI in React Native, setting up providers, model management.
rozenite-agent
Skill giving access to React Native Devtools and Rozenite plugins.
a11y-audit
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines.
assistant-ui
Add, configure, and integrate assistant-ui components in React apps. Use when developers ask to add a chat thread, set up a runtime, integrate with AI SDK, configure tools, or build AI chat interfaces with assistant-ui.
components-build
Build modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.