react-component-design

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 inline style={{...}}.
6. Export Type: Export both the component AND its Props interface for consumers.
7. Verify Size: Confirm file does NOT exceed 150 lines. If it does, extract sub-components.

Rules

• MUST be a pure function: identical props = identical output
• MUST export a strictly typed TypeScript interface named [ComponentName]Props
• MUST NOT exceed 150 lines per file (extract sub-components if larger)
• MUST NOT use inline styles (style={{...}})
• MUST NOT drill props more than 2 levels deep
• MUST NOT fetch data directly (use hooks or parent component)
• MUST support className prop for customization