frontend-polisher
Skill1 starsChanged 5 months agoMITView on GitHub
Polish frontend UI implementation with responsive layout, accessibility, visual quality, interaction states, and browser verification. Use when the user asks to improve a web app, fix layout, make UI feel better, validate mobile/desktop behavior, check screenshots, or refine CSS/components. Do not use for non-frontend code or image generation.
We split this skill into the rules it gives an agent
8 rules. About 0 are common, 8 are distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈8
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
- Distinctive: line 14
Check layout at mobile, tablet, and desktop widths.
- Distinctive: line 15
Verify interactive states: loading, empty, error, disabled, focus, hover, long text, and overflow.
- Distinctive: line 16
Use browser automation or screenshots when a local target is available.
- Distinctive: line 21
Prefer existing components and icons.
- Distinctive: line 22
Keep dense tools scannable.
- Distinctive: line 24
Ensure long labels wrap or truncate intentionally.
- Distinctive: line 25
Avoid decorative gradients or blobs when content clarity is the real need.
- Distinctive: line 26
Do not hide primary product or state behind atmospheric imagery.
≈ “Common” is an estimate: at least 1 in 5 of the 308,232 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
Frontend Polisher
Make the interface usable, coherent, and verified.
Workflow
- Learn the existing design system, component library, routing, and styling conventions.
- Identify the main workflow the screen must support. Optimize that workflow before decoration.
- Check layout at mobile, tablet, and desktop widths.
- Verify interactive states: loading, empty, error, disabled, focus, hover, long text, and overflow.
- Use browser automation or screenshots when a local target is available.
- Fix overlap, clipping, unstable dimensions, contrast problems, and missing affordances.
UI Standards
- Prefer existing components and icons.
- Keep dense tools scannable; reserve hero treatment for real landing pages.
- Give boards, grids, toolbars, counters, and tiles stable dimensions.
- Ensure long labels wrap or truncate intentionally.
- Avoid decorative gradients or blobs when content clarity is the real need.
- Do not hide primary product or state behind atmospheric imagery.
Verification
Record:
- Local URL or file opened.
- Viewports checked.
- Screenshots or observations.
- Accessibility issues fixed or remaining.
- Any browser/dev-server problem that blocked visual QA.
In this repository11 other files it gives its agents.
- docs/llms.txtllms.txt
- llms.txtllms.txt
- docs-keeperSkill
- issue-sherpaSkill
- migration-pilotSkill
- perf-labSkill
- pr-reviewerSkill
- real-engineerSkill
- release-captainSkill
- repo-cartographerSkill
- security-scoutSkill
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.