Can I use this with other Claude skills?

Yes, it is specifically designed to integrate with the design-review skill to visualize automated findings and uses a shared event bus.

What are the prerequisites for running Canvas Edit?

You need Python 3.10+, the uv package manager, and Playwright browsers installed to run the injection scripts.

Will the toolbar appear in my screenshots?

No, the toolbar is built using a Shadow DOM and is automatically hidden during screenshot capture to keep the focus entirely on the page annotations.

How does Canvas Edit differ from the original version?

Canvas Edit v2 is now strictly a viewing and annotation tool for design reviews rather than a text or style editor, focusing on issue visualization.

Canvas Edit - Design Review Annotator

Name: Canvas Edit - Design Review Annotator
Author: edrouhardmicrosoft

byedrouhardmicrosoft

•

Design Tools

Overlays real-time design review findings and numbered annotation badges directly onto web pages for visual issue tracking.

This skill provides a specialized interface for visualizing design and accessibility issues directly in the browser during the development process. By injecting a floating toolbar and interactive badges onto target elements, it allows developers and designers to see exactly where problems occur, categorized by severity levels like blocking, major, or minor. It seamlessly integrates with automated design review tools to provide hover-able popovers with detailed fix recommendations and includes a one-click screenshot capture feature that persists the annotated state for documentation while remaining invisible to standard DOM queries via Shadow DOM isolation.

Key Features

01Real-time visual annotation badges for design issues

022 GitHub stars

03Severity-based color coding (Blocking, Major, Minor)

04Interactive issue popovers with specific fix recommendations

05Shadow DOM isolation to prevent interference with page styles

06One-click screenshot capture of annotated pages

Use Cases

01Visualizing accessibility and contrast violations directly on a staging site

02Collaborative design reviews where visual context is required for issue resolution

03Generating annotated bug reports with screenshots for frontend developers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add edrouhardmicrosoft/agent-canvas-skills canvas-edit

For use in Claude.ai and ChatGPT

Download Skill