How do I audit a specific file with UI Skills?

You can use the command `/ui-skills ` to have Claude review the file against all constraints, highlighting violations with specific line quotes and concrete code fixes.

What are the animation requirements for this skill?

It requires using `motion/react` for JS animations, limits feedback to 200ms, and mandates that only compositor properties like transform and opacity are animated.

Why does it prefer h-dvh over h-screen?

The skill enforces `h-dvh` (dynamic viewport height) to ensure layouts correctly account for mobile browser UI elements like the address bar, preventing layout shifts.

Does it handle accessibility automatically?

Yes, it mandates the use of accessible primitives (Radix, Base UI) for keyboard/focus behavior and requires `aria-labels` for icon-only buttons.

Does this skill support CSS-in-JS libraries?

This skill is highly opinionated and defaults to Tailwind CSS. It mandates the use of Tailwind defaults and the `cn` utility for class logic.

UI Design & Frontend Skills

Name: UI Design & Frontend Skills
Author: fuushyn

byfuushyn

•

Herramientas de Diseño

Enforces opinionated frontend constraints and accessibility best practices for building polished, high-performance user interfaces.

This skill equips Claude with a rigorous framework for frontend development, ensuring that UI components are accessible, performant, and visually consistent. It automates the enforcement of modern tech stacks like Tailwind CSS and motion/react, while providing real-time auditing for code violations. By applying these constraints, developers can guarantee production-grade outcomes including compositor-only animations, accessible ARIA primitives, and optimized layouts that respect mobile safe areas and motion preferences.

Características Principales

01Automated UI code reviews for accessibility and performance violations

0212 GitHub stars

03Performance-optimized animation constraints (200ms limit, compositor-only)

04Strict enforcement of Tailwind CSS and motion/react implementation patterns

05Mandatory accessibility standards using Radix, Base UI, or React Aria

06Modern typography rules including text-balance, text-pretty, and tabular-nums

Casos de Uso

01Auditing existing React components for UI/UX and accessibility best practices

02Generating new UI features that adhere to strict performance and design constraints

03Ensuring consistent styling and animation patterns across a shared codebase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fuushyn/armour ui-skills

For use in Claude.ai and ChatGPT

Download Skill