UI Refine Loop
Unattended Impeccable check → fix loop on one page or component.
Install
npx skills add EricTechPro/super-board --skill ui-refine-loop -g -a claude-code -y- Repository
- EricTechPro/super-board577
- Category
- Design
- Updated
- 6d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
Unattended Impeccable check → fix loop on one page or component. It reads the target's code, grills Eric (at most 10 questions, "you pick" welcome) into a per-project taste and direction file, then runs bounded rounds. Each round a fresh checker runs Impeccable critique and audit (design review and detector in separate sub-agents) and ranks typed problems, and a fresh fixer chains the matching Impeccable commands (polish last), keeps checks green or reverts, and commits. Shots cover before vs now, light and dark, 1440 and 390, plus section crops. A fresh finish reviewer grades every fix, and the loop ends in a draft PR with a Before | After table. Standalone only: started by `/ui-refine-loop <route|component>`, never by the super-board lanes. Use when the user says "ui-refine-loop", "/ui-refine-loop", "refine loop", "iterate on this page", "polish this page with impeccable", or "keep polishing".
ui-refine-loop: Impeccable check → fix, bounded
Impeccable's critique and audit find problems once, and each fix command (distill, layout, polish, and the rest) fixes one kind once. This skill chains them into a short unattended loop. Each round, fresh checkers find and rank the problems, then a fresh fixer picks the right Impeccable commands and lands one green commit. A short ledger is the only thing carried between rounds, because a checker that watched the last edits grades the intent, not the pixels.
/ui-refine-loop /dashboard/reports "the summary strip feels cramped"
/ui-refine-loop src/components/ReceiptViewer.tsx "mobile layout breaks under 400px" --rounds 3
/ui-refine-loop "the billing page plan cards" "too loud, make it calmer" ~/Desktop/billing.png
Rounds default to 5. Impeccable advises bounded passes; asking for more than 8 gets a one-line warning about cost and diminishing returns. In the paths below, <main> is this checkout, <wt> is the refine worktree, <run> is its run dir, and <skill> is this skill's folder.
It is standalone: only a person starts it, with /ui-refine-loop <where>. The super-board lanes never run it. It works on its own refine/<slug> branch from HEAD and ends with finish grades and a draft PR for human review. It never merges.
1. Read the target's code first
The prompt names where: a route, a component path or a description. Turn it into a route to screenshot and the scope paths the fixer may edit:
- Route: the page file that serves it (
app/**/page.*,pages/**,src/routes/**, or whatever the framework uses), plus the component folders it imports. - Component path: that file's folder. The route is a page that renders it (grep for its import), or its Storybook story.
- Description: search for it. Any screenshots the user pasted show which surface they mean.
