본문으로 건너뛰기
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 / 1,000자

이 양식은 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의 스킬 모두 보기

이 스킬의 문제 신고