1. Habit
  2. Skills
  3. Better Colors skill
jakubkrehel · 31K installs

Better Colors skill
Runs by itself, PR touches styles.

Color tokens stay used by role.

Install the Better Colors skill and make it a habit: follow https://gethabit.dev/skills/jakubkrehel/better-colors.md

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

31K installs8K starsMIT licenceSource on GitHub ↗

Better Colors

by jakubkrehel · 31K installs

The skill

The better colors skill builds and audits color systems: ramps, semantic token names, format conversion and measured contrast, reported by severity.

Only when you ask.

The habit

Color tokens stay used by role.

↻ Runs by itselfPR touches styles

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 styles. Runs in GitHub Actions or Claude Code routine.

  • ↻ PR touches styles
  • pull_request paths: **/*.css, **/*.tsx

02

It checks its work

no HIGH color findings. If a check fails, it tells you.

  • ✓no hex, rgb or oklch literal in a component where a token exists
  • ✓every reported contrast value was measured
  • ✓count of HIGH findings is zero for Approve

03

It remembers

color findings log. The next run reads it first: project notation, token tiers and open findings.

loops/color-system-audit-loop/findings.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request per run.

  1. 01

    Learn the system

    Read the project's tokens and notation and match them.

  2. 02

    Check tiers

    Flag primitives like var(--blue-600) used directly in components.

  3. 03

    Check roles

    Flag tokens used outside their role, such as a border token in color.

  4. 04

    Check ramps

    Look for hue drift, uneven light steps and copied chroma.

  5. 05

    Measure pairs

    Measure each rendered text pair in light and dark and report failures.

  6. 06

    Report

    Write one row per root cause by severity and end with Block or Approve.

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

Use it when

  • ✓ You build a new color palette
  • ✓ You review token use in a PR
  • ✓ You check text contrast

Skip it when

  • – You need shadow or icon color rules
  • – You only pick one brand color

Questions

Better Colors skill, answered.

Will it change my colors to fix contrast?

No. It reports the failing pair and its value. Colors change only when you ask.

Must I use OKLCH?

No. It keeps your notation and suggests OKLCH only for a new system.

How do I install the Better Colors skill?

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

Is the Better Colors skill free?

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

Better Colors. Now as a habit.

Install the Better Colors skill and make it a habit: follow https://gethabit.dev/skills/jakubkrehel/better-colors.md

  • Free
  • No account
  • Undo in one line

All jakubkrehel skills →More design skills →

Works in

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

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