本文へ移動
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(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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 のスキルをすべて見る

このスキルの問題を報告する