Skills
.Work. You
Rest

agent-canvas

Community

Visually select and inspect web elements.

Software Engineering#accessibility#Playwright#QA#web-automation#AI-agents#design-review#element-selection
Authoredrouhardmicrosoft
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Agent Canvas provides an interactive element picker for web pages, enabling AI agents to visually identify DOM elements, capture selectors, and retrieve contextual data without manual scraping.

Core Features & Use Cases

  • Interactive element picker with a browser overlay to hover, highlight, and select elements, returning their selectors and metadata.
  • Optional integrations with agent-eyes for richer element descriptions and screenshots to improve downstream reasoning.
  • Use during UI QA, design reviews, accessibility checks, and debugging to quickly collect element data and verify UI behavior.

Quick Start

  1. Install prerequisites: uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py install --scope temporary
  2. Launch the picker and select elements: uv run .claude/skills/agent-canvas/scripts/agent_canvas.py pick http://localhost:3000 --with-eyes --with-edit
  3. Retrieve session artifacts after closing the browser: ls -la .canvas/sessions/ ; cat .canvas/sessions/$(ls -t .canvas/sessions/ | head -1)/session.json

Dependency Matrix

Required Modules

playwright

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-canvas
Download link: https://github.com/edrouhardmicrosoft/agent-canvas-skills/archive/main.zip#agent-canvas

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 471,000+ vetted skills library on demand.