agentleFS
Sign inStart free
JuanMarchettoJuanMarchetto/agent-skills/skills/ui-ux-polish/SKILL.md

ui-ux-polish

Skill5 starsChanged 8 months agoMITView on GitHub

Iterative UI/UX polishing workflow for web applications. Achieve Stripe-level visual polish through multiple passes — each iteration adds incremental improvements that compound dramatically. Use when: polish UI, improve UX, make it look better, Stripe-level, world-class design, desktop and mobile optimization, visual polish.

2 other projects use a version of this.

Adopted by

Most recently taken up by

The file

We split this skill into the rules it gives an agent

10 rules. About 0 are common, 10 are distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈10

    Distinctive · estimate

    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
  1. Distinctive:

    Read the application's main pages/components.

    line 18
  2. Distinctive:

    Consider both desktop and mobile separately

    line 38
  3. Distinctive:

    After each round, check:

    line 41
  4. Distinctive:

    All text: 4.5:1 contrast ratio minimum

    line 50
  5. Distinctive:

    All spacing: divisible by 4 or 8

    line 51
  6. Distinctive:

    All interactive elements: visible focus state

    line 52
  7. Distinctive:

    All buttons: 44px minimum touch target on mobile

    line 53
  8. Distinctive:

    If no UI files found: ask user to specify which files/components to polish

    line 79
  9. Distinctive:

    If framework not recognized: apply generic CSS/HTML improvements

    line 80
  10. Distinctive:

    If changes break layout: revert and try smaller changes

    line 81

≈ “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.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

UI/UX Polish

Iterative polishing workflow that systematically improves web application interfaces toward production quality.

Workflow

Step 1: Audit Current State

Read the application's main pages/components. For each, note:

  • Spacing inconsistencies (not on 8px grid)
  • Typography issues (too many sizes/weights, poor hierarchy)
  • Color contrast violations (check against WCAG 4.5:1 for text)
  • Missing states (hover, focus, loading, error, empty)
  • Mobile vs desktop issues

Step 2: Prioritize Improvements

Rank findings by impact:

  1. Accessibility violations (contrast, touch targets) — fix first
  2. Spacing/alignment inconsistencies — high visual impact
  3. Missing interaction states — hover, focus, pressed
  4. Typography hierarchy — size and weight cleanup
  5. Animation/transition smoothness
  6. Dark mode consistency

Step 3: Apply Changes

For each improvement:

  • Make the specific code change
  • Explain what changed and why
  • Consider both desktop and mobile separately

Step 4: Verify

After each round, check:

  • No regressions introduced
  • Changes work on both desktop and mobile
  • Accessibility maintained or improved

Step 5: Iterate

Repeat Steps 1-4. Each pass finds smaller issues. Stop when changes become minimal (typically 3-5 passes for significant improvement).

Quality Targets

  • All text: 4.5:1 contrast ratio minimum
  • All spacing: divisible by 4 or 8
  • All interactive elements: visible focus state
  • All buttons: 44px minimum touch target on mobile
  • Typography: max 3 font sizes, 2 weights
  • Animations: 200-300ms duration, ease-out curve

Example Output

Pass 1 (12 changes):
- Fixed 4 contrast violations in sidebar text
- Aligned card padding to 8px grid (was 13px -> 16px)
- Added hover states to 3 buttons missing them
- Increased mobile CTA touch target from 36px to 48px

Pass 2 (7 changes):
- Reduced font sizes from 6 to 3 (unified scale)
- Added loading skeleton to data table
- Smoothed page transition (added 200ms ease-out)

Pass 3 (3 changes):
- Fine-tuned shadow consistency across cards
- Added focus-visible outlines for keyboard nav
- Aligned icon sizes to consistent 20px

Quality Score: 8.5/10 (up from 5.5/10)

Error Handling

  • If no UI files found: ask user to specify which files/components to polish
  • If framework not recognized: apply generic CSS/HTML improvements
  • If changes break layout: revert and try smaller changes

Download now (ZIP)

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
What did you use it for? e.g. Reviewing pull requests in a Rails app

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.

Check your setup, free