mikeparcewski/ux-flow
skills/product/ux-flow/SKILL.md
UX flow design and analysis. Creates user flow diagrams, interaction patterns, and information architecture. Generative — creates and maps flows rather than evaluating existing ones (see product/ux-review for evaluation). Use when: "user flow", "flow diagram", "interaction design", "information architecture", "IA mapping", "user journey map", "navigation design", "flow analysis"
$ install --global
skillsauthnpx skillsauth add mikeparcewski/wicked-garden ux-flowInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 19, 2026, 4:09 AM18.5s1 file scanned
SKILL.md
- name:
- ux-flow
- description:
- |
- Use when:
- user flow", "flow diagram", "interaction design", "information architecture",
- portability:
- portable
UX Flow Skill
Design and map user flows, interaction patterns, and information architecture. This skill is generative — it creates flows and IA structures from requirements or existing code, rather than evaluating whether a flow is good.
Core Concepts
User Flow Types
| Type | Purpose | Output | |------|---------|--------| | Task flow | Single task, one path | Linear diagram | | User flow | Multiple paths, decision points | Branching diagram | | Screen flow | UI states per step | Annotated screens | | System flow | Front-end + back-end | Swimlane diagram |
Information Architecture Patterns
- Hub and spoke: Central home → feature areas → back
- Sequential: Step 1 → 2 → 3 (wizards, onboarding)
- Hierarchical: Category → subcategory → item
- Matrix: Tag-based, search-driven navigation
- Flat: All items at same level (single-page apps)
Creating Flow Diagrams
ASCII Notation (Quick Flows)
[Start] → [Login Page]
↓
{Credentials valid?}
/ \
Yes No
↓ ↓
[Dashboard] [Error Msg] → [Retry]
↓
{Has onboarding?}
/ \
Yes No
↓ ↓
[Setup Flow] [Home]
Mermaid (Rendered in Markdown)
flowchart TD
A[Start] --> B[Login Page]
B --> C{Valid?}
C -->|Yes| D[Dashboard]
C -->|No| E[Error State]
E --> B
D --> F{New user?}
F -->|Yes| G[Onboarding]
F -->|No| H[Home]
Flow Analysis Checklist
When analyzing an existing flow:
- [ ] Happy path is clear and short (minimize steps)
- [ ] Every decision point has all branches defined
- [ ] Error states have recovery paths (not dead ends)
- [ ] Back navigation is always available
- [ ] Confirmation shown after destructive actions
- [ ] Progress indicators on multi-step flows (3+ steps)
- [ ] Empty states handled (no data, no results)
- [ ] Loading states defined for async operations
Information Architecture Mapping
From requirements or code, extract:
- Entry points: How users arrive (direct URL, nav, link, email)
- Primary navigation: Top-level sections
- Secondary navigation: Sub-sections per primary area
- Content types: What exists at each node
- Cross-links: Non-hierarchical connections
IA Map Format
App Root
├── Auth
│ ├── Login
│ ├── Register
│ └── Password Reset
├── Dashboard (requires auth)
│ ├── Overview
│ └── Widgets
└── Settings (requires auth)
├── Profile
├── Notifications
└── Security
Interaction Pattern Library
Common patterns and when to use them:
| Pattern | Use Case | |---------|----------| | Modal dialog | Focused action, doesn't lose context | | Slide-over panel | Editing without navigation | | Inline edit | Simple field edits | | Full-page form | Complex data entry | | Wizard | Multi-step, sequential | | Accordion | Progressive disclosure | | Tab set | Peer-level content switching |
Output Formats
## UX Flow: {feature or page}
### Overview
{1–2 sentences: what the flow accomplishes}
### Information Architecture
{IA tree or description}
### User Flow
{ASCII or Mermaid diagram}
### Step-by-Step
1. User arrives at {entry point}
2. {action} → {system response}
3. {decision} → {branch A / branch B}
...
### Edge Cases
- **Empty state**: {what shows when no data}
- **Error state**: {what shows on failure, recovery path}
- **Loading state**: {feedback during async ops}
### Open Questions
- {question requiring product/stakeholder input}
Integration
- mockup skill: Pair with wireframes for each flow step
- accessibility skill: Check keyboard navigation through flow
- product/ux-review: Flows created here get evaluated there
- wicked-crew: Feeds into design phase deliverables
Related Skills
mikeparcewski/wicked-garden-engineering-conformance-reviewer
development
VerifiedTrustedCommunity
Pattern-conformance agent-half: evaluates a produced artifact or diff against a set of architectural/design pattern rules from the conformance-rule store (wicked_governance schema). Returns structured findings with rule ID, severity, and rationale — the deterministic half (mechanical rule recall) is done by the guard pipeline; this is the semantic evaluation step. Triggered by: the guard_pipeline `outgov_pattern` check (session-close), or explicitly by an engineering review when WICKED_OUTGOV_RULES_DIR is populated. NOT a replacement for the full `engineering` review skill — focuses only on conformance to stored Pattern rules; architecture and code-quality checks live in the `engineering` skill. Semantic evaluation reuses `wicked-garden-qe-semantic-reviewer` as the designated agent-half evaluator (per garden#983 spec). This skill is the orchestrating wrapper that loads applicable Pattern rules and delegates the per-rule semantic judgment to qe-semantic-reviewer.
8SKILL.mdUpdated Jul 22, 2026
mikeparcewski/wicked-garden-domain
tools
VerifiedTrustedCommunity
The FOUNDATIONAL domain-model capability: extract a codebase's domain — testable business rules (with confidence + provenance), entities, requirements — as a schema-conformant model on the estate graph. The workers annotate the store; wicked-core reads it and builds the requirements graph, coverage-gating fail-closed. Steers three fork workers. A shared substrate, not a modernization tool. The `modernize` archetype DERIVES from it; build / migrate / review / specify / explore consume the SAME domain model — none OWN it. Understanding a codebase's domain is upstream of almost everything else garden does. Use when: "extract the business rules / domain model from this codebase", "build a requirements graph from the code", "what does this system actually require", "reverse-engineer the domain before we build/port/migrate". Works on ANY codebase (modern or legacy) — the value is the domain model, not the porting. NOT the code transform itself (that is the archetype consuming this model). This skill produces the DOMAIN MODEL, not new code.
8SKILL.mdUpdated Jul 15, 2026
mikeparcewski/wicked-garden-domain-modeler
development
VerifiedTrustedCommunity
Domain-graph fork worker for the modernize archetype. Groups the estate's Louvain communities into business domains, attaches each requirement to its cluster (advisory cluster_id provenance), and invokes wicked-core's domain-graph build (which reads the annotated estate store, recomputes coverage fail-closed, and builds the requirements graph) — then validates core's output against the vendored schema. Use when: dispatched by wicked-garden-domain after rule extraction to turn a flat rule set into cluster-keyed domains; "group these into domains", "build the requirements graph", "translate clusters into a domain model". NOT for mining the rules themselves (that is domain-extractor) or threat-modeling (that is domain-coverage).
8SKILL.mdUpdated Jul 15, 2026
mikeparcewski/wicked-garden-domain-extractor
tools
VerifiedTrustedCommunity
Rule-extraction fork worker for the FOUNDATIONAL domain-model capability. Mines testable business rules from a codebase — each with a numeric confidence and a provenance{source, ref, source_kinds} — and annotates them into the estate store so wicked-core can build the domain-model requirements graph (coverage-gated). This is a substrate, not a modernization tool: the `modernize` archetype DERIVES from it, and build / migrate / review / specify / explore can consume the same domain model — none OWN it. Use when: dispatched by wicked-garden-domain to mine the business_rules of a codebase (or a module); "extract the domain rules", "what does this system require", building the requirements half of a domain model. NOT for grouping into domains (that is domain-modeler) or judging coverage (that is domain-coverage — a seat-distinct evaluator).
8SKILL.mdUpdated Jul 15, 2026