Component Designer

What it does

Component Designer takes a plain-English brief — "a notification badge with variants for success, warning, error, and info; sizes sm/md/lg; dismissible option" — and produces a production-ready React component. The output includes a typed props interface, styled variants using CSS Modules or Tailwind, forwarded refs, and composability with children. Every API decision follows React design system conventions so the component slots naturally into an existing library.

Every component comes with three Storybook stories (default, all-variants, edge-cases) and Jest/Testing Library unit tests covering keyboard interaction, visual state changes, and edge-case props like empty children or extremely long strings. The result is a component you can drop into any design system without further setup.

How to install

npx skills add user/component-designer

How to use

Design a Badge component: variants success/warning/error/info, sizes sm/md/lg, optional onDismiss prop

interface BadgeProps {
  variant: 'success' | 'warning' | 'error' | 'info';
  size?: 'sm' | 'md' | 'lg';
  onDismiss?: () => void;
  children: React.ReactNode;
}

export function Badge({ variant, size = 'md', onDismiss, children }: BadgeProps) {
  return (
    <span className={styles[variant]} data-size={size}>
      {children}
      {onDismiss && <button onClick={onDismiss} aria-label="Dismiss">×</button>}
    </span>
  );
}

Configuration

# Use Tailwind instead of CSS Modules
Design this component using Tailwind classes

# Generate just the Storybook story
Write a Storybook story for this Badge component

# Generate just the test file
Write unit tests for the Badge component using Testing Library

Related skills

Use CSS Wizard to generate the style definitions for your components, and Accessibility Checker to ensure every component meets WCAG 2.1 AA before shipping.