Organize multi-step user flows, screen sequences, and UI journeys into a clear, standardized spatial layout. Spatial arrangement and consistent relative rhythm communicate progression and branching without altering frame content or visual styling. Caller-supplied tool context owns execution; this skill contributes only the layout standard.
Command
/woostack-design [target]- Applies the layout standard below to the target flow.
Layout standard
Apply this spatial standard to all arranged flows:
1. Flow grouping and title hierarchy
- One group per flow. Enclose each distinct flow—including its title, description, main step sequence, and all associated forks—in a single dedicated parent group.
- Title and description. Place the flow title above the step sequence. Place the flow description directly below the title.
2. Primary sequence
- Left-to-right progression. Arrange primary sequence step frames horizontally from left to right in sequential order.
- Consistent horizontal rhythm. Maintain a uniform relative horizontal gap between adjacent step frames across the sequence.
- Preserve frame design. Preserve supplied frame dimensions, aspect ratios, and visual styling. Do not resize, restyle, or alter the internal content of any frame.
- Screen-frame backgrounds. Give each actual screen frame a background that makes its outer edge unambiguous; keep an existing frame background unchanged when it already defines the screen edge, and otherwise add only the frame-level background that clears it. Do not add backgrounds to flow groups, sequence or fork rows, titles, descriptions, labels, or surrounding canvas regions.
3. Branches and forks
- Dedicated rows beneath source. Place alternative paths, error branches, and forks in their own horizontal rows positioned beneath the exact source sequence from which they branch.
- Fork row order. Order fork rows from top to bottom by their source steps' order in the flow: earlier forks sit above later forks. Keep forks from the same source step together in their existing relative order, and keep nested forks beneath their own source sequence.
- Equivalent-step alignment. Place steps representing the same stage or outcome in the same column across the primary sequence and fork rows, so equivalent steps align vertically. Match by meaning, not ordinal position within each row.
- Fork start. When a fork's first frame has an equivalent step, use that step's column; otherwise align it directly beneath the source step from which it branches.
- Matching rhythm. Subsequent frames proceed left-to-right using the primary sequence's horizontal spacing rhythm. Leave empty column space for skipped steps and reserve columns for branch-only steps across affected rows; equivalent-step alignment takes precedence over uniform gaps between occupied frames. Preserve each path's step order.
- Clear vertical separation. Maintain a distinct relative vertical gap between the source sequence and each fork row.
- Branch explanation. Precede every fork's first screen with a concise explanation of the branch condition or trigger, placed immediately to the left of that screen. Keep the explanation outside screen frames and reserve space for it without shifting screens out of their aligned columns.
- Contained in flow group. All fork rows and explanations remain inside the parent flow group.
4. Multi-flow arrangement
- Vertical stacking. When organizing multiple distinct flows on the same canvas, stack flow groups vertically with clear separation that accounts for every fork row so that flows never overlap.
Hard constraints
- Relative layout only. Define spatial placement through relative positioning, uniform spacing, and column alignment. Do not rely on fixed numeric dimensions or pixel coordinates.
- Preserve visual design. Except for a screen-frame background required above when the screen edge is unclear, do not alter colors, typography, frame sizing, or existing visual appearance.
- No connectors. Do not create arrows, connecting lines, or link vectors between frames. Spatial alignment and horizontal reading order establish sequence and relationships.
- Tool agnostic. Do not include tool-specific APIs, MCP bindings, platform plugins, scripts, templates, or external assets.