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

wireflow

Create or review wireflows mapping user journeys into swimlane flows with JTBD anchoring.

Updated Jul 10, 2026
Search Tags:#product definition#user journeys#jtbd#svg generation#figjam#wireflow#swimlane diagram
One-click install
npx skills add https://github.com/subvisual/the-a-team --skill wireflow-subvisual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireflow
Source: https://github.com/subvisual/the-a-team/tree/main/.claude/skills/wireflow
Command: npx skills add https://github.com/subvisual/the-a-team --skill wireflow-subvisual

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Product teams lack an artifact between user journeys and wireframes that shows where users go and what the system does without dropping into detailed UI design. This Skill generates verified wireflow diagrams (SVG/HTML) from a compact JSON board spec, keeping Jobs-To-Be-Done at the core, and can also critique an existing wireflow against a structured review rubric. ## Core Features & Use Cases - Spec-driven diagram generation: Write a board.json of journeys, lanes, nodes, and edges, then render per-journey horizontal SVGs or a shared owner-by-journey matrix, plus a combined HTML with legend and JTBD × Journey coverage matrix. - Self-verifying build pipeline: Rasterize output to PNG (via cairosvg, rsvg-convert, resvg, or headless Chrome) and Read the images to catch overlaps, out-of-lane nodes, and glyph problems before delivery. - Create or review modes: Build new wireflows from journeys, JTBDs, specs, or live prototypes, or score an existing wireflow against 11 review criteria and return a structured verdict with fixes. - Use Case: During a product definition phase, derive journey set and spine decisions from a PRD and job register, generate a wireflow where every screen node links to a live route, then hand off to page-level specification. ## Quick Start Ask the agent to create a wireflow from your user journeys and JTBDs, generating verified SVG and HTML diagrams in the briefs output directory.

Frequently Asked Questions about wireflow

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

FAQPage Schema
How do I create a wireflow diagram from user journeys?▼

Write a compact board.json spec defining journeys with lanes, typed nodes, and edges, then run the bundled Python engine with the layout and rasterize flags. It emits per-journey SVGs, a combined HTML with legend and JTBD coverage matrix, and PNGs for visual verification.

What is the difference between a wireflow and a wireframe?▼

A wireflow sits between user journeys and wireframes, showing page and page-state nodes plus system steps in a flow without deep UI detail. Wireframes depict individual screen layouts with buttons and fields; wireflows keep granularity at one node per page, page-state, or system step.

When should I use horizontal vs matrix wireflow layout?▼

Use horizontal layout for the working deliverable and deep spine journeys, since each journey gets a full left-to-right diagram. Use matrix layout for stakeholder overviews where shared owner rows span all journeys as columns, making cross-cutting owners readable at a glance.

Can I make the wireflow editable in FigJam?▼

Yes, the skill can rebuild the finalized spec natively in FigJam using the Figma Plugin API, creating editable shapes and auto-routed connectors. The SVG dragged into FigJam is a flat image, so the native rebuild is a separate optional step after the SVG is verified.

Why do emoji show as boxes in my wireflow render?▼

Emoji and dingbats render as tofu boxes in cairosvg rasterization. The engine sanitizes known glyphs to safe characters automatically, but you should avoid raw emoji in node or edge text and use typed nodes like stop instead.

When should I not use a wireflow?▼

Avoid wireflows for high-fidelity wireframes, UI design, customer journey maps, architecture or data-flow diagrams, and sitemaps. They fit apps with few dynamically changing pages; mostly static content products are better served by a sitemap or plain user flow.

Related Skills

Explore More Product & Management Skills→
abhishekchoudhariabhishekchoudhari
1

job-stories

Create job stories in a When-I-want-so format with acceptance criteria.

Community
Intermediate
leessjuleessju

pdf

Exports .pen app design screens into a two-up PDF with captions.

Community
Intermediate
PriNovaPriNova
80

arch-code-review

Validate architectural diffs against canonical YAML artifacts for consistency and governance.

Community
Advanced
rombel00rombel00

information-architecture

Designs product information architecture including sitemaps, navigation, user flows, and content hierarchy.

Community
Intermediate