From frontend-backend
15-department verification federation at T2/T3. Dispatches verify-coordinator. Triggers — "comprehensive verify", "full verify", "full audit", "every department", "browser federation", design-token / multi-page / accessibility-affecting changes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-backend:comprehensive-verifyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> **Federation only.** Dispatch via `frontend-backend:verify-coordinator`. Never inline a single dept call. Never substitute another browser tool. The federation is the unit of verification at T2/T3.
Federation only. Dispatch via
frontend-backend:verify-coordinator. Never inline a single dept call. Never substitute another browser tool. The federation is the unit of verification at T2/T3.
A single sequential observer misses bugs:
15 specialist departments running in parallel solve this. Wall ≈ slowest dept + integration; coverage = union of all 15.
All dispatched as frontend-backend:dept-verifier with DEPARTMENT MODE: <name> in the prompt — except visual (uses visual-verify-observer) and performance (uses perf-auditor), whose procedures are too detailed for the shared dept-verifier table.
| # | Dept | Subagent | Owns |
|---|---|---|---|
| 1 | visual | visual-verify-observer | 7-axis pixel matrix, zone scan, animation capture |
| 2 | functional | dept-verifier | User flows: form submit, navigation, error/empty/loading, role switch, error recovery |
| 3 | console | dept-verifier | All console levels, CSP violations, deprecation, source-map drift, runaway loops |
| 4 | network | dept-verifier | Slow / oversize / mixed-content / missing-security-headers / retry storms / CORS / WebSocket |
| 5 | dom | dept-verifier | A11y tree, ARIA validity, semantic HTML, broken images/links, duplicate IDs, form labeling, heading hierarchy |
| 6 | security | dept-verifier | CSP, mixed content, exposed secrets in window/bundle, cookie attrs, rel=noopener, postMessage origin, localStorage secrets |
| 7 | storage | dept-verifier | localStorage / sessionStorage / IndexedDB / cookies + state preservation across nav + bfcache + tab restore |
| 8 | realtime | dept-verifier | Supabase Realtime: connect, subscribe, message delivery, reconnect on visibility, presence, latency |
| 9 | seo | dept-verifier | <title>, meta description, canonical, OG, twitter, robots, JSON-LD, hreflang, viewport meta |
| 10 | i18n | dept-verifier | RTL stress, locale switch, currency/date format, pluralization, long-string overflow per locale |
| 11 | mobile_touch | dept-verifier | Touch targets ≥ 44×44px, gestures, viewport meta, safe-area insets, iOS keyboard avoidance, touch-action |
| 12 | pwa | dept-verifier | Service worker, cache staleness, offline behavior, install prompt, web manifest validity |
| 13 | analytics | dept-verifier | Sentry/PostHog/GA/Segment events fired (missing/double), tracking pixels, third-party CSP failures |
| 14 | cross_page | dept-verifier | Adjacent-page smoke for every URL in scope set; runs in parallel with primary site |
| 15 | performance | perf-auditor | Core Web Vitals + memory leaks + listener leaks + layout thrash + long rAF |
| Tier | Departments | Wall budget |
|---|---|---|
| T0 | none — main thread inline | n/a |
| T1 smoke | legacy single-observer (Visual + Console + Network) — handled by browser-verify skill, NOT this | 4 min |
| T2 federation | core 6: visual, functional, console, network, dom, cross_page | 8 min |
| T3 federation | all 15 | 15 min (parallel — wall ≈ slowest + integration) |
<form> / <input> / useState → +functional, storageapp/**/layout.tsx / globals.css / Tailwind / design tokens → +i18n, seo, cross_page, pwauseChannel / subscribe / Supabase realtime → +realtimesecurity, storageanalytics, securitynext.config.* / manifest.json / sw.js → +pwa, seo, securityaria-* / role= / focus rings / contrast tokens → +dom, mobile_touchmcp__Claude_in_Chrome__* only. Forbidden: Claude_Preview, computer-use, chrome-devtools-mcp, Playwright. Retry / pause / never swap.Reading each path. Missing → invalidate verdict.Re-dispatch to: verify-coordinator.departments_deferred non-empty unless user explicitly accepts deferral.Step 1 — caller decides T2 or T3 (router or explicit user phrase).
Step 2 — Skill('frontend-backend:comprehensive-verify') dispatches verify-coordinator.
Step 3 — coordinator pre-allocates root tab + per-dept child tabs via tabs_create_mcp,
then fans out (ONE message) all departments with run_in_background: true,
each carrying its own tabId.
Step 4 — Each department writes departments/<dept>.json with severity / category /
viewport / screenshot / fixHint / reDispatchTo.
Step 5 — Coordinator merges manifests as they stream, copies legacy top-level keys
(axes, findings, console, network, performance, adjacentRegressions),
feeds findings into per-source-agent N-round queue (`parallel-dispatch`).
Step 6 — Mistake-monitor Category-H sweep against merged manifest.
Step 7 — Coordinator emits unified report.
Concurrent Chrome tabs collide on read_console_messages.clear + shared cookies/localStorage. Coordinator owns:
tabs_create_mcp, recorded as federation root.tabs_create_mcp. tabId passed in dept prompt.tabId. Coordinator validates via tabs_context_mcp after each return.tabId mid-run) → both manifests invalid; coordinator re-runs both on fresh tabs..claude/visual-runs/<runId>/manifest.json:
{
"runId": "verify-2026-05-04-1830-submit",
"commit": "ba464e85",
"route": "<route>",
"scopeSet": ["<r-A>", "<r-B>"],
"viewports": [...],
"screenshots": [...],
"axes": {...},
"findings": [...],
"console": {...},
"network": {...},
"performance": {...},
"adjacentRegressions": [...],
"federation": {
"tier": "T3",
"departments_dispatched": ["visual","functional",...],
"departments_returned": [...],
"departments_deferred": [],
"departments_skipped": []
},
"departments": {
"visual": { "manifest": "departments/visual.json", "verdict": "✅", "findings_count": 0 },
...
},
"baselines": {
"console": { "errors": 0, "warnings": 0, "diffVsLastRun": {} },
"network": { "non2xx": 0, "totalReqs": 47, "diffVsLastRun": {} },
"perf": { "lcp": 1320, "inp": 88, "cls": 0.04, "diffVsLastRun": {} }
}
}
Per-dept mini-manifests mirror the dept-verifier schema. Every finding carries severity / category / viewport / screenshot / fixHint / reDispatchTo. Coordinator concatenates dept findings[] into top-level findings[] for legacy consumers. New baselines under .claude/visual-baselines/ enable run-over-run regression detection (catches "errors == 0 with no fix in diff" suspicious-pass).
Per-finding source-agent fan-out via the existing N-round streaming dispatch in parallel-dispatch. Department findings are first-class — same queue, de-dup keys extended to (file, line-range, category, department), same caps (N=3 rounds; T2=90s, T3=180s wall per source agent).
## Comprehensive Verification — /<route> @ <commit>
- Run: <id> · Manifest: .claude/visual-runs/<id>/manifest.json
- Tier: T3 federation · Dispatched: 15 · Returned: 15 · Deferred: 0
- Wall: 11m 42s · Re-dispatch rounds: 2
| Dept | Verdict | B/H/M/L | Manifest |
| ---- | ------- | ------- | -------- |
| Visual | ✅ | 0/0/1/0 | departments/visual.json |
| Functional | 🔴 | 1/0/0/0 | departments/functional.json |
| ... |
Top BLOCKING (≤3):
1. functional/<formId>: Submit yields "Network Error" at app/<r>/page.tsx:142 → re-dispatch <source-agent>
Re-dispatch summary: 2 source agents, 2 rounds, 0 deferred.
Default chat = verdict matrix + top-3 BLOCKING. Full per-dept findings live on disk; surface only on --verbose.
frontend-backend:browser-verify still works. T1 = legacy single-observer; T2/T3 delegate here.axes, findings, console, network, screenshots, scopeSet, adjacentRegressions, performance) stay populated..claude/visual-runs/<runId>/manifest.json. New departments/ subdir is additive.verify-coordinator.⏭ not_triggered + stub manifest.tabId.npx claudepluginhub mobil3801/frontend-backend-plugin --plugin frontend-backendGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.