Does it improve animation performance?

Yes, it enforces strict rules such as only animating compositor properties (transform, opacity) and limiting interaction feedback to 200ms.

What CSS framework does this skill support?

This skill is optimized for Tailwind CSS and mandates the use of Tailwind defaults unless custom values are specifically requested.

Can I use it with any frontend project?

While it works best with React and Tailwind CSS stacks, the general design and layout constraints apply to most modern web development environments.

How do I use UI Skills to review my code?

You can run the command `/ui-skills ` within Claude Code to review a specific file against all design constraints and receive detailed violation reports with fixes.

How does this skill handle web accessibility?

It enforces the use of accessible primitives like Radix and React Aria, requires ARIA labels for icon-only buttons, and prohibits rebuilding complex focus behaviors by hand.

UI Interface Expert

Name: UI Interface Expert
Author: Daisuke134

byDaisuke134

•

Design Tools

Enforces opinionated constraints and best practices for building high-quality, accessible, and performance-optimized web interfaces.

UI Skills is a specialized capability for Claude Code designed to maintain professional frontend standards by applying strict constraints on styling, accessibility, and performance. It ensures consistency across your project by mandating the use of Tailwind CSS, motion/react for animations, and accessible primitives like Radix or Base UI. By using this skill, developers can automatically audit their code for common UI pitfalls—such as layout shifts, missing ARIA labels, or inefficient animation properties—while receiving concrete, code-level suggestions to align with modern web design best practices.

Key Features

01Automated UI auditing to detect and fix design system violations

02Layout and performance guardrails to prevent jank and excessive rendering

03Advanced typography optimization using text-balance, text-pretty, and tabular-nums

04Strict enforcement of Tailwind CSS defaults and performance-first animation rules

05Accessibility-first component requirements using ARIA-compliant primitives

063 GitHub stars

Use Cases

01Generating new UI components that strictly follow production-grade constraints

02Auditing existing React components for accessibility and design consistency

03Optimizing frontend performance by limiting animations to compositor properties

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add daisuke134/anicca.ai ui-skills

For use in Claude.ai and ChatGPT

Download Skill