design-button-hierarchy

What problem does it solve?

Poor button hierarchies make users unsure which action to take, increase mistakes, and reduce the clarity of key calls to action.

Core Features & Use Cases

• Primary/Secondary/Tertiary Mapping: Assign visual weight so primary actions stand out while secondary and tertiary actions remain clearly subordinate.
• Corrective Evaluation & Redesign Suggestions: Detect failure modes like “button battle,” ambiguous gray styling, and destructive actions competing with primary.
• Context-Aware Application: Apply the hierarchy appropriately across screens and components such as modals, forms, pages, and toolbars.

Quick Start

Use the skill to evaluate a modal or form’s action buttons and return updated styling rules for primary, secondary, and tertiary states.