Help us improve
Share bugs, ideas, or general feedback.
Create clear primary/secondary/tertiary action distinctions
npx claudepluginhub gnurio/refactoring-ui-plugin --plugin refactoring-ui-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/refactoring-ui-skills:05-design-button-hierarchyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create clear distinctions between primary, secondary, and tertiary actions so users know which action to take.
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
Guides UI visual hierarchy with size/weight/color levers, three-tier architecture, one dominant element per screen, de-emphasis, F/Z-patterns for headings, CTAs, focal points.
Guides visual hierarchy in UIs using size, weight, color, spacing, position, and density. Defines levels, patterns for heroes/cards/forms, and practices like squint test.
Share bugs, ideas, or general feedback.
Create clear distinctions between primary, secondary, and tertiary actions so users know which action to take.
Generative + Evaluative
Maps action importance to visual treatment: primary = filled brand color, secondary = outline or subtle (including grey solid), tertiary = text-only or link style.
| Level | Background | Border | Text | Use Case |
|---|---|---|---|---|
| Primary | Brand color (solid) | None | White/light | Main CTA, save, submit |
| Secondary | Grey (solid) or transparent | Brand color (if outline) | Brand color or grey | Alternative action, cancel |
| Tertiary | Transparent | None | Brand color or gray | Optional actions, learn more |
| Destructive | Red | None | White | Delete, remove (not competing) |
| Disabled | Gray 200 | None | Gray 400 | Cannot proceed |
| Failure | Description | Fix |
|---|---|---|
| Button Battle | Save and Cancel both filled brand | Make Cancel outline or grey solid |
| Gray Button Confusion | Very light grey (200) secondary looks disabled | Use grey 400-500 or outline, not near-white grey |
| Red Alert | Delete button more prominent than primary | Make delete text-only or smaller |
| Primary Overload | 3+ "primary" buttons | Choose one primary, demote others |
| Invisible Tertiary | Text links same color as body | Use brand color or underline |
build-color-palette (needs brand and semantic colors)establish-visual-hierarchy (buttons are part of hierarchy)Input: Modal with "Save Changes" (filled blue), "Cancel" (filled grey), "Delete" (filled red)
Evaluation: PARTIAL
Recommendation: