What interactive states are covered by this skill?

It covers core states like hover, focus, active, and disabled, as well as extended states including loading (aria-busy), invalid (aria-invalid), success, and locked states.

Does it support smooth transitions?

Yes, it includes standardized CSS transition patterns for all states while automatically respecting user preferences for reduced motion.

Can I use these patterns with Web Components?

Yes, it includes specialized patterns for preventing Flash of Unstyled Content (FOUC) and provides JavaScript implementation strategies for custom element state management.

How does this skill improve web accessibility?

The skill prioritizes semantic ARIA attributes and utilizes the :focus-visible pseudo-class to ensure components are usable by screen readers and keyboard-only users.

UX Component States

Name: UX Component States
Author: matthewharwood

bymatthewharwood

0•

Design Tools

Implements responsive visual feedback and interactive state patterns for accessible web components and UI elements.

The UX Component States skill provides a robust framework for managing user interaction feedback across web elements. It covers essential core states like hover, focus, and active, alongside complex logic for loading indicators, validation errors, and success states. By utilizing ARIA attributes and data-driven styling, this skill ensures that interactive elements like buttons, inputs, and cards are not only visually engaging but also fully accessible and performant, including specialized techniques to eliminate Flash of Unstyled Content (FOUC) and respect user motion preferences.

Key Features

01Ready-to-use loading, validation, and success state templates

02Standardized CSS patterns for hover, focus-visible, and active interactions

03FOUC prevention strategies for custom Web Components

04Accessibility-first transitions with reduced motion support

05Semantic state management using ARIA and data attributes

060 GitHub stars

Use Cases

01Building a consistent design system for a web application

02Implementing robust interactive feedback for complex form validation

03Improving keyboard accessibility and visual focus indicators

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add matthewharwood/fantasy-phonics ux-component-states

For use in Claude.ai and ChatGPT

Download Skill