super-ux 0.7.0 → 0.17.1

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/CHANGELOG.md CHANGED
@@ -4,6 +4,273 @@ All notable changes to this project are documented in this file. The format
4
4
  follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
5
5
  follow [SemVer](https://semver.org/spec/v2.0.0.html).
6
6
 
7
+ ## [0.17.1] - 2026-07-23
8
+
9
+ ### Fixed
10
+
11
+ - Manifest descriptions no longer hardcode a practice count ("100" was
12
+ already stale at 115) — they now say "a tag-indexed best-practices
13
+ catalog + PRN heuristics + component guidelines", so the catalog can grow
14
+ without a description bump.
15
+
16
+ ## [0.17.0] - 2026-07-23
17
+
18
+ ### Added
19
+
20
+ - **Component & control guidelines** (`references/component-guidelines.md`)
21
+ + 15 practices (BP-101..115) from verified design systems (Apple HIG,
22
+ Material Design 3, W3C ARIA Authoring Practices Guide, GOV.UK Design
23
+ System): a "which control for the job" decision table (radios vs
24
+ checkboxes vs select, switch vs checkbox, action sheet vs alert, modal vs
25
+ disclosure, combobox, bottom nav vs rail, FAB budget, dates, toasts) plus
26
+ platform rules (one-primary/never-destructive-primary, focus-trap+ESC+
27
+ return for modals, APG combobox roles/keys, every-control-ships-all-states)
28
+ and the "use the platform component of record" stance. Taxonomy gains a
29
+ Components group; practice-selection routes every graphical UI to
30
+ BP-101..115; wired into `ux-flows` screen registration, the principles
31
+ doc, and the system map.
32
+
33
+ ## [0.16.2] - 2026-07-23
34
+
35
+ ### Fixed
36
+
37
+ - Marketplace/plugin descriptions now reflect the full system (flows, the
38
+ screens.md UI map with Figma frames, the linter, the practice catalog) —
39
+ they had lagged at the foundation/scenarios/audit-only wording.
40
+
41
+ ## [0.16.1] - 2026-07-23
42
+
43
+ ### Fixed
44
+
45
+ - Consistency pass across all docs: unified every contract stamp to
46
+ `ux-contract v4` (were mixed v2/v3/v4); added the `screens.md` MAP step
47
+ and Figma mockups to the pipeline in `ux-design-principles.md` (8 steps,
48
+ aligned with the v4 chain); `practice-selection.md` now spans the full
49
+ catalog (BP-001..100) and routes Figma-enabled products to BP-091..100;
50
+ README reflects 100 practices and links the Figma references. No
51
+ behavioral change — documentation coherence only.
52
+
53
+ ## [0.16.0] - 2026-07-23
54
+
55
+ ### Added
56
+
57
+ - **Figma file-structure guide** (`references/figma-structure.md`) + 10
58
+ practices (BP-091..BP-100) from verified sources (Figma Best Practices,
59
+ Figma Learn, Design Systems Collective's 2025/26 Variables playbook,
60
+ zeroheight): cover+index pages, one page per flow, **frames named
61
+ `SCR-NN/<Screen>/<state>` to match `screens.md` exactly** (deterministic
62
+ lookup, checkable drift), purpose-based code-matched naming, variables as
63
+ three-tier tokens (primitive → semantic → component) with modes,
64
+ variants-for-states vs components-for-objects, auto layout everywhere,
65
+ build-on-the-library, layer hygiene, one-convention-plus-an-owner
66
+ governance. Taxonomy gains `figma`/`design-system`/`handoff`/
67
+ `maintainability`. Wired into `figma-integration.md`, the `ux-flows`
68
+ design loop, and the system map.
69
+
70
+ ## [0.15.0] - 2026-07-23
71
+
72
+ ### Added
73
+
74
+ - **Deterministic linter** (`plugins/super-ux/scripts/ux_lint.py`, seeded
75
+ into projects as `docs/ux/lint.py`, run via `/ux-lint` or
76
+ `python3 docs/ux/lint.py`) — turns the prose rules into a check that
77
+ fails: missing Figma frames per screen state (when Figma enabled),
78
+ flows referencing non-existent `SCR-IDs`, unresolved scenario traces,
79
+ must/should stories without scenarios, `built` screens without coverage,
80
+ index↔entry desync, duplicate/gapped IDs, orphan screens, broken relative
81
+ links. Stdlib-only, tolerant parsing (strips HTML comments so template
82
+ examples never false-positive), exit codes 0/1/2, `--strict`. Wired into
83
+ the hard rule, `/ux` inspect, and every skill's "run the linter after
84
+ changes" pointer; recommended for CI/pre-commit.
85
+ - **System map** (`references/system-map.md`) — the whole pipeline, files,
86
+ skills, and the four sync rules (chain-first, same-change, no-drift,
87
+ run-the-linter) on one page; every SKILL.md opens with a pointer to it so
88
+ an agent entering from any trigger sees the whole system. A project-facing
89
+ copy (`templates/README.md` → `docs/ux/README.md`) is seeded too.
90
+ - Installers (`install.sh`, `bin/super-ux.js`), `/ux-rule`, and `/ux`
91
+ repair now seed `docs/ux/README.md` and refresh `docs/ux/lint.py`. The
92
+ plugin validator compiles the linter.
93
+
94
+ ## [0.14.0] - 2026-07-23
95
+
96
+ ### Added
97
+
98
+ - **UI Screen Registry** (`docs/ux/screens.md`, ux-contract v4) — the
99
+ canonical design map: one entry per screen with a stable `SCR-NN` id,
100
+ every state (loading/empty/error/success) carrying its own Figma frame
101
+ link, plus wireframe, code coverage, scenarios touching it, related
102
+ UX/UI resources (components, tokens, assets, data deps), and a Status
103
+ (designed → built → drifted → retired). A Design system block records the
104
+ Figma library and where tokens/components/assets live in code. Flows now
105
+ reference screens by `SCR-ID` instead of duplicating specs, so a screen
106
+ used by many flows is described once.
107
+ - **Same-change update rule extended to the UI**: any interface change must
108
+ update `screens.md` (and, when Figma is enabled, the Figma frame plus its
109
+ link) in the same change; code diverging from a screen's record or a
110
+ stale/broken Figma link is a `drifted` finding. Wired into the hard rule
111
+ (template, /ux-rule, super-ux.mdc, README), `ux-flows` Update, and
112
+ `/ux-update`.
113
+ - **Audit drift + coverage** now check code vs the screen registry (states
114
+ rendered, elements present, coverage accurate → `drifted`), Figma-link
115
+ presence per state, and registry orphans (screens unused by flows, flows
116
+ referencing missing SCR-IDs).
117
+ - `ux-flows` owns and maintains `screens.md`; templates, installers
118
+ (`install.sh`, `bin/super-ux.js`), `/ux` skeleton, and `/ux-rule` seed it.
119
+
120
+ ## [0.13.0] - 2026-07-23
121
+
122
+ ### Added
123
+
124
+ - **Figma design integration** (`references/figma-integration.md`), an
125
+ opt-in surface enabled by default: the agent asks once at the start of
126
+ design whether to mock up in Figma; if yes and the Figma MCP isn't
127
+ connected it recommends connecting it (never blocks — degrades to
128
+ markdown + wireframes and syncs later); records the Figma file in
129
+ `foundation.md` → Design tooling before drawing; during `ux-flows` Design
130
+ mirrors every screen-state into a Figma frame applying the visual-craft
131
+ practices (BP-079..090) as hard constraints; **every screen row carries
132
+ its Figma frame deep-link** (flows.md Screens & states gains a Figma
133
+ column) — a screen without a frame link is an incomplete-design finding.
134
+ - **Explicit build gate** in the hard rule (templates/claude-rule,
135
+ /ux-rule, super-ux.mdc, README, ux-flows DoD): do NOT write interface
136
+ code until the UX workflow is done — chain designed and approved, and
137
+ (Figma on) the UI mocked up with every screen linked. Stated plainly to
138
+ the user, who is not expected to know the internals.
139
+ - Foundation gains a Design tooling section; `/ux` step 0 asks the Figma
140
+ question for design tasks; `/ux-flows` and the Cursor flow rule updated.
141
+
142
+ ## [0.12.1] - 2026-07-23
143
+
144
+ ### Fixed
145
+
146
+ - Consistency audit across all documents: `templates/scenarios.md` and
147
+ `templates/audit-report.md` brought up to ux-contract v3 (Traces column,
148
+ action→response steps, Alt paths; Depth/passes header, Context line,
149
+ Practice compliance section); hard-rule text unified across
150
+ `templates/claude-rule.md` and `/ux-rule` (chain wording, all four
151
+ skills, `/ux` entry point; `/ux-rule` now replaces outdated rule blocks);
152
+ `/ux-update` routes feature ideas through the full chain and cascades to
153
+ flows; Cursor `ux-scenarios` rule Index gains Traces; README practice
154
+ count corrected to 90 and hard-rule section aligned; installers
155
+ (`install.sh`, `bin/super-ux.js`, `/ux` repair, `/ux-rule`) now seed all
156
+ three templates (scenarios, foundation, flows), never overwriting.
157
+
158
+ ## [0.12.0] - 2026-07-23
159
+
160
+ ### Added
161
+
162
+ - **Visual craft in the catalog** (BP-079..BP-090): body-text baseline
163
+ (16px / 1.5 line height / 45–75 CPL, target ~66 — Baymard, USWDS, Dyson &
164
+ Haselgrove research chain), single type system (≤2 faces, 1.3–1.6×
165
+ heading scale), contrast floors with softened extremes (WCAG 4.5:1, no
166
+ harsh #000-on-#FFF), 60-30-10 palette with one scarce accent, semantic
167
+ colors as a contract (never repurposed, never color-only), dark mode as a
168
+ designed palette (gray surfaces, desaturated accents, tonal elevation),
169
+ 4/8pt spacing grid with proximity-as-grouping, whitespace-as-hierarchy,
170
+ single-grid alignment, tabular figures for data, microcopy rules (verbs,
171
+ sentence case, stable action names), decoration subtraction. New tag
172
+ group "Visual craft".
173
+ - Selection protocol: "any graphical UI" mandatory set (BP-079..090) +
174
+ artifact rows for screen build/polish, reading surfaces, data tables.
175
+
176
+ ## [0.11.0] - 2026-07-23
177
+
178
+ ### Added
179
+
180
+ - **Practice Selection Protocol** (`references/practice-selection.md`) —
181
+ the deterministic bridge between the catalogs (BP-001..078, PRN-01..16)
182
+ and the design/audit functions: product profile (platform, money model,
183
+ distribution, acquisition, forms, analytics) → mandatory consideration
184
+ sets → per-artifact checklists (onboarding, paywall, upgrade-at-limit,
185
+ trial, winback, rating prompt, forms, navigation, permissions,
186
+ lifecycle, voice/chat, empty states, store listing, experiments) →
187
+ compliance table with verdicts applied/adapted/rejected(reason)/
188
+ deferred(trigger)/missing. No silent skips; no cargo-culting
189
+ (consideration is mandatory, adoption only when a traced job is served);
190
+ user-owned rejections recorded and not re-litigated.
191
+ - **Design function**: `ux-flows` Design gains a mandatory Practice pass —
192
+ compliance table attached to every flow entry before approval.
193
+ - **Audit depth levels**: `quick` (scenarios), `standard` (+ flow
194
+ conformance, default), `deep` (+ heuristic pass, practice pass via the
195
+ protocol, chain coverage) — five ordered passes; report format gains
196
+ Depth and a Practice compliance section.
197
+
198
+ ## [0.10.0] - 2026-07-23
199
+
200
+ ### Added
201
+
202
+ - **Monetization economics in the catalog** (BP-067..BP-078, sourced from
203
+ RevenueCat State of Subscription Apps 2025, OpenView/ProductLed 2025
204
+ benchmarks, converged ASO 2025 guidance): model choice with data (hard
205
+ paywall ~5× freemium download-to-paid; hybrid beats subscription-only),
206
+ first-session paywall placement (>80% of trials start day 0), trial
207
+ design levers (opt-out ~31% vs opt-in ~9%; 17–32-day trials ~46% only
208
+ with engagement), the 14-day conversion window, activation before
209
+ monetization pressure, visible value-metric freemium boundaries,
210
+ upgrade-at-limit triggers, store listing as onboarding screen zero
211
+ (screenshots move conversion 20–35%), the 4.0+ rating loop,
212
+ ad→listing→onboarding coherence, web-to-app funnels.
213
+ - **Monetization as a foundation layer**: `foundation.md` gains a
214
+ Monetization section (model + reason, value metric, free boundary, money
215
+ moments, acquisition coherence); money moments become first-class flows
216
+ (paywall, upgrade-at-limit, trial start/end, cancel/winback, rating
217
+ prompt); per-product scenario checklist extended accordingly;
218
+ `ux-foundation` interview asks how the product earns.
219
+
220
+ ## [0.9.0] - 2026-07-23
221
+
222
+ ### Added
223
+
224
+ - **Catalog expansion from verified sources** (BP-049..BP-066, 18 entries):
225
+ mobile interfaces (thumb-zone placement, platform tap-target sizes with
226
+ the WCAG 2.2 24px floor, gesture affordances, visible navigation, current
227
+ platform design languages — Apple HIG/Liquid Glass 2025, Material 3
228
+ Expressive — motion-as-feedback); web apps & forms (Baymard-backed field
229
+ minimization, guest-first flows, address automation, INP ≤200ms feedback
230
+ budgets, WCAG 2.2 AA baseline); voice & conversational (tiered
231
+ confirmations, echo-what-was-heard error recovery, barge-in, deviation
232
+ tolerance, multimodal pairing, short latency-cued turns, honest AI
233
+ limits). Tag taxonomy extended: voice, ai-chat, web, android, forms,
234
+ checkout, navigation, accessibility, performance, feedback,
235
+ error-recovery.
236
+ - **Plain-language routing in `/ux`**: the user never needs to know skills
237
+ or layers — step 0 asks one everyday-words question (or reads
238
+ `$ARGUMENTS`) and maps intent to the right workflow via a routing table;
239
+ README gains a "one command, plain words" section.
240
+
241
+ ## [0.8.0] - 2026-07-23
242
+
243
+ ### Added
244
+
245
+ - **ux-flows skill** — the HOW layer (`docs/ux/flows.md`): task analysis →
246
+ mermaid user flows (screens, explicit branches, recoverable error edges,
247
+ all entry points) → screen/state tables → optional ASCII wireframes and
248
+ storyboards. Workflows: Design (forward), Reverse (backwards mode for
249
+ existing products, `inferred` tags with file:line evidence), Update,
250
+ Improve (heuristic evaluation → traced before/after redesign proposals).
251
+ - **ux-design-principles.md** — the agent's thinking playbook: the 7-step
252
+ pipeline (research → define → structure → specify → visualize → build →
253
+ verify) with forward and backwards modes, task-analysis method, flow and
254
+ screen rules, heuristics PRN-01..10 (after Nielsen) and cognitive
255
+ principles PRN-11..16 with audit questions, the improvement procedure,
256
+ wireframe/storyboard conventions, anti-patterns.
257
+ - **ux-contract v3** — scenarios become use cases: steps as `user action ->
258
+ system response`, new `Alt paths` field, `Traces` includes `FLW-NN`;
259
+ traceability now covers flows (every node and edge needs a scenario).
260
+ - `ux-audit`: verifies code against flow diagrams (nodes reachable, edges
261
+ wired, states present); new `heuristics` scope (`[PRN-NN]` findings).
262
+ - `/ux-flows` command; `/ux` menu grows to 11 actions including "Improve
263
+ existing UX"; `/ux-init` now chains foundation → flows → scenarios.
264
+ - **UX plans** (`docs/ux/plans/YYYY-MM-DD-<scope>.md`) — the actionable
265
+ output of audits and Improve passes: target interface per affected screen
266
+ (elements, one primary action, states, behavior notes) + a
267
+ CREATE/MODIFY/DELETE change table where every row traces to
268
+ scenario/flow/finding/principle IDs, prioritized by Frequency × Severity
269
+ × Solvability, with a Definition of Done and an autonomous-execution
270
+ handoff (task-pipeline plugin if installed, else superpowers
271
+ writing-plans). Plans are written to be executable without the
272
+ originating conversation.
273
+
7
274
  ## [0.7.0] - 2026-07-20
8
275
 
9
276
  ### Added
package/README.md CHANGED
@@ -33,13 +33,19 @@ flowchart LR
33
33
  | Piece | Purpose |
34
34
  |---|---|
35
35
  | skill `ux-foundation` | The WHY layer (`docs/ux/foundation.md`): personas, Jobs to Be Done with forces, customer journey maps, user stories with Given/When/Then acceptance criteria |
36
- | skill `ux-scenarios` | Maintain `docs/ux/scenarios.md`: scenarios derived from stories/journeys with `Traces:`, updated on every change, validated for conflicts, coverage, and traceability |
36
+ | skill `ux-flows` | The HOW layer + UI map: `docs/ux/flows.md` (task analysis, mermaid user flows referencing screens) and `docs/ux/screens.md` the design map: every screen and state with its **Figma frame link**, wireframe, code coverage, scenarios, and resources, kept in sync on every interface change (default-on Figma mockups apply the visual-craft practices); heuristic UX evaluation and traced redesign proposals |
37
+ | skill `ux-scenarios` | Maintain `docs/ux/scenarios.md`: use-case scenarios (action → system response, alt paths) covering every flow node/edge, `Traces:` to stories and flows, validated for conflicts, coverage, and traceability |
37
38
  | skill `ux-audit` | Batched audit loop with full context: code vs every scenario + its story's acceptance criteria; verdicts PASS/PARTIAL/FAIL/BLOCKED with `file:line` evidence; `coverage` scope audits the chain itself |
38
39
  | `/ux` | **The one command**: sets up whatever is missing, then status across all layers + a menu of applicable actions with one recommended default. Idempotent |
39
- | `/ux-foundation` `/ux-init` `/ux-update` `/ux-audit` `/ux-rule` | Direct controls; `/ux-rule` installs the hard rule into the project's CLAUDE.md |
40
+ | `docs/ux/lint.py` + `/ux-lint` | Deterministic linter: missing Figma frames, unresolved SCR/story traces, orphans, built screens without coverage, index desync, ID gaps, broken links — run after changes and in CI so drift can't merge |
41
+ | [system-map.md](plugins/super-ux/skills/references/system-map.md) | The whole system on one page — pipeline, files, skills, and the four sync rules; every skill points here |
42
+ | `/ux-foundation` `/ux-flows` `/ux-init` `/ux-update` `/ux-audit` `/ux-rule` `/ux-lint` | Direct controls; `/ux-rule` installs the hard rule into the project's CLAUDE.md |
43
+ | [ux-design-principles.md](plugins/super-ux/skills/references/ux-design-principles.md) | How the agent thinks: the design pipeline (forward + backwards), task analysis, flow rules, heuristics PRN-01..16, improvement procedure, anti-patterns |
40
44
  | `cursor/rules/*.mdc` | The same methodology for Cursor (always-on hard rule + three agent-requested rules) |
41
45
  | `templates/` | Skeletons for the foundation, scenario base, audit report, and the CLAUDE.md rule snippet |
42
- | [best-practices.md](plugins/super-ux/skills/references/best-practices.md) | Living, tag-indexed catalog of proven UX/growth practices (seeded with 48 subscription-app laws); agents filter by stage/domain tags and apply what serves a traced job |
46
+ | [component-guidelines.md](plugins/super-ux/skills/references/component-guidelines.md) | When to use which control (radios/select/switch, sheet/alert, modal/disclosure, combobox, nav bar/rail, FAB, dates, toasts) + platform rules from Apple HIG, Material 3, W3C ARIA APG, GOV.UK (BP-101..115) |
47
+ | [best-practices.md](plugins/super-ux/skills/references/best-practices.md) | Living, tag-indexed catalog of 115 proven UX/growth practices — subscription-app laws, mobile/web/voice interface guidance (HIG 2025, M3 Expressive, NN/g, Baymard, WCAG 2.2), monetization economics (RevenueCat/PLG 2025 benchmarks, ASO, freemium boundaries, web2app), visual craft (typography, color, spacing, microcopy), Figma file structure (BP-091..100); selected deterministically via [practice-selection.md](plugins/super-ux/skills/references/practice-selection.md) |
48
+ | [figma-integration.md](plugins/super-ux/skills/references/figma-integration.md) · [figma-structure.md](plugins/super-ux/skills/references/figma-structure.md) | Optional Figma surface (default-on): when/how to mock up, and how to structure the file so frames named `SCR-NN/<Screen>/<state>` map 1:1 to `screens.md` — deterministic lookup, checkable drift |
43
49
 
44
50
  The format all of them share is locked in
45
51
  [scenario-format.md](plugins/super-ux/skills/references/scenario-format.md):
@@ -49,11 +55,21 @@ lifecycle, audit verdicts and severities.
49
55
 
50
56
  ## The hard rule
51
57
 
52
- - `docs/ux/scenarios.md` is the source of truth for all user-facing behavior.
53
- - Any change touching user-facing behavior updates the scenario base **in the
54
- same change**.
55
- - Any new feature or project **starts** with scenarios: draft, validate
56
- against the existing base, approve only then design and build UI.
58
+ - `docs/ux/scenarios.md` is the source of truth for all user-facing
59
+ behavior; foundation (WHY) and flows (HOW) are the layers it traces to.
60
+ - Any change touching user-facing behavior or interface updates **in the
61
+ same change**: scenarios, affected flows, the affected screens in
62
+ `docs/ux/screens.md` (the UI mapstates, elements, coverage), and (Figma
63
+ on) the Figma frames plus their links. Code that diverges from a screen's
64
+ record, or a stale Figma link, is drift the audit flags.
65
+ - Any new feature or project **starts** with the chain: which job, which
66
+ journey stage, which story — then flows and scenarios, validated and
67
+ approved.
68
+ - **Do not write interface code until the UX workflow is done first** — the
69
+ foundation → flows → scenarios chain designed and approved, and (when
70
+ Figma is enabled, the default) the UI mocked up in Figma with every screen
71
+ linked to its frame. Building UI before this is the mistake super-ux
72
+ exists to prevent.
57
73
 
58
74
  ## Install
59
75
 
@@ -105,6 +121,15 @@ three rules into `.cursor/rules/` and seeds `docs/ux/scenarios.md`. An
105
121
  existing scenario base is never overwritten; re-run with `--force` to update
106
122
  rules after a new release.
107
123
 
124
+ ## For the user: one command, plain words
125
+
126
+ You don't need to know the layers or skills. Run `/ux` and say what you
127
+ want in your own words — "стартуем новый продукт", "добавить фичу", "UX
128
+ неудобный, улучши", "проверь что всё работает", "что чинить в первую
129
+ очередь". The agent asks at most one clarifying question, picks the right
130
+ workflow itself, and only shows you human decisions (approve scenarios,
131
+ pick a plan). Everything below this line is internals for the agent.
132
+
108
133
  ## Typical cycle
109
134
 
110
135
  1. `/ux` — first run sets everything up: foundation first (greenfield:
@@ -119,8 +144,10 @@ rules after a new release.
119
144
  batched verification of code vs scenarios (with acceptance criteria);
120
145
  `/ux-audit coverage` — chain gaps. Reports land in
121
146
  `docs/ux/audits/YYYY-MM-DD.md`.
122
- 4. Findings become a prioritized fix plan (Frequency × Severity ×
123
- Solvability) via your planning workflow; build; repeat.
147
+ 4. Findings become a concrete UX plan (`docs/ux/plans/…`): target interface
148
+ per screen + traced CREATE/MODIFY/DELETE change table, prioritized by
149
+ Frequency × Severity × Solvability — offered for autonomous execution
150
+ via task-pipeline (or your planning workflow); build; repeat.
124
151
 
125
152
  ## Development
126
153
 
package/bin/super-ux.js CHANGED
@@ -74,14 +74,20 @@ function installCursor(target, force) {
74
74
  }
75
75
  }
76
76
 
77
- const base = path.join(target, 'docs', 'ux', 'scenarios.md');
78
- if (fs.existsSync(base)) {
79
- console.log(`keep: ${base} exists (never overwritten)`);
80
- } else {
81
- fs.mkdirSync(path.join(target, 'docs', 'ux', 'audits'), { recursive: true });
82
- fs.copyFileSync(path.join(ROOT, 'templates', 'scenarios.md'), base);
83
- console.log(`seed: ${base}`);
77
+ fs.mkdirSync(path.join(target, 'docs', 'ux', 'audits'), { recursive: true });
78
+ for (const tpl of ['scenarios', 'foundation', 'flows', 'screens', 'README']) {
79
+ const dst = path.join(target, 'docs', 'ux', `${tpl}.md`);
80
+ if (fs.existsSync(dst)) {
81
+ console.log(`keep: ${dst} exists (never overwritten)`);
82
+ } else {
83
+ fs.copyFileSync(path.join(ROOT, 'templates', `${tpl}.md`), dst);
84
+ console.log(`seed: ${dst}`);
85
+ }
84
86
  }
87
+ // The linter is code, not a template — refresh it to the shipped version.
88
+ const lintDst = path.join(target, 'docs', 'ux', 'lint.py');
89
+ fs.copyFileSync(path.join(ROOT, 'plugins', 'super-ux', 'scripts', 'ux_lint.py'), lintDst);
90
+ console.log(`sync: ${lintDst}`);
85
91
 
86
92
  console.log(`done: ${installed} installed, ${skipped} skipped`);
87
93
  }
@@ -13,8 +13,14 @@ alwaysApply: true
13
13
  coverage). New user-facing behavior with no scenario is a blocker, not a
14
14
  warning.
15
15
  - Any new feature or project STARTS with the chain: which job does it serve,
16
- which journey stage, which story — then scenarios, validated against the
17
- existing base (conflicts, overlaps, gaps), approved only then design and
18
- build UI. An idea serving no job is challenged, not silently accepted.
19
- - Workflows: `ux-foundation` rule (WHY layer), `ux-scenarios` rule
20
- (scenario base), `ux-audit` rule (evidence-backed audits).
16
+ which journey stage, which story — then flows and scenarios, validated
17
+ against the existing base (conflicts, overlaps, gaps), approved. An idea
18
+ serving no job is challenged, not silently accepted.
19
+ - Do NOT write interface code until the UX workflow is done first: the
20
+ foundation → flows → scenarios chain is designed and approved, and when
21
+ Figma is enabled (default) — the UI is mocked up in Figma with every
22
+ screen linked to its frame. Building UI before this is the exact mistake
23
+ super-ux exists to prevent.
24
+ - Workflows: `ux-foundation` rule (WHY), `ux-flows` rule (flows + Figma
25
+ mockups), `ux-scenarios` rule (scenario base), `ux-audit` rule
26
+ (evidence-backed audits).
@@ -31,4 +31,9 @@ verdict BLOCKED with the exact reason. Never guess, never a courtesy PASS.
31
31
  verdicts with evidence, findings-register table.
32
32
  6. Update the base: `Last audit` = `YYYY-MM-DD VERDICT`; validated →
33
33
  implemented where PASSed. Do not edit scenario content during an audit.
34
- 7. Offer (don't auto-run) to turn FAIL/PARTIAL findings into a work plan.
34
+ 7. With user's go-ahead produce `docs/ux/plans/YYYY-MM-DD-<scope>.md`:
35
+ target interface per affected screen (elements, states, behavior) +
36
+ CREATE/MODIFY/DELETE change table, every row traced to
37
+ scenario/flow/finding IDs, prioritized Frequency × Severity ×
38
+ Solvability. Then offer autonomous execution via the project's task
39
+ pipeline; the plan must be executable without the conversation.
@@ -0,0 +1,56 @@
1
+ ---
2
+ description: "Design or improve user flows (docs/ux/flows.md): apply for task analysis, flow diagrams, screen states, wireframes, heuristic UX evaluation, or any 'improve/fix the UX' request"
3
+ alwaysApply: false
4
+ ---
5
+
6
+ # ux-flows — Design HOW Users Move
7
+
8
+ `docs/ux/flows.md` is the HOW layer between foundation (stories) and
9
+ scenarios: task analysis + mermaid user flows referencing screens by
10
+ `SCR-ID`. The canonical per-screen spec lives in `docs/ux/screens.md` — the
11
+ UI map: every screen and state with its Figma frame, wireframe, code
12
+ coverage, scenarios, and resources. IDs `FLW-NN`/`SCR-NN`, sequential, never
13
+ reused. Any interface change updates `screens.md` (and the Figma frame when
14
+ enabled) in the same change — a screen whose code diverges from its record
15
+ is `drifted`.
16
+
17
+ ## Flow entry (ux-contract v4)
18
+
19
+ Fields: `Traces` (story/job IDs), `Goal` (observable end state), `Entry
20
+ points` (ALL of them), `Success exit`, `Task analysis` (numbered
21
+ user-visible micro-steps), mermaid `flowchart` (screens as
22
+ `Screen: <name>`, decisions as diamonds, `*_err` error nodes with labeled
23
+ recovery edges), `Screens & states` table (each screen:
24
+ loading/empty/error/success + key elements, one primary action).
25
+
26
+ ## Design rules
27
+
28
+ - One flow = one user goal. Task analysis first: cut/merge/default-away
29
+ every step that doesn't serve the job; pull first value as early as
30
+ possible; happy path ≤5 steps or justified.
31
+ - Every decision an explicit branch; every error edge lands on recovery —
32
+ dead ends are defects; all entry points enumerated.
33
+ - Wireframes optional (`docs/ux/wireframes/FLW-NN.md`, ASCII hierarchy +
34
+ primary action, not pixels); storyboard only when usage context drives
35
+ design.
36
+ - Figma mockups optional (default on): if the foundation's Design tooling
37
+ enables Figma and a Figma MCP is available, mirror each screen into a
38
+ frame applying visual-craft practices (BP-079..090), and link every
39
+ screen row to its frame; ask the user once at the start of design.
40
+ - Backwards mode (existing product): reconstruct flows as they ARE from
41
+ code with file:line evidence, tag `inferred` until confirmed; gaps
42
+ between is/should become the improvement backlog.
43
+
44
+ ## Improving existing UX
45
+
46
+ Walk flows against heuristics: system status visible; user's words not
47
+ jargon; undo/cancel/back everywhere; consistency; error prevention over
48
+ error messages; recognition over recall; shortcuts for frequent users;
49
+ minimalist screens; recovery-oriented error text; help in context;
50
+ progressive disclosure; smart defaults; limited choices; familiar
51
+ patterns; prominent primary targets; polished peaks and endings.
52
+
53
+ Violations: `[PRN-NN] node — issue — severity`. Redesign proposals MUST
54
+ trace to a pain/job/story, cite the principle/practice, show flow
55
+ before → after, and state the expected observable effect. Prioritize
56
+ Frequency × Severity × Solvability. Cascade approved changes to scenarios.
@@ -10,7 +10,7 @@ alwaysApply: false
10
10
  stories (ST-NNN)**. IDs sequential, never reused; dropped entries kept, not
11
11
  deleted.
12
12
 
13
- ## Formats (ux-contract v2)
13
+ ## Formats (ux-contract v4)
14
14
 
15
15
  - **Persona `P-NN`:** 1–3 sentences, grounded in data/observation,
16
16
  recognizable by a real user.
@@ -11,8 +11,9 @@ every feature, button, state, error, result. Keep it true.
11
11
  ## File structure (scenario-format v1)
12
12
 
13
13
  Title, then header comment, then: **Index** table
14
- (`| ID | Title | Feature | Persona | Status | Last audit |`), **Personas**
15
- (1–3 sentences each), **Scenarios** grouped by feature.
14
+ (`| ID | Title | Feature | Persona | Traces | Status | Last audit |`),
15
+ **Personas** (pointer to foundation.md when it exists, else defined here),
16
+ **Scenarios** grouped by feature.
16
17
 
17
18
  When `docs/ux/foundation.md` exists, scenarios derive from it: draft per
18
19
  user story / journey stage, fill `Traces:` (e.g. `ST-001 (JTBD-01,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "super-ux",
3
- "version": "0.7.0",
3
+ "version": "0.17.1",
4
4
  "description": "Scenario-driven UI development for AI agents (Claude Code + Cursor): scenario base, scenario-first hard rule, evidence-backed UX audits. This package is the installer CLI.",
5
5
  "bin": {
6
6
  "super-ux": "bin/super-ux.js"
@@ -0,0 +1,35 @@
1
+ # docs/ux — UX design system (super-ux)
2
+
3
+ This folder is the single source of truth for the product's UX. Keep it in
4
+ sync with the code on every interface change.
5
+
6
+ ## The pipeline
7
+
8
+ ```
9
+ Personas · JTBD · Journeys · Stories → Flows → Screens → Scenarios → Audits → Plans
10
+ foundation.md flows.md screens.md scenarios.md audits/ plans/
11
+ ```
12
+
13
+ | File | Holds |
14
+ |------|-------|
15
+ | `foundation.md` | WHO & WHY: personas, jobs-to-be-done, journeys, user stories, monetization, Figma on/off |
16
+ | `flows.md` | HOW: user-flow diagrams (screens, branches, error paths), referencing screens by `SCR-ID` |
17
+ | `screens.md` | THE UI MAP: every screen and state with its Figma frame link, wireframe, code coverage, scenarios, resources |
18
+ | `scenarios.md` | WHAT EXACTLY: use-case scenarios — the source of truth for behavior |
19
+ | `audits/` | audit reports (code vs the chain) |
20
+ | `plans/` | UX plans (target interface + what to create/modify/delete) |
21
+ | `wireframes/` | optional low-fi wireframes / storyboards |
22
+ | `lint.py` | the integrity/drift linter |
23
+
24
+ ## Rules
25
+
26
+ 1. **Design before you build.** A new feature starts here (job → flow →
27
+ screen → scenario), approved, before any UI code.
28
+ 2. **Update in the same change.** Any interface change updates
29
+ `scenarios.md`, affected flows, the affected screens in `screens.md`,
30
+ and (Figma on) the Figma frame plus its link — together, not later.
31
+ 3. **No drift.** Code that diverges from a screen's record, or a stale Figma
32
+ link, is a bug to fix.
33
+ 4. **Lint it.** Run `python3 docs/ux/lint.py` after changes and in CI.
34
+
35
+ Maintained with the super-ux plugin. In Claude Code, run `/ux`.
@@ -1,8 +1,9 @@
1
1
  # UX Audit — YYYY-MM-DD
2
2
 
3
3
  - **Scope:** all
4
- - **Method:** static code trace
5
- - **Base version:** <git SHA of scenarios.md at audit time>
4
+ - **Depth:** standard
5
+ - **Method:** static code trace; passes: scenario, flow conformance
6
+ - **Base version:** <git SHA of docs/ux at audit time>
6
7
 
7
8
  ## Summary
8
9
 
@@ -15,12 +16,20 @@
15
16
  ## Batch 1: <feature> (SCN-001..SCN-005)
16
17
 
17
18
  ### SCN-001 — PASS|PARTIAL|FAIL|BLOCKED
19
+ - **Context:** <traced story acceptance criteria met? per criterion, when foundation exists>
18
20
  - **Evidence:** file:line, file:line
19
21
  - **Findings:**
20
22
  - [AUD-YYYY-MM-DD-01] (critical|major|minor) <finding> -> <suggested fix>
23
+
24
+ Heuristic findings (deep): [PRN-NN] (severity) node — issue -> fix
21
25
  -->
22
26
 
23
27
  ## Findings register
24
28
 
25
29
  | # | Scenario | Severity | Finding | Suggested fix |
26
30
  |---|----------|----------|---------|---------------|
31
+
32
+ ## Practice compliance (deep audits)
33
+
34
+ | Practice | Verdict | How / why not |
35
+ |----------|---------|---------------|
@@ -1,11 +1,26 @@
1
1
  ## UX scenarios — hard rule (super-ux)
2
2
 
3
- - `docs/ux/scenarios.md` is the source of truth for all user-facing behavior.
4
- - Any change that touches user-facing behavior MUST update
5
- `docs/ux/scenarios.md` in the same change (add/adjust scenarios, statuses,
6
- coverage).
7
- - Any new feature or project STARTS with scenarios: draft them, validate
8
- against existing scenarios (conflicts, overlaps, gaps), get them approved —
9
- only then design and build UI.
10
- - Use the `ux-scenarios` skill to maintain the base and `ux-audit` to verify
11
- the codebase against it.
3
+ - `docs/ux/scenarios.md` is the source of truth for all user-facing
4
+ behavior; `docs/ux/foundation.md` (personas, JTBD, journeys, stories) and
5
+ `docs/ux/flows.md` (user flows) are the WHY and HOW layers scenarios
6
+ trace to.
7
+ - Any change that touches user-facing behavior or interface MUST update, in
8
+ the same change: `docs/ux/scenarios.md`; affected flows; the affected
9
+ screens in `docs/ux/screens.md` (the UI map — states, elements,
10
+ coverage); and, when Figma is enabled, the Figma frame(s) plus their
11
+ links in `screens.md`. A screen whose code diverges from its record, or a
12
+ stale Figma link, is drift — the exact thing this system prevents.
13
+ - Any new feature or project STARTS with the chain: which job does it
14
+ serve, which journey stage, which story — then flows and scenarios,
15
+ validated against the existing base, approved.
16
+ - **Do NOT write interface code until the UX workflow is done first:** the
17
+ foundation → flows → scenarios chain is designed and approved, and — when
18
+ Figma is enabled (default) — the UI is mocked up in Figma with every
19
+ screen linked to its frame. Building UI before this is the exact mistake
20
+ super-ux exists to prevent.
21
+ - After any UX change and before calling the work done, run the linter
22
+ `python3 docs/ux/lint.py` — it must pass (errors are drift/broken
23
+ structure; wire it into CI/pre-commit).
24
+ - Use `/ux` as the entry point; skills: `ux-foundation`, `ux-flows`
25
+ (flows + Figma mockups), `ux-scenarios` for maintenance, `ux-audit` for
26
+ evidence-backed verification. Full map: the plugin's system-map reference.
@@ -0,0 +1,30 @@
1
+ # User Flows
2
+
3
+ <!-- Managed with super-ux (ux-contract v4). The HOW layer: task analysis
4
+ and user flows. Flows reference screens by SCR-ID (full specs live in
5
+ screens.md). Scenarios in scenarios.md trace to FLW-IDs and must cover every
6
+ node and edge. -->
7
+
8
+ <!-- ### FLW-01: <user goal>
9
+ - **Traces:** ST-001 (JTBD-01, JRN-01/#2)
10
+ - **Goal:** <observable end state for the user>
11
+ - **Entry points:** <all of them: screen, deep link, push, empty-state CTA>
12
+ - **Success exit:** <where the user lands on success>
13
+ - **Task analysis:**
14
+ 1. <user-visible micro-step; cut everything that doesn't serve the job>
15
+ - **Flow:**
16
+
17
+ ```mermaid
18
+ flowchart TD
19
+ A[Screen: <name>] -->|<action>| B{<decision?>}
20
+ B -->|ok| C[Screen: <next>]
21
+ B -->|fail| B_err[<error + recovery>]
22
+ B_err --> A
23
+ ```
24
+
25
+ - **Screens traversed:**
26
+ | Screen | States used here |
27
+ |--------|------------------|
28
+ | SCR-01 <name> | success |
29
+ | SCR-02 <name> | error, success |
30
+ -->
@@ -1,6 +1,6 @@
1
1
  # UX Foundation
2
2
 
3
- <!-- Managed with super-ux (ux-contract v2). The WHY layer: personas, jobs
3
+ <!-- Managed with super-ux (ux-contract v4). The WHY layer: personas, jobs
4
4
  to be done, customer journeys, user stories. Update when the understanding
5
5
  of users changes; scenarios in scenarios.md trace to the IDs defined here. -->
6
6
 
@@ -27,6 +27,26 @@ data/observation, recognizable by a real user. -->
27
27
  |---|-------|------------|------------|---------------|------|-------------|
28
28
  -->
29
29
 
30
+ ## Monetization
31
+
32
+ <!-- When the product earns money (choose with data, BP-067..070):
33
+ - **Model:** hard paywall | freemium | hybrid | trial (type, length) — and why
34
+ - **Value metric:** <what the paid tier meters>
35
+ - **Free boundary:** <what stays free, where the visible limit sits>
36
+ - **Money moments:** <paywall placement, upgrade triggers, rating prompts, winback>
37
+ - **Acquisition coherence:** <the one story ad -> listing -> onboarding tells>
38
+ -->
39
+
40
+ ## Design tooling
41
+
42
+ <!-- Visual mockups in Figma are optional (default on). Ask the user at the
43
+ start of design; record the choice here (see figma-integration). The Figma
44
+ file and design-system details live in docs/ux/screens.md (the UI map);
45
+ this section just records the on/off choice and the file location.
46
+ - **Figma:** enabled | disabled
47
+ - **Figma file:** <url — one project file, one page per feature/flow group>
48
+ -->
49
+
30
50
  ## User stories
31
51
 
32
52
  <!-- ### ST-001: <short name>
@@ -1,35 +1,34 @@
1
1
  # UX Scenarios
2
2
 
3
- <!-- Managed with super-ux (scenario-format v1). Update in the same change as any user-facing behavior change. -->
3
+ <!-- Managed with super-ux (ux-contract v4). Update in the same change as any user-facing behavior change. -->
4
4
 
5
5
  ## Index
6
6
 
7
- | ID | Title | Feature | Persona | Status | Last audit |
8
- |----|-------|---------|---------|--------|------------|
7
+ | ID | Title | Feature | Persona | Traces | Status | Last audit |
8
+ |----|-------|---------|---------|--------|--------|------------|
9
9
 
10
10
  ## Personas
11
11
 
12
- <!-- Every persona referenced below, 1-3 sentences each: who they are, what
13
- they know, what they want. Example:
14
-
15
- ### new-user
16
- Opens the product for the first time. Knows nothing about it; wants to reach
17
- first value with zero reading.
18
- -->
12
+ <!-- If docs/ux/foundation.md exists, this section is just a pointer to it.
13
+ Otherwise define personas here, 1-3 sentences each: who they are, what they
14
+ know, what they want. -->
19
15
 
20
16
  ## Scenarios
21
17
 
22
18
  <!-- Group scenarios by feature under "## <feature>" headings. Entry shape
23
- (see scenario-format v1 for field rules):
19
+ (see ux-contract v4 for field rules); steps are use-case style — one user
20
+ action per step paired with the observable system response:
24
21
 
25
22
  ### SCN-001: <Title>
26
23
  - **Persona:** <persona-id>
27
24
  - **Feature:** <feature>
25
+ - **Traces:** <ST-…, FLW-… (JTBD-…, JRN-…/#stage) — required when those layers exist>
28
26
  - **Entry point:** <where the user starts>
29
27
  - **Preconditions:** <state required, or "none">
30
28
  - **Steps:**
31
- 1. <one user action per step>
29
+ 1. <user action> -> <observable system response>
32
30
  - **Expected result:** <what the user observes on success>
31
+ - **Alt paths:** <meaningful non-error deviations and system responses, or omit>
33
32
  - **UI elements:** <every button, field, link, dialog, toast involved>
34
33
  - **States covered:** <loading | empty | error | success>
35
34
  - **Errors & recovery:** <each failure: what the user sees, how they recover>
@@ -0,0 +1,41 @@
1
+ # UI Screen Registry
2
+
3
+ <!-- Managed with super-ux (ux-contract v4). The design map: every screen and
4
+ state with its Figma frame, wireframe, code coverage, and related UX/UI
5
+ resources. Update in the same change as any interface change; when Figma is
6
+ enabled, update the frame and re-verify its link in the same change. A screen
7
+ whose code diverges from its record here is a "drifted" finding. -->
8
+
9
+ ## Index
10
+
11
+ | ID | Screen | Used by | Figma | Status | Coverage |
12
+ |----|--------|---------|-------|--------|----------|
13
+
14
+ ## Design system
15
+
16
+ - **Figma library:** <url/name, or "none — platform defaults">
17
+ - **Tokens in code:** <where color/type/spacing tokens live, e.g. src/theme/tokens.ts>
18
+ - **Component source:** <shared UI components dir, e.g. src/components/>
19
+ - **Assets:** <icons/illustrations location>
20
+
21
+ ## Screens
22
+
23
+ <!-- One entry per screen (see ux-contract v4 for field rules):
24
+
25
+ ### SCR-01: <name>
26
+ - **Used by:** <FLW-… and the step(s)>
27
+ - **Purpose:** <the job step this screen serves>
28
+ - **Elements:** <each element; mark the ONE primary action>
29
+ - **States:**
30
+ | State | Trigger | Figma frame | Behavior |
31
+ |-------|---------|-------------|----------|
32
+ | success | default | <frame deep-link> | <what shows> |
33
+ | empty | <trigger> | <frame deep-link> | <prompt to act> |
34
+ | error | <trigger> | <frame deep-link> | <message + recovery> |
35
+ | loading | <trigger> | <frame deep-link> | <skeleton/progress> |
36
+ - **Wireframe:** wireframes/SCR-01.md (optional)
37
+ - **Coverage:** <file:line, or "none yet">
38
+ - **Scenarios:** <SCN-… touching this screen>
39
+ - **Resources:** <related components, shared assets, API/data deps, links>
40
+ - **Status:** designed | built | drifted | retired
41
+ -->