Agent skill · Frontend

agent-canvas

Interactive element picker for web pages. Opens a browser with click-to-select UI overlay. Use when you need to let users visually select DOM elements, identify element selectors, or get detailed element information interactively. Triggers on "select an element", "pick element", "let me choose", "which element", or any interactive element selection task. Integrates with agent-eyes for visual context.

majiayu000github.com/majiayu000GitHub ↗
claude-codeMIT
Install
npx skills add majiayu000/claude-skill-registry --skill agent-canvas-edrouhardmicrosoft-agent-canvas-skills --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 2
SKILL.md size: 8 KB
Bundled scripts: none
Path: skills/agent/agent-canvas-edrouhardmicrosoft-agent-canvas-skills/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 534
Language: HTML

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# Agent Canvas Interactive element picker that opens a browser window with a DevTools-like selection overlay. Users hover to highlight elements and click to select. Returns detailed element info including selector, bounding box, and computed styles. ## First-Time Setup **Before first use**, verify dependencies are installed: ```bash uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py check ``` If checks fail, ask user which installation scope they prefer and run: ```bash # Recommended: minimal footprint, uv manages deps on-demand uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py install --scope temporary # Alternative: create .venv in project uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py install --scope local ``` See `agent-canvas-setup` skill for full details on installation options. ## Quick Start for AI Agents When using agent-canvas, **always follow this pattern**: 1. **Launch the picker** (browser opens for user interaction) 2. **Wait for browser to close** (user finishes selecting/editing) 3. **Read session from disk** (NOT from stdout - it may be lost) ```bash # 1. Launch (user interacts with browser) uv run .claude/skills/agent-ca

What's inside
Steps it walks through
  1. First-Time Setup
  2. Quick Start for AI Agents
  3. Commands
  4. Pick Element
  5. Watch for Changes
  6. Typical Workflow
  7. Integration with Agent Eyes
  8. Integration with Canvas Edit
  9. Session Artifacts (IMPORTANT)
  10. After Browser Closes - Read the Session
  11. Session Structure
  12. Key Fields in session.json
  13. Checking What Changed
  14. Notes
Ships with 1 file
  • metadata.json
Commands it runs
uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py check
uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py install --scope temporary
uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py install --scope local
uv run .claude/skills/agent-canvas/scripts/agent_canvas.py pick http://localhost:3000 --with-edit --with-eyes
cat .canvas/sessions/$SESSION_ID/session.json | jq '.summary'
Basic pick - opens browser, streams selections as JSON lines
uv run $SKILL_DIR/agent_canvas.py pick http://localhost:3000
Pick with agent-eyes integration (adds screenshot + detailed styles per selection)
uv run $SKILL_DIR/agent_canvas.py pick http://localhost:3000 --with-eyes
Pick with edit panel (floating DevTools for live style editing)
More from claude-skill-registry
All skills →
retention-analysisCohort analysis and retention optimization framework. Identifies retention drivers and churn…Otherpolars-dovmedSearch 2.4M+ scientific papers from PubMed Central Open Access. **When to use:** - Literature…DatabasesretroBrutally honest engineering retrospective. Analyzes git history for what actually happened — not…Data & Analyticsreview-paperComprehensive manuscript review covering argument structure, technical methodology, citation…Code Review & Qualitycost-analysisBreak down costs by category (fulfillment, payment, marketplace)Otherdescriptive-statisticsSummarizing and visualizing data through measures of center, spread, shape, and position. Covers…Data & Analytics
About this skill
What does the agent-canvas skill do?

Interactive element picker for web pages. Opens a browser with click-to-select UI overlay. Use when you need to let users visually select DOM elements, identify element selectors, or get detailed element information interactively. Triggers on "select an element", "pick element", "let me choose", "which element", or any interactive element selection task. Integrates with agent-eyes for visual context.

How do I install it?

Run `npx skills add majiayu000/claude-skill-registry --skill agent-canvas-edrouhardmicrosoft-agent-canvas-skills --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.