메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.
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.
Build a runnable reproduce→fix→verify loop for a bug or feature in a fresh sandbox, and record it as a feedback-loop doc. Use when investigating a reported bug, validating a root cause, or proving a fix works — before and after the change.
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.
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.
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.
| 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. |
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.
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
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
context.storageState({ path: 'state.json' }), then pass --state state.json.he as well as en (set the locale via
the picker in /settings/general or the X-Locale header).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.
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 |
|--------|-------|
|  |  |
Rules:
media/pr/ files may be deleted after the PR merges; they are evidence, not assets.