Menu
Capture Zerg UI screenshots and debug bundles. Use for UI debugging, QA, and visual verification.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Zerg/Longhouse full ship cycle — test, deploy, QA, verify. Use when pushing changes to production or doing a full dev→deploy iteration.
Zerg local dev workflow (make dev, logs, debug, stop). Use when running or troubleshooting this repo.
Longhouse managed provider CLI control paths for Claude, Codex, Antigravity, and similar CLIs. Use when investigating or changing managed sessions, provider binary ownership, `longhouse claude`, `longhouse codex`, bridge/relay/hook behavior, local-health liveness, reattach behavior, stale provider runtimes, or AGENTS.md guidance about managed vs unmanaged sessions.
Refresh and ship the Longhouse landing hero video, poster, and supporting product screenshots from realistic demo data, then verify the responsive composition visually.
Zerg testing workflow (unit + E2E). Use when running or debugging tests.
Diagnose slow or inconsistent managed Longhouse sessions by separating provider-loop latency, local hook/control-path health, hosted ingest lag, and runtime-state mismatches.
| name | zerg-ui |
| description | Capture Zerg UI screenshots and debug bundles. Use for UI debugging, QA, and visual verification. |
For landing page or public pages, use browser-hub MCP directly:
mcp__browser-hub__browser(action="navigate", url="https://longhouse.ai")
mcp__browser-hub__browser(action="look") # Screenshot + A11y tree
Requires make dev running. Produces a full debug bundle:
make ui-capture # Timeline + demo data
make ui-capture PAGE=machines # Machines page
make ui-capture PAGE=health # Runtime health page
make ui-capture SCENE=empty # Empty state
make ui-capture SCENE=onboarding-modal # With modal visible
make ui-capture SCENE=timeline-card-stress VIEWPORT=mobile # Mobile card layout fixture
make ui-capture PAGE=session-detail SCENE=session-detail-stress # Session workspace fixture
make ui-capture ALL=1 # All pages
make qa-ui-workbench # Timeline + session fixture set, desktop and mobile
Output: artifacts/ui-capture/<timestamp>/
<page>.png - Screenshot<page>-a11y.json|yml - Accessibility snapshot (JSON if available, YAML via ariaSnapshot fallback)trace.zip - Playwright trace (open with bunx playwright show-trace)console.log - Console outputmanifest.json - Metadata + pathsindex.html at the run root for one-page screenshot review# Read manifest to understand what was captured
Read(file_path="artifacts/ui-capture/<timestamp>/manifest.json")
# View screenshot
Read(file_path="artifacts/ui-capture/<timestamp>/timeline.png")
# Check accessibility snapshot for structure (one of these will exist)
Read(file_path="artifacts/ui-capture/<timestamp>/timeline-a11y.json")
Read(file_path="artifacts/ui-capture/<timestamp>/timeline-a11y.yml")
| Scene | What it sets up |
|---|---|
demo | Seeds 2 demo sessions (default) |
empty | No data, empty state UI — calls the dev-only session reset endpoint (requires AUTH_DISABLED=1) |
onboarding-modal | Shows first-time setup modal |
missing-api-key | API key required modal visible |
timeline-card-stress | Fixture-backed timeline API responses for card layout QA without relying on live demo DB shape |
session-detail-stress | Fixture-backed managed session workspace with branch seam, tool rows, active runtime strip, and dock controls |
make qa-ui-baseline # Run visual baseline tests
make qa-ui-baseline-update # Update baselines
make qa-ui-baseline-mobile # Run mobile visual baseline tests
SKIP_LLM=1 make qa-visual-compare # Desktop app pixel diff against baselines without LLM triage
The simulator requires auth and can't be scripted past a login screen. For iOS layout work, mock the chrome in HTML and screenshot with Playwright instead:
# Write an HTML file mimicking the iOS view at iPhone 16 Pro dimensions
cat > /tmp/ios-mock.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=393, initial-scale=1">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, sans-serif; }
body { background: #000; color: #fff; width: 393px; height: 852px; }
/* mirror SwiftUI .bar material: */ .bar { background: rgba(28,28,30,0.92); border-top: 1px solid rgba(255,255,255,0.1); }
</style>
</head>
<body>
<!-- your mock layout here -->
</body>
</html>
EOF
bunx playwright screenshot --browser chromium --viewport-size "393,852" "file:///tmp/ios-mock.html" /tmp/ios-mock.png
Then Read(/tmp/ios-mock.png) to inspect with vision. Iterate HTML until the layout is right, then translate to SwiftUI. Not pixel-perfect (no SF Symbols, no blur material) but catches layout problems — crowded rows, wrong spacing, accidental tap targets — in ~2s per iteration.
Add #Preview blocks in a *Previews.swift file (see SessionViewPreviews.swift) for a Xcode canvas view once the structure is settled.
curl localhost:47300/healthbunx playwright show-trace trace.zip to debugartifacts/ui-capture/ (gitignored)