{
  "markdown": "<p align=\"center\">\n  <img src=\"assets/banner.svg\" width=\"800\" alt=\"Visual Eyes - Give Claude Code eyes to see your app\">\n</p>\n\n<p align=\"center\">\n  <strong>Give Claude Code eyes to see your running app</strong><br>\n  <sub>Screenshot, analyze, fix, verify - the visual feedback loop AI coding assistants were missing</sub>\n</p>\n\n<p align=\"center\">\n  <a href=\"#-what-it-does\">What it does</a> ·\n  <a href=\"#-install\">Install</a> ·\n  <a href=\"#-how-it-works\">How it Works</a> ·\n  <a href=\"#-features\">Features</a> ·\n  <a href=\"#-usage-examples\">Examples</a> ·\n  <a href=\"#-requirements\">Requirements</a>\n</p>\n\n<p align=\"center\">\n  <img src=\"https://img.shields.io/github/stars/nikolasdehor/visual-eyes?style=flat-square&labelColor=0d0d1a&color=7c3aed\" alt=\"Stars\">\n  <img src=\"https://img.shields.io/github/forks/nikolasdehor/visual-eyes?style=flat-square&labelColor=0d0d1a&color=7c3aed\" alt=\"Forks\">\n  <img src=\"https://img.shields.io/github/license/nikolasdehor/visual-eyes?style=flat-square&labelColor=0d0d1a&color=2563eb\" alt=\"License\">\n  <img src=\"https://img.shields.io/badge/Claude_Code-compatible-06b6d4?style=flat-square&labelColor=0d0d1a\" alt=\"Claude Code compatible\">\n  <img src=\"https://img.shields.io/badge/Playwright-powered-45ba4b?style=flat-square&labelColor=0d0d1a\" alt=\"Playwright powered\">\n  <img src=\"https://img.shields.io/badge/zero-config-a78bfa?style=flat-square&labelColor=0d0d1a\" alt=\"Zero config\">\n</p>\n\n---\n\n## What it does\n\n**Visual Eyes** is a Claude Code skill that bridges the gap between terminal-based AI coding and visual UI verification. It uses Playwright to capture screenshots of your local application, allowing Claude to \"see\" exactly what it is building.\n\nBy adding a visual layer to the development loop, it enables Claude to:\n- **Identify** visual bugs, layout shifts, and CSS regressions automatically.\n- **Analyze** the impact of code changes on different screen sizes (Mobile, Tablet, Desktop).\n- **Verify** that its own fixes actually worked by comparing before-and-after states.\n- **Audit** typography, colors, and spacing against design requirements.\n\n---\n\n## The Problem\n\nClaude Code can write incredible code - but it is **blind to the result**.\n\nFrontend devs waste 10 minutes describing a visual bug in words, while Claude guesses what is wrong and ships fixes that introduce new problems. You describe, Claude guesses, you describe again. Repeat until frustration.\n\n**Visual Eyes gives Claude actual vision.** Take a screenshot, Claude sees it, Claude fixes it, Claude verifies the fix - in one loop.\n\n---\n\n## How it Works\n\n```\nYou: \"how does the dashboard look?\"\n\n  -> Visual Eyes takes screenshot of localhost:3000\n  -> Claude SEES the image (multimodal vision)\n  -> Claude identifies: broken grid, misaligned header, overflow text\n  -> Claude edits the code\n  -> Takes new screenshot to verify\n  -> \"Fixed. Header is now 20px lower, grid realigned. Want to check mobile?\"\n```\n\nNo more guessing. No more describing pixels. Just fix it.\n\n---\n\n## Install\n\n```bash\n# One-liner (recommended)\ncurl -fsSL https://raw.githubusercontent.com/nikolasdehor/visual-eyes/main/install.sh | bash\n```\n\n```bash\n# Claude Code plugin\nclaude plugins install github:nikolasdehor/visual-eyes\n```\n\n```bash\n# Manual (git)\ngit clone https://github.com/nikolasdehor/visual-eyes.git\ncp -r visual-eyes/skills/visual-eyes ~/.claude/skills/\n```\n\nAfter installing, **restart Claude Code** and say anything - it just works.\n\n---\n\n## Features\n\n| | Feature | What it does |\n|---|---|---|\n| 📸 | **Screenshot Capture** | Desktop, mobile (iPhone/Android), full-page, specific routes |\n| 👁 | **Visual Analysis** | Claude sees and understands layout, colors, typography, spacing |\n| 🔁 | **Auto-Fix Loop** | Identify bug -> edit code -> screenshot -> verify -> repeat |\n| 🔬 | **Visual Regression** | Before/after pixel diff with highlighted changes |\n| 📱 | **Responsive Testing** | Desktop + tablet + mobile side by side in one command |\n| ⚡ | **Zero Config** | Works with any localhost app - React, Next.js, Vue, anything |\n\n---\n\n## Usage Examples\n\nJust talk to Claude naturally. The skill activates automatically.\n\n```\n\"screenshot the homepage\"\n```\n\n```\n\"how does the dashboard look on mobile?\"\n```\n\n```\n\"there's a visual bug on the settings page - find and fix it\"\n```\n\n```\n\"compare before and after my CSS changes\"\n```\n\n```\n\"check all routes for visual regressions\"\n```\n\n```\n\"the sidebar is overlapping the content, fix it\"\n```\n\n```\n\"show me desktop, tablet, and mobile side by side\"\n```\n\n---\n\n## Requirements\n\n- **Claude Code** - any plan (Free, Pro, Teams)\n- **Node.js 18+** - for Playwright\n- **Playwright browsers** - installed automatically, or run manually:\n\n```bash\nnpx playwright install chromium\n```\n\nThat's it. No API keys. No config files. No setup wizard.\n\n---\n\n## How It Compares\n\n| | Without Visual Eyes | With Visual Eyes |\n|---|---|---|\n| See your app | Describe bugs in words | Claude sees the actual screenshot |\n| Fix UI bugs | Manual back-and-forth guessing | Automated see-fix-verify loop |\n| Regression testing | \"It looked fine before...\" | Pixel-level diff, red = changed |\n| Responsive check | Resize browser manually | Desktop + tablet + mobile at once |\n| Fix verification | Guess and deploy | Screenshot confirms the fix worked |\n\n---\n\n## Roadmap\n\n- [x] v1.0 - Screenshot capture + visual analysis + auto-fix loop\n- [x] v1.0 - Visual regression diff (before/after pixel comparison)\n- [x] v1.0 - Responsive testing (desktop + tablet + mobile)\n- [ ] v1.1 - Video recording of interactions\n- [ ] v1.2 - Accessibility audit (WCAG compliance check)\n- [ ] v1.3 - Component isolation (screenshot a single React component)\n- [ ] v2.0 - Visual test suite with CI integration\n\n---\n\n## Contributing\n\nPRs are welcome. If you find a bug or want a feature, open an issue.\n\nIf you're building a Claude Code skill and want ideas, this repo's structure (`skills/visual-eyes/SKILL.md`) is a good reference for how skills are built.\n\n---\n\n## License\n\nMIT - see [LICENSE](LICENSE)\n\n---\n\n<p align=\"center\">\n  Built by <a href=\"https://github.com/nikolasdehor\">Nikolas de Hor</a>\n  <br><br>\n  <sub>Because AI should see what it builds</sub>\n</p>\n",
  "bytes": 6175,
  "sha": "723a68e34d5ea7e816ec49c69ca06fddf9b5fd4dcc1840f3131bf3fc1284b8f6",
  "repo_slug": "nikolasdehor/visual-eyes",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_nikolasdehor_visual_eyes_visual_eyes_cd987ac7/readme"
}