skills.rest
aditya30103
aditya30103COMMUNITY
Explore all skills by this author →
GitHub

ui

Audit UI components for accessibility, mobile parity, and theme compliance.

1|Updated Feb 5, 2026
Search Tags:#ui#accessibility#design system#component auditing#mobile parity#theme compliance
One-click install
npx skills add https://github.com/aditya30103/ContentDeck --skill ui-aditya30103
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/aditya30103/ContentDeck/tree/main/.claude/skills/ui
Command: npx skills add https://github.com/aditya30103/ContentDeck --skill ui-aditya30103

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all user interfaces are consistent, accessible, and adhere to the established design system, preventing visual bugs and improving user experience across all devices and themes.

Core Features & Use Cases

  • Component Auditing: Systematically checks UI components for correct state handling (loading, empty, error, data).
  • Mobile Parity: Verifies that features and navigation are consistent between desktop and mobile interfaces.
  • Accessibility Checks: Ensures compliance with WCAG guidelines, including touch targets and ARIA attributes.
  • Theme Compliance: Validates UI elements across all four supported themes (Light, Dark, Sepia, Navy).
  • Design System Adherence: Confirms usage of defined spacing, typography, color tokens, and component patterns.
  • Use Case: Before deploying a new feature, run a /ui audit to catch any accessibility issues, ensure mobile parity, and verify theme consistency, guaranteeing a polished user experience.

Quick Start

Run the ui skill to audit the 'Sidebar' component for accessibility and theme compliance.

Frequently Asked Questions about ui

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

FAQPage Schema
How do I audit UI components for accessibility and state handling?▼

To audit UI components for accessibility, systematically check interactive element sizing, ARIA attributes, and state handling for loading, empty, error, and data conditions against documented design principles.

What is mobile parity in design system compliance?▼

Mobile parity in design system compliance verifies that features and navigation remain consistent between desktop and mobile interfaces, enforcing defined spacing, typography, and color tokens across platforms.

How do I ensure theme compliance across multiple UI themes?▼

Ensure theme compliance by validating UI elements across all supported themes, including Light, Dark, Sepia, and Navy, using theme-specific color token usage and consistent visual presentation checks.

Can I check WCAG touch target compliance manually during a component audit?▼

Yes, you can check WCAG touch target compliance manually during a component audit by reviewing interactive element sizing and verifying ARIA attributes against established accessibility guidelines.

When do I need to run a UI component audit?▼

Run a UI component audit before deploying a new feature to catch accessibility issues, ensure mobile parity, and verify theme consistency, guaranteeing a polished user experience across all devices.

Related Skills

Explore More Software Engineering Skills→
ChasonnnnChasonnnn

design-guide

Define UI design systems with tokens, typography, and component guidelines.

Community
Advanced
manutejmanutej
1

playwright-visual-testing

Automate browser testing and visual regression analysis with Playwright.

Community
Advanced
ll1llkll1llk

design-system

Manage token-based UI design and generate slides with design tokens.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced