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

0•

Design Tools

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

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.

Key Features

01Generates standardized UX documentation and design checklists

020 GitHub stars

03Implements WCAG-compliant accessibility guardrails and focus visibility

04Applies lightweight CSS micro-interactions for hover and focus states

05Defines global UI tokens for typography, spacing, radii, and color roles

06Creates consistent empty, loading skeleton, and error states

Use Cases

01Implementing comprehensive accessibility and state handling for dynamic components

02Transforming a basic Astro prototype into a production-grade interface

03Standardizing design tokens across a headless WordPress frontend

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cdryampi/wordpress_headless ux-polish

For use in Claude.ai and ChatGPT

Download Skill