interaction-design

Audits hover, focus, pressed, disabled, loading, and transition states of interactive UI elements.

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/1arley/volibear --skill interaction-design-1arley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interaction-design
Source: https://github.com/1arley/volibear/tree/main/.opencode/skills/interaction-design
Command: npx skills add https://github.com/1arley/volibear --skill interaction-design-1arley

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interactive elements often ship with undesigned states: buttons that freeze during loading, focus outlines removed without replacement, disabled controls that never explain why, and tabs where the selected state is invisible. This Skill systematically audits every state of every interactive element so no accidental or missing feedback reaches users. ## Core Features & Use Cases - State Machine Audit: Walks each interactive element (buttons, links, inputs, toggles, tabs, dropdowns) through default, hover, focus, pressed, disabled, loading, selected, and error states. - Attack Pattern Detection: Flags known failure patterns such as removed focus outlines, absent pressed feedback, frozen loading states, and invisible selected states. - Confidence-Graded Findings: Reports issues with CONFIRMED, HIGH CONFIDENCE, POSSIBLE, or SPECULATIVE levels, ordered by element and state with focus and feedback problems first. - Use Case: During a frontend review of a checkout page, use this Skill to verify that the Pay button shows loading progress, the disabled state explains its cause, and keyboard focus is visible on every form control. ## Quick Start Review this screen's interactive elements and report any hover, focus, pressed, disabled, or loading states that are missing or undesigned.

Frequently Asked Questions about interaction-design

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

FAQPage Schema
How do I audit hover and focus states in a UI review?▼

List every interactive element, then walk each through default, hover, focus, pressed, disabled, loading, selected, and error states. Check that hover changes background, border, or elevation, and that focus shows a visible ring or outline rather than a removed outline.

What are common interaction design mistakes in frontend code?▼

Common failures include removing focus outlines with outline: none and no substitute, buttons that freeze during loading without feedback, disabled states with no explanation of cause, and selected tabs that look identical to unselected ones.

Does this review cover keyboard accessibility?▼

It partially covers keyboard interaction by checking focus visibility and focus sequence, but full keyboard and assistive technology auditing is delegated to the accessibility-review skill. Focus issues are flagged here because they are both interaction and accessibility defects.

When should micro-interactions be flagged as problems?▼

Flag micro-interactions when they create noise rather than inform, such as animating every small icon hover, or when transitions teleport at 0ms or run so slowly they frustrate. Brand-driven animation is acceptable if it serves identity.

What are the limitations of an interaction state audit?▼

The audit is platform-dependent: hover does not exist on touch devices, so findings must be evaluated per platform. It also avoids reporting intentional patterns like disabled tooltips or skeleton loading as defects.