# Design Reusable UI Components

Frontend teams need reusable components with clear APIs, consistent styling, and accessible behavior. This skill guides React, Vue, and Svelte patterns for component libraries and design systems.

## Install

```bash
npx skillstore add wshobson/web-component-design
```

## Metadata

- Status: approved
- Slug: wshobson-web-component-design
- Skillstore revision: r1
- Version status: missing
- Tree hash: ed94dbc4a06193fcf015c22dd4a172072bff43e4b06b0690c86874611ed762f8
- Author: wshobson
- GitHub username: wshobson
- License: MIT
- Repository: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/web-component-design/
- Ref: 64ca8af0f54a325752f08bd54e52151061ea659a
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network, scripts
- Quality score: 75
- Public page: https://skillstore.pages.dev/skills/wshobson-web-component-design
- Manifest: https://skillstore.pages.dev/api/skills/wshobson-web-component-design/manifest

## Capabilities

- Explains compound components, render props, slots, and controlled versus uncontrolled patterns.
- Shows React, Vue, and Svelte examples for reusable component architecture.
- Compares CSS Modules, Tailwind CSS, styled-components, Emotion, and Vanilla Extract.
- Covers ARIA roles, keyboard handling, focus traps, live regions, and form errors.
- Discusses theming, code splitting, and critical CSS extraction for component libraries.
- Provides guidance for prop naming, variants, slots, and style overrides.

## Use Cases

- Build Design System Components: Create shared buttons, tabs, forms, and overlays with consistent APIs and accessibility behavior.
- Refactor Framework Components: Move legacy React, Vue, or Svelte components toward composition patterns and simpler prop contracts.
- Select Styling Strategy: Compare CSS Modules, Tailwind, styled-components, Emotion, and Vanilla Extract before standardizing a UI stack.

## Prompt Templates

### Plan Basic Components

```
Explain component composition choices for a reusable button, card, and modal in my React app. Recommend clear props and accessibility checks.
```

### Review Component API

```
Review this component API for a design system. Identify prop conflicts, composition opportunities, and naming changes for long-term reuse.
```

### Design Compound Pattern

```
Design a compound component pattern for tabs with controlled and uncontrolled usage. Include accessibility states and framework tradeoffs.
```

### Plan Framework Library

```
Plan a multi-framework component library for React, Vue, and Svelte. Compare styling strategy, theming, API consistency, and migration risk.
```

## Limitations

- Focuses on component architecture, not full app routing or backend behavior.
- Examples require adaptation to project conventions and dependencies.
- Accessibility guidance still needs manual testing with keyboards and assistive tools.
- Does not execute build tools, install packages, or validate bundle output.

## Best Practices

- Start with semantic HTML, keyboard behavior, and ARIA only where it adds meaning.
- Prefer composition when a prop list becomes difficult to document or test.
- Keep styling tokens and component states consistent across frameworks.

## Anti Patterns

- Do not add props for every visual exception before checking composition.
- Avoid copying examples without matching your project dependencies and browser targets.
- Do not treat CSS-in-JS or utility classes as substitutes for API design.

## Security Audit

- Audited at: 2026-07-08T12:06:05.799\+00:00
- Summary: AI review found the static alerts are false positives from markdown examples, TypeScript template literals, accessibility key handling, local imports, and documentation links. No prompt injection, data exfiltration intent, shell execution, or secret material was found in the referenced files.

## Stats

- Views: 347
- Downloads: 26
- Favorites: 0
- Popularity score: 0