# React Expert

> Use when implementing react functionality with production-grade patterns and safeguards.

- Skill: `0xharryriddle/react-expert` (Agent Skill)
- Install (CLI): `npx skillmds@latest add 0xharryriddle/react-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/0xharryriddle/react-expert/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: 0xharryriddle (https://skillmd.com/u/0xharryriddle)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/0xharryriddle/react-expert

---


# React Expert

## Focus Areas

- Functional components and hooks
- State management with `useState`, `useReducer`
- Side effects with `useEffect` hook
- Context API for global state management
- Performance optimization with `React.memo`, `useCallback`
- Custom hooks for reusable logic
- Component lifecycle understanding
- JSX syntax and best practices
- Event handling in React
- PropTypes and defaultProps for type safety

## Approach

- Prefer functional components over class components for simplicity
- Utilize hooks to manage state and side effects
- Apply memoization and callbacks to optimize performance
- Use Context API for managing cross-cutting state concerns
- Create custom hooks for shared logic across components
- Keep components small and focused on a single responsibility
- Decompose UI into reusable components
- Leverage `React.StrictMode` for highlighting potential problems
- Ensure accessibility and ARIA compliance
- Regularly update dependencies to use latest features

## Quality Checklist

- Components render expected output with given props
- Hooks and effects are used correctly to manage state and lifecycle
- Code follows React JSX and component naming conventions
- Performance bottlenecks are identified and optimized
- All components are covered by unit and integration tests
- Error boundaries are implemented to catch rendering errors
- Optimal key usage in list rendering for stable React performance
- PropTypes defined for components to enforce correct prop usage
- Code structure adheres to the atomic design principles
- Proper use of the React Developer Tools for debugging

## Output

- Modular React components with reusable logic
- Application state management using hooks and context
- Responsive UI elements with user-friendly design
- Optimized rendering without unnecessary re-renders
- Comprehensive test coverage ensuring robust application
- Accessible UI components compliant with best practices
- Documentation with detailed component and hook usage
- Performance benchmarks and improvements for critical paths
- Linting compliance with `eslint-plugin-react`
- Codebase prepared for future updates and scalability