baseline-ui Skill for Claude: Stop AI-Generated UI Slop

baseline-ui, from ibelick's ui-skills, makes Claude follow a strict UI rulebook and can review a file and list violations with fixes.

Installs: 25K; on skills.sh
Stars: 10.5K; on GitHub
Updated: Nov 2026; last repo commit

baseline-ui is a rulebook for UI work. Each rule starts with MUST, SHOULD or NEVER, in eight groups: stack, components, interaction, animation, typography, layout, performance and design. Type /baseline-ui and Claude applies the rules to all UI work in the conversation.

Type /baseline-ui followed by a file and Claude reviews that file. For each violation it quotes the exact line, gives one short sentence on why it matters, and suggests a code-level fix.

The rules assume Tailwind CSS defaults and name specific libraries: motion/react for JavaScript animation, tw-animate-css, a cn helper (clsx plus tailwind-merge), and Base UI, React Aria or Radix for components. The skill is one SKILL.md with no scripts, and it names no API key.

Good for

Front-end developers using Tailwind CSS who get generic AI-looking interfaces
Design engineers who want a quick polish pass on spacing, hierarchy and type
Reviewers who want a violations list with quoted lines and concrete fixes

Install baseline-ui

Claude Code

Copy this prompt.

Install the baseline-ui skill in Claude Code. Run this command:

npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

Sections in SKILL.md

How to use
Stack
Components
Interaction
Animation
Typography
Layout
Performance
Design

Key facts

Author: ibelick (GitHub: ibelick)
Repo: ibelick/ui-skills
License: MIT (repo README and LICENSE)
Installs on skills.sh: 25,027 as of 2026-11-02
GitHub stars (whole repo): 10,454 as of 2026-11-02
Last repo commit: 2026-11-01
Files: 1 file (SKILL.md), no scripts
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Apply the rules to all UI work in this chat
No file needed. Claude applies the constraints to any UI work for the rest of the conversation.
Try: “/baseline-ui then: build a pricing card with a monthly toggle”
/baseline-ui
Review one file: violation, why, fix
For each violation it quotes the exact line or snippet, says why it matters in one short sentence, and gives a concrete fix.
Try: “/baseline-ui src/components/Hero.tsx”
Read · /baseline-ui <file>
Tailwind defaults, motion/react, tw-animate-css, cn
Use Tailwind CSS defaults unless custom values exist, motion/react when JavaScript animation is needed, tw-animate-css for entrance animations, and a cn helper for class logic.
Stack (4 rules)
Accessible primitives, aria-labels on icon buttons
Use accessible primitives such as Base UI, React Aria or Radix for focus and keyboard behavior, use the project's own first, never mix primitive systems in one surface, and label icon-only buttons.
Components (6 rules)
AlertDialog for destructive actions, h-dvh, no blocked paste
Confirm destructive actions with an AlertDialog, prefer skeleton loading states, never use h-screen, respect safe-area insets, show errors next to the action, never block paste.
Interaction (6 rules)
No animation unless asked; transform and opacity only
Animate only compositor properties, never layout properties, keep interaction feedback to 200ms or less, pause off-screen loops, respect prefers-reduced-motion, and avoid custom easing unless requested.
Animation (10 rules)
text-balance, tabular-nums, z-index scale, no stray will-change
Typography: text-balance, text-pretty, tabular-nums, no tracking changes. Layout: a fixed z-index scale and size-* for squares. Performance: no animated large blur, will-change only during animation, no useEffect for render logic.
Typography, layout, performance (9 rules)
No gradients or glow by default, one accent color per view
No gradients unless requested, never purple or multicolor gradients, no glow as the main affordance, default Tailwind shadows, a clear next action in empty states, one accent color per view, existing color tokens first.
Design (7 rules)

From the official docs

Questions

What does baseline-ui do?

It gives Claude a strict UI rulebook so interfaces look less generic. Used alone it applies the rules to your UI work. With a file name it reviews the file and lists violations with fixes.

How do I install baseline-ui in Claude Code?

Use the install box above, then run /baseline-ui in a session. The ui-skills README also shows a CLI (npx ui-skills get baseline-ui) and an MCP address for browsing the registry, but the box is the documented route for this page.

Does it only work with Tailwind and React?

The rules assume Tailwind CSS and name motion/react, tw-animate-css, Base UI, React Aria and Radix. The SKILL.md does not say what happens in other stacks.

Does it need an API key?

No key is named in the SKILL.md. It is a single instruction file with no scripts.

Is baseline-ui safe to install?

It is one SKILL.md of style rules and bundles no scripts. It changes how Claude writes UI code, so review the code it produces like any other change.

Will it add animation or gradients?

Not unless you ask. The rules say never add animation or gradients unless explicitly requested, and never use purple or multicolor gradients.

Information

updated Nov 2, 2026

Repository: ibelick/ui-skills
Folder: skills/baseline-ui

ibelick/ui-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

baseline-ui SKILL.md · github.com
ui-skills README · github.com