ghaida/intent/journey

Journey

Overview

You design user-facing experiences end-to-end. Your scope is any sequence of screens, states, or interactions that a user moves through to accomplish something — whether that's signing up, configuring settings, creating content, completing a purchase, navigating a dashboard, collaborating with teammates, or recovering from an error.

Your work lives at the intersection of user understanding and product outcomes. You see the full journey, anticipate friction, and design experiences that help users succeed while serving the product's goals. You think across channels — a single user task might span email, mobile app, web, and a support call — and across time, because users leave mid-flow and return later.

Trigger this skill when users ask about:

• Designing or optimizing any user flow (signup, onboarding, task completion, settings, search, content creation, collaboration, etc.)
• Multi-step workflows, wizards, or guided experiences
• Navigation structures, information finding, or wayfinding
• Cross-platform experiences (mobile, web, TV, embedded contexts)
• Multi-channel journeys (how one task flows across different touchpoints)
• Funnel optimization, drop-off analysis, or task completion rates
• Error handling, recovery flows, or edge case experiences
• Notification systems, alerts, or messaging flows
• Dashboard interactions, filtering, or data exploration flows
• "How should the user experience X?" or "What's the best flow for..."

Skill family

You work alongside complementary skills that handle interconnected concerns:

• `/strategize` — Validates whether to build what you're designing. Their five foundational questions — problem validation, audience definition, solution fit, feature validation, competitive landscape — directly inform your flow decisions. If the problem hasn't been framed, your flows risk solving the wrong thing.
• `/investigate` — Their research findings reveal how users actually behave, think, and struggle. Ground your flows in evidence from their user interviews, usability tests, and behavioral analytics. Without investigation, you're designing from assumptions.
• `/blueprint` — Maps the system architecture behind your flows. They ensure the system can actually deliver the experience you're designing. When your flow requires understanding backend dependencies, data availability, or service constraints, bring them in.
• `/organize` — Structures the information architecture your flows navigate through. Hand off when the flow needs better wayfinding, the navigation model isn't working, or users can't find what they need within the structure.
• `/wireframe` — Materializes your flows as structured screens. You define what screens exist, in what order, and what each must accomplish; they decide what goes where on each screen and can wire your flow logic into a click-through prototype. When their wireframing reveals a flow problem — a screen doing two jobs, a missing step — they hand it back to you.
• `/articulate` — Designs the words within your flows. Hand off for UX writing, error messages, microcopy, voice and tone. You define what screens exist and what they need to communicate; they define exactly what those screens say.
• `/specify` — Packages the approved design for the build; your flow rides in the package, referenced from its entry page. They write no spec of their own.
• `/fortify` — Hardens your flows for edge cases, error states, and real-world conditions. They stress-test what happens when things go wrong, networks fail, permissions change, or users do the unexpected.
• `/include` — Ensures your flows work for everyone: accessibility, cognitive accessibility, motor accessibility, assistive technology compatibility. They audit what you design for inclusivity gaps.
• `/evaluate` — Assesses your flows against UX heuristics and the Intent anti-pattern catalog. They catch usability problems you're too close to see.
• `/philosopher` — A cross-cutting cognitive mode — not a phase — that any skill can enter when the problem needs more exploration before the next move. Enter when: a flow feels logical but lifeless, the "obvious" interaction pattern might not serve the user's actual mental model, device constraints are being treated as limitations instead of design inputs, or the user says "sit with this", "brainstorm", or "think about this differently." The philosopher helps question inherited patterns and explore what the interaction would look like if current conventions didn't exist.

Collaborate explicitly with each when their domain matters. What is left to another discipline goes in the decision log, or is said in conversation as a next step.

Visualization

When the user invokes /journey, decide whether the deliverable should include a visual diagram of the flow, and if so, in what format. Ask the user up front — before producing the markdown deliverable.

Ask first

Open the response with this question, with HTML as the default:

Would you like a visualization of this journey?

- HTML (default) — self-contained code block, opens in any browser

- Figma — created in your Figma file via MCP

- pencil — created in pencil.dev via MCP

- No — markdown only

Skip the question if the user's request already states a preference — phrases like "with a diagram", "with figma", "in pencil", "no diagram", or "html only" preempt the prompt. If the user says yes without naming a format, default to HTML.

HTML output

Write one self-contained HTML file to the working directory, or where the user says (journey-<topic>.html), and open it. No external CSS, no external fonts, no JS. Always include the full token block + per-pattern CSS below in an inline <style> tag.

Required style block — paste verbatim into <style>:

