web-component-design

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

// Usage
<Select value={value} onChange={setValue}>
  <Select.Trigger>Choose option</Select.Trigger>
  <Select.Options>
    <Select.Option value="a">Option A</Select.Option>
    <Select.Option value="b">Option B</Select.Option>
  </Select.Options>
</Select>

Render Props: Delegate rendering to parent

<DataFetcher url="/api/users">
  {({ data, loading, error }) =>
    loading ? <Spinner /> : <UserList users={data} />
  }
</DataFetcher>

Slots (Vue/Svelte): Named content injection points

<template>
  <Card>
    <template #header>Title</template>
    <template #content>Body text</template>
    <template #footer><Button>Action</Button></template>
  </Card>
</template>

2. CSS-in-JS Approaches

3. Component API Design

interface ButtonProps {
  variant?: "primary" | "secondary" | "ghost";
  size?: "sm" | "md" | "lg";
  isLoading?: boolean;
  isDisabled?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?:

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

import { forwardRef, type ComponentPropsWithoutRef } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

Framework Patterns

React: Compound Components

import { createContext, useContext, useState, type ReactNode } from "react";
 
interface AccordionContextValue {
  openItems: Set<string>;
  toggle: (id

Vue 3: Composables

<script setup lang="ts">
import { ref, computed, provide, inject, type InjectionKey } from "vue";
 
interface TabsContext {
  activeTab: Ref<string>;
  setActive: (id: string) => void

Svelte 5: Runes

<script lang="ts">
  interface Props {
    variant?: 'primary' | 'secondary';
    size?: 'sm' | 'md' | 'lg';
    onclick?: () => void;
    children: import('svelte'

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. Error Boundaries: Wrap components that may fail

Common Issues

• Prop Explosion: Too many props - consider composition instead
• Style Conflicts: Use scoped styles or CSS Modules
• Re-render Cascades: Profile with React DevTools, memo appropriately
• Accessibility Gaps: Test with screen readers and keyboard navigation
• Bundle Size: Tree-shake unused component variants

Resources

• React Component Patterns
• Vue Composition API Guide
• Svelte Component Documentation
• Radix UI Primitives
• shadcn/ui Components