1. Habit
  2. Skills
  3. UI4 Review skill
payloadcms · 78 installs

UI4 Review skill
Runs by itself, CSS files changed.

CSS uses tokens, not hardcoded values.

Install the UI4 Review skill and make it a habit: follow https://gethabit.dev/skills/payloadcms/ui4-review.md

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

78 installs45K starsMIT licenceSource on GitHub ↗

UI4 Review

by payloadcms · 78 installs

The skill

The ui4 review skill helps Payload UI developers review and auto-fix UI4 CSS migrations so components use spacing, radius, elevation and semantic color tokens instead of hardcoded values.

Only when you ask.

The habit

CSS uses tokens, not hardcoded values.

↻ Runs by itselfCSS files changed

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

CSS files changed. Runs in Claude Code routine or GitHub Actions.

  • ↻ CSS files changed
  • git status shows changed .css files, or pull_request touches .css

02

It checks its work

violation greps come back clean. If a check fails, it tells you.

  • ✓no &__ or &-- nesting left
  • ✓no var(--theme-, var(--style- or var(--base) left
  • ✓no var(--ramp- outside colors.css
  • ✓every remaining hardcoded value is listed as flagged

03

It remembers

flagged values log. The next run reads it first: values flagged for manual review earlier.

loops/ui4-token-review-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleStops after the changed CSS files of one change set.

  1. 01

    Get changed files

    Run git status --porcelain filtered to .css files.

  2. 02

    Detect violations

    Run the six grep checks in one parallel batch.

  3. 03

    Auto-fix by priority

    Fix nesting, legacy variables, old names, raw palette, then hardcoded values.

  4. 04

    Flag the rest

    Flag values with no matching token instead of guessing.

  5. 05

    Report

    List auto-fixed and flagged lines and a per-file summary table.

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 UI4 Review skill helps.

Use it when

  • ✓ You migrate CSS to UI4 tokens
  • ✓ You review CSS changes in Payload UI
  • ✓ Hardcoded colors slip into components

Skip it when

  • – You do not work on Payload UI
  • – You use a different token system

Questions

UI4 Review skill, answered.

Does it only report?

No. The skill fixes violations right away and only flags unclear ones.

Why not --ramp-* tokens?

They are the raw palette; components should use semantic --color-* tokens.

How do I install the UI4 Review skill?

Copy the prompt at the top into your agent. It installs the skill from payloadcms/payload and sets up the habit. Or run npx skills add payloadcms/payload --skill ui4-review.

Is the UI4 Review skill free?

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

UI4 Review. Now as a habit.

Install the UI4 Review skill and make it a habit: follow https://gethabit.dev/skills/payloadcms/ui4-review.md

  • Free
  • No account
  • Undo in one line

All payloadcms skills →More design skills →

Works in

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

Made by payloadcms, 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.