New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

UX Flows

by genkovich in genkovich/sdd

A skill your agent uses to derive the user flows of a UI-touching feature after the spec is clarified — one mermaid flowchart per UI-touching §4 user story (happy + alt/error branches from §5 ACs)…

MITAuto-check passedProduct & Project Management

Install UX Flows

skills CLI
$ npx skills add genkovich/sdd --skill ux-flows -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install genkovich/sdd ux-flows --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/genkovich/sdd.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ux-flows .claude/skills/ux-flows && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ux-flows
GitHub stars
171
Token cost
~2k tokens
SKILL.md length
809 words
Files
2
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses to derive the user flows of a UI-touching feature after the spec is clarified — one mermaid flowchart per UI-touching §4 user story (happy + alt/error branches from §5 ACs)…

  • Works in 7 steps: Gate + read. test -f… → Set the depth dial + platform. Read… → Derive flows + inventory. For every… → …
  • A screen inventory (SCR-NN ids)
  • SKILL.md covers Owner, Inputs, Protocol and Definition of Done, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

UX Flows is an agent skill from genkovich/sdd. Use to derive the user flows of a UI-touching feature after the spec is clarified — one mermaid flowchart per UI-touching §4 user story (happy + alt/error branches from §5 ACs), a screen inventory (SCR-NN ids), and an AC→flow map, written to docs/features/{slug}/ux-flows.md. Triggers on "ux flows for {slug}", "user flows for {slug}", "screen flow for {slug}", "/sdd:ux-flows {slug}", "юзер-флоу для {slug}", "потік екранів {slug}", "намалюй флоу користувача". Always markdown + mermaid regardless of the design tool…

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `templates/ux-flows.md`).

It sits in Product & Project Management, covering Diagrams, User stories and UX design. It works with Mermaid. The repository describes itself as: Spec-Driven Development for Claude Code: 12 atomic Socratic skills + a TDD implement engine (agent-team & dynamic-workflow modes). The licence is MIT.

When your agent uses it

  • A screen inventory (SCR-NN ids)
  • Written to docs/features/{slug}/ux-flows.md
  • Ux flows for {slug}
  • User flows for {slug}

Example prompts

  • “ux flows for {slug}”
  • “user flows for {slug}”
  • “screen flow for {slug}”
  • “/ux-flows”

