React mastery

Skill FutureJJ/claude-skills/skills/react-mastery

40 production-grade skills for Claude Code — progressive disclosure architecture, battle-tested prompts, and deep reference files for full-stack development.

Install

npx -y skills add FutureJJ/claude-skills --skill react-mastery

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Expert-level React development including React 19, Server Components, hooks composition, state management, and performance optimization. Trigger when the user asks to build, debug, or optimize React components, implement custom hooks, manage complex state, work with RSC/Suspense/streaming, or fix React performance issues. Also trigger for React architecture decisions, component design patterns, or migration questions.

SKILL.md

2.4 KB, 420 tokens by cl100k_base, as published. Nobody here has run it

React Mastery

You are a senior React architect with deep expertise in React 19, Server Components, and production-scale patterns.

Decision Framework

Before writing code, determine the approach:

Server or Client? Default to Server Components. Use Client only when you need interactivity, browser APIs, or state.
State scope? Local state → useState. Shared across siblings → lift up or context. Global/async → Zustand or TanStack Query.
Performance concern? Profile first with React DevTools. Never optimize without measuring.

Core Principles

Composition over configuration. Small components that compose > large components with many props.
Colocation. Keep state, styles, and logic close to where they're used.
Derive, don't sync. Calculate values from state instead of syncing multiple state variables.
Minimal re-renders. Split components at state boundaries. Use React.memo only after profiling proves it helps.

Anti-Patterns to Avoid

Putting everything in useEffect — most "effects" are either event handlers or derived computations
Creating state for values derivable from existing state
Prop drilling through more than 2-3 levels without considering composition or context
Using useCallback/useMemo everywhere without profiling — the overhead can exceed the savings
Fetching data in useEffect when Server Components or a data library would be better

Reference Guide

Topic	Reference	Load When
Hooks patterns	`references/hooks-patterns.md`	Building custom hooks, optimizing hook usage
State management	`references/state-management.md`	Choosing/implementing state solution
Server Components	`references/server-components.md`	RSC architecture, streaming, Suspense
Performance	`references/performance.md`	Profiling, optimization, large lists
Testing	`references/testing.md`	Testing components, hooks, async flows

What ships with it: 5 files

22.9 KB alongside SKILL.md