skills.rest
subvisual
subvisualOFFICIAL
Explore all skills by this author →
WebsiteGitHub

page-brief

Generate per-page requirement cards tied to JTBDs from wireflow and design inputs.

Updated Jul 10, 2026
Search Tags:#acceptance criteria#prd#product requirements#jtbd#wireflow#svg rendering#page-brief
One-click install
npx skills add https://github.com/subvisual/the-a-team --skill page-brief-subvisual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-brief
Source: https://github.com/subvisual/the-a-team/tree/main/.claude/skills/page-brief
Command: npx skills add https://github.com/subvisual/the-a-team --skill page-brief-subvisual

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Product teams often jump from a wireflow straight to a full PRD or UI design, leaving each page's actual requirements undocumented. This Skill fills that gap by producing a page-brief: a self-contained card per unique page that records what the page is accountable for, the job-tagged tasks it must support, the journeys it appears in, what it connects to, and the acceptance criteria that define correctness. ## Core Features & Use Cases - Create or review page-briefs: Draft per-page requirement cards from JTBDs, journeys, a wireflow board.json, and the live design, or critique an existing screen catalog against a structured review rubric. - Spec-driven rendering pipeline: A Python engine renders cards to SVG, combined HTML, and PNG (via cairosvg, rsvg-convert, resvg, or headless Chrome), including a JTBD definitions page and a job-to-pages reverse index, with strict or permissive validation modes. - Job-alignment auditing: Every checklist task is tagged to a durable JTBD id; untagged tasks are flagged as signals that the upstream job set is incomplete, and qualitative acceptance criteria are never self-certified. - Use Case: After finishing a wireflow for a CRM feature, run the Skill in pipeline mode to derive cards for every unique page into docs/features/<slug>/briefs/pages/, then review the rendered PNG at the definition-phase gate before the PRD consumes the catalog. ## Quick Start Ask the AI to create page-briefs for each unique page in your wireflow, using your JTBD set and live design routes as inputs.

Frequently Asked Questions about page-brief

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a page-brief for each screen in my product?▼

Gather your JTBD set, wireflow board.json, and live design routes, then draft one card per unique page covering responsibilities, job-tagged tasks, connections, and acceptance criteria. Write the board spec JSON and run the page-brief.py script with --rasterize to generate SVG, HTML, and PNG output.

What is the difference between a page-brief and a PRD?▼

A page-brief documents per-page requirements tied to jobs and stops below PRD scope: no business goals, metrics, or phasing. It also stops above the screen, excluding components and layout. The PRD consumes the page-brief catalog as an input.

How do I render the page-brief board to PNG?▼

Run python scripts/page-brief.py board.json --out ./out --rasterize. The script tries cairosvg, rsvg-convert, resvg, then headless Chrome or Edge as fallbacks, so a PNG is produced even when cairosvg's native library is missing on macOS.

Can page-briefs work without a wireflow?▼

Yes, a degraded mode runs from the live design and JTBDs alone. The Appears in journeys field is left as an explicit TODO per card, since that linkage is the one input only a wireflow can supply.

Why are qualitative acceptance criteria never marked as passing?▼

Qualitative criteria use the cotton test: a person is shown only the criterion and the screen and asked if they can do the task. Because this requires human judgement, the Skill drafts the criteria but marks them not yet run with a human until a real study records evidence.

When should I not use a page-brief?▼

Do not use it for a full PRD, wireframes, UI or component specs, a wireflow, or a sitemap. It covers only per-page requirements tied to jobs; flow-level detail belongs to the wireflow and surface detail belongs to design.

Related Skills

Explore More Product & Management Skills→
Lia-CreativeLia-Creative
1

jtbd

Define jobs-to-be-done statements and map their requirements for epic planning.

Official
Basic
nklischnklisch
7

feature

Scope small feature ideas into design briefs with acceptance criteria.

Community
Advanced
oldwinteroldwinter
5

usability-testing

Plan, execute, and synthesize usability tests into a Usability Test Pack.

Community
Advanced
MicrockMicrock
322

All Traditions Speaking as One

Aggregate insights from multiple wisdom and scientific traditions with synchronized output and per-tagging.

Community
Basic