* fix: stabilize validation and tests on Windows * test: add Windows smoke coverage for skill activation * refactor: make setup_web script CommonJS * fix: repair aegisops-ai frontmatter * docs: add when-to-use guidance to core skills * docs: add when-to-use guidance to Apify skills * docs: add when-to-use guidance to Google and Expo skills * docs: add when-to-use guidance to Makepad skills * docs: add when-to-use guidance to git workflow skills * docs: add when-to-use guidance to fp-ts skills * docs: add when-to-use guidance to Three.js skills * docs: add when-to-use guidance to n8n skills * docs: add when-to-use guidance to health analysis skills * docs: add when-to-use guidance to writing and review skills * meta: sync generated catalog metadata * docs: add when-to-use guidance to Robius skills * docs: add when-to-use guidance to review and workflow skills * docs: add when-to-use guidance to science and data skills * docs: add when-to-use guidance to tooling and automation skills * docs: add when-to-use guidance to remaining skills * fix: gate bundle helper execution in Windows activation * chore: drop generated artifacts from contributor PR * docs(maintenance): Record PR 457 sweep Document the open issue triage, PR supersedence decision, local verification, and source-only cleanup that prepared PR #457 for re-running CI. --------- Co-authored-by: sickn33 <sickn33@users.noreply.github.com>
3.8 KiB
3.8 KiB
name, description, risk, source
| name | description | risk | source |
|---|---|---|---|
| baseline-ui | Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency. | unknown | community |
Baseline UI
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-uiApply 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(formerlyframer-motion) when JavaScript animation is required - SHOULD use
tw-animate-cssfor entrance and micro-animations in Tailwind CSS - MUST use
cnutility (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 UIfor new primitives if compatible with the stack - MUST add an
aria-labelto icon-only buttons - NEVER rebuild keyboard or focus behavior by hand unless explicitly requested
Interaction
- MUST use an
AlertDialogfor destructive or irreversible actions - SHOULD use structural skeletons for loading states
- NEVER use
h-screen, useh-dvh - MUST respect
safe-area-insetfor fixed elements - MUST show errors next to where the action happens
- NEVER block paste in
inputortextareaelements
Animation
- NEVER add animation unless it is explicitly requested
- MUST animate only compositor props (
transform,opacity) - NEVER animate layout properties (
width,height,top,left,margin,padding) - SHOULD avoid animating paint properties (
background,color) except for small, local UI (text, icons) - SHOULD use
ease-outon entrance - NEVER exceed
200msfor interaction feedback - MUST pause looping animations when off-screen
- SHOULD respect
prefers-reduced-motion - NEVER introduce custom easing curves unless explicitly requested
- SHOULD avoid animating large images or full-screen surfaces
Typography
- MUST use
text-balancefor headings andtext-prettyfor body/paragraphs - MUST use
tabular-numsfor data - SHOULD use
truncateorline-clampfor dense UI - NEVER modify
letter-spacing(tracking-*) unless explicitly requested
Layout
- MUST use a fixed
z-indexscale (no arbitraryz-*) - SHOULD use
size-*for square elements instead ofw-*+h-*
Performance
- NEVER animate large
blur()orbackdrop-filtersurfaces - NEVER apply
will-changeoutside an active animation - NEVER use
useEffectfor anything that can be expressed as render logic
Design
- NEVER use gradients unless explicitly requested
- NEVER use purple or multicolor gradients
- NEVER use glow effects as primary affordances
- SHOULD use Tailwind CSS default shadow scale unless explicitly requested
- MUST give empty states one clear next action
- SHOULD limit accent color usage to one per view
- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones