Why does it restrict certain CSS properties like h-screen?

It favors modern alternatives like h-dvh (dynamic viewport height) to prevent common layout issues on mobile devices where browser toolbars change the visible area.

What is the UI Design System skill for Claude Code?

It is a specialized capability that applies opinionated constraints to UI development, ensuring your code follows modern best practices for accessibility, performance, and design consistency.

How do I audit a specific file for UI violations?

You can use the command `/ui-skills ` to have Claude review the code against its constraints and provide a list of violations with concrete code-level fixes.

Which animation libraries does this skill recommend?

The skill mandates the use of motion/react (formerly Framer Motion) for JavaScript animations and suggests tw-animate-css for simple entrance animations.

Does this skill help with web accessibility?

Yes, it requires the use of accessible primitives like Radix or Base UI and enforces rules for keyboard behavior, focus management, and ARIA labels.

UI Design System & Best Practices

Name: UI Design System & Best Practices
Author: amano--

byamano--

0•

Design Tools

Enforces opinionated UI constraints and accessibility standards to ensure high-quality, performant, and accessible frontend interfaces.

This skill acts as a rigorous guardian for frontend development, providing a comprehensive set of rules for Claude to follow when writing or auditing UI code. It mandates the use of modern standards like Tailwind CSS, motion/react for animations, and accessible primitives from Radix or Base UI. By focusing on compositor-only animations, performance-first layout units like h-dvh, and strict typography rules, it helps developers eliminate design debt, accessibility gaps, and common layout pitfalls automatically during the coding process.

Key Features

01Opinionated layout constraints using modern CSS units and safe-area insets

020 GitHub stars

03Strict enforcement of accessibility primitives and ARIA labeling standards

04Standardized typography and design principles for consistent data display and empty states

05Automated code audits for UI violations with specific fix suggestions

06Performance-optimized animation rules focusing on compositor properties and timing

Use Cases

01Scaffolding new UI features that must strictly adhere to Tailwind and Radix standards

02Auditing existing React components for accessibility and performance violations

03Optimizing interaction feedback and animations for low-latency user experiences

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add amano--/call-center design-system

For use in Claude.ai and ChatGPT

Download Skill