skills.rest
coastdigitalgroup
coastdigitalgroupOFFICIAL
Explore all skills by this author →
GitHub

button-and-action-system

Create a reusable button and action system framework with variant matrices and sizing scales.

2|Updated Mar 21, 2026
Search Tags:#ui#accessibility#interaction#responsive#design-system#variants#button
One-click install
npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill button-and-action-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: button-and-action-system
Source: https://github.com/coastdigitalgroup/coastai-skills/tree/main/website-design/button-and-action-system
Command: npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill button-and-action-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A repeatable framework for designing and implementing a button and action system that governs visual hierarchy, interaction states, and accessibility across UI surfaces.

Core Features & Use Cases

  • Button Variant Matrix: Primary, Secondary, Ghost, and Danger styles with clear rules for hierarchy and emphasis.
  • Sizing and Layout: Large, Medium, and Small scales with responsive behavior and spacing tokens.
  • Grouping & Interaction: Guidelines for aligning and sequencing actions in headers, modals, cards, and forms, including focus and hover states.
  • Accessibility & Safety: Ensures WCAG-compliant contrast, adequate touch targets, focus indicators, and keyboard navigability.

Quick Start

Define your four button variants and map their tokens, sizes, and interaction states in your design system, then apply them consistently across components.

Frequently Asked Questions about button-and-action-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a consistent button variant matrix for a UI design system?▼

A button variant matrix establishes Primary, Secondary, Ghost, and Danger styles with clear rules for visual hierarchy and emphasis. It enforces consistent sizing, spacing tokens, and interaction states across web and mobile interfaces.

What is the best way to manage button sizing and responsive spacing tokens?▼

Managing button sizing involves defining Large, Medium, and Small scales with responsive behavior and spacing tokens. This ensures consistent layout and touch target dimensions across web and mobile interfaces.

How do I ensure button accessibility and WCAG-compliant touch targets in a design system?▼

Button accessibility requires WCAG-compliant contrast, adequate touch targets, visible focus indicators, and keyboard navigability. Enforcing these requirements in your design system ensures safe and predictable interaction behavior for all users.

Can I use this button system framework to standardize action grouping in modals and forms?▼

Yes, the framework provides explicit guidelines for aligning and sequencing actions in headers, modals, cards, and forms. It standardizes focus and hover states to maintain clear visual hierarchy across all UI surfaces.

When do I need a formalized action system for my UI components?▼

You need a formalized action system when design-system teams require consistent button variants, sizing, and interaction conventions across web and mobile interfaces. It solves unpredictable visual hierarchy and accessibility gaps across UI surfaces.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
marnecmarnec
1

responsive-design

Apply container queries, fluid typography, and grid/flex layouts for responsive UI.

Community
Intermediate
marcusmarcus
1.0k

ui-features

Guide developers in implementing Sidecar UI modals, keyboard shortcuts, and responsive layouts.

Community
Advanced
Higashi-KotaHigashi-Kota

a11y

Audits UI components for WCAG 2.2 AA and ARIA compliance.

Community
Intermediate