1. Habit
  2. Skills
  3. UI4 skill
payloadcms · 9 installs

UI4 skill
Runs by itself, next component on board.

One component reskinned to match Figma.

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

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

9 installs45K starsMIT licenceSource on GitHub ↗

UI4

by payloadcms · 9 installs

The skill

The ui4 skill helps Payload UI developers reskin components to match a Figma design: icon scan, SCSS to CSS migration, variant matrix, token-based restyle, Playwright checks and variant e2e tests.

Only when you ask.

The habit

One component reskinned to match Figma.

↻ Runs by itselfnext component on board

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

next component on board. Runs in Claude Code routine.

  • ↻ next component on board
  • run with /ui4 and a Figma URL for the next component

02

It checks its work

you confirm, tests pass. If a check fails, it tries again.

  • ✓index.scss is deleted and index.css is wrapped in @layer payload-default
  • ✓every Figma variant state was screenshotted and compared
  • ✓pnpm run test:e2e --grep for the component's variants passes
  • ✓ui4-review reports no unfixed violations

03

It remembers

components to reskin. The next run reads it first: components done, in progress and their Figma URLs.

loops/ui4-reskin-loop/board.md

One run, step by step.
Then it stops.

Stop ruleStops after one component per run, with at most 2 restyle rounds before asking you.

  1. 01

    Get the Figma URL

    Ask for the Figma URL if it is missing.

  2. 02

    Scan icons

    Compare icon imports with packages/ui/src/icons/ and flag missing icons for you.

  3. 03

    Migrate SCSS

    Convert to index.css with tokens, flat BEM selectors and @layer payload-default.

  4. 04

    Map variants

    Build a variant matrix from mcp_figma2_get_metadata and get_design_context.

  5. 05

    Restyle

    Apply tokens from packages/ui/src/css/ and add test collection variants.

  6. 06

    Verify states

    Screenshot every state with Playwright and fix until each matches Figma.

  7. 07

    You confirm

    Share the screenshot and dev server URL and wait for your approval.

  8. 08

    Test and review

    Write variant e2e tests, run them, then run the ui4-review skill.

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

Use it when

  • ✓ You reskin a Payload UI component
  • ✓ You migrate SCSS to CSS tokens
  • ✓ You match a component to Figma

Skip it when

  • – You have no Figma URL
  • – You do not work in the Payload repo

Questions

UI4 skill, answered.

Can it guess colors?

No. The skill takes exact tokens from the Figma design context.

What if Figma access fails?

It stops and asks you to share the file.

How do I install the UI4 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.

Is the UI4 skill free?

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

UI4. Now as a habit.

Install the UI4 skill and make it a habit: follow https://gethabit.dev/skills/payloadcms/ui4.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.