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

•

Design Tools

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.

Key Features

01Compositor-only animation rules for high-performance motion

02Strict enforcement of Tailwind CSS design tokens and spacing

0340 GitHub stars

04Mobile-ready layout constraints like dynamic viewport units and safe areas

05Modern typography standards including text-balance and tabular-nums

06Accessibility-first component logic using Radix and Base UI

Use Cases

01Standardizing design systems across large-scale frontend projects

02Optimizing frontend performance through efficient animation and render logic

03Implementing accessible keyboard and focus behavior by default

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add edmundmiller/dotfiles ui-skills

For use in Claude.ai and ChatGPT

Download Skill