Can I use this to audit existing code?

Yes, by using the command `/ui-skills `, Claude will review the code for violations, explain why they matter, and provide concrete fixes.

Why does it require specific component primitives?

To ensure keyboard navigation and focus behavior are accessible out of the box without the risks associated with rebuilding complex interactions by hand.

What tech stack does the UI Skills plugin support?

It is optimized for Tailwind CSS, motion/react (formerly framer-motion), and accessible primitives like Radix, Base UI, or React Aria.

How does this skill improve UI performance?

It enforces the use of compositor-only animation properties (transform, opacity) and restricts heavy paint operations like large blurs or layout-shifting animations.

Does it handle mobile-specific layout issues?

Yes, it specifically enforces the use of dynamic viewport height (h-dvh) and safe-area-insets to ensure layouts work perfectly on mobile devices.

Opinionated UI & Frontend Standards

Name: Opinionated UI & Frontend Standards
Author: phrazzld

byphrazzld

•

Design Tools

Enforces high-performance UI constraints and accessibility best practices for modern web interfaces.

The UI Skills skill provides a set of production-grade constraints to ensure Claude builds accessible, performant, and visually consistent user interfaces. It automates the adherence to modern frontend standards—including Tailwind CSS best practices, compositor-only animations via motion/react, and accessible component primitives like Radix and Base UI—while preventing common anti-patterns like layout shifts, blocked paste events, or inefficient render logic. It is ideal for teams looking to maintain a high bar for UX quality without manual review overhead.

Key Features

01Validates typography with modern CSS features like text-balance, text-pretty, and tabular-nums

02Optimizes animations using compositor-only properties and motion/react for high performance

03Prevents performance regressions by restricting heavy filters and inefficient useEffect patterns

04Enforces accessible component primitives using Radix, Base UI, and React Aria

052 GitHub stars

06Standardizes Tailwind CSS usage including dynamic viewport units (h-dvh) and utility merging

Use Cases

01Scaffolding new frontend features with consistent styling, interaction, and animation patterns

02Automating code reviews for UI components to identify accessibility or performance violations

03Refactoring legacy CSS or layout logic to modern, mobile-friendly Tailwind CSS standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phrazzld/claude-config ui-skills

For use in Claude.ai and ChatGPT

Download Skill