Immediate result: A complete user flow with happy path, decisions, error states and a Mermaid diagram.
Problem it solvesFlows are designed screen by screen, and edge cases and dead ends get missed.
Booking a doctor's appointment in a clinic app
Happy path: choose specialty → doctor → slot → confirm → pay → confirmation
Branch: no slots this week → show next available + 'notify me'
States: slot taken during payment → hold for 5 minutes, then release
Flows designed screen by screen leave dead ends and missing edge cases. This skill maps the complete flow for a feature: the happy path step by step, then decision points, errors, empty states and exits. It lists every screen and state that needs designing and produces a Mermaid flowchart you can paste into your docs. Designing the unhappy paths up front saves the rework that otherwise appears in QA or, worse, in support tickets. To use it, paste the skill into your assistant and send the feature and the user's goal; the reply is laid out as “Happy path”, “Branches and errors” and “Screens and states list”.
# Skill: User flow mapper
You are running the "User flow mapper" skill for me. I work as: Product designer. What I need from you: a complete user flow with happy path, decisions, error states and a Mermaid diagram.
## When I send you the feature and the user's goal
1. Map the happy path step by step.
2. Add decision points, errors, empty states and exits.
3. List screens and states needed.
4. Produce a Mermaid flowchart.
## Reply in this format
- Happy path
- Branches and errors
- Screens and states list
- Mermaid diagram (code)
## Rules
- Use only the facts I give you; mark anything you had to assume with [ASSUMPTION].
- If something essential is missing, ask me one short question, then continue.
- No preamble or filler: start with the result.
Confirm you're ready in one line, then wait for me to send the feature and the user's goal.Then sendThe feature and the user's goal. For example: Booking a doctor's appointment in a clinic app
Upload it to Claude, add it to ChatGPT's Codex app, clone it into Claude Code, or download the SKILL.md for any agent. Full guide with screenshots →
Download the ZIP and upload it in Claude. Claude then uses the skill on its own whenever a request matches.
Download ZIP
OpenAI's Codex app reads the same SKILL.md format. Copy the skill into your Codex skills folder:
$ git -c http.version=HTTP/1.1 clone https://scienceofapps.com/skills/ai-skills.git
$ cp -r ai-skills/user-flow-mapper ~/.codex/skills/
Clone the library and copy this skill into your Claude Code skills folder.
$ git -c http.version=HTTP/1.1 clone https://scienceofapps.com/skills/ai-skills.git
$ cp -r ai-skills/user-flow-mapper ~/.claude/skills/~/.claude/skills/ for all projects, or .claude/skills/ inside one project.Download the skill file and put it in a folder named after the skill.
Download SKILL.md~/.claude/skills/user-flow-mapper/SKILL.md.Repositoryscienceofapps.com/skills/ai-skills.git · all 200 skills, one folder each, plain git over HTTPS
Flows are designed screen by screen, and edge cases and dead ends get missed. The skill fixes that: a complete user flow with happy path, decisions, error states and a Mermaid diagram.
Copy the skill and paste it as the first message of a new chat, then send your input. To keep it, paste it into a ChatGPT Project or custom GPT, a Claude Project or a Gemini Gem, or upload the SKILL.md file as a Claude Skill.
Send the feature and the user's goal. If something essential is missing, the skill asks you one short question and then continues.
Yes. It's free to copy, use and adapt, with no sign-up, and works in the free versions of ChatGPT, Claude, Gemini and Copilot.
ProblemColours and spacing are hard-coded everywhere, so the UI drifts and dark mode is painful.
Brand blue #2563EB, font Inter, 4px spacing grid, dark mode needed
--color-accent: #2563EB (light) / #60A5FA (dark)
Text on accent: #FFFFFF on #2563EB = 5.2:1 ✓
--space-1: 4px … --space-8: 32px
Immediate resultA token set for colour, type, spacing and radius in JSON and CSS variables, with light and dark values.
ProblemResearch starts with a method instead of a question, and the findings don't inform decisions.
Should we add a family plan to our streaming app?
Decision: build a family plan in Q1 or not.
RQ: How do households share accounts today, and what breaks?
Method: 10 household interviews + a survey of 400 subscribers on sharing.
Immediate resultA research plan: decision to inform, questions, method, participants, timeline and outputs.
ProblemImage generators produce generic results from vague prompts, and outputs don't match the brand.
Hero image for a fintech landing page: young Indian professionals, trust, warm
'Two young professionals reviewing a phone at a sunlit Bengaluru café table, warm natural light, shallow depth of field, 35 mm, editorial photo style'
--ar 16:9
Avoid: text, logos, distorted hands
Immediate resultDetailed prompts for Midjourney, DALL·E, Imagen or Firefly with style, composition and negative prompts.
All 12 design & ux skillsAll 200 skillsRead it in the articleProve it: AI for UX/UI Designers Certification (free test)
60 research-backed principles in 6 categories — what each one means, why it works on the human brain and how to use it on your own screens. Written by Sushant Singh, founder of Science of Apps, who has scaled consumer apps to lacs of users and spent 10+ years leading product across startups and digital businesses in the US, EU & India.
110 real paywalls from top apps, taken apart, rated out of 5 and decoded with the Laws of UX — plus the frameworks, copy and checklists to ship your own. By Sushant Singh, founder of Science of Apps.