Skip to content

Add ui-test skill: bugs before beauty before drop-dead gorgeous (CL-6650) - #320

Merged
TheGreatAxios merged 1 commit into
mainfrom
cl-6650-ui-test-skill
Aug 22, 2026
Merged

Add ui-test skill: bugs before beauty before drop-dead gorgeous (CL-6650)#320
TheGreatAxios merged 1 commit into
mainfrom
cl-6650-ui-test-skill

Conversation

@TheGreatAxios

Copy link
Copy Markdown
Contributor

Summary

  • Adds .claude/skills/ui-test/ — a repo skill any lane can invoke to grade a live UI surface through the owner's progression bugs → beauty → drop-dead gorgeous, per CL-6650.
  • Studied browserbase/skills' ui-test and kept: the adversarial stance, before/after snapshot evidence discipline, structured pass/fail reporting, and the reference-file-on-demand structure. Changed: browseagent-browser as the driver (named sessions, @eN refs, scoped snapshots), generic UX heuristics → our three CL-6650 tiers (each blocking the next), and "find any bug" → "stop at the first tier failed."
  • Tier 1 (bugs, blocks everything): entity sanity, names in name slots, no placeholders, no dead buttons, ≤100ms feedback, failures name a refId.
  • Tier 2 (beauty, blocks demo-path surfaces): identity per row, DESIGN.md spacing, consistent loading treatment, consumer language.
  • Tier 3 (gorgeous): the Vercel/Stripe/Apple side-by-side judgment, argued with evidence rather than asserted.
  • Calls out the stale-match trap explicitly: never grep a whole-page snapshot (sidebar bench previews echo strings that also appear in the timeline/dialog under test) — always scope with snapshot -i -s <selector>.
  • .gitignore: added a !.claude/skills/ exception (via .claude/* + re-include) so this repo skill is tracked — .claude/ was previously blanket-ignored as local orchestration noise, which conflicted with CL-6650 wanting a committed, lane-invokable skill.

Acceptance run (this PR)

Ran the skill by hand against the New Workbench prompt-first screen on :3000, logged in as quinn.baker@example.com, session uitest.

## UI Test — New Workbench prompt-first screen

**Tier reached:** 3 (gorgeous, with notes)
**URL:** http://localhost:3000 → New workbench
**Session:** uitest

### Blockers
(none)

### Tier 3 notes
- What already clears the bar: tight spacing, icon + name + one-line
  consumer description per template card ("Code review", "Due Diligence",
  "Just start talking"), an orange-ring-focused prompt input that mirrors
  DESIGN.md's accent, and the "Takes about ten seconds" line — consumer
  language, not system internals. Typing into the prompt box enables
  "Start this workbench" with no perceptible delay (scoped snapshot
  before/after, ref e22: disabled → enabled on the same snapshot call
  that followed `fill`). Clicking "Just start talking" (ref e17)
  navigated straight into a live bench with Myra's greeting already
  rendered — no "is it working?" gap.
- One step short: the sidebar lists two sibling benches both titled
  "New Workbench," distinguished only by preview snippet and timestamp
  (scoped snapshot `-s ".shell-main"` was clean; this was visible on the
  unscoped sidebar list, ref e17 vs e19 pre-navigation). Not a Tier 1/2
  blocker — it's default naming, not wrong data — but a gorgeous-tier
  surface would rename a bench from its opening prompt/template choice
  sooner than "New Workbench" persisting after the first message lands.

### Passed checks
- Tier 1 — entity sanity — sidebar list contains only workbench rows, no
  routines/agents mixed in (full snapshot, refs e17–e19).
- Tier 1 — names in name slots — template card titles ("Code review",
  "Due Diligence", "Just start talking") never render their description
  text (scoped snapshot `-s ".shell-main"`).
- Tier 1 — no placeholder content — no seeded/lorem copy anywhere on the
  screen.
- Tier 1 — no dead buttons — all three template cards and the prompt
  submit path are wired; "Just start talking" (e17) navigated to a real
  bench.
- Tier 1 — feedback ≤100ms — "Start this workbench" (e22) flips
  disabled→enabled in the snapshot immediately following `fill`.
- Tier 2 — spacing/identity — icon + name + description per card, tight
  spacing, no blank-pane loading gap observed.
- Tier 2 — consumer language — "Tell it what you're trying to get done.
  Takes about ten seconds," "An empty room with Myra in it" — no system
  internals in copy.

CL-6649 seeded-regression follow-up

CL-6649 (invite-agent dialog leaking routines in as agents) has not landed yet (no matching commit or PR on main as of this branch). Per the task's guidance, not blocking on it — the seeded-regression acceptance check (temporarily rename Jimmy's row to his description, confirm the skill flags it) is follow-up work once CL-6649 merges. references/regression-seeding.md documents exactly how to run that check when it's ready.

Test plan

  • bun run lint — 0 errors (10 pre-existing warnings unrelated to this change)
  • Ran the skill live against :3000's New Workbench prompt-first screen as quinn.baker@example.com via agent-browser --session uitest; report above
  • Follow-up once CL-6649 lands: seed the regression from references/regression-seeding.md and confirm the skill flags it

Adapts browserbase/skills' ui-test to agent-browser and our own bar
(DESIGN.md, consumer language, error-sink refIds), replacing "find any
bug" with three ordered tiers that stop at the first one a surface
fails.

CL-6650
@TheGreatAxios
TheGreatAxios merged commit 6667108 into main Aug 22, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant