ux-flow-plan

Original：🇺🇸 English

Translated

Create UX-first plans as flow trees, then attach concrete function names, files, and implementation anchors after the high-level flow is clear.

8installs

Added on2026-10-02

NPX Install

npx skill4agent add jnsahaj/skills ux-flow-plan

Create a high-level architecture plan that starts from the user experience and only then maps to code-level anchors.

Build the current-state UX flow as a tree:

text

User action
└─ System behavior
   └─ Existing architectural layer
      └─ Relevant function/file anchor

Build the desired-state UX flow as a second tree:

text

User action
└─ System behavior
   └─ New or changed architectural layer
      └─ Relevant function/file anchor

Identify the architectural boundary decisions:
- Which layer detects the condition
- Which layer owns side effects
- Which layer updates UI/status
- Which layer persists or mutates state
Attach implementation anchors after the trees, not before:
- Function names
- File paths
- Existing abstractions to reuse
- Tests that should cover the flow
End with a small decision list:
- Recommended architecture
- Alternatives rejected
- Open questions or assumptions

Start with UX and system flow, not line numbers or code edits.
Use tree diagrams for flows whenever possible.
Keep function names and file paths attached as anchors, not as the main narrative.
Do not over-specify implementation details before the architectural boundary is clear.
Separate "current flow" from "desired flow".
Call out whether a feature is coupled to an existing concept or intentionally independent from it.
Prefer plain product and architecture language over framework-specific jargon unless the jargon names a real boundary.