UI Align

What it does

When your agent uses it

• Tasks that involve Design systems

Example prompts

• “the visual looks good”
• “/ui-align”

Requirements

• Node.js
• A credential in APC_API_KEY
• Compatibility (from SKILL.md): ["claude-code"]
• Pre-approved tools (allowed-tools): Bash

Workflow steps

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

1. 1索引优先——查有没有现成的 scope
2. 2跑截图 harness——两态截图 + 上云 + 产 ReportCard
3. 3读结构化输出 → 汇报

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

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

• Compatibility

  ["claude-code"]

  From compatibility in the SKILL.md frontmatter.

Context cost

UI Align loads about 2.3k tokens when it runs. Until then it costs about 159 tokens; SKILL.md has 657 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~159

When it runs · the whole SKILL.md, loaded when a task matches

~2.3k

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

• 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). 657 words, ~2,345 tokens.

name

ui-align

description

Visual-alignment workflow for a new UI need or a UI改进. Index-first (consult the ui-kit registry to avoid re-building an existing primitive), then implement, then run the screenshot harness to capture the component in light/dark against the live /ui-kit, then produce a ReportCard (screenshot assets side by side + a written conclusion) the requester reviews VISUALLY without reading code. The harness computes NO image diff — it verifies side effects (screenshots really have pixels, assets uploaded, ReportCard persisted); both "the visual looks good" and any deviation number are human judgments the machine never produces.

allowed-tools

Bash

compatibility

["claude-code"]

license

MIT

scope

common

metadata.category

design

npx tsx sdk/apc/harness/ui-screenshot.ts --list     # 合法 scope 清单
npx tsx sdk/apc/harness/ui-screenshot.ts --help     # 全部旗标 + 退出码语义

npx tsx sdk/apc/harness/ui-screenshot.ts \
  --scope <scope> --themes light,dark \
  --workspace "$APC_WORKSPACE_ID" --task "$PRISMER_TASK_ID"

npx tsx sdk/apc/harness/ui-screenshot.ts --scope <scope> --themes light,dark \
  --workspace "$APC_WORKSPACE_ID" --task "$PRISMER_TASK_ID" \
  --baseline-light <旧light assetId> --baseline-dark <旧dark assetId>

{ "ok": true, "scope": "basics", "themes": ["light","dark"], "mode": "new-baseline",
  "comparison": "none",
  "shots": [ {"theme":"light","assetId":"cmr...","bytes":204601},
             {"theme":"dark","assetId":"cmr...","bytes":202065} ],
  "reportCard": { "pageId":"cmr...", "uri":"prismer://workspace/.../memory/cards/ui-align-<scope>", "version":1 } }

- [1] index-first: scope=basics 在索引里命中（--list）→ 复用，不新造原语 | src/app/ui-kit/registry.ts:69
- [2] scope-source: 渲染 ?scope=basics 的稿件源 | src/app/ui-kit/sections/basics.tsx:1

PKF: prismer://workspace/<ws>/memory/<path>

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

cloud skill ack ui-align --task "$PRISMER_TASK_ID"

<!-- /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-align of Prismer-AI/PrismerCloud.

• SKILL.md
• skill.json

Open the folder on GitHubat commit e5d9444