---

name: ui-design description: Opinionated constraints for building better interfaces with agents. Use when building UI components, implementing animations, designing layouts, reviewing frontend accessibility, or working with Tailwind CSS, motion/react, or accessible primitives like Radix/Base UI.

UI Design

Opinionated constraints for building better interfaces with agents.

When to Use

• Building UI components with Tailwind CSS
• Implementing animations or transitions
• Adding interactive elements with keyboard/focus behavior
• Reviewing frontend code for accessibility
• Designing layouts with proper z-index and spacing
• Working with loading states, error handling, or empty states

Stack

Components

Interaction

Animation

Typography

Layout

Performance

Design

Quick Reference

Allowed Animation Properties

Copytransform, opacity

Forbidden Animation Properties

Copywidth, height, top, left, margin, padding, blur(), backdrop-filter

Required Accessibility Patterns

Copy// Icon button - always add aria-label
<button aria-label="Close dialog">
  <XIcon />
</button>

// Respect reduced motion
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

Class Utility Pattern

Copyimport { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}