What is the baseline-ui skill?
Baseline-ui is a skill in the ibelick/ui-skills repository. It gives an AI coding agent opinionated rules for building interfaces with Tailwind, motion and accessible primitives, and it can audit a file and list violations with a reason and a concrete fix for each one.
It is a skill in the ibelick/ui-skills repository that acts as a rulebook for interface code. It has two modes. Running /baseline-ui applies the rules while the agent builds, and /baseline-ui followed by a file path audits that file and lists each violation with why it matters and a concrete fix.
What changes in your agent's output
- Stack: Tailwind defaults, motion/react, tw-animate-css and a cn helper.
- Components: accessible primitives such as Base UI, React Aria or Radix, an aria-label on icon buttons, and never a mix of primitive systems.
- Interaction: AlertDialog for destructive actions, skeletons while loading, h-dvh instead of h-screen, safe-area-inset support and never blocking paste.
- Animation: none unless requested, compositor properties only, 200ms or less, ease-out entrances, reduced motion respected and off-screen loops paused.
- Typography: text-balance, text-pretty and tabular-nums, with no tracking changes.
More rules in the skill
- Layout: a fixed z-index scale and size-* for equal width and height.
- Performance: no large blur surfaces, will-change only during an animation, and no useEffect for render logic.
- Design: no gradients, and never purple or multicolor ones, no glow, one accent color per view and empty states with one next action.
Who the skill is for
Best for
- React and Tailwind projects where AI-generated screens drift toward generic, gradient-heavy styling.
- Teams that want a pre-merge audit of a component with fixes attached.
- Developers who prefer firm rules to open-ended taste guidance.
Not for
- Projects without Tailwind or React, since many rules assume that stack.
- Work that needs expressive gradients or glow, which the skill forbids.
- Native mobile code. Use a native mobile skill instead.
Pair it with polish for a final pass and improve-ui for redesigns. To record your own rules for an agent, see create-design-md.
How to install Baseline UI Skill for Cleaner AI-Built Interfaces
git clone https://github.com/ibelick/ui-skills.gitClone the repository
Run
git clone https://github.com/ibelick/ui-skills.git. The skill is the skills/baseline-ui folder.Copy the skill folder
Copy skills/baseline-ui into your AI coding agent's skills folder.
Open a React and Tailwind project
Start the agent in a project that uses Tailwind, since many of the rules assume it.
Audit a file
Run /baseline-ui followed by a component path, for example src/components/Card.tsx, and read the list of violations and fixes.
Check that it loaded
Run the audit on a component with a gradient background or an h-screen container and check that it is listed as a violation with a fix.
Key features
- Two modes/baseline-ui applies the rules during a build, and /baseline-ui with a file path audits that file.
- Violations with fixesAn audit lists each violation with a reason and a concrete fix, not only a flag.
- Stack defaultsTailwind defaults, motion/react, tw-animate-css and a cn helper are the expected stack.
- Accessible primitivesBase UI, React Aria or Radix are named, with an aria-label on icon buttons and no mixing of primitive systems.
- Interaction rulesAlertDialog for destructive actions, skeleton loading, h-dvh over h-screen, safe-area-inset and no blocked paste.
- Animation limitsNo animation unless requested, compositor properties only, 200ms or less, ease-out entrances, reduced motion respected.
- Typography rulestext-balance, text-pretty and tabular-nums are used, and tracking is left alone.
- Layout and performanceA fixed z-index scale, size-* utilities, no large blur surfaces and will-change only while animating.
- Design restraintNo gradients or glow, one accent per view and empty states with a single next action.
Frequently asked questions
What is the baseline-ui skill?
It is a skill in the ibelick/ui-skills repository that gives an AI coding agent firm rules for building interfaces with Tailwind, motion and accessible primitives. It can also audit a single file and list each violation with a fix.
How do I install it?
Clone ibelick/ui-skills and copy the skills/baseline-ui folder into your AI coding agent's skills folder. Then run /baseline-ui to apply the rules, or /baseline-ui followed by a file path to audit that file.
Why does it ban gradients and glow?
The skill's design rules say no gradients, never purple or multicolor ones, and no glow, with one accent color per view. The aim is to stop generic AI-looking styling, so adjust the rules if your brand needs them.
What animation limits does it set?
It says no animation unless requested, compositor properties only, durations of 200ms or less, ease-out entrances, respect for reduced motion and paused loops when off-screen. These keep motion cheap and accessible by default.
Which primitives does it recommend?
It names accessible primitives such as Base UI, React Aria and Radix, and says never to mix primitive systems in one project. Icon-only buttons need an aria-label, and destructive actions should use an AlertDialog.
How does an audit work?
Running /baseline-ui with a file path makes the agent check that file against the rules and list every violation with why it matters and a concrete fix, so you can apply or reject each change.
Where do I go for deeper accessibility or motion fixes?
Use fixing-accessibility for accessibility problems and fixing-motion-performance for animation cost. Baseline-ui sets the general rules, and those two go further into one area each. Both are separate skills you install on their own.