Skills
.Work. You
Rest

components-and-states

Community

Streamline UI design with a comprehensive reference for component and state patterns.

Design & Creative#accessibility#ui design#front-end development#component design#interaction states
Authorjpoindexter
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a definitive guide to designing UI components with attention to interaction states, patterns, and accessibility, ensuring your interfaces are both intuitive and accessible.

Core Features & Use Cases

  • Comprehensive Guide: A reference-grade guide covering component anatomy, interaction states, variants, and more.
  • Design Patterns: Includes modern headless/data-state/CSS patterns across multiple platforms.
  • Accessibility: Ensures all UI components meet accessibility standards and best practices.

Quick Start

Utilize the components-and-states skill to review and optimize the interaction states of a UI component within your design project.

Dependency Matrix

Required Modules

None required

Components

scriptsreferencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: components-and-states
Download link: https://github.com/jpoindexter/design-and-ai-skills/archive/main.zip#components-and-states

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.