What problem does it solve?
Aligning UI across agent-facing interfaces is challenging; this skill codifies design constraints to deliver consistent, accessible, and fast user experiences.
Core Features & Use Cases
- Use Tailwind CSS defaults for spacing, typography, radii, and shadows to ensure visual consistency.
- MUST use
motion/react for any JavaScript animation to ensure smooth, accessible motion.
- SHOULD use
tw-animate-css for entrance and micro-animations in Tailwind CSS to reduce boilerplate.
- MUST use the
cn utility (clsx + tailwind-merge) for conditional class logic.
- Components: MUST use accessible primitives for interactions and respect existing primitives first; NEVER mix primitive systems; SHOULD prefer Base UI for new primitives if compatible.
- 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 actions; SHOULD use skeletons for loading states; NEVER use h-screen, use h-dvh; MUST respect safe-area-inset; MUST show errors next to the action.
- Animation: MUST animate only compositor props (
transform, opacity); NEVER animate layout or paint properties; MUST use ease-out on entrance; NEVER exceed 200ms; MUST pause looping animations when off-screen; MUST respect prefers-reduced-motion.
- Typography: MUST use
text-balance for headings and text-pretty for body; MUST use tabular-nums; SHOULD truncate with line-clamp for dense UI; NEVER modify letter-spacing.
- Layout: MUST use a fixed z-index scale; SHOULD use
size-x for square elements.
- Performance: NEVER animate heavy blur or backdrop-filter; NEVER use
will-change outside active animation; NEVER use useEffect for render logic.
- Design: NEVER use gradients unless requested; NEVER use purple or multicolor gradients; NEVER use glow as primary affordances; SHOULD use Tailwind default shadows; MUST give empty states a clear next action; SHOULD limit accent color usage to one per view; SHOULD use existing theme tokens.
Quick Start
Audit an existing agent-facing UI screen and refactor it to conform with these constraints.
