Stats
Actions
Tags
From design
Apply 5 professional component-design rules covering buttons, forms, cards, icons, and motion. Use when designing/reviewing UI components, building a component library, or auditing interaction states. Triggers on "design this button", "form layout", "card component", "icon usage", "add motion", "animation timing", "component states", "design system component".
How this skill is triggered — by the user, by Claude, or both
Slash command
/design:componentsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Five rules for the components that make up most UIs.
Five rules for the components that make up most UIs.
VARIANTS: Primary (filled, brand), Secondary (outlined),
Ghost (text-only), Destructive (red)
SIZES: sm (32 px h), md (40 px h), lg (48 px h)
STATES: default, hover, active/pressed, focus, disabled, loading
PADDING: vertical : horizontal = 1 : 3 ratio e.g. 12px × 36px
* AFTER the labelPADDING: 16 px or 24 px (consistent across system)
BORDER RADIUS: 8–12 px for cards
SHADOW: subtle — 0 2px 8px rgba(0,0,0,0.08)
HOVER STATE: only if interactive — lift shadow + cursor pointer
DURATION: micro-interactions : 150–300 ms
layout transitions : 300–500 ms
page transitions : 400–600 ms
EASING: ease-out for elements ENTERING
ease-in for elements EXITING
ease-in-out for elements MOVING (already on screen)
prefers-reduced-motion — disable non-essential animation when user has set OS-level reduce motionnpx claudepluginhub polarislt0710/claude-skills-hugo --plugin designCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.