web-component-design_skill

Overview

This skill teaches practical patterns for designing reusable UI components across React, Vue, and Svelte. It focuses on composition strategies, CSS-in-JS choices, accessible defaults, and consistent component APIs to build maintainable component libraries and design systems.

How this skill works

The skill explains composition patterns such as compound components, render props, and slots, and shows framework-specific implementations and code examples. It compares styling approaches (Tailwind, CSS Modules, styled-components, Emotion, Vanilla Extract) and shows API design principles and quick-start component examples to apply immediately.

When to use it

• Building a shared UI component library or design system
• Designing consistent, composable component APIs
• Implementing accessible, responsive UI components
• Refactoring legacy UI into modern patterns
• Choosing a CSS-in-JS approach for performance and scalability

Best practices

• Give each component a single responsibility and sensible defaults
• Use context or composables to avoid prop drilling for nested composition
• Prefer accessible-by-default patterns: ARIA, keyboard support, focus management
• Support both controlled and uncontrolled usage where it makes sense
• Expose style overrides via className/style and forward refs for DOM access
• Memoize heavy renders and add error boundaries around risky components

Example use cases

• Create a compound Select or Accordion using context to manage internal state
• Build a design system button with variants, sizes, loading state, and utility-driven styles
• Replace global CSS with CSS Modules or Vanilla Extract to avoid style conflicts in a large app
• Implement slots in Vue or Svelte for flexible card layouts with header/content/footer regions
• Provide a DataFetcher render-prop wrapper to centralize loading and error UX handling