Visual Feedback Loop (Eyes)

About

The Eyes skill establishes a structured visual feedback loop between Claude and developers by leveraging Playwright MCP tools. It enables Claude to see the application's current state, capture specific element screenshots, and gather precise feedback on UI elements that are difficult to describe through text alone. By following a rigorous workflow of capture, proposal, confirmation, and verification, it ensures that frontend changes—such as CSS adjustments or layout fixes—align perfectly with user expectations before code is modified.

Key Features

• Responsive testing via browser resizing capabilities
• Structured 'Capture-Fix-Verify' workflow for UI refinements
• Automated screenshot capture using Playwright MCP integration
• Side-by-side visual comparison for before-and-after validation
• Accessibility snapshot analysis to understand DOM structure
• 14 GitHub stars

Use Cases

• Debugging complex CSS layout issues and responsive design breakpoints
• Collaborative UI polish sessions requiring precise visual feedback
• Verifying frontend bug fixes through automated visual regression checks