Agent skill · design visual · wshobson
web-component-design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
Why this skill is useful
Provides specific patterns and best practices for building reusable UI components that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-05. 38,570 stars on the source repository.
What this skill does
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 Render Props: Delegate rendering to parent Slots (Vue/Svelte): Named content injection points 2. CSS-in-JS Approaches Solution Approach Best For --------------------- ---------------------- --------------------------------- Tailwind CSS Utility classes Rapid prototyping, design systems CSS Modules Scoped CSS files Existing CSS, gradual adoption styled-components Template literals React, dynamic styling Emotion Object/template styles Flexible, SSR-friendly Vanilla Extract Zero-runtime Performance-critical apps 3. Component API Design Principles: Use semantic prop names (isLoading vs loading) Provide sensible defaults Support composition via children Allow style overrides via className or style Quick Start: React Component with Tailwind Framework Patterns React: Compound Components Vue 3: Composables Svelte 5: Runes Best Practices 1. Single Responsibility: Each component does one thing well 2. Prop Drilling Prevention: Use context for deeply nested data 3. Accessible by Default: Include ARIA attributes, keyboard support 4. Controlled vs Uncontrolled: Support both patterns when appropriate 5. Forward Refs: Allow parent access to DOM nodes 6. Memoization: Use React.memo, useMemo for expensive renders 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wshobson/web-component-design