Workflow steps

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

  1. Gate + read. test -f docs/features//spec.md → missing = refuse with the pointer
  2. Set the depth dial + platform. Read interview_depth from .claude/sdd.local.md (else
  3. Derive flows + inventory. For every UI-touching §4 user story: one flow — happy path +
  4. Socratic pass — prose, never raw mermaid. Per
  5. Fill the AC map + write + commit. Complete the AC-coverage table (every UI-touching §5 AC →
  6. Structural self-check — per ../_shared/self-check.md: re-read
  7. Handoff. Emit the stage-handoff block per ../_shared/handoff.md

What it can do on your machine

Read from SKILL.md and the folder at commit 4403913. 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

UX Flows loads about 2k tokens when it runs. Until then it costs about 201 tokens; SKILL.md has 809 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~201
When it runs · the whole SKILL.md, loaded when a task matches
~2k

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

Auto-check passed

The automated check found no risky patterns in SKILL.md.

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 genkovich/sdd at commit 4403913, republished under its MIT licence (© genkovich). 809 words, ~1,982 tokens.

Download SKILL.mdSave it as .claude/skills/ux-flows/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
ux-flows
description
Use to derive the user flows of a UI-touching feature after the spec is clarified — one mermaid flowchart per UI-touching §4 user story (happy + alt/error branches from §5 ACs), a screen inventory (SCR-NN ids), and an AC→flow map, written to docs/features/{slug}/ux-flows.md. Triggers on "ux flows for {slug}", "user flows for {slug}", "screen flow for {slug}", "/sdd:ux-flows {slug}", "юзер-флоу для {slug}", "потік екранів {slug}", "намалюй флоу користувача". Always markdown + mermaid regardless of the design tool; the Socratic pass confirms each flow in prose, never raw mermaid. Feeds design (target-surface evidence), sequences (SCR alignment), screens (the inventory) and plan-tests (e2e-through-UI paths). Hard-refuse if spec.md is missing; skipped for features with no human-facing UI.
model
inherit
effort
high

Skill: ux-flows

Draws how the user moves through a UI-touching feature — after clarify, before design. For each UI-touching §4 user story it produces a mermaid flowchart (happy path + the alt/error branches the §5 ACs demand), builds the screen inventory (SCR-NN — the id contract screens details later), and maps every UI-touching AC to the flow/branch that shows it. The artifact is always markdown + mermaid whatever docs/design-system.md picks as the drawing tool — flows are flow-altitude, not visual design. design then reads it as evidence for the target-surface + UI-architecture decisions (the formal target_surfaces declaration stays design's); sequences aligns UI-driven flows on the SCR ids; plan-tests takes the e2e-through-UI paths from here.

This stage is optional by surface, not by size: its N/A condition (no human-facing UI) lives in ../_shared/size-matrix.md and is evaluated by clarify's handoff (specify's when clarify was legally skipped). Invoked directly, it always runs.

Question phrasing → ../_shared/ask-style.md; each diagram is confirmed in prose, never as raw mermaid → ../_shared/diagram-presentation.md. Flow labels + prose follow artifact_language — mermaid keywords, SCR ids and AC ids stay English → ../_shared/artifact-language.md.

Owner

PM + designer (or whoever owns the user experience). The PM confirms each flow matches a real user story; the Tech Lead flags flows that imply architecture (they become design input, not decisions here).

Inputs

  • <slug> — feature slug.
  • Gate (hard-refuse if missing): docs/features/<slug>/spec.md — the flows derive from §4 user stories + §5 ACs. Absent → STOP: «run specify <slug> first — ux-flows derives from its user stories».
  • (Expected) docs/design-system.md — the platform posture (the default platform assumption) + the tool. Absent → not a block: work in code-mode assumptions, recommend /sdd:design-system in the handoff.
  • (Optional) CONTEXT.md (both levels, per-feature wins) — canonical roles for the actors.
  • (Optional) docs/features/<slug>/.size / .route — depth + handoff resolution; absent → default M / standard and say so in the handoff.

Protocol

  1. Gate + read. test -f docs/features/<slug>/spec.md → missing = refuse with the pointer above. Read spec §1 (context), §4 (user stories — which touch a UI?), §5 (ACs), CONTEXT.md glossary, and docs/design-system.md (posture + tool; note its absence for the handoff).
  2. Set the depth dial + platform. Read interview_depth from .claude/sdd.local.md (else medium); unless --depth= was passed, ask ONE depth-selection AskUserQuestion per ../_shared/ask-style.md, then confirm the platform posture in the same call (second question): the design-system posture as «(Recommended)», deviation allowed + recorded with its why. Depth governs the per-flow question volume (→ ../_shared/interview-depth.md); coverage never shrinks.
  3. Derive flows + inventory. For every UI-touching §4 user story: one flow — happy path + an alt/error branch per relevant §5 AC. Collect every screen the flows visit into the Screen inventory (SCR-NN + purpose/entry/exit); flow nodes reference the SCR ids. A backend-only user story is listed as out of scope, not drawn.
  4. Socratic pass — prose, never raw mermaid. Per ../_shared/diagram-presentation.md: write each flow into docs/features/<slug>/ux-flows.md (from ./templates/ux-flows.md), validate it parses per ../_shared/mermaid-check.md, then describe it in plain words (every branch) and confirm — at medium/hard one AskUserQuestion per flow (Accept / Fix / Save-as-OQ / Drop); at easy, write + one-line summary into the assumptions ledger and proceed.
  5. Fill the AC map + write + commit. Complete the AC-coverage table (every UI-touching §5 AC → flow/node/branch, or an explicit N/A: <reason>), re-validate every mermaid block, stamp updated_at, propose commit ux-flows: <slug>.
  6. Structural self-check — per ../_shared/self-check.md: re-read the file from disk and verify 4 items: (1) every UI-touching §4 user story has a flow; (2) every flow node's SCR id exists in the inventory (and every inventory row appears in ≥1 flow); (3) every UI-touching §5 AC appears in the coverage table with a flow/branch or an explicit N/A; (4) every mermaid block parses. Fix + re-check ≤2 cycles; surface anything unresolved.
  7. Handoff. Emit the stage-handoff block per ../_shared/handoff.md — What I did (incl. «self-check: 4/4 pass»; + «docs/design-system.md absent — run /sdd:design-system» when it was) + Review (docs/features/<slug>/ux-flows.md) + Run next: /clear, then /sdd:design <slug> (it reads these flows as target-surface evidence).
Show full SKILL.md (189 more words)Show less

Definition of Done

  • docs/features/<slug>/ux-flows.md exists: platform decisions, the SCR-NN inventory, one flow per UI-touching §4 user story (happy + AC-demanded branches), the AC-coverage table — zero silently uncovered UI ACs.
  • Every flow was confirmed in prose (or written + ledgered at easy); every mermaid block parses.
  • No visual design leaked in: no component names, no layout, no styling — flow altitude only (screens is where states + components live).

Anti-patterns

  • Drawing screens here. Components, states, layout belong to screens; this artifact is the movement between screens, not their content.
  • Deciding architecture here. «SPA vs SSR», «this needs a websocket» — flag it as design input; design decides and declares target_surfaces.
  • Raw mermaid as the confirmation prompt — the anti-pattern diagram-presentation.md exists to kill.
  • Skipping backend-only stories silently. List them as out of scope with one line — the reader must see they were considered.
  • Blocking on a missing design-system. Its absence degrades (code-mode assumptions + a handoff recommendation), never blocks the flow work.

References & template

© genkovich, MIT. 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 skills/ux-flows of genkovich/sdd.

  • SKILL.md
  • templates/ux-flows.md

Open the folder on GitHubat commit 4403913

Compare with similar skills

UX Flows next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UX Flows compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UX Flows this skillgenkovich/sdd171—~2kAutomated safety check: PassMIT
Design Decknicobailon/pi-design-deck291—~4.3kAutomated safety check: PassNone
Discover Journey Mapproduct-on-purpose/pm-skills715—~3kAutomated safety check: PassApache-2.0
Text To Technical Roadmapaipoch/medical-research-skills2k—~1.6kAutomated safety check: PassMIT
User Journey Mapmohitagw15856/pm-claude-skills1.4k—~797Automated safety check: PassMIT
Test Scenariosphuryn/pm-skills27k—~866Automated safety check: PassMIT

Similar skills

  • Design Deck

    nicobailon/pi-design-deck

    Present visual options for architecture, UI, and code decisions with high-fidelity side-by-side previews.

    291 GitHub stars~4.3k tokensUpdated 2 mo ago
    Product & Project ManagementAuto-check passed

  • Discover Journey Map

    product-on-purpose/pm-skills

    Maps a customer journey across stages, touchpoints, emotional curve, pain points, and moments of truth into a markdown artifact with an optional mermaid timeline or flowchart.

    715 GitHub stars~3k tokensUpdated yesterday
    Product & Project ManagementAuto-check passed

  • Text To Technical Roadmap

    aipoch/medical-research-skills

    Converts research text into a Mermaid technical roadmap flowchart.

    2k GitHub stars~1.6k tokensUpdated 22 days ago
    Product & Project ManagementAuto-check passed

  • User Journey Map

    mohitagw15856/pm-claude-skills

    Map a user's journey through a product or experience, phase by phase, with their actions and how they feel.

    1.4k GitHub stars~797 tokensUpdated yesterday
    Product & Project ManagementAuto-check passed

  • Test Scenarios

    phuryn/pm-skills

    Create comprehensive test scenarios from user stories with test objectives, starting conditions, user roles, step-by-step actions, and expected outcomes.

    27k GitHub stars~866 tokensUpdated 24 days ago
    Testing & QAAuto-check passed

  • Counterexample Explainer

    ArabelaTso/Skills-4-SE

    Explain why counterexamples violate specifications by analyzing formal specifications (temporal logic, invariants, pre/postconditions, code contracts), informal requirements (user stories…

    253 GitHub stars~3.5k tokensUpdated 1 mo ago
    Product & Project ManagementAuto-check passed

More from genkovich/sdd

All 21 skills in this repo

  • Fix

    genkovich/sdd

    A skill your agent uses to fix a reported bug spec-first: reproduce it, trace the symptom to the owning feature's acceptance criteria, pin it with a failing (RED) test, apply the minimal GREEN fix…

    171 GitHub stars~2.5k tokensUpdated 1 mo ago
    Auto-check passed

  • Implement

    genkovich/sdd

    A skill your agent uses to implement a feature from its tasks.json with test-driven development — writes a failing test first, makes it pass, refactors, gates, and commits per task.

    171 GitHub stars~2.5k tokensUpdated 1 mo ago
    Auto-check passed

  • Interview

    genkovich/sdd

    Use BEFORE roadmap or specify to get the idea OUT OF YOUR HEAD and onto disk — a Socratic interview that surfaces hidden assumptions, names tradeoffs, exposes imprecisions and proposes fresh angles…

    171 GitHub stars~3.8k tokensUpdated 1 mo ago
    Auto-check passed

  • Classify Size

    genkovich/sdd

    A skill your agent uses to classify a feature into XS/S/M/L/XL and write docs/features/{slug}/.size plus the pipeline route docs/features/{slug}/.route (quick|standard|full) so later skills know how…

    171 GitHub stars~1.8k tokensUpdated 1 mo ago
    Auto-check passed

  • Decide Adr

    genkovich/sdd

    A skill your agent uses to record a post-hoc or asynchronous architecture decision as a MADR ADR when it was NOT captured during the synchronous design pass — a choice made in code, in a chat, on a…

    171 GitHub stars~2.6k tokensUpdated 1 mo ago
    Auto-check passed

  • Tasks

    genkovich/sdd

    A skill your agent uses to break a designed feature into atomic, ≤1-day tasks with a dependency graph, a per-task Definition of Done, and a machine-readable tasks.json that the implement engine…

    171 GitHub stars~4.8k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about UX Flows

What does UX Flows do?

A skill your agent uses to derive the user flows of a UI-touching feature after the spec is clarified — one mermaid flowchart per UI-touching §4 user story (happy + alt/error branches from §5 ACs)…. UX Flows is an agent skill from genkovich/sdd.md.

When should I use UX Flows?

UX Flows fits situations like: A screen inventory (SCR-NN ids); written to docs/features/{slug}/ux-flows.md; ux flows for {slug}; user flows for {slug}.

How do I install UX Flows in Claude Code?

Run `npx skills add genkovich/sdd --skill ux-flows -a claude-code`. Or copy the skill folder (skills/ux-flows in genkovich/sdd) into .claude/skills/ux-flows in your project. Claude Code loads it when a task matches its description.

How do I install UX Flows in Codex?

Run `npx skills add genkovich/sdd --skill ux-flows -a codex`. Or copy the skill folder (skills/ux-flows in genkovich/sdd) into .agents/skills/ux-flows in your project. Codex loads it when a task matches its description.

Can I use UX Flows in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add genkovich/sdd --skill ux-flows -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ux-flows, .gemini/skills/ux-flows, .github/skills/ux-flows and .opencode/skills/ux-flows in your project.

What does UX Flows need to run?

SKILL.md names no scripts, command-line tools or credentials: UX Flows is instructions for the agent only.

Does UX Flows access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is UX Flows safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does UX Flows use?

UX Flows is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UX Flows use?

About 2k tokens (SKILL.md is roughly 7.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to UX Flows?

Skills that share tags, products or a category with UX Flows: Design Deck (nicobailon/pi-design-deck, 291 stars), Discover Journey Map (product-on-purpose/pm-skills, 715 stars), Text To Technical Roadmap (aipoch/medical-research-skills, 2k stars) and User Journey Map (mohitagw15856/pm-claude-skills, 1.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UX Flows?

genkovich (a GitHub user) maintains it in genkovich/sdd, which has 171 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on September 5, 2026.

Source: genkovich/sdd on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.