# React Mastery

> 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, o…

- **Type:** Skill
- **Install:** `agentstack add skill-futurejj-claude-skills-react-mastery`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [FutureJJ](https://agentstack.voostack.com/s/futurejj)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [FutureJJ](https://github.com/FutureJJ)
- **Source:** https://github.com/FutureJJ/claude-skills/tree/main/skills/react-mastery

## Install

```sh
agentstack add skill-futurejj-claude-skills-react-mastery
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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:

1. **Server or Client?** Default to Server Components. Use Client only when you need interactivity, browser APIs, or state.
2. **State scope?** Local state → `useState`. Shared across siblings → lift up or context. Global/async → Zustand or TanStack Query.
3. **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 |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [FutureJJ](https://github.com/FutureJJ)
- **Source:** [FutureJJ/claude-skills](https://github.com/FutureJJ/claude-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-futurejj-claude-skills-react-mastery
- Seller: https://agentstack.voostack.com/s/futurejj
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.