React Expert
Skill Verified ActiveUse when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.
To serve as a senior React specialist, offering expert advice and code examples for building robust, performant, and modern React applications.
Features
- Build new React components and features
- Implement state management (local, Context, Redux, Zustand)
- Optimize React performance
- Set up React project architecture
- Work with React 19 Server Components and hooks
Use Cases
- Developing new features in React 18+ applications
- Implementing state management solutions like Redux or Zustand
- Migrating class components to functional components with hooks
- Optimizing application performance and setting up architecture
Non-Goals
- Directly executing code or managing project setup outside of providing guidance
- Handling backend logic unrelated to React data fetching patterns
- Providing specific UI design implementation beyond code structure
Installation
First, add the marketplace
/plugin marketplace add jeffallan/claude-skills/plugin install claude-skills@fullstack-dev-skillsQuality Score
VerifiedSimilar Extensions
Gsap React
100Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
React Modernization
99Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
React State Management
99Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
Layout Audit
100Layout and spacing audit covering grid, spacing consistency, density, responsive behavior