102.7K+Download
Skip to the usage guide
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 OpenDesignView 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.

The guide recommends accessibility, semantic props, single responsibility and appropriate controlled or uncontrolled state. It includes a React button example, a compound accordion, Vue context and Svelte runes. Other snippets illustrate usage rather than supplying a complete, tested component library.

What it produces

  • Component code and API decisions adapted to the chosen framework and task.
  • Styling and composition patterns to review in the existing project, not a prebuilt cross-framework library.
See the example prompt ↗

How It Works

  1. 01
    Choose a Styling 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.

  2. 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.

  3. 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

  • Examples Need IntegrationThe examples illustrate patterns, not fully tested production components. Resolve imports, behavior, keyboard handling and semantics in the actual project.

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.

  1. Provide Sensible Defaults

    Component APIs must include reasonable default values for optional props, as shown with defaultVariants in the button example.

  2. Support Composition via Children

    Provide suitable content composition: children or compound components in React, named slots in Vue, or snippets in Svelte. Do not impose one framework’s prop shape on every implementation.

  3. 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.

Editorial example based on the reviewed source; not an executed task or an upstream quotation.

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.

OpenDesign provides a local workspace for coding agents. Check the installed version for skill availability and setup; this source review does not verify bundled skills or include external tools and services.

Download OpenDesignRead 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

  1. When to Use This SkillLists seven scenarios including component libraries, composition patterns, CSS-in-JS, accessibility, and refactoring.
  2. Core ConceptsCovers composition patterns, CSS-in-JS solution comparison table, and component API design principles with prop naming.
  3. Quick Start: React Component with TailwindComplete Button implementation using forwardRef, class-variance-authority, variants, and size props with loading state.
  4. Framework PatternsReact compound Accordion with context, Vue 3 tabs with composables and inject, Svelte 5 button with runes.
  5. Best PracticesSeven practices including single responsibility, context usage, accessibility defaults, controlled patterns, forwarding refs, and memoization.
  6. 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 OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/wshobson/agents --skill web-component-design