react-patterns
Apply best practices and design patterns to React components and state.
Install
mkdir -p .claude/skills/react-patterns-lewislpz && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12657" && unzip -o skill.zip -d .claude/skills/react-patterns-lewislpz && rm skill.zipInstalls to .claude/skills/react-patterns-lewislpz
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when implementing or reviewing React components, hooks, composition, state placement, rendering, or React performance.Key capabilities
- →Detect React version and environment
- →Identify ownership of state, effects, async data, and errors
- →Prefer composition and colocated state
- →Keep effects synchronized with external systems
- →Profile before performance optimization
How it works
The skill analyzes the React environment, identifies ownership of various concerns, and applies React principles to guide composition, state management, and performance optimization.
Inputs & outputs
When to use react-patterns
- →Refactoring a complex component
- →Deciding where to place state
- →Optimizing React performance
- →Reviewing component architecture
About this skill
React Patterns
Boundaries
Use only after React is confirmed. Use frontend guidance for broader UX and TypeScript guidance for advanced type or tooling problems.
Operating Loop
- Detect React version, rendering environment, compiler use, framework conventions, state libraries, and test setup.
- Identify ownership of state, effects, async data, and errors.
- Prefer composition and colocated state; extract only when reuse or complexity justifies it.
- Keep effects synchronized with external systems rather than using them for derived state.
- Profile before performance optimization and verify user-visible behavior.
Decision Rules
- Follow the Rules of Hooks and preserve stable ownership boundaries.
- Choose local, lifted, contextual, server, or global state from actual scope.
- Treat memoization as a targeted optimization, especially when a compiler is active.
- Provide error recovery and preserve user input where practical.
- Test behavior and accessibility rather than component internals.
Optional Reference
Load legacy-guide.md for a compact pattern catalog after confirming its assumptions match the repository.
When not to use it
- →When the project does not use React
- →When the problem is a broader UX issue
- →When the problem is an advanced type or tooling problem
Limitations
- →Use only after React is confirmed
- →Use frontend guidance for broader UX
- →Use TypeScript guidance for advanced type or tooling problems
How it compares
This skill provides structured guidance based on React patterns and principles, offering a systematic approach to component design and optimization compared to ad-hoc development.
Compared to similar skills
react-patterns side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-patterns (this skill) | 0 | 2mo | No flags | Intermediate |
| frontend-code-review | 11 | 2mo | No flags | Advanced |
| next-best-practices | 0 | 3mo | No flags | Intermediate |
| frontend-developer | 0 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
frontend-code-review
langgenius
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
next-best-practices
pedronauck
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
frontend-developer
bonnguyenitc
Use when building web UI, designing component architecture, or reviewing frontend code — regardless of framework (React, Vue, Svelte, etc.)
react-best-practices
lokrain
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization,
Onboarding Flow Optimizer
jamiojala
Reshape onboarding sequences around progressive disclosure and measurable activation rather than generic first-run screens.
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.