ui-component-patterns_skill

Overview

This skill teaches how to build reusable, maintainable UI components using modern design patterns for React and TypeScript. It focuses on props API design, composition, render-props, custom hooks, performance optimizations, and accessibility. Use it when creating component libraries, design systems, or scalable frontend architectures. The guidance is practical and example-driven for real-world component development.

How this skill works

The skill inspects component responsibilities and prescribes a clear Props API with TypeScript interfaces and sensible defaults. It recommends composition patterns (compound components, polymorphic as prop), render-props/children-as-function for flexible rendering, and extracting logic into custom hooks. Performance guidance covers memoization, useCallback/useMemo, and avoiding inline objects to reduce unnecessary re-renders.

When to use it

• Building a reusable component library or design system
• Creating complex components with multiple variants (Button, Modal, Dropdown)
• Refactoring duplicated UI into single-responsibility components
• Implementing accessible components with proper aria and roles
• Scaling frontend architecture to reduce prop drilling and improve maintainability

Best practices

• Single responsibility: each component does one thing and keeps UI logic only
• Define Props with TypeScript interfaces and provide sensible defaults
• Prefer composition (children, compound components) over many props
• Extract business logic to custom hooks; keep components pure and presentational
• Avoid inline objects/functions in JSX; use useMemo/useCallback and React.memo
• Ensure accessibility: aria-*, role, keyboard support, and focus management

Example use cases

• A Button component with variant/size props, loading state, and HTML attribute passthrough
• A Card compound component exposing Card.Header, Card.Body, Card.Footer for composition
• A Dropdown that accepts items and a renderItem function for custom rendering
• A Modal paired with a useModal hook for open/close state and focus handling
• An Accordion using Context to coordinate active items without prop drilling