Agent Skills › bagofwords1/bagofwords › ui-evidence

ui-evidence

GitHub

规范前端UI/UX变更的视觉证据捕获流程，要求PR中附带前后对比截图及动图，提供自动化脚本与合规指引。

.agents/skills/ui-evidence/SKILL.md bagofwords1/bagofwords

Trigger Scenarios

提交涉及前端页面、组件或布局的代码变更进行影响用户界面的重构或样式修改

Install

npx skills add bagofwords1/bagofwords --skill ui-evidence -g -y

More Options

Non-standard path

npx skills add https://github.com/bagofwords1/bagofwords/tree/main/.agents/skills/ui-evidence -g -y

Use without installing

npx skills use bagofwords1/bagofwords@ui-evidence

指定 Agent (Claude Code)

npx skills add bagofwords1/bagofwords --skill ui-evidence -a claude-code -g -y

安装 repo 全部 skill

npx skills add bagofwords1/bagofwords --all -g -y

预览 repo 内 skill

npx skills add bagofwords1/bagofwords --list

SKILL.md

Frontmatter

{
    "name": "ui-evidence",
    "description": "Capture mandatory before\/after screenshots (and videos\/GIFs for flows) for any change touching UI\/UX, and attach them to the PR. Use whenever a change touches frontend\/pages, components, layouts, or assets."
}

UI Evidence — screenshots are mandatory for UI/UX changes

Any PR touching frontend/{pages,components,layouts,assets}/** must show what changed visually: before/after screenshots in the PR description, plus a GIF/video when the change is a flow or animation. Only skip this for refactors with zero visual effect — and say so explicitly in the PR description.

Screenshots (always)

Boot + seed:

tools/agent/boot_stack.sh
cd backend && uv run python ../tools/agent/seed_org.py --demo
export PLAYWRIGHT_BROWSERS_PATH=/opt/pw-browsers   # cloud sandboxes

Capture before (on the base branch or with your change stashed) and after — same page, same viewport:
```
cd frontend
node ../tools/agent/capture.mjs http://localhost:3000/<page> before.png
# apply change / unstash, rebuild if prod mode:
node ../tools/agent/capture.mjs http://localhost:3000/<page> after.png
```
For authenticated pages, log in once with a throwaway Playwright script and context.storageState({ path: 'state.json' }), then pass --state state.json.
For RTL-sensitive work, capture he as well as en (set the locale via the picker in /settings/general or the X-Locale header).

Videos / GIFs (for flows, animations, drag-drop, streaming UI)

Static shots can't show a flow. Record one:

node ../tools/agent/capture.mjs http://localhost:3000/<page> flow.webm --video 10
# or drive a multi-step flow in a throwaway spec with recordVideo, then:
ffmpeg -i flow.webm -vf "fps=10,scale=960:-1:flags=lanczos" flow.gif

GitHub renders GIFs inline; .webm cannot be attached via the API.

Attaching evidence to the PR

Commit the files under media/pr/<branch-slug>/ and reference them in the PR body by their raw URL so they render inline:

## UI changes
| Before | After |
|--------|-------|
| ![before](https://raw.githubusercontent.com/bagofwords1/bagofwords/<branch>/media/pr/<branch-slug>/before.png) | ![after](.../after.png) |

![flow](https://raw.githubusercontent.com/bagofwords1/bagofwords/<branch>/media/pr/<branch-slug>/flow.gif)

Rules:

Keep each image < 1 MB where possible (GIFs < 5 MB — trim fps/scale, not length).
media/pr/ files may be deleted after the PR merges; they are evidence, not assets.
Never capture screens containing real credentials, tokens, or customer data — seeded sandbox data only.
Humans attaching evidence may simply drag-and-drop into the PR description instead.