canvas-edit

To overlay design review annotations, use the canvas-edit Skill to inject a live toolbar and issue badges onto a target URL. It surfaces findings directly on the page without altering the underlying content.

Yes, you can capture annotated screenshots with the toolbar hidden during capture. The Skill provides evidence capture by taking screenshots of the page with the annotation UI temporarily hidden.

The annotation toolbar operates within a Shadow DOM-driven UI to isolate its elements from the host page. This ensures the injected design-review badges and popovers do not conflict with existing page styles.

You inject design review issues by running the canvas edit script with your target URL and a JSON file containing the issues. For example, use the inject command pointing to localhost and pass your issues.json file.

The Skill manages multiple design review issues on the same element through multi-badge stacking. It supports severity filtering, popovers with details, and orphaned badge handling to organize overlapping findings.

Yes, you need Playwright installed as a dependency to run the live annotation injections. The Skill relies on Playwright to automate browser control and inject the annotation toolbar onto target web pages.