How does this skill help with accessibility?

It enforces the use of accessible primitives like Radix and React Aria, mandates ARIA labels for icon-only buttons, and prohibits rebuilding keyboard behavior by hand.

Can I use this with any CSS framework?

While the skill has general UI principles, it is specifically optimized for Tailwind CSS and expects Tailwind defaults unless custom values are specified.

What animation libraries does this skill support?

It mandates the use of motion/react (formerly framer-motion) for JavaScript animations and suggests tw-animate-css for simple Tailwind-based micro-animations.

How do I audit a specific file for UI violations?

You can use the '/ui-skills ' command to get a detailed report of violations, a brief explanation of why they matter, and a concrete code-level fix.

UI Engineering Skills

Name: UI Engineering Skills
Author: phrazzld

byphrazzld

•

Design Tools

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

The UI Skills plugin acts as a specialized guidance layer for frontend development, ensuring that user interfaces are built with a focus on accessibility, performance, and modern design standards. It enforces specific technology choices like Tailwind CSS and motion/react while providing strict rules for animations, layout, and typography. This skill is particularly useful for developers wanting to maintain a consistent design system, prevent common UI anti-patterns like layout shifts, and ensure that every component meets rigorous accessibility requirements without manual oversight.

Key Features

01Enforces accessibility via Radix, React Aria, and Base UI primitives.

02Audits existing code for UI violations with automated feedback and concrete fixes.

03Optimizes animation performance by restricting properties to compositor-only transforms.

04Improves typography using modern CSS features like text-balance and tabular-nums.

052 GitHub stars

06Standardizes Tailwind CSS and motion/react implementation patterns.

Use Cases

01Ensuring accessibility best practices like ARIA labels and focus management are consistently applied.

02Optimizing web performance by preventing layout shifts and expensive animation paint cycles.

03Automating code reviews for frontend components to ensure design system compliance.

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