web-component-design
Installation
Summary
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
SKILL.md
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