agent-eyes
CommunitySee web pages clearly with screenshots and a11y.
Software Engineering#accessibility#screenshots#playwright#visual-context#dom-snapshot#element-describe
Authoredrouhardmicrosoft
Version1.0.0
Installs0
System Documentation
What problem does it solve?
AI agents often lack visual context when interacting with web apps. This Skill provides visual context by generating screenshots, DOM snapshots, and accessibility scans to help you understand UI state and issues at a glance.
Core Features & Use Cases
- Visual context: capture full-page or element-specific screenshots, plus DOM snapshots to inspect structure.
- Accessibility analysis: run axe-core checks to identify WCAG violations and prioritize fixes.
- Element describe: obtain detailed element information including layout, styles, and attributes.
- Use cases: QA teams validating UI consistency, designers auditing accessibility, and developers debugging UI regressions across pages.
- Context bundles: request comprehensive context bundles to feed design reviews and automated QA pipelines.
Quick Start
Install Python dependencies and Playwright, install browsers, and run the skill with a URL to capture context. Then you can switch to compact mode for token-efficient outputs.
Dependency Matrix
Required Modules
playwrightaxe-playwright-python
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: agent-eyes Download link: https://github.com/edrouhardmicrosoft/agent-canvas-skills/archive/main.zip#agent-eyes Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.