skills.rest
jimmymalhan
jimmymalhanCOMMUNITY
Explore all skills by this author →
GitHub

ui-quality

Implement UI component states, accessibility, and desktop-first layout standards.

1|Updated Mar 7, 2026
Search Tags:#ui#accessibility#frontend#design system#ux#states
One-click install
npx skills add https://github.com/jimmymalhan/codereview-pilot --skill ui-quality
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-quality
Source: https://github.com/jimmymalhan/codereview-pilot/tree/main/.claude/skills/ui-quality
Command: npx skills add https://github.com/jimmymalhan/codereview-pilot --skill ui-quality

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures user-facing interfaces are intuitive, accessible, and professional, reducing user confusion and improving adoption.

Core Features & Use Cases

  • Component State Management: Implements all necessary UI states (Normal, Loading, Error, Success, Empty, Disabled, Validation) for interactive elements.
  • Accessibility Compliance: Addresses keyboard navigation, ARIA labels, color contrast, and focus indicators.
  • Business Language: Replaces technical jargon with clear, user-friendly terms.
  • Use Case: When developing a new dashboard or form, use this Skill to guarantee all interactive elements have proper states, are accessible via keyboard, and use language that any user can understand.

Quick Start

Use the ui-quality skill to add missing states and accessibility fixes to the components in src/www/.

Frequently Asked Questions about ui-quality

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add missing UI states like loading and error to frontend components?▼

To add missing UI states to frontend components, implement production-grade state management covering Normal, Loading, Error, Success, Empty, Disabled, and Validation states for all interactive elements to prevent user confusion.

What is the best way to ensure keyboard accessibility and ARIA labels in a web UI?▼

The best way to ensure keyboard accessibility and ARIA labels in a web UI is to enforce compliance standards that address keyboard navigation, ARIA labels, color contrast, and focus indicators for all interactive elements.

How do I replace technical jargon with business language in my user interface?▼

To replace technical jargon with business language in your user interface, apply production-grade quality standards that swap developer terminology for clear, user-friendly terms, ensuring professional and accessible communication for all users.

Can I use this approach to fix UI accessibility issues in an existing dashboard?▼

Yes, you can use this approach to fix UI accessibility issues in an existing dashboard by applying quality standards to components in your source directory, adding proper states, keyboard navigation, and understandable language.

What are the essential component states needed for a production-grade frontend design system?▼

The essential component states needed for a production-grade frontend design system are Normal, Loading, Error, Success, Empty, Disabled, and Validation, which address common UI pitfalls and ensure a professional, user-friendly experience.

Related Skills

Explore More Design & Creative Skills→
jc180105jc180105

UX Architect

Define reusable CSS architecture and UX foundations for frontend development.

Community
Advanced
JhabbigJhabbig

wcag-audit-patterns

Audit web interfaces for WCAG 2.2 accessibility violations.

Community
Advanced
eserlaneserlan
2

web-component-design

Standardize cross-framework UI component design across React, Vue, and Svelte.

Community
Advanced
RepairYourTechRepairYourTech
6

accessibility-compliance

Audit web applications for WCAG 2.1/2.2 compliance with axe-core.

Community
Advanced