live-canvas

live-canvas is a skill for Claude Code, Codex from hamr0/liteagents. It costs 50 tokens per session (10,001 once invoked), scanned A, original, Apache-2.0.

A skill for refining web interfaces through design interviews, generated variations, and live click-based feedback in a browser. It streams annotations back into the coding session.

In plain words
What is it for?
Use it to explore UI directions, collect feedback on a live preview, refine the chosen design, and clean up temporary design files when finished.
Why use it?
It keeps visual review and implementation connected, so design changes can be discussed and applied during the same workflow.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/hamr0/liteagents/live-canvas
Any agent
npx skills add hamr0/liteagents --skill live-canvas
Clone the repo
git clone --depth 1 https://github.com/hamr0/liteagents

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for live-canvas

README.md
[![agentmods](https://agentmods.dev/badge/skills/hamr0/liteagents/live-canvas.svg)](https://agentmods.dev/skills/hamr0/liteagents/live-canvas)
Your own site
<a href="https://agentmods.dev/skills/hamr0/liteagents/live-canvas"><img src="https://agentmods.dev/badge/skills/hamr0/liteagents/live-canvas.svg" alt="Measured on agentmods" height="20"></a>
Per session 50 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 10,001 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00050 $0.10001
Opus 5 $0.00025 $0.05000
Sonnet 5 $0.00010 $0.02000
Haiku 4.5 $0.00005 $0.01000

Measured today against content hash c78267860dd9, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-05, from the pricing page.

Security

Grade A, and why

live-canvas scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.

The scan reads SKILL.md. This mod also ships 1 executable file (templates/overlay-vanilla.js), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

Copies of this mod

1 near-identical copy found in the catalogue:

packages/ampcode/skills/live-canvas/SKILL.md · 1,088 lines

How it starts

The opening of the file, as written. The whole thing — 1,088 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Live Canvas Skill

This skill implements a complete design exploration workflow: interview, generate variations, collect feedback, refine, preview, and finalize.

CRITICAL: Cleanup Behavior

All temporary files MUST be deleted when the process ends, whether by:

  • User confirms final design → cleanup, then generate plan
  • User aborts/cancels → cleanup immediately, no plan generated

Never leave .claude-design/ or __live_canvas routes behind. If the user says "cancel", "abort", "stop", or "nevermind" at any point, confirm and then delete all temporary artifacts.


Feedback Modes — always ask the user

Live Canvas supports two feedback transports. The user picks every time — never auto-select.

  • Live channel (Claude Code only): the overlay POSTs each Save to a local MCP channel server; feedback arrives in the active session as a <channel source="live-canvas" ...> tag. Requires the session was launched with live-claude (or claude --dangerously-load-development-channels plugin:live-canvas-channel@live-canvas-marketplace) — channels are still an experimental Claude Code feature and a plain claude session silently drops the notifications. Any qualifying session can claim the channel by calling mcp__live-canvas__channel_open; only one holds it at a time.
  • JSON file (universal): each Save accumulates locally; Submit writes .claude-design/feedback.jsonl (or downloads the JSON). User says "check" or pastes the file when ready. Works in any host.

Host detection — do this first

This SKILL.md is the Claude Code variant of the skill. Same content is mirrored as docs for Droid/Amp/Opencode under packages/<tool>/ beside the other capabilities, but those tools don't support the MCP channel.

If running under Droid, Amp, or Opencode (not Claude Code):

  • Skip the mode question entirely.
  • Announce: 📝 JSON mode (Live channel requires Claude Code).
  • Proceed to Phase 1 with channelUrl omitted in the overlay init.
  • Never mention the channel plugin.

Read the full file on GitHub · 1,088 lines

Files

What ships with it

4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. today Changed · +4 lines c78267860dd9
  2. 5d ago First seen · 1,084 lines · 50 tokens per session scan A 94eb6866fb35

Subscribe to this mod's changes

live-canvas is a skill published in the GitHub repository hamr0/liteagents (22 stars, last pushed today), licensed Apache-2.0. It adds 50 tokens to every session and 10,001 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

dingtalk_channel_connect

Use a headed browser to automatically complete DingTalk channel integration for QwenPaw. Applicable when the user mentions DingTalk, developer console, Client ID, Client Secret, bot, Stream mode, binding or configuring a channel. Supports pausing when a login page is detected and resuming after the user logs in.

agentscope-ai/QwenPaw · 69 tokens

make_plan

For external plan request scenarios, guides the Agent to request a clear, actionable, step-by-step plan from a stronger Agent via listagents and chatwithagent, emphasizing that the plan is executed by the requester, not by the consulted Agent.

agentscope-ai/QwenPaw · 51 tokens

pdf

当用户需要对PDF文件进行任何操作时,请使用此技能。包括从 PDF 中读取或提取文本/表格、合并多个 PDF、拆分 PDF、旋转页面、添加水印、创建新PDF、填写PDF表单、加密/解密 PDF、提取图片,以及对扫描版 PDF 进行 OCR 使其可搜索。如果用户提到 .pdf 文件或要求生成 PDF,请使用此技能。.

agentscope-ai/QwenPaw · 95 tokens

peer-review

Structured manuscript/grant review with checklist-based evaluation. Use when writing formal peer reviews with specific criteria methodology assessment, statistical validity, reporting standards compliance (CONSORT/STROBE), and constructive feedback. Best for actual review writing, manuscript revision. For evaluating…

xintaofei/codeg · 71 tokens

gpt-image-2

面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用:(A) Garden 本地模式,通过 OpenAI 兼容接口直接出图并落盘;(B) Host-Native 模式,把本 Skill 当作提示词工程指引,把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图;(C) Advisor 模式,宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板,覆盖海报 / UI / 产品 / 信息图 / 学术图 / 技术架构图 / 漫画 / 头像 / 流程板 / 电影分镜 / IP 周边 / 编辑工作流等场景。.

ConardLi/garden-skills · 177 tokens

new

Create a new project to start development quickly.

clacky-ai/openclacky · 10 tokens