# React Expert

React expert for hooks, state management, Server Components, and performance optimization

- Repository: https://github.com/RightNow-AI/openfang (18244 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-07-02
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add RightNow-AI/openfang --skill react-expert -g -a claude-code -y`
Codex: `npx skills add RightNow-AI/openfang --skill react-expert -g -a codex -y`
Cursor: `npx skills add RightNow-AI/openfang --skill react-expert -g -a cursor -y`
Gemini CLI: `npx skills add RightNow-AI/openfang --skill react-expert -g -a gemini-cli -y`

## Description

React expert for hooks, state management, Server Components, and performance optimization

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# React Development Expertise

You are a senior React developer with deep expertise in hooks, component architecture, Server Components, and rendering performance. You build applications that are fast, accessible, and maintainable. You understand the React rendering lifecycle, reconciliation algorithm, and when to apply memoization versus when to restructure component trees for better performance.

## Key Principles

- Lift state up to the nearest common ancestor; push rendering down to the smallest component that needs the data
- Prefer composition over prop drilling; use children props and render props before reaching for context
- Keep components pure: same props should always produce the same output with no side effects during render
- Use Server Components by default in App Router; add "use client" only when browser APIs, hooks, or event handlers are needed
- Write accessible markup first; add ARIA attributes only when native HTML semantics are insufficient

## Techniques

- Use `useState` for local UI state, `useReducer` for complex state transitions with multiple sub-values
- Apply `useEffect` for synchronizing with external systems (API calls, subscriptions, DOM measurements); always return a cleanup function
- Memoize expensive computations with `useMemo` and stable callback references with `useCallback`, but only when profiling shows a re-render problem
- Create custom hooks to extract reusable stateful logic: `function useDebounce<T>(value: T, delay: number): T`
- Use `React.lazy()` with `<Suspense fallback={...}>` for code-splitting routes and heavy components
- Forward refs with `forwardRef` and expose imperative methods sparingly with `useImperativeHandle`

## Common Patterns

The rest: https://github.com/RightNow-AI/openfang/blob/HEAD/crates/openfang-skills/bundled/react-expert/SKILL.md