baseline-ui
Installation
Summary
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
SKILL.md
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)