ui-component-spec
CommunitySpecify interactive components with full state coverage.
Design & Creative#accessibility#interaction design#validation rules#interface contracts#component states#ui specification#code generation alignment
AuthorThorStarlord
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It prevents UI implementations from drifting by forcing every interactive component to be specified with an exhaustive anatomy, props/slots, complete state matrix, behavior rules, and accessibility requirements.
Core Features & Use Cases
- Exhaustive state matrix: Default, hover, focus, focus-visible, active/pressed, disabled, loading, error, success, empty, read-only, plus component-specific open/closed or expanded/collapsed states as needed.
- Anatomy-first specification: Defines atomic parts and slots so the implementation has clear targets for visuals and functionality.
- Behavior, validation, and accessibility guardrails: Captures interaction mechanics, validation timing/rules for inputs, and keyboard/screen-reader/focus management requirements.
Quick Start
Use ui-component-spec to spec the exact component behavior and states for a non-trivial interactive widget the user wants designed or built next.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 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: ui-component-spec Download link: https://github.com/ThorStarlord/interface-skills/archive/main.zip#ui-component-spec Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.