agent-eyes

Community

See web pages clearly with screenshots and a11y.

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.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.