Mobile Flow Board
Turn a user journey into an annotated low-fidelity screen board. Welcome, list, detail, form and review layouts connect to explicit target screens and stack naturally on mobile.
A little less setup
Make this part of your toolkit.
Give your agent this prompt. You’ll approve access in your browser before it installs a Skill.
Read https://skilly.uk/install/skills/mobile-flow-board.md and follow the instructions to install this Skill for my agent.REAL SAMPLE / RELEASED PACKAGE
RELEASED v1.0.0A closer look at the actual output.
Actual generated fictional sample with explicitly synthetic content. Open the demo to inspect the complete artifact.
THE COMPLETE TEMPLATE
Try it. Make yourself at home.
Scroll inside, explore the pages, and try the controls. Choose Open for downloads, printing, or external links.
1440 × 900 canvas · scaled evenly to fitUse the preview’s own scroll and keyboard controls.
Inside this template
2 sections- From curiosity to a place at the table.
- A conversation before the pixels.
A GUIDED LOOK
The whole story, in motion.
A screen recording of this working demo, covering 2 sections. This is a guided preview, not a video exported by the Skill.
In this walkthrough
- From curiosity to a place at the table.
- A conversation before the pixels.
- Tested runtime
- Node.js 24.19.0 · macOS arm64 · Chromium 153.0.8010.12 / 154.0.8037.95
- Pinned dependency
- No runtime dependencies · local OFL fonts
- Checks completed
- 72 author browser checks plus 58 independent Codex workflow and browser checks across 360–1440px; actual desktop/mobile screenshots inspected. Generator safety and domain tests passed.
Independent Codex workflow and browser checks completed.
Static offline output. Other browsers/platforms, automatic agent discovery and other agent products are not verified. Touch checks use browser emulation, not a physical device.
From a good brief to a better result.
Turn a user journey into an annotated low-fidelity screen board. Welcome, list, detail, form and review layouts connect to explicit target screens and stack naturally on mobile. The published package has its own version, tested environments, and included outputs listed alongside this overview. Any earlier draft samples below retain their original verification scope.
What you bring
- Screen roles, copy, annotations and explicit transition IDs
- A structured JSON brief with your own source content
What you’ll make
- Connected wireframe board with screen index and design notes
- Editable HTML, CSS, JavaScript and normalized source data
- Offline fonts, attribution, example briefs and tests
The intended workflow
- Read the source brief and preserve its facts
- Generate a fresh output folder from the documented schema
- Follow every transition and inspect long copy at narrow widths