css-animations
Create performant CSS animations, transitions, and motion design
data-fetching
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.
custom-renderer-implementation
Architect bespoke React renderers for non-DOM environments using the `react-reconciler` package.
high-performance-data-visualization
Render large datasets (charts, graphs) using Canvas/SVG/WebGL within React.
design-guide
Ensures every UI component looks modern and professional with clean, minimal design. Use when building ANY user interface element including buttons, forms, cards, layouts, web pages, or React/HTML artifacts. Provides spacing, typography, color, and interaction guidelines.
nuxt-tables
Table components with column builder pattern and XTable. Use when creating data tables, defining columns with custom cells, implementing row actions, or building reusable table configurations.
react-hooks
Apply when managing state, side effects, context, or refs in React functional components. **React 19+ Note**: React 19.x introduced new hooks for forms/actions (useActionState, useOptimistic, useFormStatus) and effect events (useEffectEvent in 19.2). Core hooks (useState, useEffect, useCallback, etc.) remain unchanged.
d3-interaction-animation
Use when creating interactive visualizations with transitions, animations, drag/zoom/brush behaviors, or DOM manipulation. Invoke for data binding with .join(), animated transitions, interactive behaviors, user input handling, or selection operations.
creating-layouts
Create React layout components for Inertia.js pages with TypeScript and AppHead. Use when creating layouts, wrapping pages, implementing navigation, or when user mentions layouts, authenticated layout, guest layout, or page wrappers.
webassembly-integration-patterns
Integrate high-performance Wasm modules into the React render cycle without blocking the main thread.
frontend-responsive
Implement responsive designs using Tailwind CSS v3 breakpoints and mobile-first development patterns for Next.js applications. Use this skill when creating responsive layouts with Tailwind breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:), implementing mobile-first CSS, building responsive navigation (mobile sidebar, desktop header), creating fluid grid layouts, handling touch-friendly interactions, optimizing images with next/image for different screen sizes, implementing responsive typography, or testing across viewport sizes with Playwright. This includes files in apps/blog/src/components/, packages/ui/src/components/layout/, any component using responsive Tailwind classes, and mobile/desktop navigation components. Apply when building layouts that must adapt across mobile, tablet, and desktop screen sizes.
vue-fundamentals
Master Vue.js core concepts - Components, Reactivity, Templates, Directives, Lifecycle
component-patterns
Implement advanced React component patterns including compound components, render props, and composition patterns. Use when building flexible, reusable component APIs.
shadcn-init
Setup shadcn/ui in React projects (Next.js, Vite, Astro). Use when initializing shadcn/ui, setting up Tailwind CSS v4, configuring path aliases, or when user mentions "setup shadcn", "install shadcn", "shadcn init", or starting a new shadcn project. NOT for adding components or customization.
animation-designer
Use when the user explicitly requests animations, transitions, or motion design for a web UI.
xpod-componentsjs
Xpod Components.js 变量和组件配置专家，处理 CLI 参数、变量解析、组件配置等问题
designing-frontend-patterns
Claude designs scalable React component architectures using compound components, custom hooks, and state machines. Use when building reusable UI systems or complex component APIs.
tsx-modular-component-pattern
Guide for outputting React/TSX components by prioritizing reusable sub-components, controlling length, and declaring them as const before the main component to ensure clear structure and maintainability.
radflow-component-create
Create components that work with RadFlow visual editor and component discovery. Use when building new UI components for projects using RadFlow.
streaming-ssr-hydration
Design streaming SSR pipelines with predictable hydration behavior and progressive interactivity.