@boopkit/cap-ux

Part of Boop — a bootstrap platform for AI-first builders. boop init scaffolds a running Node/TypeScript web app from composable capabilities, each one bundling the code, dependencies, middleware wiring, and agent skills needed for a feature. You pick the capabilities; boop add handles the rest.

cap-ux is a skills-only capability for the taste end of UI work — looking at a rendered page and judging whether it actually works, then improving it. Where cap-web's boop-web-web-ui-design skill is the CSS grammar (how to write semantic styles), this capability is the taste (how to judge a screenshot and form a defensible recommendation) plus the two workflows that operate that judgement: one for discovering what's wrong with a page nobody specified a fix for, and one for delivering a shippable improvement to an existing page.

What You Get

A bundle of agent-facing skill files, plus one small dev script (scripts/ux-eval-capture.ts) that the workflows use to screenshot pages. No runtime/server code — the script is a developer tool, not part of your app.

Skills installed

Copied into skills/ on install:

• boop-ux-purpose-judgement/SKILL.md — the structural lens. Judges whether each thing on a page belongs there at all, in the right shape, for the right job: enumerate the affordances, trace each to a named job (decoration without a job is cut), check the rendered mechanism against a frequency × consequence vocabulary, and read the affordance set against the surface's stance. Run first. Designed to grow through use.
• boop-ux-visual-judgement/SKILL.md — the visual lens. Judges how a page looks and scans: a methodology (eye-path, register, anatomy, scan-line, whitespace, calibration passes), a body of durable design principles, a shared vocabulary, named anti-patterns, and the discipline to stop and file a follow-up when the lens is silent rather than inventing a principle. Run second. Designed to grow through use.
• boop-ux-eval-and-refine-workflow/SKILL.md — the discovery workflow. Iteratively evaluate and improve an existing page when no fix spec exists; beads-issue-per-step, capture → eval → recommend → implement → re-capture, with a knowledge-integration phase whose primary output is durable principles lifted back into the judgement lenses.
• boop-ux-app-ui-dev-workflow/SKILL.md — the delivery workflow. Improve an existing app-side page end-to-end into a shippable branch when the input is a target page rather than a spec; a sibling of boop-feature-dev-workflow stripped of the backend phases, with the judgement lenses driving the Plan phase.

These form a knowledge → discovery → delivery triangle: the two judgement lenses are the knowledge, the discovery workflow grows them, and the delivery workflow applies them.

Requirements

Other capabilities: none enforced. The skills cross-reference boop-web-web-ui-design (from cap-web) as the CSS grammar counterpart, and the workflows reuse cap-coding, cap-project-mgmt, and cap-testing skills when those are present. Links to skills a project hasn't installed simply won't resolve.

npm dependencies added to your project: none. cap-ux is pure documentation for agents.

Environment variables: none.

Capture tooling: the two workflow skills need a way to screenshot a rendered, possibly-authenticated page. cap-ux ships scripts/ux-eval-capture.ts (Playwright, full-page capture to tmp/ux-eval/<label>.png) and adds playwright + tsx as devDependencies. Run npx playwright install chromium once to fetch the browser binary. Public pages capture with no auth; for authenticated pages set UX_EVAL_AUTH_COOKIE_NAME + UX_EVAL_AUTH_COOKIE_VALUE, or wire the documented cap-users opt-in block in the script header to mint a session token automatically. The judgement lenses themselves have no capture dependency — they work on any screenshot you can produce.

Usage

Skills are meant to be read by AI agents, not humans (though humans are welcome). Once installed they live in your project's skills/ directory alongside skills from other capabilities.

A typical flow: an operator points the agent at a page that "feels off." The agent reads both judgement lenses — boop-ux-purpose-judgement/SKILL.md first (does each affordance belong, in the right shape, for the right job?), then boop-ux-visual-judgement/SKILL.md (is what is here rendered well?) — walks their methodology against a screenshot, and produces a ranked list of findings with named principles. To ship fixes, it runs the boop-ux-app-ui-dev-workflow; to discover and codify new principles on a page nobody specified, it runs the boop-ux-eval-and-refine-workflow — which lifts what it learns back into the appropriate lens so the capability gets sharper over time.

Added by

Add to an existing project with:

boop add ux