skills.rest
dembrandt
dembrandtOFFICIAL
Explore all skills by this author →
Website𝕏@dembrandtcomGitHub

button-states

Define complete visual interaction states for buttons and clickable elements.

33|6|Updated Apr 19, 2026
Search Tags:#accessibility#design systems#button states#interactive components#focus ring#hover states
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill button-states-dembrandt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: button-states
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/button-states
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill button-states-dembrandt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents incomplete or ambiguous interactive components by defining clear visual feedback for every stage of an interaction, improving usability, confidence, and keyboard accessibility.

Core Features & Use Cases

  • Complete Interaction States: Define rest, hover, active or pressed, focus, disabled, and loading states for buttons, links, inputs, and other clickable elements.
  • Algorithmic Color Derivation: Generate coherent hover and active colors from a base color using HSL lightness adjustments instead of arbitrary choices.
  • Accessible Feedback: Add visible keyboard focus rings, appropriate disabled behavior, stable loading layouts, and concise transition guidance.
  • Use Case: Apply the Skill when reviewing a component library to ensure every interactive control has consistent, accessible, and production-ready visual states.

Quick Start

Use the button-states skill to define and review all six visual states for the interactive components in this interface.

Frequently Asked Questions about button-states

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

FAQPage Schema
How do I define accessible button states for a design system?▼

Accessible button states require defining rest, hover, pressed, focus, disabled, and loading behavior with algorithmically derived colors and visible keyboard focus indicators. This ensures complete visual feedback for every interaction stage.

How do I generate hover and active colors from a base color?▼

Generate coherent hover and active colors by applying HSL lightness adjustments to your base color instead of picking arbitrary values. This algorithmic color derivation maintains visual consistency across interactive component states.

How do I prevent layout shift when showing a loading state in a button?▼

Prevent layout shift during button loading states by enforcing stable loading dimensions within your component library. This keeps the interactive element's footprint fixed while displaying its loading behavior.

What is the best way to add a visible focus ring for keyboard accessibility?▼

The best way to add a visible focus ring is to implement concise transition guidance alongside your other button states. This provides clear keyboard accessibility feedback without altering the component's core layout.

Can I use this button states skill for inputs and links, or just buttons?▼

You can apply this skill to inputs, links, and other clickable elements, not just buttons. It defines complete visual interaction states for all interactive components in your frontend implementation.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
zm2231zm2231

style-guide-generator

Generate markdown style guides with token documentation and component catalogs.

Community
Advanced
daffy0208daffy0208
34

UX Designer

Create information architecture, user flows, wireframes, and prototypes for digital products.

Community
Intermediate
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced