free-pi-cli 0.6.3 → 0.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/{main-q0zat1nk.js → main-2mvzsazb.js} +223 -73
- package/package.json +1 -1
- package/skills/ux-flow/SKILL.md +200 -0
- package/skills/ux-flow/references/simplification-heuristics.md +103 -0
- package/skills/ux-paths/SKILL.md +196 -0
- package/skills/ux-paths/references/path-categories.md +169 -0
- package/skills/ux-visual/SKILL.md +252 -0
- package/skills/ux-visual/references/layout-audit.js +145 -0
- package/skills/ux-visual/references/solution-rubric.md +70 -0
- package/skills/ux-visual/references/visual-heuristics.md +102 -0
- package/skills/ux-visual/templates/report-template.md +29 -0
- package/skills/ux-walker/SKILL.md +251 -0
- package/skills/ux-walker/references/action-patterns.md +75 -0
- package/skills/ux-walker/references/geometry-audit.js +82 -0
- package/skills/ux-walker/references/issue-template.md +110 -0
- package/skills/ux-walker/references/triage-rubric.md +55 -0
- package/skills/ux-walker/references/ux-audit-rubric.md +174 -0
- package/skills/ux-walker/references/visual-inspection.md +92 -0
- package/skills/ux-walker/templates/latest-report-template.md +139 -0
package/package.json
CHANGED
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ux-flow
|
|
3
|
+
description: Critiques an app's user experience for simplicity, clarity and redundancy. For each core journey it asks how it could be simpler and clearer, measures friction (actual vs ideal steps), and finds duplicated features, paths and information. Use when asked to simplify the ux, audit the flows, find redundancy, give a ux critique, or run ux-flow.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# UX Flow: simplicity and redundancy critique
|
|
7
|
+
|
|
8
|
+
`ux-walker` asks whether each journey works and looks right. This skill asks
|
|
9
|
+
whether each journey should exist in this shape at all. It is a critique, not a
|
|
10
|
+
test: it measures friction per journey, looks for redundancy across journeys, and
|
|
11
|
+
writes ranked simplification proposals. Every step, screen, choice and repeated
|
|
12
|
+
piece of information must earn its place.
|
|
13
|
+
|
|
14
|
+
This skill runs on the default model. Do not switch to a premium model for it.
|
|
15
|
+
Judge screenshots only through the `look_at_image` tool, which uses a cheap
|
|
16
|
+
vision model. You cannot see images yourself. Keep questions specific, prompts
|
|
17
|
+
short and files compact to save credits. There are no helper agents: you critique
|
|
18
|
+
one journey at a time in this session.
|
|
19
|
+
|
|
20
|
+
## Parameters
|
|
21
|
+
|
|
22
|
+
- URL: only needed for a live pass. Auto-detect from the user's message or the dev server.
|
|
23
|
+
- Journeys: default 8 core journeys to critique in depth.
|
|
24
|
+
- Focus topic: optional, restricts journeys to one topic.
|
|
25
|
+
- Issues: optional. File GitHub issues only if the user wants them and `gh auth status` succeeds; otherwise write the issue text to `docs/ux-flow/issues.md`.
|
|
26
|
+
|
|
27
|
+
## Output
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
docs/ux-flow/
|
|
31
|
+
report.md # friction scorecards, redundancy map, ranked proposals
|
|
32
|
+
journeys/{ID}.md # one critique per journey
|
|
33
|
+
redundancy.md # cross-cutting redundancy and hierarchy findings
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Work from files, not memory
|
|
37
|
+
|
|
38
|
+
Write each journey file as soon as that journey is done and keep only a one-line
|
|
39
|
+
summary in context ("STORY-004: convoluted, 9 steps vs ideal 4"). If the session
|
|
40
|
+
is compacted or restarted, list `docs/ux-flow/journeys/`, compare with the
|
|
41
|
+
selected journey list (save it in `docs/ux-flow/plan.md`), and continue with the
|
|
42
|
+
first journey that has no file. Use the `todo` tool for the list.
|
|
43
|
+
|
|
44
|
+
## Step 0: preflight
|
|
45
|
+
|
|
46
|
+
1. `docs/ux-paths/catalog.md` must exist. If not, stop and tell the user: "No UX story catalog found. Run ux-paths first, then re-run ux-flow."
|
|
47
|
+
2. Choose the evidence source:
|
|
48
|
+
- Fresh `ux-walker` artifacts: if `docs/ux-walker/run-history.json` exists and UI source has no significant commits since (check `git log --since` on the UI folders), reuse the screenshots and `walk-report.md` files under `docs/ux-walker/stories/*/`; the screenshots are in `docs/ux-walker/shots/STORY-NNN/`. No browser needed.
|
|
49
|
+
- Otherwise a live pass (see below).
|
|
50
|
+
3. `mkdir -p docs/ux-flow/journeys`
|
|
51
|
+
|
|
52
|
+
### Live pass
|
|
53
|
+
|
|
54
|
+
Find the browser tool: `command -v agent-browser || echo "use: npx -y agent-browser"`.
|
|
55
|
+
Use whichever works as `agent-browser` below. On first use run `agent-browser install`
|
|
56
|
+
(downloads Chromium). Check the app answers: `curl -sI <url> | head -1`; if it does
|
|
57
|
+
not, start the dev server (from `package.json` scripts) in the background with a
|
|
58
|
+
log file and wait once for it.
|
|
59
|
+
|
|
60
|
+
Traverse one journey at a time and save one screenshot per distinct screen inside
|
|
61
|
+
the project folder:
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
agent-browser open <url>
|
|
65
|
+
agent-browser snapshot -i # interactive elements with @refs
|
|
66
|
+
agent-browser click @e3 # or: fill <sel> <text>, type, press, select, scroll
|
|
67
|
+
agent-browser screenshot docs/ux-flow/journeys/{ID}-screens/01-home.png
|
|
68
|
+
agent-browser set viewport 1280 800 # optional; also: set device <name>
|
|
69
|
+
agent-browser get url # confirm where you are
|
|
70
|
+
agent-browser close
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Traversal only. Do not verify each step; that is `ux-walker`'s job.
|
|
74
|
+
|
|
75
|
+
## Step 1: pick journeys
|
|
76
|
+
|
|
77
|
+
Read `docs/ux-paths/catalog.md`. Select the journeys (default 8), preferring:
|
|
78
|
+
|
|
79
|
+
1. Core jobs users run most (create the main entity, consume the main content, the money path).
|
|
80
|
+
2. Coverage: together they touch every major feature area at least once.
|
|
81
|
+
3. Long stories, because they expose cross-screen friction that short ones hide.
|
|
82
|
+
4. Anything matching the focus topic.
|
|
83
|
+
|
|
84
|
+
Copy the catalog's Redundancy Candidates section into `docs/ux-flow/plan.md` with
|
|
85
|
+
the selected list. It is the lead list for Step 3.
|
|
86
|
+
|
|
87
|
+
## Step 2: critique each journey (one at a time)
|
|
88
|
+
|
|
89
|
+
First read `references/simplification-heuristics.md` once. Then for each journey,
|
|
90
|
+
in order, ask: "how could this be simpler, and how could this be clearer?" Not
|
|
91
|
+
"does it work?"
|
|
92
|
+
|
|
93
|
+
Evidence: open each screenshot with
|
|
94
|
+
`look_at_image(path="<screenshot path>", question="...")`. Ask one specific
|
|
95
|
+
question per call, for example "List every button and link on this screen with its
|
|
96
|
+
label, and say which looks like the primary action." Do not call it repeatedly on
|
|
97
|
+
the same image. The answer comes from another model and can be wrong; confirm a
|
|
98
|
+
claim that matters with `agent-browser eval` or `agent-browser get text <sel>`.
|
|
99
|
+
|
|
100
|
+
Method:
|
|
101
|
+
|
|
102
|
+
1. **Friction scorecard** for the whole journey:
|
|
103
|
+
- Steps: actual clicks, inputs and screens vs the story's Ideal path.
|
|
104
|
+
- Decisions: each point where the user chooses; which could a default carry?
|
|
105
|
+
- Re-entry: data the user types that the app already knows.
|
|
106
|
+
- Confirmations that guard nothing destructive.
|
|
107
|
+
- Dead ends: screens with no obvious next step.
|
|
108
|
+
- Hesitations: where a first-time user would stall (ambiguous label, hidden control).
|
|
109
|
+
2. **Take-away pass, per screen**: for each visible element, would the user still succeed if it were removed? List what is removable, collapsible or deferrable. Is there exactly one primary action? Does visual weight match importance? Is anything stated more than once?
|
|
110
|
+
3. **The simpler version**: write the journey as it should be, numbered, with the fewest steps a well-designed UI needs. Then list the concrete changes to get there (merge screens X and Y, default field Z, remove confirmation W).
|
|
111
|
+
4. **Clarity pass**: labels that assume knowledge the persona lacks, jargon, names inconsistent with the rest of the app.
|
|
112
|
+
|
|
113
|
+
Honesty rules:
|
|
114
|
+
|
|
115
|
+
- Every claim points at evidence: a screenshot, a step number, a label. Do not invent UI or assume behavior.
|
|
116
|
+
- If the journey is already minimal, say so. "No simplification found" is a valid and useful verdict. Do not manufacture friction.
|
|
117
|
+
- Mark each finding "measured" (counted steps, seen screenshot) or "suspected" (needs a live check).
|
|
118
|
+
|
|
119
|
+
Write `docs/ux-flow/journeys/{JOURNEY_ID}.md` with sections: Friction Scorecard,
|
|
120
|
+
Take-away Pass, The Simpler Version, Clarity Issues, and a final line
|
|
121
|
+
`Verdict: minimal | acceptable | convoluted`. Calibration is in the heuristics file.
|
|
122
|
+
|
|
123
|
+
## Step 3: redundancy and information architecture (once, after all journeys)
|
|
124
|
+
|
|
125
|
+
Start from the plan's Redundancy Candidates list. Look across screens, which no
|
|
126
|
+
single-journey pass can do: use the saved screenshots, asking `look_at_image`
|
|
127
|
+
targeted questions, and read the journey files (not the images again).
|
|
128
|
+
|
|
129
|
+
1. **Duplicate paths**: the same goal reachable several ways. Deliberate shortcut or drift? Same result? Recommend keep both, mark one canonical, or remove one.
|
|
130
|
+
2. **Duplicate information**: the same fact on several screens or twice on one screen. Does the repeat serve a new context? Recommend one canonical surface.
|
|
131
|
+
3. **Overlapping features**: two features with substantially overlapping capabilities. Recommend merge, differentiate, or remove.
|
|
132
|
+
4. **Hierarchy and IA**: does navigation match user priorities? Anything important 3 or more levels deep, or anything trivial at top level? Is one concept called one name everywhere?
|
|
133
|
+
|
|
134
|
+
Every claim needs evidence (screenshot or catalog reference). If the app is
|
|
135
|
+
clean, say so; an empty redundancy map is a pass.
|
|
136
|
+
|
|
137
|
+
Write `docs/ux-flow/redundancy.md` with sections: Duplicate Paths, Duplicate
|
|
138
|
+
Information, Overlapping Features, Hierarchy & IA.
|
|
139
|
+
|
|
140
|
+
## Step 4: synthesis
|
|
141
|
+
|
|
142
|
+
Read the journey files and `redundancy.md` and write `docs/ux-flow/report.md`:
|
|
143
|
+
|
|
144
|
+
```markdown
|
|
145
|
+
# UX Flow Critique - {DATE}
|
|
146
|
+
|
|
147
|
+
## Run Summary
|
|
148
|
+
| Metric | Value |
|
|
149
|
+
|--------|-------|
|
|
150
|
+
| Journeys critiqued | {N} |
|
|
151
|
+
| Evidence source | {walker artifacts (run of {DATE}) / live pass} |
|
|
152
|
+
| Verdicts | {X} minimal, {Y} acceptable, {Z} convoluted |
|
|
153
|
+
|
|
154
|
+
## Friction Scorecard
|
|
155
|
+
| Journey | Steps (actual/ideal) | Needless decisions | Re-entry | Dead ends | Verdict |
|
|
156
|
+
|---------|----------------------|--------------------|----------|-----------|---------|
|
|
157
|
+
|
|
158
|
+
## Redundancy Map
|
|
159
|
+
{condensed from redundancy.md, each with its recommendation}
|
|
160
|
+
|
|
161
|
+
## Simplification Proposals (ranked)
|
|
162
|
+
### {N}. {Title}
|
|
163
|
+
- **Now**: {current flow/screen, with evidence pointer}
|
|
164
|
+
- **Proposed**: {the simpler version}
|
|
165
|
+
- **Saves**: {steps/screens/decisions removed; journeys improved}
|
|
166
|
+
- **Effort**: {S/M/L}
|
|
167
|
+
- **Evidence**: {journey file + screenshot refs}
|
|
168
|
+
|
|
169
|
+
## Already Minimal
|
|
170
|
+
{journeys/areas that passed clean, so re-runs skip them}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
Ranking: weight by how central the journey is. Removing one step from the
|
|
174
|
+
most-used journey beats removing three from a rarely used settings flow.
|
|
175
|
+
|
|
176
|
+
## Step 5: issues (optional)
|
|
177
|
+
|
|
178
|
+
Only if the user wants issues. If `command -v gh` and `gh auth status` both
|
|
179
|
+
succeed, check duplicates first with `gh issue list --label ux-flow --state open`,
|
|
180
|
+
then `gh issue create --title "UX-flow: {title}" --body "{Now/Proposed/Saves/Effort/Evidence}" --label ux-flow`
|
|
181
|
+
for each top proposal (maximum 10). If a label does not exist, drop `--label`.
|
|
182
|
+
Otherwise write the same text to `docs/ux-flow/issues.md`. These are design
|
|
183
|
+
changes: propose them, never auto-fix them.
|
|
184
|
+
|
|
185
|
+
## Step 6: report to the user
|
|
186
|
+
|
|
187
|
+
Verdict counts and the friction table; the top 3 proposals in one line each;
|
|
188
|
+
redundancy counts by type; issues filed or the issues file path; and the path
|
|
189
|
+
`docs/ux-flow/report.md`.
|
|
190
|
+
|
|
191
|
+
## Guidance
|
|
192
|
+
|
|
193
|
+
- Critique, do not test. A broken button or misaligned card is `ux-walker`'s job; note it in one line and move on.
|
|
194
|
+
- The ideal path is a benchmark, not a fantasy. Fewer steps that hide needed information or remove user control is not simpler.
|
|
195
|
+
- No manufactured findings. A minimal journey is praised and skipped.
|
|
196
|
+
- One concept, one name. Naming drift ("workspace" here, "project" there) is a redundancy finding even when the feature is not duplicated.
|
|
197
|
+
|
|
198
|
+
## References
|
|
199
|
+
|
|
200
|
+
- `references/simplification-heuristics.md`: the question battery and verdict calibration. Read it once before Step 2.
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# Simplification Heuristics
|
|
2
|
+
|
|
3
|
+
The question battery for `/ux-flow` critics. Each heuristic: the question, how
|
|
4
|
+
to detect a violation, and the typical fix. These are established interaction-
|
|
5
|
+
design principles (step/decision economy, progressive disclosure, recognition
|
|
6
|
+
over recall, consistency) applied as concrete checks — not novel rules.
|
|
7
|
+
|
|
8
|
+
## Flow heuristics (per journey)
|
|
9
|
+
|
|
10
|
+
### 1. Step economy
|
|
11
|
+
**Ask**: Could this goal be reached in fewer steps without hiding information the user needs?
|
|
12
|
+
**Detect**: Count actual clicks/inputs/screens; compare to the story's Ideal path.
|
|
13
|
+
**Fix**: Merge screens, combine confirm+submit, deep-link past hub pages, batch inputs.
|
|
14
|
+
|
|
15
|
+
### 2. Decision economy
|
|
16
|
+
**Ask**: Does every choice the user makes actually matter to them?
|
|
17
|
+
**Detect**: List each decision point; for each, would 90% of users pick the same option?
|
|
18
|
+
**Fix**: Make that option the default, move the choice to settings or an "advanced" disclosure.
|
|
19
|
+
|
|
20
|
+
### 3. Don't ask for what you know
|
|
21
|
+
**Ask**: Is the user re-entering data the app already has?
|
|
22
|
+
**Detect**: Any input pre-fillable from account, context, or a previous step but empty.
|
|
23
|
+
**Fix**: Prefill, infer, or drop the field.
|
|
24
|
+
|
|
25
|
+
### 4. Confirmation budget
|
|
26
|
+
**Ask**: Does each confirmation guard something destructive or irreversible?
|
|
27
|
+
**Detect**: Confirmations on safe/undoable actions; double confirmations.
|
|
28
|
+
**Fix**: Remove the dialog; prefer undo over confirm.
|
|
29
|
+
|
|
30
|
+
### 5. Dead-end audit
|
|
31
|
+
**Ask**: After every action, is the next step obvious from the resulting screen?
|
|
32
|
+
**Detect**: Success screens with no onward action; flows ending at a bare toast; back-button-only exits.
|
|
33
|
+
**Fix**: Every terminal screen offers the likely next action ("View it", "Create another", "Back to list").
|
|
34
|
+
|
|
35
|
+
### 6. Shortest path to value
|
|
36
|
+
**Ask**: How many steps from first arrival to the first moment of real value?
|
|
37
|
+
**Detect**: Walk the new-user story counting steps before the user has DONE the core thing once.
|
|
38
|
+
**Fix**: Defer setup (profile, preferences, invites) until after first success.
|
|
39
|
+
|
|
40
|
+
### 7. Recognition over recall
|
|
41
|
+
**Ask**: Must the user remember anything from a previous screen to succeed here?
|
|
42
|
+
**Detect**: IDs/names/values that must be memorized or re-typed across screens; codes with no copy affordance.
|
|
43
|
+
**Fix**: Carry context forward; show, don't quiz.
|
|
44
|
+
|
|
45
|
+
## Screen heuristics (per screen)
|
|
46
|
+
|
|
47
|
+
### 8. Take-away test
|
|
48
|
+
**Ask**: For each visible element — if removed, would the user still succeed?
|
|
49
|
+
**Detect**: Elements no story step ever uses; decoration competing with content.
|
|
50
|
+
**Fix**: Remove, collapse behind disclosure, or move to an advanced section. Removal is the default; keeping needs the justification.
|
|
51
|
+
|
|
52
|
+
### 9. One primary action
|
|
53
|
+
**Ask**: Squinting at the screen, is exactly one action visually dominant — and is it the right one?
|
|
54
|
+
**Detect**: Zero or 2+ equally-weighted primary buttons; the visually loudest element isn't the next step.
|
|
55
|
+
**Fix**: One primary style per screen; demote the rest to secondary/tertiary.
|
|
56
|
+
|
|
57
|
+
### 10. Hierarchy matches importance
|
|
58
|
+
**Ask**: Does visual weight (size, color, position) track how much the user cares?
|
|
59
|
+
**Detect**: Key info smaller/quieter than chrome, badges, or metadata; everything bold (emphasis inflation).
|
|
60
|
+
**Fix**: Re-weight: important things big and first, trivia small and last; spend emphasis sparingly.
|
|
61
|
+
|
|
62
|
+
### 11. Progressive disclosure
|
|
63
|
+
**Ask**: Is anything shown before the user needs it?
|
|
64
|
+
**Detect**: Long forms where later fields depend on earlier answers; advanced options mixed with basics; help paragraphs above the action.
|
|
65
|
+
**Fix**: Stage it — show the next thing when the previous thing is done.
|
|
66
|
+
|
|
67
|
+
### 12. Once and only once (information)
|
|
68
|
+
**Ask**: Is each fact stated exactly once per screen?
|
|
69
|
+
**Detect**: Same title/status/metadata in header AND breadcrumb AND card AND sidebar.
|
|
70
|
+
**Fix**: Pick the canonical surface; the rest reference it or drop it.
|
|
71
|
+
|
|
72
|
+
## App heuristics (cross-journey — redundancy critic)
|
|
73
|
+
|
|
74
|
+
### 13. One way to do one thing
|
|
75
|
+
**Ask**: Is each duplicate route to a goal a deliberate shortcut, or drift?
|
|
76
|
+
**Detect**: Alternate paths fields in the catalog; same verb in two menus; two screens that both edit the same entity.
|
|
77
|
+
**Fix**: Mark one route canonical; keep shortcuts only when they're accelerators of the canonical route, not parallel implementations.
|
|
78
|
+
|
|
79
|
+
### 14. One concept, one name
|
|
80
|
+
**Ask**: Is every concept called the same thing everywhere?
|
|
81
|
+
**Detect**: "Workspace" vs "project" vs "space" for the same entity across screens, docs, and buttons.
|
|
82
|
+
**Fix**: Pick one term; rename all surfaces.
|
|
83
|
+
|
|
84
|
+
### 15. Feature overlap
|
|
85
|
+
**Ask**: Do two features substantially do the same job?
|
|
86
|
+
**Detect**: Two tools/panels/reports whose capabilities overlap enough that users won't know which to use.
|
|
87
|
+
**Fix**: Merge, sharply differentiate, or remove one.
|
|
88
|
+
|
|
89
|
+
### 16. Navigation depth vs. importance
|
|
90
|
+
**Ask**: Is anything users need often buried 3+ levels deep? Anything rare sitting at top level?
|
|
91
|
+
**Detect**: Map each core-story destination to its click depth from home.
|
|
92
|
+
**Fix**: Promote the frequent, demote the rare.
|
|
93
|
+
|
|
94
|
+
## Verdict calibration
|
|
95
|
+
|
|
96
|
+
| Verdict | Meaning |
|
|
97
|
+
|---------|---------|
|
|
98
|
+
| **minimal** | Actual ≈ ideal steps; take-away pass finds little; no redundancy involving this journey |
|
|
99
|
+
| **acceptable** | 1-2 extra steps or a few removable elements; nothing structural |
|
|
100
|
+
| **convoluted** | 3+ extra steps, forced detours, duplicated surfaces, or a screen failing 3+ heuristics |
|
|
101
|
+
|
|
102
|
+
Do not grade on a curve. If everything is minimal, the report says so — that is
|
|
103
|
+
a useful result, not a failed critique.
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ux-paths
|
|
3
|
+
description: Generates a catalog of realistic user journey stories (short feature exercises and long end-to-end flows) by reading the codebase. Use when asked to create stories, map user journeys, walk or map the app, generate ux paths or test scenarios, or find out what users can do.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# UX Paths: user journey story generator
|
|
7
|
+
|
|
8
|
+
Read the codebase and write a catalog of realistic user journeys: short stories
|
|
9
|
+
(one feature) and long stories (a complete workflow). The catalog feeds `ux-walker`
|
|
10
|
+
(walks stories in a browser) and `ux-flow` (critiques simplicity and redundancy).
|
|
11
|
+
|
|
12
|
+
This skill runs on the default model. Do not switch to a premium model for it.
|
|
13
|
+
Keep notes and files compact to save credits. There are no helper agents: you do
|
|
14
|
+
every step yourself, one unit at a time, in this one session.
|
|
15
|
+
|
|
16
|
+
## Parameters
|
|
17
|
+
|
|
18
|
+
- Focus area: optional text from the user (for example "checkout"). Still map the
|
|
19
|
+
whole app, but write more stories for the focus.
|
|
20
|
+
- Output directory: `docs/ux-paths/`.
|
|
21
|
+
- Depth: `quick` = 5 topics, 3-5 stories each. `deep` (default) = 8-12 topics, 5-15 stories each.
|
|
22
|
+
|
|
23
|
+
## Work from files, not memory
|
|
24
|
+
|
|
25
|
+
The work is long, so the files are the state. After each unit, write its file
|
|
26
|
+
immediately and keep only a one-line summary in context (for example
|
|
27
|
+
"auth: 9 stories, 2 gaps"). If the session is compacted or restarted, do not start
|
|
28
|
+
over: list `docs/ux-paths/topics/`, compare with the topic list in
|
|
29
|
+
`discovery.md`, and continue with the first topic that has no file. Use the `todo`
|
|
30
|
+
tool to track the topic list.
|
|
31
|
+
|
|
32
|
+
## Step 0: setup
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
mkdir -p docs/ux-paths/topics
|
|
36
|
+
ls docs/ux-paths docs/ux-paths/topics # resume if files already exist
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Step 1: discovery
|
|
40
|
+
|
|
41
|
+
Scan the code (grep, find, ls, read) and write `docs/ux-paths/discovery.md`.
|
|
42
|
+
Read `references/path-categories.md` (in this skill's folder) for the category list.
|
|
43
|
+
Find:
|
|
44
|
+
|
|
45
|
+
1. Application type (web app, mobile, desktop, CLI, API, library).
|
|
46
|
+
2. Entry points: routes, pages, screens, commands, endpoints.
|
|
47
|
+
3. Features: everything a user can do.
|
|
48
|
+
4. User roles (admin, member, guest, free, paid).
|
|
49
|
+
5. Navigation structure.
|
|
50
|
+
6. State transitions: login, logout, onboarding, setup, subscription changes.
|
|
51
|
+
7. Data entities and their create, read, update, delete actions.
|
|
52
|
+
8. Integrations: OAuth providers, external services, webhooks.
|
|
53
|
+
9. Error, empty and loading states.
|
|
54
|
+
10. Feature flags and permission-gated UI.
|
|
55
|
+
|
|
56
|
+
Search by framework: router config, page components, nav components, forms,
|
|
57
|
+
dialogs and confirmations, API routes, auth guards, config and env flags.
|
|
58
|
+
|
|
59
|
+
Use this format:
|
|
60
|
+
|
|
61
|
+
```markdown
|
|
62
|
+
# App Discovery: {App Name}
|
|
63
|
+
|
|
64
|
+
## Application Type
|
|
65
|
+
## Tech Stack
|
|
66
|
+
## User Roles
|
|
67
|
+
- {role}: {what they can do}
|
|
68
|
+
## Feature Map
|
|
69
|
+
### {Feature Area}
|
|
70
|
+
- {capability}
|
|
71
|
+
## Navigation Structure
|
|
72
|
+
## Data Entities
|
|
73
|
+
- {entity}: create / read / update / delete
|
|
74
|
+
## Integrations
|
|
75
|
+
- {service}: {what it does}
|
|
76
|
+
## Recommended Story Topics
|
|
77
|
+
1. {Topic} - {rationale}
|
|
78
|
+
(8-12 topics that together cover the whole app)
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
The Recommended Story Topics list is the work list for Step 2.
|
|
82
|
+
|
|
83
|
+
## Step 2: stories, one topic at a time
|
|
84
|
+
|
|
85
|
+
For each topic in order: read the code for that topic (components, routes,
|
|
86
|
+
handlers), write 5-15 stories to `docs/ux-paths/topics/{topic-slug}.md`, then move
|
|
87
|
+
to the next topic. Write the file before starting the next topic. Do not re-read
|
|
88
|
+
earlier topic files; the discovery file is enough context.
|
|
89
|
+
|
|
90
|
+
Story format:
|
|
91
|
+
|
|
92
|
+
```markdown
|
|
93
|
+
## STORY-{NNN}: {Descriptive Title}
|
|
94
|
+
|
|
95
|
+
**Type**: short | medium | long
|
|
96
|
+
**Topic**: {topic}
|
|
97
|
+
**Persona**: {who is doing this}
|
|
98
|
+
**Goal**: {what they want to accomplish}
|
|
99
|
+
**Preconditions**: {state that must exist first}
|
|
100
|
+
**Ideal path**: {fewest steps a well-designed UI could need: an integer plus one line of reasoning. ux-walker and ux-flow measure friction against this.}
|
|
101
|
+
**Alternate paths**: {other routes in the code to the same goal (different menu, shortcut, duplicate feature), or "none found"}
|
|
102
|
+
|
|
103
|
+
### Steps
|
|
104
|
+
1. {User action} -> {Expected result}
|
|
105
|
+
|
|
106
|
+
### Variations
|
|
107
|
+
- {Variation}: {what changes and why}
|
|
108
|
+
|
|
109
|
+
### Edge Cases
|
|
110
|
+
- {Edge case}: {what happens}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Number stories per topic file with temporary ids (STORY-001 within the file);
|
|
114
|
+
Step 3 renumbers them.
|
|
115
|
+
|
|
116
|
+
Sizes:
|
|
117
|
+
|
|
118
|
+
- Short (2-5 steps): one feature in isolation (change a setting, delete an item, search).
|
|
119
|
+
- Medium (5-15 steps): one workflow (create a resource and check it appears; hit an error, recover, finish).
|
|
120
|
+
- Long (15-40 steps): an end-to-end journey (discover, sign up, onboard, use the core feature, customize).
|
|
121
|
+
|
|
122
|
+
Realism rules:
|
|
123
|
+
|
|
124
|
+
- Reference only UI elements, routes and features that exist in the code, with the real button labels, menu items and page titles. Do not invent features.
|
|
125
|
+
- Use specific personas and plausible data. Good: "Maria, a team lead, adds 3 new hires before standup." Bad: "User clicks settings."
|
|
126
|
+
- Include moments where the user hesitates, errs or changes their mind.
|
|
127
|
+
- When the code has more than one route to the same goal, list all of them in **Alternate paths**. Duplicate paths are a redundancy signal for `ux-flow`; do not silently pick one. "None found" is a valid answer; an invented alternate path is not.
|
|
128
|
+
- Note when the same information shows on several surfaces (list, detail, sidebar). This feeds the Redundancy Candidates section.
|
|
129
|
+
|
|
130
|
+
## Step 3: consolidate
|
|
131
|
+
|
|
132
|
+
Read the topic files one at a time and build `docs/ux-paths/catalog.md`:
|
|
133
|
+
|
|
134
|
+
1. Assign sequential ids (STORY-001, STORY-002, ...) across all topics.
|
|
135
|
+
2. Merge near-duplicate stories.
|
|
136
|
+
3. Note cross-topic overlaps and add a few cross-topic stories.
|
|
137
|
+
4. Add a dependency graph (which stories must run before others).
|
|
138
|
+
5. Check coverage: every feature in `discovery.md` appears in at least one story. List gaps.
|
|
139
|
+
6. Build the Redundancy Candidates section from the Alternate paths fields and multi-surface notes.
|
|
140
|
+
|
|
141
|
+
If the topic files are too large to hold at once, append each topic's stories to
|
|
142
|
+
`catalog.md` as you read it and write the summary sections last.
|
|
143
|
+
|
|
144
|
+
Catalog format:
|
|
145
|
+
|
|
146
|
+
````markdown
|
|
147
|
+
# UX Path Catalog: {App Name}
|
|
148
|
+
|
|
149
|
+
Generated: {date}
|
|
150
|
+
Total Stories: {count}
|
|
151
|
+
Coverage: {features covered} / {total features} ({percentage})
|
|
152
|
+
|
|
153
|
+
## Summary
|
|
154
|
+
| Type | Count |
|
|
155
|
+
|------|-------|
|
|
156
|
+
| Short | {n} |
|
|
157
|
+
| Medium | {n} |
|
|
158
|
+
| Long | {n} |
|
|
159
|
+
|
|
160
|
+
## Coverage Matrix
|
|
161
|
+
| Feature Area | Stories | Gaps |
|
|
162
|
+
|--------------|---------|------|
|
|
163
|
+
|
|
164
|
+
## Story Dependency Graph
|
|
165
|
+
```text
|
|
166
|
+
STORY-001 (Create Account)
|
|
167
|
+
├── STORY-005 (Configure Settings)
|
|
168
|
+
└── STORY-008 (Create First Project)
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
## All Stories
|
|
172
|
+
### {Topic}
|
|
173
|
+
{stories}
|
|
174
|
+
|
|
175
|
+
## Redundancy Candidates
|
|
176
|
+
### Duplicate paths (same goal, multiple routes)
|
|
177
|
+
- {goal}: via {path A} and {path B}; {same result, or divergent?}
|
|
178
|
+
### Duplicate information (same fact, multiple surfaces)
|
|
179
|
+
- {info}: shown on {screen 1}, {screen 2}
|
|
180
|
+
### Overlapping features/tools
|
|
181
|
+
- {feature X} and {feature Y} both {capability}
|
|
182
|
+
|
|
183
|
+
## Gaps & Recommendations
|
|
184
|
+
````
|
|
185
|
+
|
|
186
|
+
## Step 4: report
|
|
187
|
+
|
|
188
|
+
Tell the user: total stories, counts by type, coverage percentage, notable gaps,
|
|
189
|
+
and the path `docs/ux-paths/catalog.md`.
|
|
190
|
+
|
|
191
|
+
## Tips
|
|
192
|
+
|
|
193
|
+
- Discovery is the foundation. A missed feature area becomes a gap in the whole catalog.
|
|
194
|
+
- Let the code decide the topics; do not force a fixed list.
|
|
195
|
+
- The happy path is one story. Error paths, edge cases and mobile viewports are worth capturing as variations.
|
|
196
|
+
- Re-run when the app changes; the catalog is a living document.
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
# UX Path Categories Reference
|
|
2
|
+
|
|
3
|
+
Use this reference to ensure comprehensive coverage across any application type. Not all categories apply to every app — the discovery agent should select the relevant ones.
|
|
4
|
+
|
|
5
|
+
## Universal Categories (apply to almost any app)
|
|
6
|
+
|
|
7
|
+
### Authentication & Identity
|
|
8
|
+
- Sign up (email, OAuth, SSO, magic link)
|
|
9
|
+
- Log in / log out
|
|
10
|
+
- Password reset / change
|
|
11
|
+
- Session management (timeout, refresh, multi-device)
|
|
12
|
+
- Account deletion / deactivation
|
|
13
|
+
- Profile management
|
|
14
|
+
|
|
15
|
+
### Onboarding & First-Time Experience
|
|
16
|
+
- First launch / empty state
|
|
17
|
+
- Setup wizard / guided tour
|
|
18
|
+
- Feature discovery
|
|
19
|
+
- Import existing data
|
|
20
|
+
- Invite flow (being invited vs inviting others)
|
|
21
|
+
|
|
22
|
+
### Core CRUD Operations
|
|
23
|
+
- Create primary entities
|
|
24
|
+
- Read / browse / search entities
|
|
25
|
+
- Update / edit entities
|
|
26
|
+
- Delete / archive entities
|
|
27
|
+
- Bulk operations (select all, batch delete, batch edit)
|
|
28
|
+
|
|
29
|
+
### Navigation & Discovery
|
|
30
|
+
- Primary navigation (sidebar, tab bar, menu)
|
|
31
|
+
- Search and filtering
|
|
32
|
+
- Breadcrumbs / back navigation
|
|
33
|
+
- Deep linking / direct URL access
|
|
34
|
+
- Keyboard navigation / shortcuts
|
|
35
|
+
|
|
36
|
+
### Settings & Configuration
|
|
37
|
+
- User preferences (theme, language, notifications)
|
|
38
|
+
- App configuration (integrations, API keys, webhooks)
|
|
39
|
+
- Permission / role management
|
|
40
|
+
- Billing / subscription management
|
|
41
|
+
|
|
42
|
+
### Error States & Recovery
|
|
43
|
+
- Network failure mid-operation
|
|
44
|
+
- Invalid input / validation errors
|
|
45
|
+
- 404 / not found pages
|
|
46
|
+
- Permission denied
|
|
47
|
+
- Rate limiting
|
|
48
|
+
- Session expiration during work
|
|
49
|
+
- Undo / revert actions
|
|
50
|
+
|
|
51
|
+
### Data Management
|
|
52
|
+
- Import / export
|
|
53
|
+
- Backup / restore
|
|
54
|
+
- Pagination / infinite scroll
|
|
55
|
+
- Sorting / filtering
|
|
56
|
+
- Data visualization (charts, graphs, tables)
|
|
57
|
+
|
|
58
|
+
## Web App Categories
|
|
59
|
+
|
|
60
|
+
### Responsive / Multi-Device
|
|
61
|
+
- Desktop viewport workflows
|
|
62
|
+
- Mobile viewport workflows
|
|
63
|
+
- Tablet viewport workflows
|
|
64
|
+
- Touch vs mouse interactions
|
|
65
|
+
|
|
66
|
+
### Real-time Features
|
|
67
|
+
- Live updates / WebSocket events
|
|
68
|
+
- Collaborative editing
|
|
69
|
+
- Notifications (in-app, push, email)
|
|
70
|
+
- Presence indicators
|
|
71
|
+
|
|
72
|
+
### Content Management
|
|
73
|
+
- Rich text editing
|
|
74
|
+
- File / image upload
|
|
75
|
+
- Media preview
|
|
76
|
+
- Version history
|
|
77
|
+
|
|
78
|
+
## Mobile App Categories
|
|
79
|
+
|
|
80
|
+
### Platform-Specific
|
|
81
|
+
- iOS-specific interactions (swipe, force touch, share sheet)
|
|
82
|
+
- Android-specific (back button, notifications, intents)
|
|
83
|
+
- Permissions (camera, location, contacts, notifications)
|
|
84
|
+
- Offline mode / sync
|
|
85
|
+
|
|
86
|
+
### Gestures & Interactions
|
|
87
|
+
- Pull to refresh
|
|
88
|
+
- Swipe actions
|
|
89
|
+
- Long press menus
|
|
90
|
+
- Drag and drop
|
|
91
|
+
|
|
92
|
+
## CLI / Terminal App Categories
|
|
93
|
+
|
|
94
|
+
### Command Patterns
|
|
95
|
+
- Help / usage display
|
|
96
|
+
- Flag / argument parsing
|
|
97
|
+
- Interactive prompts
|
|
98
|
+
- Pipe / stdin input
|
|
99
|
+
- Output formatting (JSON, table, plain)
|
|
100
|
+
- Verbose / debug modes
|
|
101
|
+
|
|
102
|
+
### Session Management
|
|
103
|
+
- Config file management
|
|
104
|
+
- Environment variable usage
|
|
105
|
+
- Authentication tokens
|
|
106
|
+
|
|
107
|
+
## API / Backend Categories
|
|
108
|
+
|
|
109
|
+
### Endpoint Patterns
|
|
110
|
+
- CRUD endpoint usage
|
|
111
|
+
- Authentication flows (API keys, OAuth tokens)
|
|
112
|
+
- Pagination through results
|
|
113
|
+
- Error response handling
|
|
114
|
+
- Rate limit behavior
|
|
115
|
+
- Webhook delivery / retry
|
|
116
|
+
|
|
117
|
+
## Desktop App Categories
|
|
118
|
+
|
|
119
|
+
### Window Management
|
|
120
|
+
- Multi-window workflows
|
|
121
|
+
- Menu bar interactions
|
|
122
|
+
- System tray
|
|
123
|
+
- Keyboard shortcuts
|
|
124
|
+
- File system integration (open, save, drag-drop)
|
|
125
|
+
|
|
126
|
+
### OS Integration
|
|
127
|
+
- Native notifications
|
|
128
|
+
- File associations
|
|
129
|
+
- Auto-update flow
|
|
130
|
+
- Deep link handling
|
|
131
|
+
|
|
132
|
+
## Cross-Cutting Concerns (apply to multiple categories)
|
|
133
|
+
|
|
134
|
+
### Collaboration
|
|
135
|
+
- Sharing / permissions
|
|
136
|
+
- Comments / annotations
|
|
137
|
+
- Activity feed / audit log
|
|
138
|
+
- Team management
|
|
139
|
+
|
|
140
|
+
### Performance & Loading
|
|
141
|
+
- Slow network behavior
|
|
142
|
+
- Large dataset handling
|
|
143
|
+
- Background processing feedback
|
|
144
|
+
- Progress indicators
|
|
145
|
+
|
|
146
|
+
### Accessibility
|
|
147
|
+
- Screen reader navigation
|
|
148
|
+
- Keyboard-only operation
|
|
149
|
+
- High contrast / reduced motion
|
|
150
|
+
|
|
151
|
+
## Story Complexity Heuristics
|
|
152
|
+
|
|
153
|
+
| Type | Steps | Scope | Example |
|
|
154
|
+
|------|-------|-------|---------|
|
|
155
|
+
| Short | 2-5 | Single feature | Toggle dark mode |
|
|
156
|
+
| Medium | 5-15 | One workflow | Create and share a document |
|
|
157
|
+
| Long | 15-40 | Cross-feature journey | New user onboards, creates project, invites team, completes first task |
|
|
158
|
+
|
|
159
|
+
## Persona Templates
|
|
160
|
+
|
|
161
|
+
Adapt these to the specific app:
|
|
162
|
+
|
|
163
|
+
- **New User**: Never seen the app. Needs onboarding. May be confused.
|
|
164
|
+
- **Regular User**: Uses the app daily. Knows the basics. Has preferences set.
|
|
165
|
+
- **Power User**: Uses advanced features. Keyboard shortcuts. Custom workflows.
|
|
166
|
+
- **Admin**: Manages other users. Configures the system. Handles edge cases.
|
|
167
|
+
- **Returning User**: Used the app months ago. Forgot some things. Has old data.
|
|
168
|
+
- **Impatient User**: Wants to accomplish something fast. Skips tutorials. Gets frustrated by friction.
|
|
169
|
+
- **Cautious User**: Reads everything. Wants confirmation before destructive actions. Worries about data loss.
|