baseline-uiby Julien Thibeaut

Baseline UI Skill.

A Claude Code and Codex skill for design review: quickly de-slops UI code by fixing spacing, hierarchy, typography, and small layout issues.

Design Review & Accessibility
UI code

Download OpenDesign View usage guide

ibelick/ui-skills · skills/baseline-ui/SKILL.mdSKILL.md

--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. --- ## How to use ## Stack ## Components ## Interaction ## Animation ## Typography

Front matter and section headings read from the upstream file on 2026-09-14 · 3,417 characters in full

01 What it does

What the baseline-ui Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Baseline UI is a review skill that enforces an opinionated UI baseline to stop AI-generated interface slop in a codebase. It is aimed at Tailwind CSS projects using React primitives, and it installs as a standing set of constraints on any UI work in the conversation, or as a file-level review pass.

What makes it specific is the vocabulary: it names the exact utilities and props to use or avoid, from h-dvh over h-screen and text-balance for headings, to compositor-only animation capped at 200ms and no arbitrary z-index values. Use it when the interface needs a fast cleanup or polish pass.

What it produces

A one-sentence explanation of why each violation matters.
A concrete, code-level fix for each finding.

See the example prompt ↗

How It Works

01
Invoke It as a conversation-wide Constraint Set
Running the bare command applies every constraint in this file to any UI work done in that conversation, not just one file.
02
Or Point It at a Single File
Passing a file target switches the skill into review mode, checking that file against all constraints listed below.
03
Return a three-part Violation Report
Each finding quotes the offending snippet, gives one short sentence on why it matters, and proposes a code-level fix.
04
Work Through the Constraint Groups in Order
The file organises its rules into Stack, Components, Interaction, Animation, Typography, Layout, Performance and Design, each mixing MUST, SHOULD and NEVER items.

02 Find your fit

When to Use the baseline-ui Skill

Use the baseline-ui skill in Claude Code or Codex when the job is design review of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

A quick cleanup or polish pass on an interface that has drifted from a consistent baseline.
Reviewing one specific file for spacing, hierarchy, typography and small layout problems.

Know the Boundaries

Design work that depends on gradients, custom easing curves or custom letter-spacing, all of which are gated behind an explicit request.
Hand-rolling keyboard or focus behaviour, which is not permitted unless explicitly requested.

What to Provide

A file to reviewOptional. Naming a file turns the skill into a review pass that reports violations for that file only.

03 Inside the skill

Rules the baseline-ui Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Stay on Tailwind CSS Defaults
Custom values are only acceptable when they already exist in the project or were explicitly requested; otherwise the agent must use Tailwind's defaults.
No Animation Unless Asked for
Animation is off by default. When it is explicitly requested, only compositor props may be animated, never width, height, top, left, margin or padding.
Cap Interaction Feedback at 200ms
Entrances should use ease-out, looping animations must pause when off-screen, and prefers-reduced-motion should be respected.
Never Mix Primitive Systems
Anything with keyboard or focus behaviour needs an accessible primitive from Base UI, React Aria or Radix, existing project primitives come first, and hand-rebuilding keyboard or focus behaviour is forbidden unless explicitly requested.
Use h-dvh, Never h-screen
The interaction section also requires fixed elements to respect safe-area-inset and errors to be shown next to where the action happens.
Use a Fixed z-index Scale
Arbitrary z- values are not allowed, and square elements should use size- rather than paired w- and h- utilities.
Keep Typography Utilities Literal
text-balance for headings, text-pretty for body copy, tabular-nums for data, and letter-spacing must not be touched unless explicitly requested.
No Gradients or Glow by Default
Gradients require an explicit request, purple and multicolor gradients are ruled out entirely, and glow effects may not serve as primary affordances.

04 Put it to work

Install baseline-ui in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add baseline-ui to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for skills/baseline-ui/SKILL.md; the repository may document its own path.

Give the Skill a First Design Review Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Review [src/components/SettingsDialog.tsx] against the baseline UI constraints. We generated this dialog quickly and the spacing, hierarchy and layout feel off, so report the violations with the exact lines, why they matter, and the code-level fix for each.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Confirm no animated property outside transform and opacity.
Confirm icon-only buttons carry an aria-label and destructive actions sit behind an AlertDialog.

In OpenDesign import baseline-ui from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
Skill file: skills/baseline-ui/SKILL.md Content checksum recorded at verification; commit 79081ab
License: MIT From LICENSE.
Repository stars: 8,402 GitHub snapshot taken 2026-09-14 for the whole ibelick/ui-skills repository, which contains 5 skills in this catalog. Not a rating or usage count for baseline-ui.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

How to useTwo invocation modes: bare command applies constraints, file argument triggers a violation report.
StackTailwind CSS defaults, motion/react for JS animation, tw-animate-css, and the cn utility.
ComponentsAccessible primitives only, existing project primitives first, aria-label on icon-only buttons.
InteractionAlertDialog for destructive actions, skeletons for loading, h-dvh, safe-area-inset, no blocked paste.
AnimationNo animation unless requested; compositor props only, ease-out, 200ms cap, reduced-motion respected.
Typographytext-balance on headings, text-pretty on body, tabular-nums for data, no tracking changes.
LayoutFixed z-index scale instead of arbitrary values, size-* for square elements.
PerformanceAvoid large blur or backdrop-filter animation, scope will-change, prefer render logic over useEffect.
DesignNo gradients or glow affordances, default shadow scale, one accent color, reuse existing tokens.

The Skill's Own Description

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

Front-matter description from SKILL.md. The full file is about 3,417 characters. Read the full file on GitHub.

06 Before you install

Questions About the baseline-ui Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What stack does it assume?

Tailwind CSS defaults, motion/react (formerly framer-motion) when JavaScript animation is required, tw-animate-css for entrance and micro-animations, and the cn utility built from clsx and tailwind-merge.

Will it add animations or gradients to make things look better?

No. Animation is never added unless explicitly requested, and gradients are not used unless explicitly requested. Purple and multicolor gradients are ruled out entirely.

Which component libraries does it allow?

Base UI, React Aria or Radix for anything with keyboard or focus behaviour, preferring the project's existing primitives. Base UI is the recommended pick for new primitives if it is compatible with the stack, and mixing primitive systems in one interaction surface is not allowed.

Baseline UI

Run baseline-ui on a Real Design Review Task.

Download OpenDesign, import baseline-ui from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills