baseline-uilisted
Install: claude install-skill aiskillstore/marketplace
# Baseline UI
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
## How to use
- `/baseline-ui`
Apply 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` (formerly `framer-motion`) when JavaScript animation is required
- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS
- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic
## Components
- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`)
- MUST use the project’s existing component primitives first
- NEVER mix primitive systems within the same interaction surface
- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack
- MUST add an `aria-label` to icon-only buttons
- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested
## Interaction
- MUST use an `AlertDialog` for destructive or irreversible actions
- SHOULD use structural skeletons for loading states
- NEVER use `h-screen`, use `h-dvh`
- MUST respect `safe-area-inset` for fixed elements
- MUST show errors nex