Skip to content
cccskills
FreePublished on 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.

The English summary is being prepared. Showing the original description.

bagofwords1/bagofwords463 stars(GitHub 463 + cccskills 0)

Run score Not tested

See how to install

Files included (1)

  • SKILL.md2.7 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

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.

The English summary is being prepared. Showing the original description.

bagofwords1/bagofwords463Updated Oct 26, 2026

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.

The English summary is being prepared. Showing the original description.

bagofwords1/bagofwords463Updated Oct 26, 2026

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.

The English summary is being prepared. Showing the original description.

bagofwords1/bagofwords463Updated Oct 26, 2026

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.

The English summary is being prepared. Showing the original description.

bagofwords1/bagofwords463Updated Oct 26, 2026

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.

The English summary is being prepared. Showing the original description.

bagofwords1/bagofwords463Updated Oct 26, 2026

qa

Free

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.

The English summary is being prepared. Showing the original description.

bagofwords1/bagofwords463Updated Oct 26, 2026

See all skills by bagofwords1

Report a problem with this skill