Why are there restrictions on gradients and effects?

To maintain a clean, professional aesthetic and avoid common design anti-patterns, the skill limits the use of gradients and glows unless specifically requested.

How does it handle web animations?

It enforces the use of motion/react and restricts animations to compositor properties (transform, opacity) to ensure smooth performance and respect for user motion preferences.

Does it support mobile-friendly layouts?

Yes, it mandates mobile-specific best practices such as using dynamic viewport height (h-dvh) and respecting safe-area-insets for fixed elements.

What UI libraries does this skill prefer?

The skill prioritizes Tailwind CSS for styling and accessible primitives like Base UI, Radix, and React Aria for component behavior.

Professional UI Design & Polish

Name: Professional UI Design & Polish
Author: edmundmiller

byedmundmiller

•

设计工具

Enforces opinionated constraints and best practices for building accessible, high-performance, and visually consistent user interfaces.

关于

This skill provides a comprehensive set of architectural constraints and design patterns to help Claude build production-grade frontend interfaces. It prioritizes the use of Tailwind CSS defaults, mandates accessibility through primitives like Base UI and Radix, and enforces strict performance rules for animations and layouts. By utilizing this skill, developers can ensure their AI-generated code follows modern standards for typography, interaction design, and mobile responsiveness without manual oversight.

主要功能

Compositor-only animation rules for high-performance motion
Strict enforcement of Tailwind CSS design tokens and spacing
40 GitHub stars
Mobile-ready layout constraints like dynamic viewport units and safe areas
Modern typography standards including text-balance and tabular-nums
Accessibility-first component logic using Radix and Base UI

使用场景

Standardizing design systems across large-scale frontend projects
Optimizing frontend performance through efficient animation and render logic
Implementing accessible keyboard and focus behavior by default

关于

主要功能

Compositor-only animation rules for high-performance motion
Strict enforcement of Tailwind CSS design tokens and spacing
40 GitHub stars
Mobile-ready layout constraints like dynamic viewport units and safe areas
Modern typography standards including text-balance and tabular-nums
Accessibility-first component logic using Radix and Base UI

使用场景

Standardizing design systems across large-scale frontend projects
Optimizing frontend performance through efficient animation and render logic
Implementing accessible keyboard and focus behavior by default