beautify
Skill1 starsChanged 43 days agoMITView on GitHub
Fixes small mistakes in an existing UI without changing its design: spacing and font sizes that are off the scale in DESIGN.md, lines of text that are too long, icons that look off-center, text that clips or overflows, small tap targets and missing focus styles. Use when the user wants an existing UI cleaned up rather than redesigned.
2 other projects use a version of this.
Adopted by
Most recently taken up by
- whawkinsiv/solo-founder-skillstheir own version, first seen Oct 25, 2026
- whawkinsiv/claude-code-skillstheir own version, first seen Oct 17, 2026
Other versions2 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 2
- whawkinsiv/solo-founder-skills★ 260same name
- whawkinsiv/claude-code-skills★ 258same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository9 other files it gives its agents.
- apply-transitionsSkill
- choose-iconsSkill
- design-applySkill
- design-enforceSkill
- design-extractSkill
- design-grillSkill
- design-ratifySkill
- design-systemSkill
- empty-statesSkill
The file
We split this skill into the rules it gives an agent
6 rules. About 0 are common, 5 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈5
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 16
Stop if DESIGN.md is missing.
- Distinctive: line 35
Don't change colors (except swapping a Tailwind color for its named role), layout, which components are used, shadows, gradients, borders, …
- Distinctive: line 37
Don't add decoration of any kind.
- Distinctive: line 43
If you can't tell, leave it alone and list it under "noticed, not changed".
- Distinctive: line 57
If a dev server is available, check at 375px, 768px and 1440px.
- Distinctive: line 61
Read a component, fix everything in it, then move to the next.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Beautify
Fix small mistakes in an existing UI. Don't redesign it.
Before you start
test -f DESIGN.md || echo "MISSING, run design-system first"Stop if DESIGN.md is missing. This pass moves values onto the scales in DESIGN.md. Without those scales there's no definition of correct, and every change becomes a matter of taste.
What to fix
| Problem | Fix |
| Spacing off the scale | Use the nearest spacing token, if it's less than half a step away |
| Font size off the scale | Use the nearest size in the type scale |
| Lines too long | Keep body text between 45 and 75 characters per line |
| Icons look off-center | Center icons on the height of capital letters, not the whole text box. Usually a 1px nudge |
| Overflow | Fix text that gets cut off, wraps badly, or spills out of its box at any screen width |
| Line height | Follow the line-height rule in DESIGN.md: tight for big headings, looser for body text |
| Uneven gaps | Give sections at the same level the same gap |
| Long user content | Limit user-entered text, like names or titles, that could break the layout if it's very long |
| Small tap targets | Make anything clickable at least 24x24px |
| Focus styles | Add focus-visible styles where they're missing |
What not to touch
Don't change colors (except swapping a Tailwind color for its named role), layout, which components are used, shadows, gradients, borders, fonts, images or copy.
Don't add decoration of any kind.
How to tell if a change belongs here
Compare the before and after. If it looks like a different design decision, it doesn't belong in this pass. If it looks like the same design with a mistake fixed, it does.
If you can't tell, leave it alone and list it under "noticed, not changed".
Steps
1. Find values that are off the scale
npm run design-lint -- --json > /tmp/design-lint.jsonThen read the files with the most findings. The linter catches numbers that are off the scale. Line length and icon alignment only show up when you read the markup.
2. Check three screen widths
If a dev server is available, check at 375px, 768px and 1440px. Overflow and line-length problems show up at the smallest and largest widths and are easy to miss at a normal desktop size.
3. Fix one component at a time
Read a component, fix everything in it, then move to the next. Don't find-and-replace a class across the whole repo. The same value can mean different things in different components.
4. Report
src/routes/about/+page.svelte
line length text was 118 characters wide -> max-w-prose (65 characters)
spacing pb-[15px] -> pb-4
alignment icon nudged 1px down to line up with its labelGive the total number of changes. Say clearly that no colors, layout or components were changed.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.