Baseline UI

1---
2name: baseline-ui
3description: Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
4---
5 
6# Baseline UI
7 
8Enforces an opinionated UI baseline to prevent AI-generated interface slop.
9 
10## How to use
11 
12- `/baseline-ui`
13  Apply these constraints to any UI work in this conversation.
14 
15- `/baseline-ui <file>`
16  Review the file against all constraints below and output:
17  - violations (quote the exact line/snippet)
18  - why it matters (1 short sentence)
19  - a concrete fix (code-level suggestion)
20 
21## Stack
22 
23- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested
24- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required
25- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS
26- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic
27 
28## Components
29 
30- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`)
31- MUST use the project’s existing component primitives first
32- NEVER mix primitive systems within the same interaction surface
33- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack
34- MUST add an `aria-label` to icon-only buttons
35- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested
36 
37## Interaction
38 
39- MUST use an `AlertDialog` for destructive or irreversible actions
40- SHOULD use structural skeletons for loading states
41- NEVER use `h-screen`, use `h-dvh`
42- MUST respect `safe-area-inset` for fixed elements
43- MUST show errors next to where the action happens
44- NEVER block paste in `input` or `textarea` elements
45 
46## Animation
47 
48- NEVER add animation unless it is explicitly requested
49- MUST animate only compositor props (`transform`, `opacity`)
50- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`)
51- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons)
52- SHOULD use `ease-out` on entrance
53- NEVER exceed `200ms` for interaction feedback
54- MUST pause looping animations when off-screen
55- SHOULD respect `prefers-reduced-motion`
56- NEVER introduce custom easing curves unless explicitly requested
57- SHOULD avoid animating large images or full-screen surfaces
58 
59## Typography
60 
61- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs
62- MUST use `tabular-nums` for data
63- SHOULD use `truncate` or `line-clamp` for dense UI
64- NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested
65 
66## Layout
67 
68- MUST use a fixed `z-index` scale (no arbitrary `z-*`)
69- SHOULD use `size-*` for square elements instead of `w-*` + `h-*`
70 
71## Performance
72 
73- NEVER animate large `blur()` or `backdrop-filter` surfaces
74- NEVER apply `will-change` outside an active animation
75- NEVER use `useEffect` for anything that can be expressed as render logic
76 
77## Design
78 
79- NEVER use gradients unless explicitly requested
80- NEVER use purple or multicolor gradients
81- NEVER use glow effects as primary affordances
82- SHOULD use Tailwind CSS default shadow scale unless explicitly requested
83- MUST give empty states one clear next action
84- SHOULD limit accent color usage to one per view
85- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones
86