canvas-edit
CommunityReal-time design review annotations.
Authoredrouhardmicrosoft
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a live annotation toolbar and issue badges that overlay design-review findings on any web page, enabling teams to surface issues without altering page content.
Core Features & Use Cases
- Live annotation badges with severity colors and hover popovers for quick details.
- Screenshot capture of the annotated page for evidence, with the toolbar hidden during capture.
- Shadow DOM isolation and a lightweight canvas bus integration to coordinate with other skills.
- Filtering by severity/pillar, multi-badge stacking on the same element, and orphaned badge handling.
Quick Start
Use the canvas-edit skill to inject the annotation toolbar on a target URL with a JSON file containing issues, e.g. uv run .claude/skills/canvas-edit/scripts/canvas_edit.py inject http://localhost:3000 --issues issues.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: canvas-edit Download link: https://github.com/edrouhardmicrosoft/agent-canvas-skills/archive/main.zip#canvas-edit 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.