How do I audit a specific file with UI Skills?

You can use the command `/ui-skills ` to have Claude review the file against all constraints, highlighting violations with specific line quotes and concrete code fixes.

What are the animation requirements for this skill?

It requires using `motion/react` for JS animations, limits feedback to 200ms, and mandates that only compositor properties like transform and opacity are animated.

Why does it prefer h-dvh over h-screen?

The skill enforces `h-dvh` (dynamic viewport height) to ensure layouts correctly account for mobile browser UI elements like the address bar, preventing layout shifts.

Does it handle accessibility automatically?

Yes, it mandates the use of accessible primitives (Radix, Base UI) for keyboard/focus behavior and requires `aria-labels` for icon-only buttons.

Does this skill support CSS-in-JS libraries?

This skill is highly opinionated and defaults to Tailwind CSS. It mandates the use of Tailwind defaults and the `cn` utility for class logic.

UI Design & Frontend Skills

Name: UI Design & Frontend Skills
Author: fuushyn

byfuushyn

•

Design Tools

Enforces opinionated frontend constraints and accessibility best practices for building polished, high-performance user interfaces.

About

This skill equips Claude with a rigorous framework for frontend development, ensuring that UI components are accessible, performant, and visually consistent. It automates the enforcement of modern tech stacks like Tailwind CSS and motion/react, while providing real-time auditing for code violations. By applying these constraints, developers can guarantee production-grade outcomes including compositor-only animations, accessible ARIA primitives, and optimized layouts that respect mobile safe areas and motion preferences.

Key Features

Automated UI code reviews for accessibility and performance violations
12 GitHub stars
Performance-optimized animation constraints (200ms limit, compositor-only)
Strict enforcement of Tailwind CSS and motion/react implementation patterns
Mandatory accessibility standards using Radix, Base UI, or React Aria
Modern typography rules including text-balance, text-pretty, and tabular-nums

Use Cases

Auditing existing React components for UI/UX and accessibility best practices
Generating new UI features that adhere to strict performance and design constraints
Ensuring consistent styling and animation patterns across a shared codebase

About

Key Features

Automated UI code reviews for accessibility and performance violations
12 GitHub stars
Performance-optimized animation constraints (200ms limit, compositor-only)
Strict enforcement of Tailwind CSS and motion/react implementation patterns
Mandatory accessibility standards using Radix, Base UI, or React Aria
Modern typography rules including text-balance, text-pretty, and tabular-nums

Use Cases

Auditing existing React components for UI/UX and accessibility best practices
Generating new UI features that adhere to strict performance and design constraints
Ensuring consistent styling and animation patterns across a shared codebase