baseline-ui

1# Baseline UI
2 
3Enforces an opinionated UI baseline to prevent AI-generated interface slop.
4 
5## How to use
6 
7- `/baseline-ui`
8  Apply these constraints to any UI work in this conversation.
9 
10- `/baseline-ui <file>`
11  Review the file against all constraints below and output:
12  - violations (quote the exact line/snippet)
13  - why it matters (1 short sentence)
14  - a concrete fix (code-level suggestion)
15 
16## Stack
17 
18- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested
19- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required
20- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS
21- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic
22 
23## Components
24 
25- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`)
26- MUST use the project’s existing component primitives first
27- NEVER mix primitive systems within the same interaction surface
28- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack
29- MUST add an `aria-label` to icon-only buttons
30- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested
31 
32## Interaction
33 
34- MUST use an `AlertDialog` for destructive or irreversible actions
35- SHOULD use structural skeletons for loading states
36- NEVER use `h-screen`, use `h-dvh`
37- MUST respect `safe-area-inset` for fixed elements
38…