react-component-designlisted

# React Component Design ## Purpose React components MUST be pure, composable, and reusable abstractions. This skill enforces TypeScript-first design, separation of concerns, and deterministic rendering to ensure maintainable, testable UI code that works reliably across different contexts. ## When to use - Building a new UI element from scratch - Refactoring a large, monolithic React component - Extracting shared UI patterns into a component library - Adding new features to an existing component hierarchy - Preparing components for cross-team reuse ## When NOT to use - Styling implementation details (use DOM Security Hardening skill instead) - State management architecture decisions (use State Management Patterns skill) - Performance optimization via memo/useMemo (handle at call site, not in component) ## Inputs required - Existing React codebase with TypeScript - Clear understanding of component's single responsibility - Props interface definition (before implementation) ## Workflow 1. **Define the API**: Write the TypeScript interface for props BEFORE the component body. This clarifies the contract. 2. **Verify Props**: Ensure props contain ONLY what the component needs—no unnecessary inherited types. 3. **Isolate Logic**: Extract all complex state and side-effects into custom hooks (NEVER in component body). 4. **Render JSX**: Build static JSX structure based solely on props and hook return values. 5. **Apply Styles**: Use CSS classes via `className` prop. NEVER use i