web-component-design skill (wshobson) for Claude Code: reusable UI components

web-component-design helps Claude build reusable UI components in React, Vue 3 and Svelte 5.

Installs: 13.4K; on skills.sh
Stars: 42.1K; on GitHub
Files: 3; besides SKILL.md
Updated: Oct 2026; last repo commit

web-component-design is a skill from wshobson/agents. Despite the name, it is about component libraries in React, Vue and Svelte, not the browser's Web Components standard. It loads when you design component APIs, build a design system or refactor old components.

SKILL.md covers composition patterns (compound components, render props, slots), five styling approaches (Tailwind CSS, CSS Modules, styled-components, Emotion, Vanilla Extract) and component API principles. It includes a React button built with Tailwind and class-variance-authority, plus examples for Vue 3 composables and Svelte 5 runes. The folder also holds three reference guides (SKILL.md does not point to them), and the skill bundles no scripts.

Good for

Frontend developers building a component library
Teams setting up a design system
Developers refactoring legacy components into modern patterns

Install web-component-design

Claude Code

Copy this prompt.

Install the web-component-design skill in Claude Code. Run this command:

npx skills add wshobson/agents --skill web-component-design

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Built from the package data we hold. Not yet tested by us. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

When to Use This Skill
Core Concepts
1. Component Composition Patterns
2. CSS-in-JS Approaches
3. Component API Design
Quick Start: React Component with Tailwind
Framework Patterns
React: Compound Components
Vue 3: Composables
Svelte 5: Runes
Best Practices
Common Issues

Key facts

Author: wshobson (GitHub account that owns the repo)
Source repo: wshobson/agents
Installs on skills.sh: 13,411 as of 2026-11-02
GitHub stars: 42,081 (whole repo) as of 2026-11-02
License: MIT
Last repo commit: 2026-10-30
Files: 4 files including SKILL.md (plus 3 files in references/: accessibility, component patterns, CSS styling)
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Compound components, render props and slots (Vue and Svelte).
Composition patterns
Tailwind CSS, CSS Modules, styled-components, Emotion and Vanilla Extract compared.
CSS-in-JS comparison
Typed props with semantic names, sensible defaults, children and style overrides.
Component API design
A Button using class-variance-authority, forwardRef and a loading state.
Quick start: React with Tailwind
React compound components, Vue 3 composables and Svelte 5 runes.
Framework patterns
Seven practices, plus five common problems such as prop explosion and style conflicts.
Best practices and common issues
Deep dives on compound, render-prop, polymorphic, controlled and slot patterns.
references/component-patterns.md
ARIA patterns for modals, menus, comboboxes and forms, plus focus and contrast helpers.
references/accessibility-patterns.md
Styling comparison with setup notes for each approach, plus performance tips.
references/css-styling-approaches.md

From the official docs

Permissions

Low risk

This skill is Markdown instructions with no bundled scripts. The plugin route installs more than the skill, so pick the skills CLI command if you want only this one.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

The plugin route adds more than this skill
The ui-design plugin folder holds 9 skills, 3 agent file(s) and 4 command file(s), plus plugin.json files. The repo tree shows no hooks or MCP config in it. The skills CLI route installs only this skill. github.com

Questions

How do I install the web-component-design skill?

Use the install box above. The skills CLI command installs only this skill. The plugin route installs ui-design, which also holds eight other skills, three agent files and four command files.

Is this about the Web Components standard?

No. It is about reusable components in React, Vue and Svelte, with examples for each. SKILL.md does not mention custom elements or shadow DOM.

Which frameworks and styling tools does it cover?

React, Vue 3 and Svelte 5. For styling it compares Tailwind CSS, CSS Modules, styled-components, Emotion and Vanilla Extract. The main example uses Tailwind with class-variance-authority.

Does it need an API key or any setup?

The skill folder holds Markdown files only and bundles no scripts. The code samples use packages such as class-variance-authority, which your own project would need to install.

Does it work in the Claude app or Codex?

The install box lists a zip upload for the Claude app and a plugin route for Codex. The wshobson/agents README names Claude Code, Codex CLI, Cursor, OpenCode, Antigravity CLI, GitHub Copilot and Pi as supported tools.

Is web-component-design safe to install?

The skill is Markdown files with no scripts, so installing it alone adds instructions only. The plugin route adds more skills, agents and commands, listed in the safety section.

Information

updated Nov 2, 2026

Repository: wshobson/agents
Folder: plugins/ui-design/skills/web-component-design

wshobson/agents skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 8

wshobson/agents README · github.com
Claude Code skills · code.claude.com
Using skills in Claude · support.claude.com
web-component-design SKILL.md · github.com
web-component-design on skills.sh · skills.sh
component-patterns.md · github.com
accessibility-patterns.md · github.com
css-styling-approaches.md · github.com