What tech stack does this skill assume?

It primarily targets modern React environments using Tailwind CSS, motion/react (formerly Framer Motion), and accessible primitives like Radix, Base UI, or React Aria.

Can I use custom animations with this skill?

The skill enforces strict rules on animations, favoring performance by limiting them to compositor properties (opacity, transform) and respecting user reduced-motion preferences.

Why does it restrict gradients and glow effects?

These constraints prioritize clean, functional design and accessibility, ensuring that primary affordances are clear and the UI remains professional and easy to maintain.

Does this skill help with web accessibility?

Yes, it mandates the use of accessible component primitives for keyboard/focus behavior and requires ARIA labels for icon-only buttons to ensure WCAG compliance.

How does this improve frontend performance?

It improves performance by preventing layout-shifting animations, restricting the use of expensive CSS filters like large blurs, and optimizing React render logic.

UI Design Standards & Constraints

Name: UI Design Standards & Constraints
Author: vaayne

byvaayne

•

Design Tools

Enforces opinionated constraints and best practices for building accessible, high-performance web interfaces using Tailwind CSS and modern React primitives.

This skill provides a set of strict guidelines and patterns to help Claude build professional, accessible, and performant user interfaces. It enforces specific tech stack choices like Tailwind CSS and motion/react, ensures accessibility through established primitives like Radix or Base UI, and prevents common UI anti-patterns like layout shifts, excessive animations, or inconsistent z-index management. It is particularly useful for developers who want to maintain a high bar for UI quality and consistency while using AI to generate frontend code.

Key Features

01Enforces Tailwind CSS best practices and utility-first styling standards

02Restricts animations to high-performance compositor-only properties

03Ensures consistent interaction design through strict modal and loading state rules

0421 GitHub stars

05Mandates accessibility via Radix, Base UI, or React Aria primitives

06Optimizes typography using modern CSS features like text-balance and tabular-nums

Use Cases

01Building production-grade React components with consistent styling and accessibility

02Automating the creation of accessible design systems using standardized primitives

03Refactoring legacy frontend code to follow modern UI performance and animation standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vaayne/agent-kit ui-skills

For use in Claude.ai and ChatGPT

Download Skill