baseline-ui

Name: baseline-ui
Author: vercel-labs

66installs750forks

How to install baseline-ui?

vercel-labs/open-agents/baseline-ui

$npx -y skills add vercel-labs/open-agents --skill baseline-ui

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Baseline UI
2
3	Enforces an opinionated UI baseline to prevent AI-generated interface slop.
4
5	## How to use
6
7	- `/baseline-ui`
8	Apply these constraints to any UI work in this conversation.
9
10	- `/baseline-ui <file>`
11	Review the file against all constraints below and output:
12	- violations (quote the exact line/snippet)
13	- why it matters (1 short sentence)
14	- a concrete fix (code-level suggestion)
15
16	## Stack
17
18	- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested
19	- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required
20	- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS
21	- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic
22
23	## Components
24
25	- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`)
26	- MUST use the project’s existing component primitives first
27	- NEVER mix primitive systems within the same interaction surface
28	- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack
29	- MUST add an `aria-label` to icon-only buttons
30	- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested
31
32	## Interaction
33
34	- MUST use an `AlertDialog` for destructive or irreversible actions
35	- SHOULD use structural skeletons for loading states
36	- NEVER use `h-screen`, use `h-dvh`
37	- MUST respect `safe-area-inset` for fixed elements
38	- MUST show errors next to where the action happens
39	- NEVER block paste in `input` or `textarea` elements
40
41	## Animation
42
43	- NEVER add animation unless it is explicitly requested
44	- MUST animate only compositor props (`transform`, `opacity`)
45	- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`)
46	- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons)
47	- SHOULD use `ease-out` on entrance
48	- NEVER exceed `200ms` for interaction feedback
49	- MUST pause looping animations when off-screen
50	- SHOULD respect `prefers-reduced-motion`
51	- NEVER introduce custom easing curves unless explicitly requested
52	- SHOULD avoid animating large images or full-screen surfaces
53
54	## Typography
55
56	- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs
57	- MUST use `tabular-nums` for data
58	- SHOULD use `truncate` or `line-clamp` for dense UI
59	- NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested
60
61	## Layout
62
63	- MUST use a fixed `z-index` scale (no arbitrary `z-*`)
64	- SHOULD use `size-` for square elements instead of `w-` + `h-*`
65
66	## Performance
67
68	- NEVER animate large `blur()` or `backdrop-filter` surfaces
69	- NEVER apply `will-change` outside an active animation
70	- NEVER use `useEffect` for anything that can be expressed as render logic
71
72	## Design
73
74	- NEVER use gradients unless explicitly requested
75	- NEVER use purple or multicolor gradients
76	- NEVER use glow effects as primary affordances
77	- SHOULD use Tailwind CSS default shadow scale unless explicitly requested
78	- MUST give empty states one clear next action
79	- SHOULD limit accent color usage to one per view
80	- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones

People who liked this also viewed

6 picks

Type

baseline-ui

66installs750forks

View on GitHub

How to install baseline-ui?

vercel-labs/open-agents/baseline-ui

$npx -y skills add vercel-labs/open-agents --skill baseline-ui

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Baseline UI
2
3	Enforces an opinionated UI baseline to prevent AI-generated interface slop.
4
5	## How to use
6
7	- `/baseline-ui`
8	Apply these constraints to any UI work in this conversation.
9
10	- `/baseline-ui <file>`
11	Review the file against all constraints below and output:
12	- violations (quote the exact line/snippet)
13	- why it matters (1 short sentence)
14	- a concrete fix (code-level suggestion)
15
16	## Stack
17
18	- MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested
19	- MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required
20	- SHOULD use `tw-animate-css` for entrance and micro-animations in Tailwind CSS
21	- MUST use `cn` utility (`clsx` + `tailwind-merge`) for class logic
22
23	## Components
24
25	- MUST use accessible component primitives for anything with keyboard or focus behavior (`Base UI`, `React Aria`, `Radix`)
26	- MUST use the project’s existing component primitives first
27	- NEVER mix primitive systems within the same interaction surface
28	- SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack
29	- MUST add an `aria-label` to icon-only buttons
30	- NEVER rebuild keyboard or focus behavior by hand unless explicitly requested
31
32	## Interaction
33
34	- MUST use an `AlertDialog` for destructive or irreversible actions
35	- SHOULD use structural skeletons for loading states
36	- NEVER use `h-screen`, use `h-dvh`
37	- MUST respect `safe-area-inset` for fixed elements
38	- MUST show errors next to where the action happens
39	- NEVER block paste in `input` or `textarea` elements
40
41	## Animation
42
43	- NEVER add animation unless it is explicitly requested
44	- MUST animate only compositor props (`transform`, `opacity`)
45	- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`)
46	- SHOULD avoid animating paint properties (`background`, `color`) except for small, local UI (text, icons)
47	- SHOULD use `ease-out` on entrance
48	- NEVER exceed `200ms` for interaction feedback
49	- MUST pause looping animations when off-screen
50	- SHOULD respect `prefers-reduced-motion`
51	- NEVER introduce custom easing curves unless explicitly requested
52	- SHOULD avoid animating large images or full-screen surfaces
53
54	## Typography
55
56	- MUST use `text-balance` for headings and `text-pretty` for body/paragraphs
57	- MUST use `tabular-nums` for data
58	- SHOULD use `truncate` or `line-clamp` for dense UI
59	- NEVER modify `letter-spacing` (`tracking-*`) unless explicitly requested
60
61	## Layout
62
63	- MUST use a fixed `z-index` scale (no arbitrary `z-*`)
64	- SHOULD use `size-` for square elements instead of `w-` + `h-*`
65
66	## Performance
67
68	- NEVER animate large `blur()` or `backdrop-filter` surfaces
69	- NEVER apply `will-change` outside an active animation
70	- NEVER use `useEffect` for anything that can be expressed as render logic
71
72	## Design
73
74	- NEVER use gradients unless explicitly requested
75	- NEVER use purple or multicolor gradients
76	- NEVER use glow effects as primary affordances
77	- SHOULD use Tailwind CSS default shadow scale unless explicitly requested
78	- MUST give empty states one clear next action
79	- SHOULD limit accent color usage to one per view
80	- SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones

People who liked this also viewed

6 picks

Type