A free skill for your coding agent
Broom brings the most popular design skills and a working studio's own taste into one skill. Your agent reads it before it writes UI and checks its work against your product's own design system, so the next screen looks designed, not generated.
Free and open source. Works in Claude Code, Codex, Cursor and other agents.
Example: one release screen, built twice.
Drag the divider
Unlock your potential today
Version 4.2.0 is in review
Why it happens
A coding agent that has not been given your system writes the average of every interface it has read. The average has a look, and your users have learned to recognise it.
Defaults
Indigo gradients, pill-shaped everything, a glow on every card, three features in a row. Rarely ugly. Just nobody’s.
Drift
Every new screen brings a colour that is not in your palette, a corner that is not in your scale, a button variant nobody designed. Somebody cleans it up — or nobody does, and it ships.
Prompts
“Follow our design system” holds for a screen or two. Then the defaults come back, because the agent was given a sentence about your system instead of the system.
The difference
A generic prompt gives every product the same advice. Broom starts from your product, or from a short brief when there is nothing yet, and hands the agent its own names and numbers.
design-prompt.md · example
Works with
One folder of plain files. The agent you already use reads it, on the stack you already have.
npx skills add puts it in the right folder for each agent you name.
Reads it from .claude/skills/. Type /broom audit.
/broom design writes the component files, every variant and state.
Cursor reads .agents/skills/, Windsurf .windsurf/skills/.
Read it from .agents/skills/ in the terminal.
/broom design writes the component files.
Tokens in Dart, Swift and Kotlin, and component specs. The checker reads these stacks too.
Reads it from .agents/skills/ in your repository.
Tokens as CSS variables, and component specs.
Your system first
It reads what your product already declares before it judges anything. The scripts do the numbers; the agent you already use does the judgement, with the model you already use.
Your code
Any stack, read in place
Your Figma file
A .fig saved from Figma
Or a short brief
When nothing is built yet
Two scripts: the numbers
detect.mjs reads your system, finds the drift
design.mjs builds the system, runs the validators
Your agent: the judgement
Reads documents, screenshots and screens
Judges and writes the review and the copy
SLOP_REPORT.md
Findings with file and line
/broom audit
Fixes in your code
One finding an edit, checked after each
/broom fix
A design system
Tokens, components, rules
/broom design
Your code
Your Figma file
Or a short brief
Two scripts: the numbers
detect.mjs reads your system, finds the drift
design.mjs builds the system, runs the validators
Your agent: the judgement
Reads documents, screenshots and screens
Judges and writes the review and the copy
SLOP_REPORT.md
/broom audit
Fixes in your code
/broom fix
A design system
/broom design
The scripts need Node 18 or later and nothing else, and they make no network calls. Reading a Figma file needs Node 22.15. There is no account and no server of ours: it all happens in your repository and your agent session.
Six commands
Each command is a short file of steps the agent follows. It reads the rules it needs, runs the scripts, and asks you only what is left open.
Find what drifted from your own system, then fix it.
SLOP_REPORT.md. Changes no code.
Start from a short brief, or give a product a new look.
DESIGN_SYSTEM.md and rules for your agent.
Turn the finished file into rules in its own names.
That is how Claude Code takes them; in other agents, ask in the same words (broom audit). The skill also works without a command: whenever the agent writes or changes UI, it reads the rules first and runs the checker before it calls the work done.
The checker
detect.mjs reads the product's own system first, then prints one line a finding in three groups: must, drift from your system, and taste. This is its real output on the small example beside it, run when this page was built.
must (2)
src/InvoiceCard.tsx:3 Separate the element with one technique, a fill first: drop the border or the shadow (a hover may add a shadow, a state may add a border). [border-and-shadow]
src/InvoiceCard.tsx:7 Say what the action or the failure actually is ("Create your first project") instead of "Get started" or "Oops". [generic-copy]
drift (5)
src/InvoiceCard.tsx:3 Use a class or variable from your own colour tokens instead of the framework's default palette. [palette-class]
src/InvoiceCard.tsx:5 Use one of your colour tokens instead of a hard-coded hex. [hex-off-system]
src/InvoiceCard.tsx:6 Use a class or variable from your own colour tokens instead of the framework's default palette. [palette-class]
src/InvoiceCard.tsx:6 Use a class or variable from your own colour tokens instead of the framework's default palette. [palette-class]
src/InvoiceCard.tsx:6 Use a radius from your scale instead of a one-off value. [radius-class]
taste (2)
src/InvoiceCard.tsx:6 Use a flat fill from your tokens; here the gradient is decoration. [gradient]
src/InvoiceCard.tsx:6 Give the button its action, or remove it until it has one; a button wired to nothing looks like it works. [inert-button]
9 findings in 2 files · score 476.2 (heavy)
A "Kept as theirs" block lists what your system does on purpose, such as a declared blur or pill-shaped controls, and the check leaves it alone. Run it yourself any time; it needs no network.
What is inside
Everything the agent reads and runs is plain text and plain JavaScript in your repository. Nothing is fetched while it works.
SKILL.md
commands/
audit.md · fix.md · check.md · design.md · redesign.md · handoff.md.references/
The rules, one file a topic: principles, the slop list, decision tables, components, copy, the studio's own hand, product types, the finishing passes, spacing, interaction, honesty and AI surfaces, the audit method, the checklist and the design brief.
audit-method.md · bans.md · brief.md · checklist.md · components.md · copy.md · design-tables.md · finishing.md · honesty-and-ai.md · interaction.md · principles.md · product-types.md · spacing.md · studio-hand.md · writing.md
scripts/design.mjs
scripts/detect.mjs
LICENSE
Apache-2.0. Use it, change it, ship it. The licences of every source are in THIRD_PARTY_NOTICES.md.Installed by hand, the folder goes into .claude/skills/ (Claude Code), .agents/skills/ (Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode) or .windsurf/skills/ (Windsurf).
/broom design
The script writes into a folder of its own and never deletes. Your agent moves the files in, and asks before it touches one you already have.
| Stack | Code | Tokens | Docs |
|---|---|---|---|
| React + Tailwind | Yes | Yes | Yes |
| Next.js + Tailwind | Yes | Yes | Yes |
| Vue | Yes | Yes | Yes |
| Svelte | Yes | Yes | Yes |
| React Native | Yes | Yes | Yes |
| HTML + CSS | Spec | Yes | Yes |
| Flutter | Spec | Yes | Yes |
| SwiftUI | Spec | Yes | Yes |
| Jetpack Compose | Spec | Yes | Yes |
Code: component files for the stack. Spec: each component written down in full for your agent to build.
In your product's own component names and numbers. The slop check is a script it runs before it calls a task done.
Yours to keep: use it, change it, ship it and sell what you build with it. No attribution, no licence to track.
Sources
Broom brings together the ideas of the design skills and guides below, restated in its own words and checked against each other. Thank you to their authors.
Each source's licence is in THIRD_PARTY_NOTICES.md in the repository. Read the notices
Before you install
What people ask before they add a skill to their agent.
Yes. Broom is open source under the Apache-2.0 licence. There is no account, no plan and no payment: the work that needs a model runs in your own agent session, with the model and the plan you already have.
Any agent that reads Agent Skills, among them Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode and Windsurf. The install command puts the skill in the right folder for each agent; by hand it is one folder to copy.
Not because of Broom. The two scripts read your files where they are and make no network calls. Your code goes only where your agent already sends it: to the model you chose for it.
Not what your system does on purpose. It reads your tokens, components, radii, fonts and blurs first; a declared blur, a gradient or pill-shaped controls stay as they are. Slop is what drifts from your system toward generic defaults. The audit changes no code at all, and a fix is one finding per edit.
The checker reads web code and Flutter, SwiftUI and Jetpack Compose, and finds the system each of them declares.
/broom design writes component code for React + Tailwind, Next.js + Tailwind, Vue, Svelte and React Native, and a full specification of every component for HTML + CSS, Flutter, SwiftUI and Jetpack Compose.
Node 18 or later for the scripts, and nothing else. Reading a Figma file needs Node 22.15 or later, because Figma files are compressed with zstd.
Yes. Under Apache-2.0 you can use it, change it and ship it, commercially too. Keep the licence and the notices with it.
Broom was a paid service at app.broom.design until 5 October 2026. It closed, and every account and its data were deleted. What it did now runs in your own agent, as this skill.
The skill collects nothing. It is a folder of files in your repository, it runs inside your own agent, and its scripts make no network calls.
This site sets no cookies and stores nothing in your browser. It counts visits with Vercel Web Analytics, without a cookie and without anything that identifies you.
A support payment is made on Dodo Payments' own checkout page; this site never sees your card.
Broom used to be a paid service at app.broom.design. It closed on 5 October 2026; its accounts and their data were deleted, and the privacy policy and terms that described it no longer apply. Questions go to the repository's issues.
Give it your components, your tokens and your rules instead of its defaults. Add the skill, then ask it for an audit, a design or a handoff in the session you already have open.
npx skills add boburxd/broom