AgentStack
Browse Sign in
Browse Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Visual Feedback Loop

skill-sbrudz-agent-skills-visual-feedback-loop · by sbrudz

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)

↗ Repository
— No reviews yet
0 installs
15 views
0.0% view→install

Install

$ agentstack add skill-sbrudz-agent-skills-visual-feedback-loop

✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

View the full security report →

Verified badge

Passed review? Show it. Paste this badge into your README, it links to the public security report.

AgentStack Verified badge Links to your public security report.
[![AgentStack Verified](https://agentstack.voostack.com/badges/verified.svg)](https://agentstack.voostack.com/security/report/skill-sbrudz-agent-skills-visual-feedback-loop)

Reliability & compatibility

✓ Security review passed
0 installs to date
— no reviews yet
● 23d ago

Declared compatibility

Claude CodeClaude Desktop

Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.

Preview Execution monitoring

We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.

How agent discovery & health will work →
Are you the author of Visual Feedback Loop? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

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-practices and 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)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet, be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Agent Skills