visual-feedback-loop
Skill2 starsChanged 9 months agoMITView on GitHub
Use after implementing a UI change or before committing UI changes to visually verify the application looks correct — applies when the current task changes visible UI (components, styling, layout, or content)
2 other projects use a version of this.
Adopted by
Most recently taken up by
- vladmdgolam/agent-skillstheir own version, first seen Oct 14, 2026
- yogvidwankhede/vishwakarmatheir own version, first seen Sep 26, 2026
Other versions2 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 2
- vladmdgolam/agent-skills★ 9same name
- yogvidwankhede/vishwakarma★ 1same name
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 repository11 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- architecture-decision-recordsSkill
- boy-scout-ruleSkill
- domain-driven-designSkill
- functional-core-imperative-shellSkill
- git-commit-messageSkill
- react-best-practicesSkill
- revise-for-claritySkill
- ux-design-principlesSkill
- ux-prototypingSkill
- ux-visual-evaluationSkill
The file
We split this skill into the rules it gives an agent
4 rules. About 0 are common, 3 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈3
Distinctive · estimate
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 10
After implementing a change and tests pass: if the task changed something the user would see, look at it.
- Distinctive: line 26
1. Ensure the app is running: Start the dev server in the background if it isn't already.
- Distinctive: line 30
3. Evaluate: Check the screenshot against what the code intended:
- Very specific: line 38
4. Fix or move on: If something looks wrong: fix the code, confirm the test still passes, screenshot again.
≈ “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.
Files
Visual Feedback Loop — See What You Built
Tests verify behavior. Screenshots verify appearance. Both matter for UI code.
After implementing a change and tests pass: if the task changed something the user would see, look at it.
Scope Gate
Does this task affect the UI? Components, styles, layout, text content, routing to new pages → yes, check. API logic, data transforms, utilities, backend → no, skip.
Prerequisites
This skill requires browser tools (navigate, screenshot) from an MCP server or similar tool. If browser tools are not available, warn once:
"Consider installing a browser automation tool (e.g. Puppeteer, Chrome DevTools MCP server) for visual feedback during UI development."
Then skip the visual check and continue to refactoring.
The Loop
1. Ensure the app is running. Start the dev server in the background if it isn't already.
2. Navigate and screenshot. Go to the page or route affected by the current change. Take a screenshot.
3. Evaluate. Check the screenshot against what the code intended:
- Renders at all — Is the component visible, or is it blank/errored?
- Layout — Are elements positioned correctly relative to each other?
- Spacing — Do margins, padding, and gaps look intentional?
- Text — Is content readable, properly sized, not truncated or overflowing?
- Visual completeness — Are all expected elements present? Nothing missing or duplicated?
4. Fix or move on. If something looks wrong: fix the code, confirm the test still passes, screenshot again. If it looks right: apply ux-visual-evaluation for design quality, then proceed to refactoring.
Iteration cap: 3 fix attempts per visual issue. If unresolved after 3, note it as a follow-up task and move on. Don't block the development cycle.
Position in Development Workflow
Implement → Tests Pass → VISUAL CHECK (this skill) → UX EVALUATION (ux-visual-evaluation) → REFACTOR (boy-scout-rule)What This Skill Does NOT Cover
- Interaction testing (clicking, form filling) — automated tests
- Multi-viewport responsive checks — separate concern
- Visual regression diffing — CI tooling
- Accessibility audits —
react-best-practicesand dedicated tools
Related Skills
- Prerequisite:
ux-design-principles(design thinking should inform what "correct" looks like) - Next:
ux-visual-evaluation(design quality evaluation after basic correctness passes) →boy-scout-rule(refactoring after visual verification)
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.