跳到正文
cccskills
免费在 GitHub 公开

ui-evidence

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.

中文简介正在准备中。当前显示原文说明。

bagofwords1/bagofwords星标 463(GitHub 463 + cccskills 0)

实测评分 未实测

查看安装方法

包含的文件(1)

  • SKILL.md2.7 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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)

  1. 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
    
  2. 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.
  3. 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.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Add a new data source / connection type (e.g. a SQL Server-like database) end to end — client with get_schemas/execute_query, config + credentials schemas, registry entry, icon, tests — plus the verification steps. Also covers adding or updating an MCP connector (a preset, not a new type). Use when adding or significantly extending a connector.

中文简介正在准备中。当前显示原文说明。

bagofwords1/bagofwords4632026年10月26日 更新

Add a new LLM model to the preset catalog, or a whole new LLM provider — with the mandatory pre-flight verification of model id, pricing, and context window against the provider's official docs. Use when asked to add/update LLM models, providers, or pricing.

中文简介正在准备中。当前显示原文说明。

bagofwords1/bagofwords4632026年10月26日 更新

Query, visualize, and analyze data in a Bag of Words (BOW) workspace via the bagofwords MCP tools. Use for creating reports, running tracked queries, and building dashboards.

中文简介正在准备中。当前显示原文说明。

bagofwords1/bagofwords4632026年10月26日 更新

Update the product docs at docs.bagofwords.com (Mintlify) with text and fresh screenshots after a user-facing change ships. Use when a merged change alters user-visible behavior, adds a feature, or when asked to update/refresh documentation.

中文简介正在准备中。当前显示原文说明。

bagofwords1/bagofwords4632026年10月26日 更新

The locale/i18n architecture of bagofwords — catalogs, resolution order, RTL, backend contracts — and the procedures for adding strings, adding a locale, or translating UI. Use when adding/changing user-facing strings, working on RTL, emails, localized errors, or anything locale-related.

中文简介正在准备中。当前显示原文说明。

bagofwords1/bagofwords4632026年10月26日 更新

qa

免费

Run a live QA pass over the app — first map all user-facing functionality, then boot the full stack and manually exercise flows with Playwright, recording pass/fail evidence and filing a QA report. Use for release QA, post-merge smoke passes, or "QA the app / this area" requests.

中文简介正在准备中。当前显示原文说明。

bagofwords1/bagofwords4632026年10月26日 更新

查看 bagofwords1 的全部技能

报告此技能的问题