Agent skill

UI Canvas

by Prismer-AI in Prismer-AI/PrismerCloud

A skill your agent uses when a product journey, production component path, UI/UX operation sequence, visual regression, or alignment review must be represented or audited in /ui-canvas with…

MITAuto-check: notesTesting & QA

Install UI Canvas

skills CLI
$ npx skills add Prismer-AI/PrismerCloud --skill ui-canvas -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Prismer-AI/PrismerCloud ui-canvas --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Prismer-AI/PrismerCloud.git skills-src && mkdir -p .claude/skills && cp -r skills-src/sdk/apc/skills/ui-canvas .claude/skills/ui-canvas && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ui-canvas
GitHub stars
1.6k
Token cost
~1.2k tokens
SKILL.md length
358 words
Files
2
Skills in repo
88
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when a product journey, production component path, UI/UX operation sequence, visual regression, or alignment review must be represented or audited in /ui-canvas with…

  • Works in 6 steps: 建立双向索引 → 盘生产 source → 写不可变版本 → …
  • A product journey
  • SKILL.md covers 承重规则, Workflow, 输出契约 and Red flags, plus 1 more section
  • Calls npx and rg; needs APC_API_KEY and PRISMER_API_KEY

What it does

UI Canvas is an agent skill from Prismer-AI/PrismerCloud. Use when a product journey, production component path, UI/UX operation sequence, visual regression, or alignment review must be represented or audited in /ui-canvas with implementation-spec references, immutable versions, task-bound screenshots, and a persisted ReportCard.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `skill.json`).

It sits in Testing & QA, covering UI design and Visual regression testing. The licence is MIT.

When your agent uses it

  • A product journey
  • Production component path
  • UI/UX operation sequence
  • Visual regression

Example prompts

  • “/ui-canvas”

Requirements

  • Node.js
  • A credential in APC_API_KEY
  • A credential in PRISMER_API_KEY
  • Pre-approved tools (allowed-tools): Bash

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. 建立双向索引
  2. 盘生产 source
  3. 写不可变版本
  4. 展开 Frame 与操作边
  5. 验证结构与真实渲染
  6. 发布 task-bound 视觉证据

What it can do on your machine

Read from SKILL.md and the folder at commit e5d9444. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • rg

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • APC_API_KEY
    • PRISMER_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Canvas loads about 1.2k tokens when it runs. Until then it costs about 71 tokens; SKILL.md has 358 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~71
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Bash

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Prismer-AI/PrismerCloud at commit e5d9444, republished under its MIT licence (© Prismer-AI). 358 words, ~1,230 tokens.

Download SKILL.mdSave it as .claude/skills/ui-canvas/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
ui-canvas
description
Use when a product journey, production component path, UI/UX operation sequence, visual regression, or alignment review must be represented or audited in /ui-canvas with implementation-spec references, immutable versions, task-bound screenshots, and a persisted ReportCard.
allowed-tools
Bash
license
MIT
metadata.category
design

UI Canvas

用一个代码定义的展开画布完成 spec ↔ 真实生产组件 ↔ 用户操作 ↔ 可寻址视觉证据 对齐。Production checkpoint 必须在 Frame 内直接渲染真实 UI;不能安全渲染就保留同尺寸 gap contract。最终证据来自真实 /ui-canvas deep link,不来自 /ui-kit 仿制稿。

