Menu

Individual skill

ui-align

0upvotes

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.

sdk/apc/skills/ui-align/SKILL.md

Read pinned source

Source commit f83b859a173802a73d978197e92328ab2bf57a6e

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
1,364
Repository last updated
Oct 22, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# ui-align

把「新 UI 需求 / UI 改进对比」跑成 **索引 → 实现 → 截图 → 报告** 的闭环（docs/apc/07 Part A §A4）。
产出是一张 **ReportCard**：把同一组件的 **light / dark 两态截图** + 对比结论落成一张可寻址的富报告页，
需求方**从视觉验收，不读代码**。

**什么时候用**：一个 UI 组件要新增 / 改样式 / 做前后对比时。**第一步永远是查索引**——ui-kit 已经把
现有原语拆成 `registry.ts` 索引，先看有没有现成的，别重复造第 N 个 Dialog / Button / Card。

## Why（这条 skill 存在的理由）

- **避免重复造**：ui-kit 是全状态画廊 + 机器可读索引（`src/app/ui-kit/registry.ts` 的 `ENTRIES`）。
  新需求先对索引，命中就复用，不命中才新增一片。索引是唯一真源——**不 grep 源码猜有没有**。
- **视觉验收可寻址**：截图落 task-bound asset，ReportCard 用 `prismer://asset/<id>` 引它 + 结论段。
Back to top