Smithery is now a part of Arcade.dev! Read more in our announcement here
Use when designing or reviewing web UI, implementing forms/buttons/inputs, fixing visual hierarchy issues, creating color systems, building layouts, or when interface feels cluttered, hard to read,...
Design exists to separate the primary from the secondary. Users should instantly recognize what matters. Good interface design is invisible—users accomplish goals without noticing the interface.
This skill orchestrates domain-specific reference files. Read only what you need for the task.
| Task | Load Reference |
|---|---|
| Font sizes, line spacing, heading hierarchy, vertical rhythm | references/typography.md |
| Input fields, validation, checkboxes, radios, selects, textareas | references/forms-and-inputs.md |
| Button hierarchy, sizing, states, CTAs, ghost buttons | references/buttons.md |
| Color palettes, dark mode, tints/shades, state colors | references/color-systems.md |
| Navigation, cards, tabs, accordions, modals, tables, toasts | references/ui-components.md |
| Grids, spacing scales, responsive patterns, whitespace | references/layout-and-spacing.md |
| Focus techniques, hierarchy principles, action pyramid | references/visual-hierarchy.md |
| Contrast ratios, focus states, screen readers, WCAG | references/accessibility.md |
| CSS implementation patterns, variables, common styles | references/css-patterns.md |
What's the problem?
├─ Text hard to read, spacing feels off → typography.md
├─ Form not working well, validation issues → forms-and-inputs.md
├─ Users don't know what to click → buttons.md OR visual-hierarchy.md
├─ Colors look wrong, dark mode broken → color-systems.md
├─ Need nav/cards/tabs/modals/tables → ui-components.md
├─ Spacing inconsistent, layout cramped → layout-and-spacing.md
├─ Everything competes for attention → visual-hierarchy.md
├─ Accessibility audit or contrast issues → accessibility.md
└─ Need CSS implementation → css-patterns.md
4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
| Level | Use For | Treatment |
|---|---|---|
| Primary | Main action (ONE per view) | Solid fill, high contrast |
| Secondary | Alternative actions | Outlined or subtle fill |
| Tertiary | Minor actions | Text-only or ghost |
