Does this skill work with Tailwind CSS?

Yes, it is designed to define UI tokens using either standard CSS variables or a Tailwind theme strategy depending on your project configuration.

How does it handle animations?

It focuses on high-performance, low-impact micro-interactions using native CSS transitions for hover and focus states rather than heavy JavaScript animation libraries.

What accessibility standards are implemented?

The skill applies guardrails for focus visibility, semantic heading structures, keyboard navigation, and sufficient color contrast.

Can it handle dynamic data states?

Yes, it specifically generates skeleton screens for loading, empty states for zero-data scenarios, and error fallbacks for data-driven components.

Where is the UX documentation stored?

The skill automatically generates and updates documentation in frontend/docs/ux.md to ensure team alignment on design decisions.

UX Polish & Accessibility

Name: UX Polish & Accessibility
Author: cdryampi

bycdryampi

Herramientas de Diseño

Refines Astro frontends with production-grade UI tokens, accessibility standards, and consistent state handling.

Acerca de

The UX Polish skill automates the refinement of Astro-based frontends by establishing consistent design systems and accessibility guardrails. It specializes in defining UI tokens for typography, spacing, and color roles while implementing WCAG-compliant focus states and keyboard navigation. By focusing on low-impact CSS transitions and semantic HTML, it ensures a professional, high-performance user experience. This skill is ideal for developers looking to move from a raw prototype to a production-ready interface with robust loading, empty, and error states without requiring heavy architectural rewrites.

Características Principales

Generates standardized UX documentation and design checklists
0 GitHub stars
Implements WCAG-compliant accessibility guardrails and focus visibility
Applies lightweight CSS micro-interactions for hover and focus states
Defines global UI tokens for typography, spacing, radii, and color roles
Creates consistent empty, loading skeleton, and error states

Casos de Uso

Implementing comprehensive accessibility and state handling for dynamic components
Transforming a basic Astro prototype into a production-grade interface
Standardizing design tokens across a headless WordPress frontend

Acerca de

Características Principales

Generates standardized UX documentation and design checklists
0 GitHub stars
Implements WCAG-compliant accessibility guardrails and focus visibility
Applies lightweight CSS micro-interactions for hover and focus states
Defines global UI tokens for typography, spacing, radii, and color roles
Creates consistent empty, loading skeleton, and error states

Casos de Uso

Implementing comprehensive accessibility and state handling for dynamic components
Transforming a basic Astro prototype into a production-grade interface
Standardizing design tokens across a headless WordPress frontend