skills.rest
edrouhardmicrosoft
edrouhardmicrosoftCOMMUNITY
Explore all skills by this author →
GitHub

agent-eyes

Capture screenshots, DOM snapshots, and accessibility scans of web pages.

3|1|Updated Jan 20, 2026
Search Tags:#accessibility#screenshots#playwright#visual-context#dom-snapshot#element-describe
One-click install
npx skills add https://github.com/edrouhardmicrosoft/agent-canvas-skills --skill agent-eyes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agent-eyes
Source: https://github.com/edrouhardmicrosoft/agent-canvas-skills/tree/main/.claude/skills/agent-eyes
Command: npx skills add https://github.com/edrouhardmicrosoft/agent-canvas-skills --skill agent-eyes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, axe-playwright-python, and includes scripts (resource) components.

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.

Frequently Asked Questions about agent-eyes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture screenshots and DOM snapshots with Playwright for AI analysis?▼

Capture screenshots and DOM snapshots by running this Skill with a target URL to generate visual context. It leverages Playwright to extract page structure and element details for AI agents to analyze UI state.

Can I run accessibility audits using axe-playwright-python for WCAG violations?▼

Yes, you can run accessibility audits using axe-core checks through the axe-playwright-python dependency. It identifies WCAG violations and provides results to help prioritize fixes for web applications.

How do I get detailed element information like layout and styles for UI debugging?▼

Obtain detailed element information including layout, styles, and attributes by using the element describe feature. It inspects specific page elements to support UI debugging and design review tasks.

Do I need to install Playwright browsers before running accessibility scans?▼

Yes, you need to install Python dependencies, Playwright, and its browsers before running accessibility scans. This environment setup is required to capture screenshots and execute axe-core checks successfully.

What is the best way to reduce token usage when capturing visual context from web pages?▼

Switch to compact mode after capturing context to produce token-efficient outputs. This reduces the payload size of DOM snapshots and accessibility scans while preserving essential visual context for AI agents.

Does this Skill support full-page screenshots or just element-specific captures for QA pipelines?▼

It supports both full-page and element-specific screenshots for QA pipelines. You can request comprehensive context bundles that combine screenshots, DOM snapshots, and accessibility scans to feed automated reviews.

Related Skills

Explore More Software Engineering Skills→
HeldinhowHeldinhow
4

webapp-testing

Automate end-to-end web application testing with Playwright across multiple browsers.

Community
Intermediate
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
eventua11yeventua11y
1

writing-accessibility-tests

Automate web accessibility tests with axe-core scans and Playwright assertions.

Official
Advanced
roviczzzroviczzz
1

web-design-reviewer

Automate visual inspection and source code fixing of website design issues.

Community
Advanced