Dashboard-specific adapter on the generic frontend-mockup-loop skill: binds the 7-step design loop to pi-agent-dashboard component sources, theme-system tokens, and isolated verification.
SkillScore79Maintained
Automatic
◆Frontend / UI pack
Last verified 10/10/2026
What it changes
Passed 15 of 19 test cases with the skill, and 5 of 19 without it.
Without skill26%
With skill79%
Checks it passed that the model alone missed
The configuration sets PI_DASHBOARD_NO_MDNS=1.
The mockup file is written under the mockups/ directory.
The response identifies 4 base themes in the theme system.
and 13 more in the full report
12 fixed3 passed either way2 still failing2 broke3 errored
Pass-rate lift
+53 pp
Tokens
-6%
Agent turns
0%
Response time
-51%
Measured 10/10/2026v3 · latest is v415 of 22 cases passed with skill · 19 comparable
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
A newer attempt on gemini-3.8-flash on 10/21/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.
See it in action
One of 12 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 12
Prompt
When defining token authorities for pi-agent-dashboard UI components, how many base themes does the theme system supply and what are their names?
What was checked, without and with the skill
Checked
Without skill
With skill
The response identifies 4 base themes in the theme system.
Missed
Passed
The response lists studio, earth, athlete, and gradient as the base theme names.
Missed
Passed
case-18 · gemini-3.6-flash · 10/10/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md23 linessingle file
When to Use
Use when designing or refining any surface in packages/client (or src/client) of pi-agent-dashboard. This is a THIN ADAPTER: the generic loop, tools, and rubric live in the frontend-mockup-loop skill (shipped by @blackbelt-technology/frontend-mockup-loop). Load that first for the full procedure; this skill only supplies the dashboard-specific bindings. Skip for trivial one-class tweaks.
Procedure
LOAD the generic loop first: /skill:frontend-mockup-loop. Follow its 7 steps (GROUND, CONTRACT, MOCKUP, TEST, FIX, PROMOTE, LEARN) and use its tools (serve_mockup, score_mockup, init_ui_contract). The bindings below override only the dashboard-specific details.
ANTI-SLOP binding (packages/anti-slop suite): Design Read profile is always product-ui; redesign mode preserve (anti-slop-redesign: audit first, protected list incl. data-testid + keyboard shortcuts); image direction is off for every dashboard surface (never run anti-slop-image-direction or anti-slop-brandkit here). Part B and layout discipline do not apply.
GROUND binding: read the authoritative component source (e.g. packages/client/src/components/SessionCard.tsx) and capture exact classes (rounded-xl shadow-md border px-4 py-3) + CSS vars (--bg-tertiary #1e1e1e dark / #fff light, --bg-primary #0a0a0a, container #141414). Delegate harvest per the debug-dashboard skill's references/isolated-verification.md.
CONTRACT binding: read root ui-contract.md for every design fact (token roles, severity/tint/status families, type/spacing scale, WCAG invariants, theme layers). Token definitions live in packages/client/src/index.css (base dark/light); 8 more palettes x dark/light are runtime overrides from packages/client/src/lib/theme/themes.ts. New tokens get added to the theme layer first, then cited in ui-contract.md. Per-change scope: write openspec/changes//mockups/ui-plan.md (surfaces -> tokens -> states).
MOCKUP binding: change exists -> mockups go to openspec/changes//mockups/ (no marker row). No change yet (explore mode) -> write mockups// (or a single mockups/.html) and add a mockups/AGENTS.md row whose Purpose cell ends exactly Pending change: <intent> right before the closing | — spelling and casing exact, intent a short human hint with no | and no backticks. The marker makes it adoptable: openspec/config.yaml rules.proposal and plan-proposal Step 1b move it into the change when its proposal is created. Mockups not meant for a change get no marker. Serve live + hand back local + LAN URL; verify dark AND light.
PROMOTE binding: NEVER verify against the live :8000 server — it runs MAIN-repo code; worktree edits never load. Use isolated verification (debug-dashboard skill → references/isolated-verification.md: temp HOME, non-8000 ports, PI_DASHBOARD_NO_MDNS=1, openspec poll enabled:false). Confirm live root via lsof -i:8000 before/after; original PID must be unchanged.
Pitfalls
In an isolated env pass explicit --port/--pi-port to pi-dashboard stop (it honors them and kills only listeners that HOME owns; never use --force, never copy server.pid/server.lock*/instances/ from the real HOME). Or kill by pgrep -f 'cli.ts.*--port '.
Do NOT leave openspec poll enabled during browser QA on this repo (73+ changes) — it starves the WS heartbeat -> blank client + dropped bridge. Set enabled:false in the isolated HOME config first.
Do NOT trust agent-browser eval on a file:// static page — it can blank the page and the live session-list timer invalidates @e snapshot refs. Prefer clicking the page's own controls.
Do NOT duplicate the generic procedure here — if a rule is not dashboard-specific, it belongs in the frontend-mockup-loop skill, not this adapter.
Verification
Generic frontend-mockup-loop rubric passes (contrast, responsive, anti-slop) in both themes at 3 breakpoints.
ui-contract.md / ui-plan.md values reference index.css tokens, not raw hex.
Theme parity (anti-slop-frontend T1-T3): zero added raw colour literals in the diff (index.css + themes.ts excluded); node scripts/theme-token-guard.mjs reports no new violation; screenshots exist for Base dark, Base light and one non-base palette from themes.ts. Visual judgment of them is a non-gating note.
Promote happened in an isolated env on non-8000 ports; lsof -i:8000 still shows the original live server PID unchanged.
Mockups landed under openspec/changes//mockups/, or (no change yet) under mockups/ with a Pending change: <intent> row.