承重规则

  1. 先读 implementation spec 的 UI Canvas index 和 Canvas registry,建立双向索引。
  2. 禁止从 src/app/ui-kit/sections/** 取节点实现;/ui-kit 仅是历史参考。
  3. Canvas callback 只能改变本地 fixture、选中节点和 edge 高亮,不得发业务请求。
  4. aligned 版本不可原地修改;需求变化时新增版本并用 previousVersion 回指。
  5. Production Frame 直接 import 生产组件;不能复用就写 gap,不复制 JSX 冒充闭合。
  6. 测试和截图只证明 Canvas route/registry/render;不能证明 service、DB、daemon 或业务副作用。
  7. 截图 asset 与 ReportCard 证明“证据已产出”,不能自动判定“视觉正确”。

Workflow

1. 建立双向索引

从 spec 找出 set、journey、checkpoint 与 user/system oracle。每个 CanvasSet、version、journey、node 都持有真实 SpecRef;spec 反向列出 Overview、journey deep link 与 registry source。

2. 盘生产 source
bash
rg -n "export (function|const|class)" src/app src/components
rg -n "ui-kit/sections|fetch\\(|imFetch\\(|/api/" src/app/ui-canvas
判定条件动作
productionprops 可确定性渲染,callback 可留在本地在 component-registry.tsx 直接 import
gap没有生产组件,或 wrapper 挂载即请求/轮询写清 reason、driftRef、双 oracle

生产 wrapper 只因数据编排不能复用时,可抽纯 *View 让生产 wrapper 与 Canvas 共用;不得借机修改 endpoint、model、daemon 或 SDK。

3. 写不可变版本
  • draft 可编辑;aligned 后冻结。
  • 需求变化新增版本文件,不覆盖历史文件。
  • checkpoint 总数、唯一性、edge 完整性和 production source 由 registry test 锁定。
  • Overview 从 journey registry 派生,不复制 checkpoint。
4. 展开 Frame 与操作边
  • Production checkpoint 使用约 960×680 的 Frame,body 直接挂 renderer。
  • Gap 使用同尺寸 contract,显示 reason、driftRef、双 oracle 和 SpecRef。
  • 默认相机聚焦 deep-link Frame;整条路径缩略图只能通过显式 Fit journey。
  • Inspector 使用浮层,不永久挤压真实组件。
  • Edge label 写用户动作或条件;用 action / condition / error / recovery / handoff 区分语义。
  • 生产 callback 选择对应 outgoing edge;没有真实 target 时只记录 local action。
5. 验证结构与真实渲染
bash
npx vitest run src/app/ui-canvas/__tests__
npx tsc --noEmit
PRISMER_BASE_URL=http://127.0.0.1:3000 \
  npx playwright test e2e-playwright/specs/ui-canvas.spec.ts --project=chromium
rg -n "ui-kit/sections|fetch\\(|imFetch\\(|/api/" src/app/ui-canvas

Playwright 只能打本地 127.0.0.1:3000。截图前先断言目标可见,不得用 .first() 掩盖稳定态重复节点。

Show full SKILL.md (165 more words)Show less
6. 发布 task-bound 视觉证据

先从代码 registry 读取合法 set/version/journey:

bash
npx tsx scripts/ui-canvas-evidence.ts --list

再对需要验收的真实 Frame deep link 产 light/dark 截图、task asset 和一张 ReportCard:

bash
npx tsx scripts/ui-canvas-evidence.ts \
  --set <set> --version <version> --journey <journey> --node <node> \
  --themes light,dark \
  --workspace "$APC_WORKSPACE_ID" --task "$PRISMER_TASK_ID"

Runner 的顺序是:registry target 校验 → 可选 baseline asset 回读 → Playwright 打真实 /ui-canvas deep link → PNG 像素闸 → 上传 task-bound assets → 写 visibility=task:<id> 的 ReportCard。非法 set/version/journey/node 在任何副作用前失败。默认 ReportCard path 同时包含 task 与本次 evidence id,因此同一节点重复运行不会撞已有 page;显式 --path 时调用方必须提供未占用路径。

需要旧图/新图并排时只传一个 --baseline-light 或 --baseline-dark;一张 ReportCard 只承载所选 theme 的一组 old/new。它只是 reference,不是 diff;结构化输出的 comparison 恒为 "none"。禁止编造偏差百分比、changed pixels 或视觉 PASS。

凭据只从已设置的 APC_API_KEY / PRISMER_API_KEY 环境读取,禁止把 token 放进命令参数或报告。

没有 task/workspace/live local cloud 时可以完成代码审计,但证据步骤必须写 not-run + 原因,不能声称已产 asset 或 ReportCard。

输出契约

text
CANVAS: <set>@<version> | route: </ui-canvas?...>
PRODUCTION: <count> | source: <repo-relative-path:line>
GAPS: <count> | refs: <drift refs>
REGISTRY-TEST: <command> | exit: <code>
PLAYWRIGHT: <local command> | exit: <code> | passed: <count>
EVIDENCE: route=<exact deep link> | themes=light,dark | comparison=none
ASSETS: light=<assetId>(bytes=<n>) | dark=<assetId>(bytes=<n>)
REPORTCARD: pageId=<id> | uri=<prismer uri> | visibility=task:<taskId>
HARNESS: <command> | exit: <code>
BOUNDARY: canvas interaction and evidence are not service verification

只汇报真跑结果。任何 not-run 都必须带原因;没有 pageId 就没有持久化 ReportCard。

Red flags

  • 在 /ui-kit 画一个相似稿再当 production
  • 用摘要卡代表真实 UI,或把真实组件藏进 detached Focus
  • 默认 Fit 整条路径,导致 Frame 变成不可读缩略图
  • 复制生产 JSX 到 Canvas
  • 用 mock 隐藏缺失 checkpoint
  • 为截图在 Canvas 调业务 API
  • 原地修改 aligned 版本
  • 用 asset/ReportCard 的存在声称视觉已经通过
  • 把 Canvas local callback 说成系统副作用已验证

出现任一项就停止,把节点改回 gap、建立共享生产 *View,或如实降低证据结论。

<!-- APC-ACK:v1 -->

调用回执

执行本 Skill 的第一步:

bash
cloud skill ack ui-canvas --task "$PRISMER_TASK_ID"
exit含义动作
0回执已落库继续
3无 task 上下文继续,但不得声称已 ack 或已发布 task evidence
4不是 task assignee停止并上报
1网络或服务端失败重试一次,仍失败则标注回执缺失

回执只证明 Skill 被调度,不证明执行正确。

<!-- /APC-ACK:v1 -->

© Prismer-AI, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in sdk/apc/skills/ui-canvas of Prismer-AI/PrismerCloud.

  • SKILL.md
  • skill.json

Open the folder on GitHubat commit e5d9444

Compare with similar skills

UI Canvas next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Canvas compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Canvas this skillPrismer-AI/PrismerCloud1.6k—~1.2kAutomated safety check: NotesMIT
UI UX Auditchmonitor/chmonitor300—~2kAutomated safety check: NotesGPL-3.0
Before and After Screenshotsmichaelshimeles/skills1.3k1 repos~1kAutomated safety check: PassMIT
Handsontable Visual Test Demoshandsontable/handsontable22k—~1.3kAutomated safety check: PassCustom licence
Kc Screenshotimran31415/kube-coder388—~870Automated safety check: NotesMIT
Visual QA For Web And Terminal UIscode-yeongyu/oh-my-openagent70k—~9.5kAutomated safety check: PassCustom licence

Similar skills

  • UI UX Audit

    chmonitor/chmonitor

    Automated UI/UX + accessibility audit for the ClickHouse Monitor dashboard (apps/dashboard-tsr).

    300 GitHub stars~2k tokensUpdated 5 days ago
    Frontend & DesignAuto-check: notes
  • Before and After Screenshots

    michaelshimeles/skills

    Captures before and after screenshots of two URLs or images with the Vercel before-and-after CLI, uploads them and can add a markdown comparison to a pull request.

    1.3k GitHub starsUsed in 1 repo~1k tokens
    Testing & QAAuto-check passed
  • Handsontable Visual Test Demos

    handsontable/handsontable

    Explains how to add or change the demo pages that Handsontable's visual regression suite photographs, including per-feature routes in the js demo and the shared grid.

    22k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed
  • Kc Screenshot

    imran31415/kube-coder

    Capture desktop + mobile, dark + light screenshots of the kube-coder dashboard SPA for visual QA of a UI change.

    388 GitHub stars~870 tokensUpdated 2 days ago
    Testing & QAAuto-check: notes
  • Visual QA For Web And Terminal UIs

    code-yeongyu/oh-my-openagent

    Checks a built UI against a human-interface checklist and any reference image, pairing day and night screenshots at two screen widths.

    70k GitHub stars~9.5k tokensUpdated today
    Testing & QAAuto-check passed
  • Iterative frontend development loop using Meticulous for per-step visual validation.

    135 GitHub stars~1.3k tokensUpdated 4 days ago
    Testing & QAAuto-check passed

More from Prismer-AI/PrismerCloud

All 88 skills in this repo
  • Prismer Google Workspace

    Prismer-AI/PrismerCloud

    Gives an agent account-scoped access to Gmail, Calendar, Drive, Contacts, Docs and Sheets through the gws CLI or a bundled Python client.

    1.6k GitHub starsUsed in 3 repos~4.2k tokens
    Auto-check passed
  • Prismer Skill Creator

    Prismer-AI/PrismerCloud

    Walks an agent through creating, importing, editing, validating, testing and publishing Prismer Skills with a fixed workflow and bundled scripts.

    1.6k GitHub stars~2.6k tokensUpdated 10 days ago
    Auto-check: notes
  • Himalaya Email CLI

    Prismer-AI/PrismerCloud

    Operates a mailbox from the terminal with the external Himalaya CLI over IMAP, SMTP, Notmuch or Sendmail, separate from any built-in email gateway adapter.

    1.6k GitHub starsUsed in 2 repos~2.3k tokens
    Auto-check passed
  • Prismer Image Generation

    Prismer-AI/PrismerCloud

    Generates one image from a text prompt with a bundled Node.js helper and delivers it once as the attachment to the current Prismer reply.

    1.6k GitHub stars~1.4k tokensUpdated 10 days ago
    Auto-check passed
  • Manim Explainer Videos

    Prismer-AI/PrismerCloud

    Produces 3Blue1Brown-style explainer animations with Manim Community Edition for math, algorithms, equations and architecture diagrams, with planning and rendering references.

    1.6k GitHub starsUsed in 2 repos~3.1k tokens
    Auto-check passed
  • Prismer Role Builder

    Prismer-AI/PrismerCloud

    Creates or updates Prismer role templates from a persona, SOP or job description, and turns a role into a working agent that runs its first task through a bundled script.

    1.6k GitHub stars~2.3k tokensUpdated 10 days ago
    Auto-check: notes

Questions about UI Canvas

What does UI Canvas do?

A skill your agent uses when a product journey, production component path, UI/UX operation sequence, visual regression, or alignment review must be represented or audited in /ui-canvas with…. UI Canvas is an agent skill from Prismer-AI/PrismerCloud. Use when a product journey, production component path, UI/UX operation sequence, visual regression, or alignment review must be represented or audited in /ui-canvas with implementation-spec references, immutable versions, task-bound screenshots, and a persisted ReportCard.

When should I use UI Canvas?

UI Canvas fits situations like: A product journey; production component path; UI/UX operation sequence; visual regression.

How do I install UI Canvas in Claude Code?

Run `npx skills add Prismer-AI/PrismerCloud --skill ui-canvas -a claude-code`. Or copy the skill folder (sdk/apc/skills/ui-canvas in Prismer-AI/PrismerCloud) into .claude/skills/ui-canvas in your project. Claude Code loads it when a task matches its description.

How do I install UI Canvas in Codex?

Run `npx skills add Prismer-AI/PrismerCloud --skill ui-canvas -a codex`. Or copy the skill folder (sdk/apc/skills/ui-canvas in Prismer-AI/PrismerCloud) into .agents/skills/ui-canvas in your project. Codex loads it when a task matches its description.

Can I use UI Canvas in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Prismer-AI/PrismerCloud --skill ui-canvas -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-canvas, .gemini/skills/ui-canvas, .github/skills/ui-canvas and .opencode/skills/ui-canvas in your project.

What does UI Canvas need to run?

Going by SKILL.md and its folder, UI Canvas needs the command-line tools its instructions call (npx and rg) and credentials named APC_API_KEY and PRISMER_API_KEY. Our summary lists: Node.js; A credential in APC_API_KEY; A credential in PRISMER_API_KEY. Its frontmatter pre-approves these tools: Bash.

Does UI Canvas access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is UI Canvas safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does UI Canvas use?

UI Canvas is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI Canvas use?

About 1.2k tokens (SKILL.md is roughly 4.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to UI Canvas?

Skills that share tags, products or a category with UI Canvas: UI UX Audit (chmonitor/chmonitor, 300 stars), Before and After Screenshots (michaelshimeles/skills, 1.3k stars), Handsontable Visual Test Demos (handsontable/handsontable, 22k stars) and Kc Screenshot (imran31415/kube-coder, 388 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Canvas?

Prismer-AI (a GitHub organization) maintains it in Prismer-AI/PrismerCloud, which has 1,555 GitHub stars. The repository holds 88 skills in this directory. The repository was last updated on September 30, 2026.

Source: Prismer-AI/PrismerCloud on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.