Claude Code Plugins

Community-maintained marketplace

Feedback

visual-verification

@gruckion/chief-wiggum-anthropic-agent-harness
0
0

Visually verify implemented features work correctly before marking complete. Use when testing UI changes, verifying web features, or checking user flows work in the browser.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name visual-verification
description Visually verify implemented features work correctly before marking complete. Use when testing UI changes, verifying web features, or checking user flows work in the browser.

Visual Verification

Verify implemented features work correctly through actual user interaction, not just automated tests.

When to Use

  • After implementing any UI feature
  • Before marking an issue as complete
  • When acceptance criteria involve user-visible behavior
  • After fixing UI bugs

Approaches

Web Applications: See browser-verification.md for Playwright MCP workflow.

Mobile Applications: See mobile-verification.md (Coming soon)

Verification Checklist

Before marking any UI task complete:

  • Dev server is running and accessible
  • Feature renders without console errors
  • Elements render correctly and do not incorrectly overlap
  • User interactions work as expected
  • Edge cases handled (empty states, loading, errors)
  • Screenshot captured as evidence

What NOT to Do

  • Skip visual verification because "tests pass"
  • Mark issues complete without browser testing
  • Assume dev mode catches all errors (run npm run build too)
  • Test only happy paths