Wireframe Mobile Flow

What it does

When your agent uses it

• The brief asks for mobile wireframe
• User flow wireframe

Example prompts

• “mobile wireframe”
• “app flow”
• “user flow wireframe”
• “/wireframe-mobile-flow”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

1. 1Skip the DESIGN.md if it pushes for finished UI. This skill is
2. 2Pick the flow steps from the brief — typically 3–4 connected screens
3. 3Lay out the board, in order
4. 4Write a single HTML document
5. 5Self-check

What it can do on your machine

Read from SKILL.md and the folder at commit d9dd6fe. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md.

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Wireframe Mobile Flow loads about 1k tokens when it runs. Until then it costs about 141 tokens; SKILL.md has 423 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~141

When it runs · the whole SKILL.md, loaded when a task matches

~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nexu-io/open-design at commit d9dd6fe, republished under its Apache-2.0 licence (© nexu-io). 423 words, ~1,045 tokens.

name

wireframe-mobile-flow

description

A lo-fi multi-screen MOBILE flow wireframe — three or four phone frames laid out in a row on a board, showing a connected user flow (Onboarding → Home feed → Item detail → Confirm). Grey-box content inside each device, dashed connector arrows + numbered step labels between screens, and a couple of annotation callouts. Reads like an app flow pinned to a whiteboard before any pixels are committed. Use when the brief asks for "mobile wireframe", "app flow", "user flow wireframe", "lo-fi mobile", "low fidelity", "线框图", "移动端线框", or "App 流程".

triggers

mobile wireframe, app flow, user flow, lo-fi mobile, wireframe, low fidelity, 移动端线框, App 流程图

od.mode

prototype

od.platform

auto

od.scenario

design

od.fidelity

wireframe

od.example_prompt

Wireframe a lo-fi mobile flow v0.1 — three phone frames in a row (Onboarding → Home feed → Item detail), grey-box screens, dashed step arrows between them…

<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>

© nexu-io, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in design-templates/wireframe-mobile-flow of nexu-io/open-design.

• SKILL.md
• example.html

Open the folder on GitHubat commit d9dd6fe