Audit and implement six interactive states for web components.
npx skills add https://github.com/OthmanAdi/gmira --skill gmira-states
Please help me install this Agent Skill. Skill: gmira-states Source: https://github.com/OthmanAdi/gmira/tree/main/skills/gmira-states Command: npx skills add https://github.com/OthmanAdi/gmira --skill gmira-states
This Skill solves the common issue of invisible or broken UI states. Most components are only built for the default and hover states, leaving users stranded when they encounter loading, error, empty, or keyboard-focused scenarios.
Use the gmira-states skill to audit the current component for missing interactive states and generate a test route for verification.
High-intent search queries and answers about installing and using this skill.
Essential interactive UI states include hover, focus, disabled, loading, error, and empty. Systematically auditing these states ensures web components provide consistent user feedback, accessibility, and performance across all edge cases.
Audit web components by checking each interactive surface for hover, focus, disabled, loading, error, and empty states. Generate a test route to verify proper focus-visible styling, aria-disabled implementation, and layout-stable loading skeletons.
Implement accessible focus and disabled states by applying strict focus-visible styling and using aria-disabled attributes. This ensures keyboard navigation clarity and proper screen reader support for inaccessible UI elements.
UI components break when only built for default and hover states. Implementing loading skeletons and meaningful empty states prevents layout shift and provides clear user feedback during slow networks or missing data.
Yes, apply this audit to existing frontend workflows to ensure every button, form, and card in a dashboard handles edge cases correctly. It verifies consistent feedback during slow networks, empty data, or keyboard navigation without requiring dependencies.
Prevent layout shift by building layout-stable loading skeletons that mimic the rendered content dimensions. This approach maintains visual continuity and ensures accessible user feedback while data loads.
jc180105Define reusable CSS architecture and UX foundations for frontend development.
PrasadTelasulaTest React components with React Testing Library and Playwright for frontend correctness.
dembrandtDefine complete visual interaction states for buttons and clickable elements.
bluebricks-nlReview React components using shadcn/ui, Radix primitives, and Tailwind CSS for best practices.
