How to use the Mobile Flow Wireframe agent skill

What the skill makes the agent produce

When the skill is installed and triggered, the agent produces a wireframe showing three or four phone screens in a row. Dashed arrows connect the screens, and each arrow carries a short label naming the tap that moves the user forward.

Screens are grey placeholder boxes rather than finished visuals, with a few sticky-note style annotations that explain intent. The output is one self-contained HTML page that you can preview in a browser.

• Three or four phone frames laid out left to right
• Grey placeholder content inside each frame, not branded or pixel-accurate design
• Dashed connectors with numbered, verb-first step labels
• One or two annotation callouts explaining intent

How to install the wireframe-mobile-flow skill

Download the ZIP file for the skill from this page. Unzip it so that the skill folder sits in one of two places: your personal skills folder at ~/.claude/skills/, or a project's .claude/skills/ folder if you want the skill available only inside that project.

If you use the Claude apps instead of files on your computer, you can upload the skill under Settings → Capabilities → Skills.

• Personal install: unzip into ~/.claude/skills/
• Project install: unzip into the project's .claude/skills/ folder
• Claude apps: upload under Settings → Capabilities → Skills

How to trigger the skill with a natural request

You do not need a special command. Describe the flow you want in plain language and include a phrase the skill responds to, such as "mobile wireframe", "app flow", "user flow", "lo-fi mobile" or "low fidelity". Chinese triggers such as "移动端线框" and "App 流程图" are also listed in the skill.

Name the screens you want if you know them. The skill is built around flows of three or four connected screens, so a brief with a clear sequence works best.

• "Make a lo-fi mobile app flow for onboarding, home feed and item detail."
• "Create a mobile wireframe showing a user flow from sign-up to confirm."
• "Sketch a low fidelity app flow for a booking app, three screens."

Examples of what a good request looks like

A useful request states the app's purpose, the screens in order, and what the user does to move between them. The skill's own example prompt asks for three phone frames in a row, grey-box screens, dashed step arrows and two annotation callouts, and you can use the same pattern for your own app.

Review the result by checking that the flow reads left to right and that each arrow label describes a real tap. If a step is missing, ask the agent to add it or to shorten the flow to three screens.

What the skill needs and its safety notes

The skill listing states no required prerequisites. It does not run scripts and does not use the network, so it works by generating the HTML page from your request.

The skill folder contains two files: SKILL.md, which holds the instructions the agent follows, and example.html, a sample of the output.

• Requirements: none listed
• Runs scripts: no
• Uses network: no
• Files: SKILL.md and example.html

Tips for better wireframes

Keep the flow short. Three or four screens fit the skill's layout and stay readable as a small thumbnail. Use the annotations for intent, such as what a hero section must communicate, rather than for visual styling.

Do not use this skill for branded UI or desktop layouts. The skill deliberately uses grey placeholders and phone-sized frames, so ask for a different tool when you need pixel-accurate or web-only designs.

• Name each step as a tap or action so the arrow labels make sense
• Ask for a revision to change the order of screens rather than restyling them
• Share the HTML file directly, since it previews in any browser