UI UX Audit
chmonitor/chmonitor
Automated UI/UX + accessibility audit for the ClickHouse Monitor dashboard (apps/dashboard-tsr).
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…
$ npx skills add Prismer-AI/PrismerCloud --skill ui-canvas -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Prismer-AI/PrismerCloud ui-canvas --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "ui-canvas" agent skill from https://github.com/Prismer-AI/PrismerCloud/tree/main/sdk/apc/skills/ui-canvas into .claude/skills/ui-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-canvas", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Prismer-AI/PrismerCloud/tree/main/sdk/apc/skills/ui-canvasType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Prismer-AI/PrismerCloud --skill ui-canvas -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Prismer-AI/PrismerCloud ui-canvas --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Prismer-AI/PrismerCloud.git skills-src && mkdir -p .agents/skills && cp -r skills-src/sdk/apc/skills/ui-canvas .agents/skills/ui-canvas && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-canvas" agent skill from https://github.com/Prismer-AI/PrismerCloud/tree/main/sdk/apc/skills/ui-canvas into .agents/skills/ui-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-canvas", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Prismer-AI/PrismerCloud --skill ui-canvas -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Prismer-AI/PrismerCloud ui-canvas --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Prismer-AI/PrismerCloud.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/sdk/apc/skills/ui-canvas .cursor/skills/ui-canvas && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-canvas" agent skill from https://github.com/Prismer-AI/PrismerCloud/tree/main/sdk/apc/skills/ui-canvas into .cursor/skills/ui-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-canvas", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Prismer-AI/PrismerCloud.git --path sdk/apc/skills/ui-canvas--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Prismer-AI/PrismerCloud --skill ui-canvas -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Prismer-AI/PrismerCloud ui-canvas --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Prismer-AI/PrismerCloud.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/sdk/apc/skills/ui-canvas .gemini/skills/ui-canvas && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ui-canvas" agent skill from https://github.com/Prismer-AI/PrismerCloud/tree/main/sdk/apc/skills/ui-canvas into .gemini/skills/ui-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-canvas", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Prismer-AI/PrismerCloud ui-canvasInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Prismer-AI/PrismerCloud --skill ui-canvas -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Prismer-AI/PrismerCloud.git skills-src && mkdir -p .github/skills && cp -r skills-src/sdk/apc/skills/ui-canvas .github/skills/ui-canvas && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ui-canvas" agent skill from https://github.com/Prismer-AI/PrismerCloud/tree/main/sdk/apc/skills/ui-canvas into .github/skills/ui-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-canvas", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Prismer-AI/PrismerCloud --skill ui-canvas -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Prismer-AI/PrismerCloud ui-canvas --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Prismer-AI/PrismerCloud.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/sdk/apc/skills/ui-canvas .opencode/skills/ui-canvas && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-canvas" agent skill from https://github.com/Prismer-AI/PrismerCloud/tree/main/sdk/apc/skills/ui-canvas into .opencode/skills/ui-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-canvas", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
ui-canvasA 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.
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.
6 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit e5d9444. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
BashFrom allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
npxrgFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names these keys or tokens, usually read from environment variables:
APC_API_KEYPRISMER_API_KEYFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
allowed-tools: BashAutomated 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.
The full file from Prismer-AI/PrismerCloud at commit e5d9444, republished under its MIT licence (© Prismer-AI). 358 words, ~1,230 tokens.
.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.用一个代码定义的展开画布完成 spec ↔ 真实生产组件 ↔ 用户操作 ↔ 可寻址视觉证据 对齐。Production checkpoint 必须在 Frame 内直接渲染真实 UI;不能安全渲染就保留同尺寸 gap contract。最终证据来自真实 /ui-canvas deep link,不来自 /ui-kit 仿制稿。
UI Canvas index 和 Canvas registry,建立双向索引。src/app/ui-kit/sections/** 取节点实现;/ui-kit 仅是历史参考。aligned 版本不可原地修改;需求变化时新增版本并用 previousVersion 回指。gap,不复制 JSX 冒充闭合。从 spec 找出 set、journey、checkpoint 与 user/system oracle。每个 CanvasSet、version、journey、node 都持有真实 SpecRef;spec 反向列出 Overview、journey deep link 与 registry source。
rg -n "export (function|const|class)" src/app src/components
rg -n "ui-kit/sections|fetch\\(|imFetch\\(|/api/" src/app/ui-canvas| 判定 | 条件 | 动作 |
|---|---|---|
production | props 可确定性渲染,callback 可留在本地 | 在 component-registry.tsx 直接 import |
gap | 没有生产组件,或 wrapper 挂载即请求/轮询 | 写清 reason、driftRef、双 oracle |
生产 wrapper 只因数据编排不能复用时,可抽纯 *View 让生产 wrapper 与 Canvas 共用;不得借机修改 endpoint、model、daemon 或 SDK。
aligned 后冻结。960×680 的 Frame,body 直接挂 renderer。Fit journey。action / condition / error / recovery / handoff 区分语义。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-canvasPlaywright 只能打本地 127.0.0.1:3000。截图前先断言目标可见,不得用 .first() 掩盖稳定态重复节点。
先从代码 registry 读取合法 set/version/journey:
npx tsx scripts/ui-canvas-evidence.ts --list再对需要验收的真实 Frame deep link 产 light/dark 截图、task asset 和一张 ReportCard:
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。
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。
/ui-kit 画一个相似稿再当 productionaligned 版本出现任一项就停止,把节点改回 gap、建立共享生产 *View,或如实降低证据结论。
<!-- APC-ACK:v1 -->
执行本 Skill 的第一步:
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
SKILL.md and 1 other file in sdk/apc/skills/ui-canvas of Prismer-AI/PrismerCloud.
Open the folder on GitHubat commit e5d9444
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UI Canvas this skillPrismer-AI/PrismerCloud | 1.6k | — | ~1.2k | Automated safety check: Notes | MIT | |
| UI UX Auditchmonitor/chmonitor | 300 | — | ~2k | Automated safety check: Notes | GPL-3.0 | |
| Before and After Screenshotsmichaelshimeles/skills | 1.3k | 1 repos | ~1k | Automated safety check: Pass | MIT | |
| Handsontable Visual Test Demoshandsontable/handsontable | 22k | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| Kc Screenshotimran31415/kube-coder | 388 | — | ~870 | Automated safety check: Notes | MIT | |
| Visual QA For Web And Terminal UIscode-yeongyu/oh-my-openagent | 70k | — | ~9.5k | Automated safety check: Pass | Custom licence |
chmonitor/chmonitor
Automated UI/UX + accessibility audit for the ClickHouse Monitor dashboard (apps/dashboard-tsr).
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.
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.
imran31415/kube-coder
Capture desktop + mobile, dark + light screenshots of the kube-coder dashboard SPA for visual QA of a UI change.
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.
FlintSH/Flare
Iterative frontend development loop using Meticulous for per-step visual validation.
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.
Prismer-AI/PrismerCloud
Walks an agent through creating, importing, editing, validating, testing and publishing Prismer Skills with a fixed workflow and bundled scripts.
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.
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.
Prismer-AI/PrismerCloud
Produces 3Blue1Brown-style explainer animations with Manim Community Edition for math, algorithms, equations and architecture diagrams, with planning and rendering references.
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.
Categories
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.
UI Canvas fits situations like: A product journey; production component path; UI/UX operation sequence; visual regression.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.