UI Canvas
Draw your own HTML/CSS/JS as a full-window overlay on top of the QM web UI, a...
Install
npx skills add yc-software/qm --skill ui-canvas -g -a claude-code -y- Repository
- yc-software/qm15.6k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 1,660 tokens
- Runs scripts
- No, instructions only
What it does
Draw your own HTML/CSS/JS as a full-window overlay on top of the QM web UI, a dashboard, a form, a visualization, controls that message you back. Write, update, replace, pin or dismiss it. Use when an interactive or visual result beats a chat reply.
ui-canvas, a full-window overlay on the person's web UI
The canvas is a transparent layer covering the whole browser window (position: fixed,
inset 0), above the sidebar, panes and composer. It ignores the mouse by default so the
page underneath stays usable: set pointer-events: auto on any element of yours that
should be clickable. Position things in viewport coordinates; use the ui-state skill or
getBoundingClientRect() on page elements to aim at real UI. A small "Canvas" pill in the
bottom-right corner lets the person hide, pin or close it.
The canvas belongs to this conversation and to the person who started this turn. It shows
in whichever pane has this conversation open, survives reloads and pane moves, and nobody
else sees it (see "Always on" below for one that follows them everywhere), not other members of a shared conversation, not people viewing a share
link. Requires a web turn the person started and the ui_canvas feature for them.
Your JavaScript runs in their page with their full session. It can do anything they can do in QM, with no sandbox. That is why it exists, and why you must hold to these rules:
