web-component-design

Modern framework patterns for building reusable, maintainable UI components across React, Vue, and Svelte.

- Covers three composition strategies: compound components, render props, and slots, with framework-specific examples and use cases

- Compares five CSS-in-JS solutions (Tailwind, CSS Modules, styled-components, Emotion, Vanilla Extract) with guidance on when to use each

- Includes component API design principles, accessibility best practices, and patterns for controlled/uncontrolled components

- Provides production-ready code examples for React compound components, Vue 3 composables, and Svelte 5 runes with context management

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 component composition patterns

- Choosing and applying CSS-in-JS solutions

- Building accessible, responsive UI components

- Creating consistent component APIs across a codebase

- Refactoring legacy components into modern patterns

- Implementing compound components or render props

Core Concepts

1. Component Composition Patterns

Compound Components: Related components that work together