From wicked-garden
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"
npx claudepluginhub mikeparcewski/wicked-garden --plugin wicked-gardenThis skill uses the workspace's default tool permissions.
Design and map user flows, interaction patterns, and information architecture.
Provides Ktor server patterns for routing DSL, plugins (auth, CORS, serialization), Koin DI, WebSockets, services, and testApplication testing.
Conducts multi-source web research with firecrawl and exa MCPs: searches, scrapes pages, synthesizes cited reports. For deep dives, competitive analysis, tech evaluations, or due diligence.
Provides demand forecasting, safety stock optimization, replenishment planning, and promotional lift estimation for multi-location retailers managing 300-800 SKUs.
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.
| 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 |
[Start] → [Login Page]
↓
{Credentials valid?}
/ \
Yes No
↓ ↓
[Dashboard] [Error Msg] → [Retry]
↓
{Has onboarding?}
/ \
Yes No
↓ ↓
[Setup Flow] [Home]
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]
When analyzing an existing flow:
From requirements or code, extract:
App Root
├── Auth
│ ├── Login
│ ├── Register
│ └── Password Reset
├── Dashboard (requires auth)
│ ├── Overview
│ └── Widgets
└── Settings (requires auth)
├── Profile
├── Notifications
└── Security
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 |
## 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}