Generate six-state UI component systems with algorithmic color derivations.
npx skills add https://github.com/yonetim258852/ozgur-os --skill button-states
Please help me install this Agent Skill. Skill: button-states Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/button-states Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill button-states
UI designers often miss complete state coverage for interactive elements, resulting in inconsistent behavior and jarring user experiences. This Skill ensures every interactive element has a complete, six-state definition (rest, hover, active/pressed, focus, disabled, and loading) with algorithmic color derivations to maintain consistency across the design system.
Design a complete six-state system for all interactive elements and derive hover/active colors algorithmically from a base color.
High-intent search queries and answers about installing and using this skill.
To define complete button states for a design system, you create a six-state definition covering rest, hover, active, focus, disabled, and loading. This ensures consistent behavior across buttons, links, inputs, and clickable elements by deriving all state variations algorithmically from a single base color.
To enforce accessible focus outlines, you apply distinct focus states using the CSS outline property rather than relying on hover alone. This approach meets accessibility guidelines by clearly indicating interactive elements like buttons and inputs during keyboard navigation.
Yes, you can apply this six-state interactive system to inputs, links, and other clickable elements beyond standard buttons. The state derivation logic scales across all interactive UI components to ensure consistent user experience and accessible contrast throughout the interface.
Inconsistent hover and active states usually occur when UI designers miss complete state coverage and manually pick colors. Automating state derivation from a base color solves this jarring user experience by applying deterministic color variations across the entire design system.
qazuorGuide UI teams through pre-coding design foundations for typography, color, and layout.
drgaciwBuild Tailwind CSS design systems with design tokens and component variants.
CANTAGESTUDIOAudit UI color contrast and accessibility metrics against WCAG guidelines.
kriscendobotStyle native HTML select elements with CSS pseudo-elements and pseudo-classes.
