Skill: UX Designer

The UX Designer skill gives Claude a fixed design system to work from, so the components it generates look consistent every time instead of inventing new colors, spacing, and rounding on each request. It also bakes in accessibility rules so you don't get a component that looks good but fails for keyboard and screen-reader users.

What This Skill Does

When triggered, Claude generates UI components using a pinned set of design tokens and follows three accessibility rules:

Design system (pinned in the skill):

Framework: Tailwind CSS
Colors: Slate for neutrals, Indigo for primary actions, Rose for errors and destructive actions.
Rounding: rounded-lg for cards and buttons — not rounded-md one time and rounded-xl the next.
Spacing: multiples of 4 (p-4, m-8, gap-2). No magic numbers like p-[13px].

Accessibility rules:

Semantic HTML — <button> for actions, <nav> for navigation, <form> for forms. No <div onClick>.
Color contrast that passes WCAG AA (4.5:1 for normal text, 3:1 for large text).
Keyboard navigation — every interactive element is reachable with Tab and operable with Enter/Space.

The result is components that drop into a Tailwind project and match the rest of the UI without manual restyling.

How to Install

Create the skills directory:
```
mkdir -p .claude/skills/ux-designer
```
Save the template below as .claude/skills/ux-designer/SKILL.md.
Trigger it with a prompt like: "Design a login form using the ux-designer skill."

SKILL.md Template

# UX Designer Skill

## Triggers
- "Design UI"
- "Create component"
- "Style this"

## Design System
- **Framework:** Tailwind CSS
- **Colors:** Slate (Neutral), Indigo (Primary), Rose (Error).
- **Rounding:** `rounded-lg` (Large).
- **Spacing:** Multiples of 4 (`p-4`, `m-8`).

## Accessibility
- Always use semantic HTML (`<button>`, `<nav>`).
- Ensure color contrast passes WCAG AA.
- Support keyboard navigation.

Real-World Usage Example

Prompt:

Design a login form using the ux-designer skill. It needs an email field, a password field, a remember-me checkbox, a submit button, and a link to a forgot-password page. Show error states.

Expected output:

export function LoginForm({ onSubmit, error }: {
  onSubmit: (e: React.FormEvent) => void;
  error?: string;
}) {
  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-4 p-8 rounded-lg bg-white shadow-sm max-w-sm w-full">
      <h2 className="text-xl font-semibold text-slate-900">Sign in</h2>

      {error && (
        <p role="alert" className="p-3 rounded-lg bg-rose-50 text-rose-700 text-sm">
          {error}
        </p>
      )}

      <label className="flex flex-col gap-1">
        <span className="text-sm font-medium text-slate-700">Email</span>
        <input
          type="email"
          name="email"
          required
          autoComplete="email"
          className="p-2 rounded-lg border border-slate-300 text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        />
      </label>

      <label className="flex flex-col gap-1">
        <span className="text-sm font-medium text-slate-700">Password</span>
        <input
          type="password"
          name="password"
          required
          autoComplete="current-password"
          className="p-2 rounded-lg border border-slate-300 text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        />
      </label>

      <div className="flex items-center gap-2">
        <input type="checkbox" name="remember" id="remember" className="h-4 w-4 rounded text-indigo-600" />
        <label htmlFor="remember" className="text-sm text-slate-600">Remember me</label>
      </div>

      <button type="submit" className="p-2 rounded-lg bg-indigo-600 text-white font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        Sign in
      </button>

      <a href="/forgot-password" className="text-sm text-indigo-600 hover:text-indigo-700">
        Forgot password?
      </a>
    </form>
  );
}

Every interactive element is a real <input> or <button>. The error message has role="alert" so screen readers announce it. Focus rings are visible. Spacing is all multiples of 4. Colors stay within Slate, Indigo, and Rose.

Customization Tips

Swap the color palette. If your brand uses different colors, replace the three lines in the Design System section. Claude will use the new palette consistently across every component it generates.
Add a typography scale. Pin font sizes: text-sm for labels, text-base for body, text-xl for headings. Without this, Claude picks sizes ad hoc.
Add a dark mode rule. Append "Support dark mode using Tailwind's dark: variant. Use dark:bg-slate-800 and dark:text-slate-100." Your components will work in both themes.
Pin a component library. If you use Radix or shadcn/ui, add "Use Radix primitives for dialogs, dropdowns, and popovers." Claude will build on them instead of reinventing the markup.

Combining With Other Skills

code-reviewer — After generating a component, run code-reviewer to check for unnecessary re-renders, missing key props, and type issues.
security-auditor — For forms that handle auth or PII, run security-auditor on the component to check for XSS risks (e.g., dangerouslySetInnerHTML) and autocomplete attributes that leak data.
technical-writer — Use technical-writer to generate prop documentation and usage examples for the component you just built.

Common Mistakes to Avoid

Asking for "a nice UI" with no constraints. Without specifying fields, states, and behavior, you get a generic mockup. List the exact fields, the error states, and the loading states you need.
Forgetting loading and empty states. A login form isn't just the idle state. Tell Claude to include a disabled submit button with a spinner during submission, or you'll have to add it manually later.
Overriding the design tokens ad hoc. If you let Claude use arbitrary colors "just this once," consistency breaks. If you need a new color, add it to the skill's Design System section so every future component uses it.
Skipping the accessibility check. A component that passes visual review but fails keyboard navigation is a bug, not a polish item. Test every generated component with Tab and a screen reader before shipping.

Share this article