From blueprintflow
Part of the Blueprintflow methodology. Use when QA verifies a client-facing UI or frontend change before LGTM, especially when acceptance, usability, or design quality must be checked.
How this skill is triggered — by the user, by Claude, or both
Slash command
/blueprintflow:bf-e2e-verificationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
QA = **the user's proxy**. Code-level correctness (PR acceptance ✅) is necessary, not sufficient. The sufficient conditions are **the product is usable** and **the design is reasonable**.
QA = the user's proxy. Code-level correctness (PR acceptance ✅) is necessary, not sufficient. The sufficient conditions are the product is usable and the design is reasonable.
Scope: client-facing UI / frontend changes only. Backend-only PRs skip this skill entirely.
If bf-workflow is not active, STOP here. Load bf-workflow with the user's input; do nothing else in this skill until it routes back.
| Line | Core question | Required actions |
|---|---|---|
| 1. Code-level | Does each acceptance criterion really pass? | Real UI operations (form fill / click). API/cURL can supplement (e.g. confirm backend stored data) but cannot substitute for UI ops. Capture DOM/network evidence |
| 2. Usability | Can a real user complete an everyday task? | Walk full task flow, probe unmentioned paths, repeat N times, refresh/recover, send real data |
| 3. Design | Would a designer wince? | Screenshot every viewport, scan ≥3 dimensions per image, re-evaluate components you've seen before |
Skipping any line = QA didn't do their job. Rigid: "the change is small, I'll just do Line 1" is exactly how UI bugs reach users.
| Dimension | What to check |
|---|---|
| Alignment | Same-row baseline, same-column edge |
| Spacing | Breathing room, nothing stuck or drifting |
| Sizing | Visual hierarchy, proportions to neighbors |
| Direction/state | Arrow semantics, state change feedback |
| Hierarchy | Important emphasized, secondary de-emphasized |
| Semantics | Icon meanings clear, copy understandable, error states self-explanatory |
Scan ≥3 dimensions per image. Empty output after real scan = fine. Skipping the scan = not fine.
Pick the product in your category that your team uses daily as the comparison reference.
□ 1. PR acceptance reproduced (Line 1)
□ 2. Main-navigation walkthrough: each tab/entry clicked, pages don't break
□ 3. All interactive elements in PR scope clicked at least once
□ 4. One complete real-user task flow simulated end-to-end
□ 5. Multi-viewport screenshots: 320 / 768 / 1280 / 1920 + user-reported width
□ 6. Each screenshot scanned (≥3 dimensions), findings written down
□ 7. "Designer wince" self-check against category reference product
| Section | Content |
|---|---|
| Line 1 | DOM / computedStyle / network evidence |
| Line 2 | Flows walked, friction observed |
| Line 3 | Per-screenshot scan findings, "wince points" |
| Out-of-scope | UI issues outside PR scope → file as new issues, don't block |
| Decision | LGTM / hold / block |
bf-pr-review-flow: this skill is what QA's signoff consists ofbf-phase-exit-gate: Line 2+3 walkthrough = regression smoke for UIbf-issue-triage: out-of-scope findings → new issuesfollow skill bf-e2e-verification
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub codetreker/blueprintflow --plugin blueprintflow