What animation libraries does this skill support?

The skill specifically requires the use of motion/react (formerly Framer Motion) for JavaScript animations and tw-animate-css for Tailwind-based micro-animations.

Does it work with existing component libraries?

Yes, the skill is designed to prioritize the project's existing primitives first but suggests Base UI or Radix when new components need to be created.

Can I use this for reviewing existing code?

Yes, by using the command '/ui-skills ', Claude will audit the specific file for any violations of the design constraints and provide exact line quotes and fixes.

Why does it restrict certain CSS properties like h-screen?

It enforces modern standards like h-dvh (dynamic viewport height) to ensure better compatibility with mobile browsers where address bars can interfere with layout calculations.

How does the UI Skills plugin improve accessibility?

It mandates the use of accessible primitives like Radix and Base UI, ensures aria-labels are present on icon-only buttons, and prevents rebuilding keyboard or focus behavior by hand.

UI Design & Frontend Best Practices

Name: UI Design & Frontend Best Practices
Author: ivannxbt

byivannxbt

•

Design Tools

Enforces opinionated constraints and accessibility standards for building high-quality, performant, and production-ready user interfaces.

About

The UI Skills plugin serves as a comprehensive framework for frontend development within Claude Code, ensuring every interface built meets professional design and performance benchmarks. It mandates a modern stack including Tailwind CSS and motion/react while prioritizing accessibility through primitives like Radix and Base UI. By enforcing strict rules on animation limits, layout techniques (like dvh units and safe-areas), and typography (text-balance), it helps developers avoid common UI anti-patterns and ensures a consistent, accessible user experience across all devices.

Key Features

Automates UI code reviews by identifying violations and suggesting concrete code-level fixes.
Enforces accessibility standards using Radix, Base UI, and React Aria primitives.
Standardizes styling with Tailwind CSS defaults and the utility-merge logic.
Optimizes performance through strict animation limits and compositor-only property constraints.
Improves content readability using advanced typography features like text-balance and tabular-nums.
1 GitHub stars

Use Cases

Standardizing a codebase to use a unified design system and consistent Tailwind CSS patterns.
Scaffolding new UI features that require sophisticated, performant animations and responsive layouts.
Auditing existing frontend components for accessibility violations and performance bottlenecks.

About

Key Features

Automates UI code reviews by identifying violations and suggesting concrete code-level fixes.
Enforces accessibility standards using Radix, Base UI, and React Aria primitives.
Standardizes styling with Tailwind CSS defaults and the utility-merge logic.
Optimizes performance through strict animation limits and compositor-only property constraints.
Improves content readability using advanced typography features like text-balance and tabular-nums.
1 GitHub stars

Use Cases

Standardizing a codebase to use a unified design system and consistent Tailwind CSS patterns.
Scaffolding new UI features that require sophisticated, performant animations and responsive layouts.
Auditing existing frontend components for accessibility violations and performance bottlenecks.