baseline-ui
Enforces design and interaction constraints to prevent common UI anti-patterns in Tailwind CSS projects.
- Validates animation durations (max 200ms for interactions), restricts animations to compositor properties only, and enforces
prefers-reduced-motionrespect - Requires accessible component primitives (Base UI, React Aria, Radix) for interactive elements and enforces keyboard behavior standards
- Checks typography rules including
text-balancefor headings,tabular-numsfor data, and prevents arbitrary letter-spacing modifications - Prevents layout anti-patterns like
h-screen(useh-dvhinstead), arbitrary z-index values, and animating layout properties - Reviews files against all constraints and outputs exact violations with code-level fixes
Baseline UI
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
How to use
-
/baseline-uiApply these constraints to any UI work in this conversation. -
/baseline-ui <file>Review the file against all constraints below and output:- violations (quote the exact line/snippet)
- why it matters (1 short sentence)
- a concrete fix (code-level suggestion)
Stack
- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested
- MUST use
motion/react(formerlyframer-motion) when JavaScript animation is required
More from ibelick/ui-skills
fixing-motion-performance
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
14.4Kfixing-accessibility
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
11.0Kfixing-metadata
>
10.3Kui-skills
Opinionated constraints for building better interfaces with agents.
22