| name | baseline-ui |
| description | Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. |
| risk | unknown |
| source | https://github.com/ibelick/ui-skills/tree/main/skills/baseline-ui |
| source_repo | ibelick/ui-skills |
| source_type | community |
| date_added | "2026-07-01T00:00:00.000Z" |
| license | MIT |
| license_source | https://github.com/ibelick/ui-skills/blob/main/LICENSE |
Baseline UI
When to Use
Use this skill when you need quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
How to use
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 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 next to where the action happens
- NEVER block paste in
input or textarea elements
Animation
- NEVER add animation unless it is explicitly requested
- MUST animate only compositor props (, )
