---
id: sm-web-component-design
name: "web-component-design"
url: https://skills.yangsir.net/skill/sm-web-component-design
author: wshobson
domain: ai-frontend-engineering
tags: ["web-components", "custom-elements", "shadow-dom", "frontend-development", "reusable-ui"]
install_count: 13100
rating: 4.50 (22 reviews)
github: https://github.com/wshobson/agents
---

# web-component-design

> 探索前端Web组件设计，利用智能自动化和多智能体编排，构建可复用、高性能的模块化界面。

**Stats**: 13,100 installs · 4.5/5 (22 reviews)

## Before / After 对比

### 前端Web组件设计：从手动构建到智能自动化编排

## Readme

# 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

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

```
interface ButtonProps {
  variant?: "primary" | "secondary" | "ghost";
  size?: "sm" | "md" | "lg";
  isLoading?: boolean;
  isDisabled?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  children: React.ReactNode;
  onClick?: () => void;
}

```

**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";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        primary: "bg-blue-600 text-white hover:bg-blue-700",
        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",
        ghost: "hover:bg-gray-100 hover:text-gray-900",
      },
      size: {
        sm: "h-8 px-3 text-sm",
        md: "h-10 px-4 text-sm",
        lg: "h-12 px-6 text-base",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "md",
    },
  },
);

interface ButtonProps
  extends
    ComponentPropsWithoutRef<"button">,
    VariantProps<typeof buttonVariants> {
  isLoading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, isLoading, children, ...props }, ref) => (
    <button
      ref={ref}
      className={cn(buttonVariants({ variant, size }), className)}
      disabled={isLoading || props.disabled}
      {...props}
    >
      {isLoading && <Spinner className="mr-2 h-4 w-4" />}
      {children}
    </button>
  ),
);
Button.displayName = "Button";

```

## Framework Patterns

### React: Compound Components

```
import { createContext, useContext, useState, type ReactNode } from "react";

interface AccordionContextValue {
  openItems: Set<string>;
  toggle: (id: string) => void;
}

const AccordionContext = createContext<AccordionContextValue | null>(null);

function useAccordion() {
  const context = useContext(AccordionContext);
  if (!context) throw new Error("Must be used within Accordion");
  return context;
}

export function Accordion({ children }: { children: ReactNode }) {
  const [openItems, setOpenItems] = useState<Set<string>>(new Set());

  const toggle = (id: string) => {
    setOpenItems((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  return (
    <AccordionContext.Provider value={{ openItems, toggle }}>
      <div className="divide-y">{children}</div>
    </AccordionContext.Provider>
  );
}

Accordion.Item = function AccordionItem({
  id,
  title,
  children,
}: {
  id: string;
  title: string;
  children: ReactNode;
}) {
  const { openItems, toggle } = useAccordion();
  const isOpen = openItems.has(id);

  return (
    <div>
      <button onClick={() => toggle(id)} className="w-full text-left py-3">
        {title}
      </button>
      {isOpen && <div className="pb-3">{children}</div>}
    </div>
  );
};

```

### 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;
}

const TabsKey: InjectionKey<TabsContext> = Symbol("tabs");

// Parent component
const activeTab = ref("tab-1");
provide(TabsKey, {
  activeTab,
  setActive: (id: string) => {
    activeTab.value = id;
  },
});

// Child component usage
const tabs = inject(TabsKey);
const isActive = computed(() => tabs?.activeTab.value === props.id);
</script>

```

### Svelte 5: Runes

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

  let { variant = 'primary', size = 'md', onclick, children }: Props = $props();

  const classes = $derived(
    `btn btn-${variant} btn-${size}`
  );
</script>

<button class={classes} {onclick}>
  {@render children()}
</button>

```

## Best Practices

- **Single Responsibility**: Each component does one thing well

- **Prop Drilling Prevention**: Use context for deeply nested data

- **Accessible by Default**: Include ARIA attributes, keyboard support

- **Controlled vs Uncontrolled**: Support both patterns when appropriate

- **Forward Refs**: Allow parent access to DOM nodes

- **Memoization**: Use `React.memo`, `useMemo` for expensive renders

- **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

Weekly Installs4.0KRepository[wshobson/agents](https://github.com/wshobson/agents)GitHub Stars31.5KFirst SeenJan 20, 2026Security Audits[Gen Agent Trust HubPass](/wshobson/agents/web-component-design/security/agent-trust-hub)[SocketPass](/wshobson/agents/web-component-design/security/socket)[SnykPass](/wshobson/agents/web-component-design/security/snyk)Installed onopencode3.0Kclaude-code3.0Kgemini-cli3.0Kcodex2.8Kcursor2.7Kgithub-copilot2.5K

---
*Source: https://skills.yangsir.net/skill/sm-web-component-design*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-web-component-design/markdown*