01
It starts by itself
PR changes styles. Runs in GitHub Actions or Claude Code routine.
- ↻ PR changes styles
pull_request paths: src/**, tokens.json, assets/design-tokens.json
nextlevelbuilder · 41K installsDesign System skill
Runs by itself, every time you change your styles.
Wrong colors caught on every change.
Install the Design System skill and make it a habit: follow https://gethabit.dev/skills/nextlevelbuilder/design-system.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3It runs by itself
41K installs139K starsMIT licenceSource on GitHub ↗
Design System
by nextlevelbuilder · 41K installs
The skill
Sets up colors and sizes as shared design rules.
Only when you ask.
Steady design
Wrong colors caught on every change. Your design looks the same everywhere.
↻ Runs by itselfevery time you change your styles
How the habit works.
You don't have to.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
Stops after one pull request and at most 2 fix retries per run.
- 01
List changed files
The agent lists changed style, component and slide files in the pull request.
- 02
Regenerate tokens
If the token config changed, it runs generate-tokens.cjs to rebuild tokens.css.
- 03
Validate usage
It runs validate-tokens.cjs --dir src/ to find raw hex and other hardcoded values.
- 04
Validate slides
For slide HTML it runs slide-token-validator.py and checks the design-tokens.css import.
- 05
Fix with tokens
It swaps hardcoded values for semantic or component tokens, using the brand and ui-styling skills where needed.
- 06
Log violations
It records each fixed file in the run log.
What it may do.
Nothing more.
It writes only in its own folder and asks you before anything goes out.
- Writes only insrc/**, tokens.css, loops/design-token-guard-loop/**
- Talks toapi.github.com
- Sendsnothing
- Your OKNothing goes out, so it needs no OK.
Is it for you?
Use it when it fits.
Read both lists. If the left one sounds like you, the Design System skill helps.
Use it when
- ✓ You set up design tokens and CSS variables
- ✓ You want to catch hardcoded colors in code
- ✓ You build brand-consistent slide decks
Skip it when
- – You use a ready-made theme without tokens
- – You only need one quick mockup
Design System skill, answered.
What are the three token layers?
Primitive raw values, semantic purpose aliases, and component-specific tokens that point to the semantic ones.
Does it make slides too?
The skill can build slide decks with Chart.js. This loop only checks that slides use the tokens.
Which skills does it need?
The skill lists brand and ui-styling as dependencies for colors and Tailwind config.
How do I install the Design System skill?
Copy the prompt at the top into your agent. It installs the skill from nextlevelbuilder/ui-ux-pro-max-skill and sets up the habit. Or run npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system.
Is the Design System skill free?
Yes. It is published under MIT. Habit is free too.
Design System. Now as a habit.
Install the Design System skill and make it a habit: follow https://gethabit.dev/skills/nextlevelbuilder/design-system.md
All nextlevelbuilder skills →More design skills →
Works in
- Claude Code
- Codex
- Cursor
- ChatGPT
- Claude app
Made by nextlevelbuilder, published under MIT. Habit links to the original and never changes it. Is this your skill?