Claude Skills · UI Design
Component spec
Write a complete UI component specification with anatomy, variants, states, behaviour and accessibility. Use when documenting buttons, inputs, cards, modals or any component.
Install this skill
curl -fsSL https://uxmate.co.in/skill-files/install.sh | bash -s -- uxm-component-specOr unzip into ~/.claude/skills/. Then ask Claude Code to do the task, or call /uxm-component-spec.
What is inside
---
name: uxm-component-spec
description: Write a complete UI component specification with anatomy, variants, states, behaviour and accessibility. Use when documenting buttons, inputs, cards, modals or any component.
---
# Component spec
Produce for the named component:
1. **Purpose and when (not) to use it.**
2. **Anatomy** (numbered parts).
3. **Variants and sizes.**
4. **States**: default, hover, focus-visible, active, disabled, loading, error, selected.
5. **Spacing, sizing and token references.**
6. **Behaviour and keyboard interaction**; responsive rules.
7. **Accessibility**: role, ARIA attributes, label rules, focus management, contrast.
8. **Content guidelines** and examples (do/don't).
Offer a minimal HTML/CSS reference implementation.More UI Design skills
- Design tokens · Define design tokens (colour, type, spacing, radius, shadow, motion) and output them as JSON and CSS variables.
- Colour palette · Generate an accessible colour palette with scales, semantic colours and contrast results.
- Type scale · Create a typographic scale with font pairing, sizes, line heights and responsive rules.
- Dark mode · Plan and review a dark mode theme: surfaces, elevation, colour mapping, contrast and images.