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

It uses h-dvh (dynamic viewport height) to ensure layouts correctly account for shifting browser toolbars, which is critical for consistent mobile user experiences.

Can I use custom colors and gradients?

The skill discourages custom gradients and arbitrary color tokens unless explicitly requested, preferring standard Tailwind tokens for design consistency.

How does it handle accessibility?

It requires ARIA labels for icon buttons, mandates keyboard/focus behavior via established primitives, and enforces support for reduced motion settings.

Does it support animations?

Yes, but it enforces strict performance rules, preferring compositor props (transform, opacity) and limiting interaction feedback to 200ms.

What UI libraries does this skill prefer?

It mandates the use of Tailwind CSS for styling and accessible primitives like Base UI, Radix, or React Aria for component logic to ensure keyboard and focus accessibility.

Professional UI Constraints

Name: Professional UI Constraints
Author: edmundmiller

byedmundmiller

•

设计工具

Enforces opinionated, high-performance, and accessible UI development patterns for frontend agents.

关于

The UI Skills plugin provides a comprehensive set of constraints and best practices for building modern, production-grade web interfaces. It guides Claude to prioritize Tailwind CSS defaults, accessible primitives like Radix and Base UI, and high-performance animation techniques using motion/react. By enforcing strict rules on typography, layout consistency, and interaction design, it ensures that generated code is not only visually polished but also accessible, performant, and maintainable across different devices.

主要功能

Standardizes typography with modern CSS features like text-balance and tabular-nums
Strict interaction guidelines for destructive actions, loading states, and mobile safety
42 GitHub stars
Mandates accessible component primitives like Radix, Base UI, and React Aria
Optimizes animations for performance using compositor props and reduced-motion checks
Enforces Tailwind CSS utility-first styling and default design tokens

使用场景

Refactoring existing components to follow high-performance animation and layout standards
Standardizing frontend development output across a team using AI agents
Building a accessible design system from scratch with standardized UI patterns

关于

主要功能

Standardizes typography with modern CSS features like text-balance and tabular-nums
Strict interaction guidelines for destructive actions, loading states, and mobile safety
42 GitHub stars
Mandates accessible component primitives like Radix, Base UI, and React Aria
Optimizes animations for performance using compositor props and reduced-motion checks
Enforces Tailwind CSS utility-first styling and default design tokens

使用场景

Refactoring existing components to follow high-performance animation and layout standards
Standardizing frontend development output across a team using AI agents
Building a accessible design system from scratch with standardized UI patterns