react-engineering

This skill improves React code quality across components, apps, and UI systems. It focuses on engineering quality rather than purely visual styling.

Quick Start

1. Identify the runtime: React SPA, Next.js, Remix, Electron, or embedded component library.
2. Inspect the existing state model, routing, data fetching, styling system, and test setup first.
3. Prefer accessible components, local state by default, and clear effect boundaries.
4. Validate with the current test runner, type checker, and lint rules.

Core Rules

• Correctness, accessibility, and maintainability come before clever component patterns.
• Keep state close to where it is used.
• Prefer derived values over duplicated state.
• Effects should synchronize with external systems, not replace regular rendering logic.
• Follow existing compiler or framework guidance before adding useMemo or useCallback.

Focus Areas