1. Habit
  2. Skills
  3. Baseline UI skill
ibelick · 24K installs

Baseline UI skill
Runs by itself, PR touches UI files.

UI slop gets caught on merge.

Install the Baseline UI skill and make it a habit: follow https://gethabit.dev/skills/ibelick/baseline-ui.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

24K installs10K starsMIT licenceSource on GitHub ↗

Baseline UI

by ibelick · 24K installs

The skill

The baseline ui skill helps frontend developers clean up AI-generated interfaces with fixed rules for spacing, typography, components, animation, layout and design.

Only when you ask.

The habit

UI slop gets caught on merge.

↻ Runs by itselfPR touches UI files

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

PR touches UI files. Runs in GitHub Actions or Claude Code routine.

  • ↻ PR touches UI files
  • pull_request paths: **/*.tsx, **/*.jsx, **/*.css

02

It checks its work

no baseline rule violations. If a check fails, it tells you.

  • ✓no h-screen class in changed files
  • ✓every icon-only button has an aria-label
  • ✓no arbitrary z-* values
  • ✓no paste blocking on input or textarea

03

It remembers

violation log. The next run reads it first: rules broken most often before.

loops/baseline-ui-review-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleStops after reviewing at most 10 changed files per pull request.

  1. 01

    Read the log

    The agent reads which baseline rules were broken most often.

  2. 02

    Pick changed files

    It lists changed component and style files.

  3. 03

    Review each file

    It runs /baseline-ui <file> on each one.

  4. 04

    Check every area

    It checks stack, components, interaction, animation, typography, layout, performance and design rules.

  5. 05

    Report

    For each violation it gives the quoted line, a short reason and a code-level fix.

  6. 06

    Log

    It adds the broken rules to the run log.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Baseline UI skill helps.

Use it when

  • ✓ A UI needs a fast polish pass
  • ✓ You review AI-generated components
  • ✓ You want one shared UI baseline

Skip it when

  • – Your project does not use Tailwind CSS
  • – You are building a custom design system from scratch

Questions

Baseline UI skill, answered.

Will it add animations?

No. The skill says never to add animation unless it is asked for.

Does it require Tailwind?

The skill assumes Tailwind CSS defaults and the cn utility for class logic.

How do I install the Baseline UI skill?

Copy the prompt at the top into your agent. It installs the skill from ibelick/ui-skills and sets up the habit. Or run npx skills add ibelick/ui-skills --skill baseline-ui.

Is the Baseline UI skill free?

Yes. It is published under MIT. Habit is free too.

Baseline UI. Now as a habit.

Install the Baseline UI skill and make it a habit: follow https://gethabit.dev/skills/ibelick/baseline-ui.md

  • Free
  • No account
  • Undo in one line

All ibelick skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by ibelick, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.