baseline-ui

name	baseline-ui
description	ALWAYS use this when the request matches Baseline UI: Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects.

Baseline UI

Selective Reading Rule

Start with:

• references/senior-master-standard.md
• references/usage-routing.md
• references/quality-checklist.md

Then load only the inherited docs, scripts, assets, or examples that match the user's actual task.

Enforces an opinionated UI baseline to prevent AI-generated interface slop.

When to Use

• You are building or reviewing Tailwind-based UI and want a strict baseline for accessibility, motion, typography, and layout.
• The task is to prevent generic or sloppy AI-generated interface decisions before they spread through the codebase.
• You need concrete UI constraints to apply to a file review or an ongoing frontend implementation.

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 utility ( + ) for class logic