What tech stack does this skill assume?

It primarily targets modern React environments using Tailwind CSS, motion/react (formerly Framer Motion), and accessible primitives like Radix, Base UI, or React Aria.

Can I use custom animations with this skill?

The skill enforces strict rules on animations, favoring performance by limiting them to compositor properties (opacity, transform) and respecting user reduced-motion preferences.

Why does it restrict gradients and glow effects?

These constraints prioritize clean, functional design and accessibility, ensuring that primary affordances are clear and the UI remains professional and easy to maintain.

Does this skill help with web accessibility?

Yes, it mandates the use of accessible component primitives for keyboard/focus behavior and requires ARIA labels for icon-only buttons to ensure WCAG compliance.

How does this improve frontend performance?

It improves performance by preventing layout-shifting animations, restricting the use of expensive CSS filters like large blurs, and optimizing React render logic.

UI Design Standards & Constraints

Name: UI Design Standards & Constraints
Author: vaayne

byvaayne

•

设计工具

Enforces opinionated constraints and best practices for building accessible, high-performance web interfaces using Tailwind CSS and modern React primitives.

关于

This skill provides a set of strict guidelines and patterns to help Claude build professional, accessible, and performant user interfaces. It enforces specific tech stack choices like Tailwind CSS and motion/react, ensures accessibility through established primitives like Radix or Base UI, and prevents common UI anti-patterns like layout shifts, excessive animations, or inconsistent z-index management. It is particularly useful for developers who want to maintain a high bar for UI quality and consistency while using AI to generate frontend code.

主要功能

Enforces Tailwind CSS best practices and utility-first styling standards
Restricts animations to high-performance compositor-only properties
Ensures consistent interaction design through strict modal and loading state rules
21 GitHub stars
Mandates accessibility via Radix, Base UI, or React Aria primitives
Optimizes typography using modern CSS features like text-balance and tabular-nums

使用场景

Building production-grade React components with consistent styling and accessibility
Automating the creation of accessible design systems using standardized primitives
Refactoring legacy frontend code to follow modern UI performance and animation standards

关于

主要功能

Enforces Tailwind CSS best practices and utility-first styling standards
Restricts animations to high-performance compositor-only properties
Ensures consistent interaction design through strict modal and loading state rules
21 GitHub stars
Mandates accessibility via Radix, Base UI, or React Aria primitives
Optimizes typography using modern CSS features like text-balance and tabular-nums

使用场景

Building production-grade React components with consistent styling and accessibility
Automating the creation of accessible design systems using standardized primitives
Refactoring legacy frontend code to follow modern UI performance and animation standards