Does this skill support accessibility by default?

Yes, it strictly enforces the use of accessible primitives like Radix or Base UI and requires aria-labels for icon-only buttons.

Which animation library does this skill prefer?

The skill mandates the use of motion/react (formerly Framer Motion) for JavaScript-based animations and prefers CSS animations for micro-interactions.

Can this skill audit my existing code for errors?

Yes, by running /ui-skills , the skill will review the specified file for violations and provide concrete, code-level fixes.

Why does this skill prohibit 'h-screen'?

It requires the use of 'h-dvh' (dynamic viewport height) to ensure layout stability across mobile browsers that have dynamic toolbars.

How do I trigger the UI constraints during a chat?

Use the /ui-skills command to apply these constraints to all subsequent UI work in your current conversation with Claude.

UI Design Skills

Name: UI Design Skills
Author: phrazzld

byphrazzld

•

Herramientas de Diseño

Enforces opinionated constraints and professional best practices for building high-performance, accessible web interfaces.

The ui-skills plugin for Claude Code provides a rigorous framework for building production-grade frontend interfaces. It ensures consistency by mandating specific tech stacks like Tailwind CSS and motion/react, while enforcing strict rules regarding accessibility primitives, animation performance, and typography. By using this skill, developers can automate the review of their UI code against industry-standard patterns, avoiding common pitfalls like layout thrashing, inaccessible interactive elements, and inconsistent styling choices.

Características Principales

01Optimizes animation performance by restricting transitions to compositor properties like opacity and transform.

02Provides a code review mode to identify and fix UI violations in existing source files.

03Standardizes styling using Tailwind CSS defaults and the 'cn' utility for clean class logic.

04Enforces accessibility standards via Radix, React Aria, and Base UI primitives.

05Implements advanced typography features including text-balance, text-pretty, and tabular-nums.

062 GitHub stars

Casos de Uso

01Generating new UI layouts that adhere to strict Tailwind CSS and Framer Motion best practices.

02Auditing existing React components for accessibility and animation performance violations.

03Building high-performance dashboards with optimized loading states and data-heavy typography.

Características Principales

01Optimizes animation performance by restricting transitions to compositor properties like opacity and transform.

02Provides a code review mode to identify and fix UI violations in existing source files.

03Standardizes styling using Tailwind CSS defaults and the 'cn' utility for clean class logic.

04Enforces accessibility standards via Radix, React Aria, and Base UI primitives.

05Implements advanced typography features including text-balance, text-pretty, and tabular-nums.

062 GitHub stars

Casos de Uso

01Generating new UI layouts that adhere to strict Tailwind CSS and Framer Motion best practices.

02Auditing existing React components for accessibility and animation performance violations.

03Building high-performance dashboards with optimized loading states and data-heavy typography.