Enforce UI Baseline Standards

This skill enforces an opinionated, rule-based UI baseline meant to catch generic or sloppy AI-generated interface decisions before they spread through a codebase. Invoked as /baseline-ui to apply the constraints to ongoing UI work in the conversation, or /baseline-ui <file> to review an existing file against every rule below and report violations (quoting the exact line/snippet), why each one matters in one short sentence, and a concrete code-level fix.

Use it when building or reviewing Tailwind-based UI and you want a strict baseline for accessibility, motion, typography, and layout, or when you need concrete UI constraints to apply to a file review or an ongoing frontend implementation. It's specifically for preventing generic AI-generated interface slop - not a substitute for environment-specific validation, testing, or expert review, and work should stop for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

The baseline spans eight rule categories. Stack: use Tailwind CSS defaults unless custom values exist or are requested, use motion/react (formerly framer-motion) for JS animation, prefer tw-animate-css for entrance/micro-animations, and use the cn utility (clsx + tailwind-merge) for class logic. Components: use accessible primitives (Base UI, React Aria, Radix) for anything with keyboard/focus behavior, never mix primitive systems within one interaction surface, add aria-label to icon-only buttons, and never hand-rebuild keyboard/focus behavior. Interaction: use AlertDialog for destructive actions, use h-dvh instead of h-screen, respect safe-area-inset, show errors next to the triggering action, and never block paste in inputs/textareas. Animation: never animate unless requested, animate only compositor properties (transform, opacity), never animate layout properties, cap interaction feedback at 200ms, pause looping animations when off-screen, and respect prefers-reduced-motion.

Typography rules require text-balance for headings and text-pretty for body copy, tabular-nums for data, truncate/line-clamp for dense UI, and forbid changing tracking-* unless requested. Layout rules require a fixed z-index scale and size-* over separate w-*/h-*. Performance rules forbid animating large blur()/backdrop-filter surfaces, applying will-change outside an active animation, and using useEffect where render logic would do. Design rules forbid gradients (especially purple/multicolor) and glow-as-primary-affordance, default to the Tailwind shadow scale, require empty states to have one clear next action, and limit accent-color usage to one per view.

Frontend engineers and reviewers who want a concrete, enforceable UI baseline - covering stack choices, accessible components, motion, typography, layout, performance, and visual design - to check AI-generated or human-written interface code against, rather than relying on ad hoc taste.