polish
Skill9 starsChanged 2 months agoMITView on GitHub
Polish micro-details that make UI feel better — optical alignment, tabular nums, text-wrap, interruptible transitions, press feedback, hit areas, no transition:all. Use when building/reviewing UI polish, "feels off", "rapihin detail", hover/press feedback, or after anti-slop-design. Structural layout, radius language, and WCAG conformance belong to other owners.
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
arjunkshahSkillredesign
Redesign existing interfaces to premium quality while preserving product goals and functional behavior.
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.
In this repository36 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- .cursor/rules/design-system-enforcer.mdcCursor rule
- frontend-expertSkill
- accessibilitySkill
- anti-slop-codeSkill
- anti-slop-designSkill
- app-shellSkill
- architectureSkill
- componentsSkill
- content-designSkill
- data-fetchingSkill
- design-colorSkill
- design-directionSkill
- design-foundationsSkill
- design-surfacesSkill
- design-typographySkill
- design-vocabularySkill
- devtoolsSkill
- engineering-vocabularySkill
- fidelitySkill
- formsSkill
- frontend-expertSkill
- marketingSkill
- monitoringSkill
- motion-inspectionSkill
- motionSkill
- performanceSkill
- prototypeSkill
- quality-loopSkill
- responsiveSkill
- seoSkill
- skill-authoringSkill
- testingSkill
- tokensSkill
- webglSkill
The file
We split this skill into the rules it gives an agent
2 rules. 0 are common, 1 is distinctive, and 1 is 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.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 15
After tokens, structure, and anti-slop, apply micro-craft so the UI feels right in the rendered surface.
- Very specific: line 83
Must not: treat 0.96, bounce 0, or concentric radius as universal law.
“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
Polish
Overview
After tokens, structure, and anti-slop, apply micro-craft so the UI feels right in the rendered surface. Numeric recipes here are heuristics unless a standard or project token owns them.
When to use
- Finishing
/uibuilds (afteranti-slop-design) /polish/ “rapihin detail” / “feels off”- Hover, press, enter/exit, icon-swap micro-interactions
When to skip
- Structural grid/spacing/hierarchy →
design-foundations - Comparing rendered directions / stressing all states →
prototype - Nested radius / elevation language →
design-surfaces - Type roles, wrapping, truncation →
design-typography - Conformance (contrast, names, keyboard) →
accessibility - Motion systems / named families →
motion - Copy-only / “tulisan AI” / empty-state wording →
content-design - “Rapikan kode” / generated implementation →
anti-slop-code - Backend-only edits with no rendered UI change
MUST
| Rule | Detail |
| Rendered proof | Judge wrapping, alignment, press, and radius from the rendered UI, not source alone |
| Tokens first | Use --radius, spacing, and type tokens; do not invent one-off values when a token exists |
| Classify recipes | Label 0.96, stagger ms, and similar numbers as heuristics |
| Cheapest valid fix | Delete decoration → native CSS → reuse project tokens → then add abstraction |
| Mobile craft | Full-width primary CTA <768; safe-area on sticky chrome; thumb-reachable actions |
No transition: all | Name properties; skip Tailwind bare transition |
| Control geometry proof | Render the complete control matrix, including pending/loading and applicable LTR/RTL, before accepting optical alignment |
Craft (starting points)
| Concern | Starting point | Class | Hand off |
| Nested corners | Outer ≈ inner + inset when curves share a center | Heuristic | design-surfaces |
| Icon in control | Optical nudge over geometric center | Recommendation | — |
| Section depth | Project border/elevation language | Project default | design-surfaces |
| Hover/toggle | Interruptible CSS transitions | Recommendation | motion if choreography |
| Press | scale(0.96) if press feedback is wanted | Heuristic | — |
| Dynamic numbers | tabular-nums | Recommendation | design-typography |
| Short titles | text-wrap: balance | Recommendation | design-typography |
| Hit area | 44×44 touch / ≥40 dense desktop | Recommendation | accessibility for WCAG 2.5.8 (24px) |
Exceptions: pills/circles, dense toolbars (disable press-scale), reduced motion, brand language that is non-concentric, images that do not need outlines.
Control geometry
- Rendered optical variants matrix: text-only, leading icon, trailing icon, icon-only, and pending/loading.
Geometric centering (inline-flex / items-center / justify-center) is necessary but not proof. There is no universal pixel offset: compare the rendered matrix first, then apply the smallest compensation inside the fixed icon slot or glyph.
Judge whether the combined icon-label content group and its perceived visual mass are balanced and centered across variants and states. Assess the label baseline/cap-height relationship to the icon separately; the label itself need not occupy the control center in an icon+text variant. Verify icon visual weight, token gap, symmetric token padding, focus, hit area, disabled, and pending/loading together, with no unintended content-group or control-width shift. Include both LTR and RTL when the product supports them.
Stable pending geometry is the default. For an explicit measured-morph exception (references/component-patterns.md), inspect both endpoints and target playback, confirm neighboring actions remain stable, and report the exception with evidence. A deliberate morph does not excuse accidental spinner shifts or missing accessible names.
Workflow
- Scope — name the surface; skip structural or token-system work.
- Scan — rendered 1x/2x, light/dark, hover/press/focus, mobile width.
- Control matrix — compare text-only, leading/trailing icon, icon-only, pending/loading, and applicable LTR/RTL at rendered size.
- Fix — cheapest valid change; map values to tokens; keep optical compensation inside the icon slot.
- Report — Before/After tables grouped by principle; mark uninspected states
Not verified.
Boundaries
- May decide: optical nudges, named transitions, tabular-nums, wrap helpers, press feedback when the project has none.
- Must not: treat
0.96, bounce0, or concentric radius as universal law; polish over broken layout; replace brand fonts.
Checklist
- Nested radii verified optically (or handed to
design-surfaces) - Icons optically centered where they looked off
- Full rendered control matrix checked: text-only, leading/trailing icon, icon-only, pending/loading, and LTR/RTL when applicable
- Combined icon-label group/perceived visual mass centered; label baseline/cap-height relationship, icon visual weight, and token gap/padding verified
- Focus, hit area, disabled, and loading preserve geometry without label or width shift
- No
transition: all; hover/press interruptible - Dynamic numbers use
tabular-numswhere they would jitter - Headings
text-balance; short copytext-prettywhere useful - Hit areas meet 44/40 guidance without overlap
- Mobile craft: full-width primary <768, safe-area, thumb zone
- Heuristics labeled; untested states marked
Not verified
Depth
Full examples: references/polish.md.
Related: design-surfaces, design-foundations, design-typography, motion, accessibility, references/evidence-policy.md.
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.