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

•

设计工具

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

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.

主要功能

01Automates UI code reviews by identifying violations and suggesting concrete code-level fixes.

02Enforces accessibility standards using Radix, Base UI, and React Aria primitives.

03Standardizes styling with Tailwind CSS defaults and the utility-merge logic.

04Optimizes performance through strict animation limits and compositor-only property constraints.

05Improves content readability using advanced typography features like text-balance and tabular-nums.

061 GitHub stars

使用场景

01Standardizing a codebase to use a unified design system and consistent Tailwind CSS patterns.

02Scaffolding new UI features that require sophisticated, performant animations and responsive layouts.

03Auditing existing frontend components for accessibility violations and performance bottlenecks.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ivannxbt/config ui-skills

For use in Claude.ai and ChatGPT

Download Skill