web-component-designby Seth Hobson

Web Component Design Skill.

A Claude Code and Codex skill for UI design: reusable React, Vue, and Svelte component patterns and composition strategies.

Web & UI
UI code

Download OpenDesign View usage guide

wshobson/agents · plugins/ui-design/skills/web-component-design/SKILL.mdSKILL.md

--- name: web-component-design description: 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. --- ## When to Use This Skill ## Core Concepts ## Quick Start: React Component with Tailwind ## Framework Patterns ## Best Practices

Front matter and section headings read from the upstream file on 2026-09-14 · 7,475 characters in full

01 What it does

What the web-component-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Builds reusable UI components across React, Vue, and Svelte using modern composition patterns, CSS-in-JS solutions, and component API design principles. Covers compound components, render props, slots, and framework-specific patterns like React context, Vue composables, and Svelte runes. Applies to component libraries, design systems, and refactoring legacy components.

Emphasizes accessible-by-default components with semantic props, single responsibility, ref forwarding, and controlled versus uncontrolled patterns. Includes concrete implementations for buttons, accordions, selects, and tabs with class-variance-authority, Tailwind CSS, and scoped styling approaches.

What it produces

Design system components implementing buttons, accordions, selects, tabs, and cards with class-variance-authority and Tailwind CSS.

See the example prompt ↗

How It Works

01
Pick a CSS-in-JS Approach
Choose from Tailwind CSS for rapid prototyping, CSS Modules for scoped styles, styled-components for dynamic React styling, Emotion for SSR-friendly flexibility, or Vanilla Extract for zero-runtime performance.
02
Design the Component API
Use semantic prop names like isLoading instead of loading, provide sensible defaults, support composition via children, and allow style overrides through className or style props.
03
Implement framework-specific Patterns
Use React context for compound components, Vue 3 composables with provide and inject, or Svelte 5 runes with $props and $derived for reactive state.

02 Find your fit

When to Use the web-component-design Skill

Use the web-component-design skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Designing reusable component libraries or design systems for consistent UI patterns across a product or organization.
Implementing complex component composition patterns like compound components, render props, or slots for flexible component APIs.
Creating consistent component APIs across a codebase to standardize prop naming, defaults, and styling conventions.
Refactoring legacy components into modern patterns using current framework capabilities and composition strategies.
Building accessible, responsive UI components with ARIA support and keyboard navigation built in from the start.

Know the Boundaries

Components with too many props, which indicate a need for composition patterns instead of a single complex component.

03 Inside the skill

Rules the web-component-design Skill Gives Claude Code and Codex

3 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Provide Sensible Defaults
Component APIs must include reasonable default values for optional props, as shown with defaultVariants in the button example.
Support Composition via Children
Components must accept children props to enable flexible composition and reuse patterns.
Allow Style Overrides
Every component must allow parent components to override styles through className or style props.

04 Put it to work

Install web-component-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add web-component-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/wshobson/agents --skill web-component-design

Generic skills CLI form for plugins/ui-design/skills/web-component-design/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Build a reusable Card component for our React design system that supports compound composition with Card.Header, Card.Content, and Card.Footer subcomponents. Use Tailwind CSS for styling with variants for different card sizes (sm, md, lg) and visual styles (default, outlined, elevated). Include forwardRef support and ensure the component is accessible with proper ARIA labels. Set md size and default style as the defaults.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Test components with screen readers and verify full keyboard navigation support for accessibility compliance.
Profile render performance with React DevTools and apply memoization where appropriate to prevent unnecessary re-renders.

In OpenDesign import web-component-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill file: plugins/ui-design/skills/web-component-design/SKILL.md Content checksum recorded at verification; commit 4236bb9
License: MIT From LICENSE.
Repository stars: 39,635 GitHub snapshot taken 2026-09-14 for the whole wshobson/agents repository, which contains 18 skills in this catalog. Not a rating or usage count for web-component-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

When to Use This SkillLists seven scenarios including component libraries, composition patterns, CSS-in-JS, accessibility, and refactoring.
Core ConceptsCovers composition patterns, CSS-in-JS solution comparison table, and component API design principles with prop naming.
Quick Start: React Component with TailwindComplete Button implementation using forwardRef, class-variance-authority, variants, and size props with loading state.
Framework PatternsReact compound Accordion with context, Vue 3 tabs with composables and inject, Svelte 5 button with runes.
Best PracticesSeven practices including single responsibility, context usage, accessibility defaults, controlled patterns, forwarding refs, and memoization.
Common IssuesFive pitfalls: prop explosion, style conflicts, re-render cascades, accessibility gaps, and bundle size concerns.

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 7,475 characters. Read the full file on GitHub.

Web Component Design

Run web-component-design on a Real UI Design Task.

Download OpenDesign, import web-component-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills