polish
Skill1 starsChanged 20 days agoMITView on GitHub
Use for the final quality pass on any web UI before shipping - spacing, alignment, interactive states, accessibility, responsive behaviour, performance, copy and the small details that separate good from great. Also use when a design is "almost there" or the user says "make it feel finished".
70 other projects use a version of this.
Adopted by
Most recently taken up by
- Mrbaeksang/skillstheir own version, first seen Nov 8, 2026
- Integralist/agent-skillstheir own version, first seen Nov 6, 2026
- tenequm/skillstheir own version, first seen Nov 5, 2026
- galiprandi/job-seekertheir own version, first seen Nov 5, 2026
- inkatze/planwrighttheir own version, first seen Nov 4, 2026
- angusfretwell/skillstheir own version, first seen Nov 4, 2026
Used with
Projects with it also use layout, shape and 8 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
owshq-mecSkilllayout
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
Also in 8 projects that use this
HAR5HA-7663Skillshape
Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.
Also in 13 projects that use this
PeterCangSkilltokens
Count all historical Claude Code token usage across all local projects, broken down by model, project, date, and week. Includes cost estimation based on official Anthropic pricing.
Also in 3 projects that use this
MicrosoftSkillreview-loop
Iterative review loop using any lens agent against any target (plan, code, design). Use when you want to run a focused review cycle: spawn a fresh reviewer subagent with a specific lens, present findings and remediation to the user, apply fixes with user guidance, and repeat until clean.
Also in 3 projects that use this
SentrySkillreview
Fixture review skill.
Also in 7 projects that use this
- SentrySkill
spec
Produce a verified spec — problem, desired outcome, and acceptance criteria — before building. Use when given a GitHub/Linear issue link, when starting from a fuzzy in-conversation idea, or asked to "figure out what to do" / "scope this" / "what should I build" — whenever the *what* isn't yet pinned down. Grills the ambiguities, checks the premise against the code, and produces acceptance criteria you sign off on — then hands to design-first.
Also in 3 projects that use this
Other versions70 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 70
- talesofai/cohub★ 585same name
- educlopez/ui-craft★ 441same name
- nexmoe/DayBee★ 424same name
- nexmoe/eve★ 424same name
- Southclaws/storyden★ 348same name
- 10xChengTu/Mux0★ 337same name
- theexperiencecompany/gaia★ 325same name
- AkaraChen/aghub★ 271same name
- zacharyfmarion/openscad-studio★ 238same name
- jagrat7/linux-wallpaper-engine★ 227same name
60 more not listed
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.
The file
We split this skill into the rules it gives an agent
1 rule. 0 are common, 1 is distinctive, and 0 are very specific to this project.
0
Common
Most of the 62 edited versions we read keep these.
1
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 49
Look at the rendered page at 1440px and 390px (screenshot tool, Playwright, or the browser).
“Common” is measured: kept by at least 6 in 10 of the 62 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Final Polish
Go through the list once, fix in one batch, then look at the page. Do not narrate each item; report only what you changed.
Layout and rhythm
- Every spacing value comes from the scale. Sections breathe evenly (e.g. 96-128px desktop, 56-72px phone).
- Left edges line up down the page. Text blocks do not float alone in the middle.
- No orphaned single words in headings (
text-wrap: balance). - Optical alignment: icons nudged to sit centred with text; play-button triangles shifted right.
- Nested radius: inner radius = outer radius - padding.
States
- Hover (pointer devices only:
@media (hover: hover)),:focus-visible,:active, disabled, loading for every button and link. - Inputs: focus ring, error, disabled, filled. Placeholder is never the label.
- Empty, loading and error states exist for every data view.
Accessibility
- Text contrast 4.5:1 (3:1 for large). Check muted text and text on accent.
- Visible focus everywhere; tab order follows the visual order; skip link on content sites.
- Icon-only buttons have
aria-label. Images have meaningfulaltoralt=""if decorative. - Headings in order (one
h1). Landmarks:header nav main footer. - Hit targets 44px+ on touch. Colour is never the only signal.
prefers-reduced-motionhandled.
Responsive
- 390px: no sideways scroll, nav collapses cleanly, tables become cards or scroll inside their own box, hero text fits without awkward breaks.
- 768px and 1440px+: content max width (1200-1320px), no ultra-long lines.
- Images use
srcset/sizesor the framework image component, and have width/height to avoid layout shift.
Performance
- Fonts: 2-3 weights,
display: swap, preload the main one. Images AVIF/WebP, lazy below the fold. - No animation on layout properties. No giant blur filters over large areas on mobile.
- Third-party scripts deferred.
Copy and details
- Buttons name the action. Same action, same word everywhere.
- Numbers, dates and money formatted for the locale;
tabular-numswhere they line up. - Curly quotes and real apostrophes (’), proper ellipsis (…), non-breaking space in "10 km".
- Favicon, page titles, social share image present.
::selectioncolour set;color-schemeset for dark themes so form controls match.- Remove one accessory: cut the least useful decoration on the page.
Verify
Look at the rendered page at 1440px and 390px (screenshot tool, Playwright, or the browser). If something looks off, fix it and look once more. If you cannot render, say so.
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.