Web Component Design

Build reusable, maintainable UI components using modern frameworks with clean composition patterns and styling approaches.

When to Use This Skill

• Designing reusable component libraries or design systems
• Implementing complex composition patterns (Compound Comps, Slots, Render Props)
• Choosing CSS-in-JS solutions (Tailwind, Styled Components)
• Building accessible, responsive UI
• Refactoring legacy components

Workflow

1. Define API: Design the Props interface (semantic naming, defaults).
2. Choose Strategy: Compound component vs Monolithic configuration?
3. Implement: Build structure, styles (CVA), and behavior.
4. Refine: Add Accessibility (ARIA) and Forward Refs.

Instructions