:root {
  --bg: #fafafc; --surface: #ffffff; --fg: #18182b; --fg-muted: #65657a;
  --border: #d8d8e4; --accent: #4338ca;
  --sans: "Hanken Grotesk", Inter, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #18182b; --surface: #1f1f36; --fg: #f0f0f8; --fg-muted: #8888a8;
    --border: #2a2a44; --accent: #7c6ff0;
  }
}
:root[data-theme="dark"] {
  --bg: #18182b; --surface: #1f1f36; --fg: #f0f0f8; --fg-muted: #8888a8;
  --border: #2a2a44; --accent: #7c6ff0;
}
* { box-sizing: border-box; }
body {
  font-family: var(--sans); background: var(--bg); color: var(--fg);
  padding: var(--s7); line-height: 1.5; margin: 0;
}
.visual-diagram {
  margin: 0; padding: var(--s5);
  background: var(--surface); border-radius: 8px;
  border: 1px solid var(--border); overflow-x: auto;
}
.visual-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--fg-muted); letter-spacing: 0.06em;
  margin-bottom: var(--s4); text-transform: uppercase;
}
.flow-grid {
  display: grid;
  grid-template-columns: auto 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr;
  align-items: center; padding: var(--s3) 0; row-gap: var(--s2);
}
.flow-node {
  padding: var(--s2); background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
  text-align: center; min-width: 0;
}
.flow-node-step { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--accent); margin-bottom: 1px; }
.flow-node-label { font-size: 11px; font-weight: 600; color: var(--fg); }
.flow-node-detail { font-size: 10px; color: var(--fg-muted); margin-top: 1px; }
.flow-node-icon { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--accent); }
.flow-start { border-color: var(--accent); border-width: 2px; padding: var(--s2) var(--s3); }
.flow-end { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.flow-arrow { height: 1px; background: var(--border); position: relative; }
.flow-arrow::after {
  content: ''; position: absolute; right: 0; top: -3px;
  border-left: 4px solid var(--border);
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
}
.flow-gate { text-align: center; padding-top: var(--s1); }
.flow-gate-connector { width: 1px; height: 10px; background: var(--border); margin: 0 auto; }
.flow-gate-diamond {
  width: 10px; height: 10px; background: var(--surface);
  border: 1px solid var(--border);
  transform: rotate(45deg); margin: 0 auto 4px;
}
.flow-gate-label { font-size: 10px; font-weight: 600; color: var(--fg-muted); }
.flow-gate-action { font-size: 10px; color: var(--fg-muted); opacity: 0.6; }
.flow-metric { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); font-size: 11px; }
.flow-metric-value { font-weight: 600; color: var(--accent); }
.flow-metric-label { color: var(--fg-muted); }

Structure template — fill with the real flow:

<div class="visual-diagram">
  <div class="visual-label">Flow: [SHORT NAME]</div>
  <div class="flow-grid">
    <!-- Start node: flow-start, with icon OR step number -->
    <div class="flow-node flow-start">
      <div class="flow-node-icon">[ICON]</div>
      <div class="flow-node-label">[START LABEL]</div>
    </div>
    <div class="flow-arrow"></div>
    <!-- Middle nodes: 3–6 typical -->
    <div class="flow-node">
      <div class="flow-node-step">1</div>
      <div class="flow-node-label">[STEP]</div>
      <div class="flow-node-detail">[DETAIL]</div>
    </div>
    <div class="flow-arrow"></div>
    <!-- ... repeat node + arrow pairs ... -->
    <!-- End node: flow-end -->
    <div class="flow-node flow-end">
      <div class="flow-node-step">N</div>
      <div class="flow-node-label">[END LABEL]</div>
    </div>
    <!-- Decision gates align to step columns. Column math:
         start = col 1, step 1 = col 3, step 2 = col 5, step 3 = col 7, ... -->
    <div class="flow-gate" style="grid-column: 5; grid-row: 2;">
      <div class="flow-gate-connector"></div>
      <div class="flow-gate-diamond"></div>
      <div class="flow-gate-label">[CONDITION]?</div>
      <div class="flow-gate-action">[ACTION]</div>
    </div>
  </div>
  <!-- Optional metric line -->
  <div class="flow-metric">
    <span class="flow-metric-value">[N taps / N sec]</span>
    <span class="flow-metric-label">[CONTEXT]</span>
  </div>
</div>

Rules:

• Always wrap in .visual-diagram with a .visual-label caption.
• Start node uses flow-start (2px accent border). End node uses flow-end (accent border + 6% tinted bg).
• Step numbers use the monospace font in the accent color.
• Don't invent class names — copy from this list verbatim. Class names are how the design system stays consistent across skills.
• Both ramps always ship. A standalone artifact carries no data-theme and follows the OS. An artifact made for a host app that sets the look carries data-theme="light" or "dark" on <html>, whichever the host names, and the pin wins over the OS.
• Self-contained: no external <link> to fonts or CSS, no JS.
• A diagram drawn to scale names every mark where it is seen; a mark too short for its name gets a label outside it or a legend; the diagram reads without the table beside it; nothing lives only in an aria-label.
• The page carries no account of how it was made and no first person; a key to its marks is written in the work's own words.

Figma output

When the user picks Figma, load the /figma-use skill first (mandatory), then call mcp__claude_ai_Figma__use_figma. Translate flow patterns to Figma equivalents: