What is the web-component-design skill?
The web-component-design skill is a SKILL.md in the ui-design plugin of the wshobson/agents repository. It teaches an AI coding agent compound components, render props, slots, CSS-in-JS options and component API design for reusable React, Vue and Svelte component libraries.
A Select with Trigger, Options and Option children is the first code sample in this skill. It comes from the ui-design plugin of wshobson/agents and targets reusable, maintainable components in React, Vue and Svelte.
Despite the name, it is about framework components, not the browser's custom elements standard. The SKILL.md talks only about React, Vue and Svelte patterns and styling choices.
Composition and styling
- Compound components: related parts that work together under one parent.
- Render props: delegate rendering to the parent, as in a data fetcher.
- Slots: named injection points in Vue and Svelte.
- Styling table: Tailwind CSS, CSS Modules, styled-components, Emotion and Vanilla Extract, each with a best-fit use.
Component API rules
The skill models a button with variant, size, loading, disabled and icon props. Its principles are semantic prop names such as isLoading, sensible defaults, composition through children and style overrides with className or style.
Who the web-component-design skill is for
Best for
- Building or refactoring a component library with one consistent API style.
- Choosing between styling approaches with a clear table. Related: ui-styling.
- Projects that are React heavy. Related: shadcn and frontend-ui-engineering.
Not for
- Native custom elements and shadow DOM, which this skill does not discuss.
- Token and theme architecture, which design-system-patterns handles in the same plugin.
- Pixel level visual design. It shapes code structure and does not choose looks.
Use it with UiChemy
Component logic belongs in your app code, while WordPress pages come from design files. UiChemy Figma to WordPress converts a Figma design into Elementor or Gutenberg, and Composer adjusts it visually. Click Get Started on uichemy.com.
How to install Web Component Design Skill: React, Vue and Svelte
gh skill install wshobson/agents web-component-designCheck GitHub CLI
The
gh skillcommand requires GitHub CLI 2.90 or later. Rungh --versionand upgrade first if your version is older.Install the skill
Run
gh skill install wshobson/agents web-component-designand select your coding tool when prompted. The README says this reads the skill from GitHub without cloning the repository.Or install the whole plugin
Inside Claude Code run
/plugin marketplace add wshobson/agents, then/plugin install ui-design@claude-code-workflows. This adds the ui-design plugin that contains the skill, with its agents, commands and hooks.Invoke it
Try a prompt such as: use web-component-design to refactor this modal into compound components. Name the file so the agent can read it.
Check that it loaded
Ask the agent to build a Button with variants. It should use a variants helper, forward refs, support a loading state and keep focus visible styles in the class list.
Key features
- Compound componentsA Select example with Trigger, Options and Option parts shows related components sharing state under one parent.
- Render propsA DataFetcher example delegates loading, error and data rendering to the caller.
- Slots for Vue and SvelteNamed slots such as header, content and footer show injection points in a Card.
- Five styling approachesTailwind CSS, CSS Modules, styled-components, Emotion and Vanilla Extract are compared by approach and best use.
- Component API principlesSemantic prop names, sensible defaults, composition via children and style overrides through className or style.
- cva quick startA forwardRef button using class-variance-authority and a cn helper defines primary, secondary and ghost variants and three sizes.
- Accessible by defaultBest practices ask for ARIA attributes and keyboard support in every component.
- Seven best practicesSingle responsibility, avoiding prop drilling, accessibility, controlled and uncontrolled support, forwarded refs, memoization and error boundaries.
- Common issue listProp explosion, style conflicts, re-render cascades, accessibility gaps and bundle size from unused variants.
- Three reference filesaccessibility-patterns.md, component-patterns.md and css-styling-approaches.md hold the deeper material.
Frequently asked questions
What is the web-component-design skill?
It is a SKILL.md in the ui-design plugin of the wshobson/agents repository. It guides an AI coding agent on reusable component architecture with composition patterns, styling approaches and API design across React, Vue and Svelte.
How do I install the web-component-design skill?
Run gh skill install wshobson/agents web-component-design and choose your coding tool when asked. GitHub CLI 2.90 or later is required. The plugin route is /plugin marketplace add wshobson/agents then /plugin install ui-design@claude-code-workflows.
Is this about the Web Components standard?
No. The SKILL.md covers React, Vue and Svelte component patterns, so it does not discuss custom elements or shadow DOM. Read the name as web UI components built with those frameworks.
Which styling approaches does it compare?
Five: Tailwind CSS for utility classes, CSS Modules for scoped files, styled-components for template literals, Emotion for object or template styles and Vanilla Extract for zero runtime. Each row names the situation where it fits best.
Does it cover accessibility?
Yes. Building accessible, responsive components is in its use list, ARIA attributes and keyboard support are a best practice, and accessibility-patterns.md is one of its three reference files. It does not replace a full accessibility audit.
Which AI coding agents can use the skill?
The repository README describes support for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, Google Antigravity and Pi through different install routes. Skills-only installs ask which coding tool you use, so pick yours at the prompt.
What license does the skill use?
GitHub lists the wshobson/agents repository as MIT licensed, and the web-component-design skill sits inside its ui-design plugin. Confirm the license in the repository before copying the folder into a product of your own.