# UI Canvas

Draw your own HTML/CSS/JS as a full-window overlay on top of the QM web UI, a...

- Repository: https://github.com/yc-software/qm (15597 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add yc-software/qm --skill ui-canvas -g -a claude-code -y`
Codex: `npx skills add yc-software/qm --skill ui-canvas -g -a codex -y`
Cursor: `npx skills add yc-software/qm --skill ui-canvas -g -a cursor -y`
Gemini CLI: `npx skills add yc-software/qm --skill ui-canvas -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

The rest: https://github.com/yc-software/qm/blob/HEAD/skills-seed/ui-canvas/SKILL.md