wize-dev-kit 0.1.5 → 0.2.0

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.
Files changed (35) hide show
  1. package/CHANGELOG.md +40 -1
  2. package/README.md +64 -0
  3. package/package.json +1 -1
  4. package/src/method-skills/1-analysis/wize-document-project/workflow.md +147 -20
  5. package/src/method-skills/1-analysis/wize-prfaq/workflow.md +150 -11
  6. package/src/method-skills/1-analysis/wize-product-brief/workflow.md +90 -19
  7. package/src/method-skills/1-analysis/wize-research/workflow.md +101 -9
  8. package/src/method-skills/1-analysis/wize-trigger-map/workflow.md +80 -16
  9. package/src/method-skills/2-plan-workflows/wize-create-prd/workflow.md +132 -23
  10. package/src/method-skills/2-plan-workflows/wize-ux-design/workflow.md +132 -28
  11. package/src/method-skills/2-plan-workflows/wize-ux-scenarios/workflow.md +91 -15
  12. package/src/method-skills/2-plan-workflows/wize-validate-prd/workflow.md +106 -12
  13. package/src/method-skills/3-solutioning/wize-check-implementation-readiness/workflow.md +101 -11
  14. package/src/method-skills/3-solutioning/wize-create-architecture/workflow.md +197 -29
  15. package/src/method-skills/3-solutioning/wize-create-epics-and-stories/workflow.md +127 -12
  16. package/src/method-skills/3-solutioning/wize-design-system/workflow.md +182 -22
  17. package/src/method-skills/3-solutioning/wize-nfr-principles/workflow.md +142 -16
  18. package/src/method-skills/3-solutioning/wize-tech-vision/workflow.md +127 -21
  19. package/src/method-skills/4-implementation/wize-code-review/workflow.md +105 -10
  20. package/src/method-skills/4-implementation/wize-create-story/workflow.md +131 -10
  21. package/src/method-skills/4-implementation/wize-dev-story/workflow.md +115 -17
  22. package/src/method-skills/4-implementation/wize-quick-dev/workflow.md +109 -18
  23. package/src/method-skills/4-implementation/wize-retrospective/workflow.md +112 -10
  24. package/src/method-skills/4-implementation/wize-sprint-planning/workflow.md +85 -10
  25. package/src/method-skills/4-implementation/wize-sprint-status/workflow.md +96 -11
  26. package/src/tea-skills/wize-tea-design/workflow.md +104 -13
  27. package/src/tea-skills/wize-tea-gate/workflow.md +108 -25
  28. package/src/tea-skills/wize-tea-nfr/workflow.md +104 -14
  29. package/src/tea-skills/wize-tea-review/workflow.md +107 -13
  30. package/src/tea-skills/wize-tea-risk/workflow.md +99 -10
  31. package/src/tea-skills/wize-tea-trace/workflow.md +83 -12
  32. package/tools/installer/commands/agent.js +197 -0
  33. package/tools/installer/commands/sync.js +45 -0
  34. package/tools/installer/commands/update.js +172 -0
  35. package/tools/installer/wize-cli.js +24 -8
@@ -3,22 +3,114 @@ code: wize-research
3
3
  name: Research
4
4
  phase: 1-analysis
5
5
  owner: wize-agent-analyst # Pepper Potts
6
- status: stub
6
+ status: ready
7
7
  ---
8
8
 
9
9
  # Research
10
10
 
11
- **Goal.** Synthesize external evidence (market, competitors, analytics, interviews) that informs the brief.
11
+ **Goal.** Surface evidence that hardens the brief and trigger map. Frame the questions Pepper actually needs answered, do focused passes (market / competitors / analytics / interviews), and write the synthesis in a way Maria Hill can quote in the PRD.
12
+
13
+ Pepper drives. Peggy edits prose. Output lands in `.wize/planning/research.md` with raw materials in `.wize/knowledge/research/`.
12
14
 
13
15
  ## Inputs
14
- - Research questions from the brief
15
- - External access (browser, MCPs) and/or attached docs
16
+
17
+ - Open questions in `.wize/planning/brief.md`.
18
+ - Hypotheses in `.wize/planning/ux/trigger-map.md`.
19
+ - External access (browser, MCPs) and/or attached materials (decks, transcripts).
16
20
 
17
21
  ## Outputs
18
- - `.wize/planning/research.md`
22
+
23
+ - `.wize/planning/research.md` — short synthesis (≤ 2 pages) referencing sources.
24
+ - `.wize/knowledge/research/{slug}.md` — one file per major source (raw notes, links, attached PDFs).
19
25
 
20
26
  ## Steps
21
- 1. List the questions to answer.
22
- 2. For each question: gather sources, summarize, cite.
23
- 3. Mark gaps explicitly as `open` so Wizer can re-route.
24
- 4. Hand off back to brief workflow.
27
+
28
+ ### 1. Frame the questions
29
+
30
+ Convert open questions + hypotheses into a numbered list. Each question is:
31
+ - **Specific** — "What's the median onboarding time for the top 5 competitors?" not "How is onboarding usually done?".
32
+ - **Answerable in a finite pass** — if it takes weeks, decompose.
33
+ - **Tagged with category** — `market / competitive / analytics / interview / desk-research / regulatory`.
34
+
35
+ ### 2. Choose the framework that fits each question
36
+
37
+ | Category | Recommended frame | Tools |
38
+ |---|---|---|
39
+ | Market sizing | TAM/SAM/SOM, top-down + bottom-up reconciled | Statista, public filings, gov registries |
40
+ | Competitive | Porter's 5 + feature matrix + pricing scan | competitor sites, G2/Capterra, Pricing/Plans pages |
41
+ | User research | Jobs-to-be-Done (Christensen / Klement) | 5–8 interviews (semi-structured, 30min) |
42
+ | Behavioral | 5W2H + analytics funnel | product analytics (Amplitude/PostHog), session replays |
43
+ | Compliance/legal | Reg list + clause map | gov sites, legal counsel review |
44
+ | Macro context | PESTLE (political/economic/social/technological/legal/environmental) | desk research |
45
+
46
+ ### 3. Run focused passes
47
+
48
+ One question, one pass. Don't bundle. For each:
49
+
50
+ - Define what "enough evidence" looks like before starting.
51
+ - Cite or it didn't happen. Links + access date.
52
+ - When numbers conflict across sources, write down both and flag.
53
+
54
+ ### 4. Synthesize
55
+
56
+ In `research.md`, for each original question, write:
57
+
58
+ ```markdown
59
+ ### Q1. {{the question}}
60
+ **Finding:** one sentence answer.
61
+ **Confidence:** high | medium | low
62
+ **Why we believe it:** 2–3 lines + citations [1][2][3].
63
+ **Implication for the brief/PRD:** what changes (or doesn't) because of this.
64
+ ```
65
+
66
+ Don't include raw quotes here — link to `.wize/knowledge/research/{slug}.md`.
67
+
68
+ ### 5. Flag the gaps
69
+
70
+ End the synthesis with a "Still open" section. List questions we couldn't answer + the cheapest next step (one interview / one analytics query / one expert call). Route back to Wizer with the gap.
71
+
72
+ ## Output template (synthesis)
73
+
74
+ ```markdown
75
+ ---
76
+ status: ready-for-prd
77
+ owner: Pepper Potts
78
+ created: YYYY-MM-DD
79
+ ---
80
+
81
+ # Research — {{project_name}}
82
+
83
+ ## Q1. {{question}}
84
+ **Finding:** …
85
+ **Confidence:** medium
86
+ **Why:** … [1]
87
+ **Implication:** Brief constraint #3 holds; PRD scope can drop feature X.
88
+
89
+ ## Q2. …
90
+
91
+ ## Still open
92
+ - Q5: pricing elasticity in segment S — needs 1 hour with sales lead.
93
+
94
+ ## Sources
95
+ [1] {{title}} — {{url}} (accessed YYYY-MM-DD)
96
+ [2] interview-acme-cto-2026-05-30 — see knowledge/research/acme-cto.md
97
+ ```
98
+
99
+ ## When to use which framework (heuristic)
100
+
101
+ - **JTBD** when you're about to write personas; JTBD is sharper than archetypes.
102
+ - **Porter** when picking a market to enter or a defensible moat.
103
+ - **PESTLE** for projects with regulatory or geopolitical exposure.
104
+ - **5 Whys + analytics funnel** when a metric is bad and the cause isn't obvious.
105
+
106
+ ## Anti-patterns Pepper rejects
107
+
108
+ - Synthesis without citations.
109
+ - "We surveyed users" with no n, no method, no script.
110
+ - Single-source claims with high confidence ("everyone is using X" because of one blog post).
111
+ - Using brand-name competitor research as user research — they're different.
112
+ - Continuing to research when the decision is already made. Stop and ship.
113
+
114
+ ## Hand-off
115
+
116
+ > Research is in `.wize/planning/research.md`. Q3 still open — sales lead has a slot tomorrow. Hill can start the PRD on what's confirmed.
@@ -4,17 +4,21 @@ name: Trigger Map
4
4
  phase: 1-analysis
5
5
  owner: wize-agent-analyst # Pepper Potts
6
6
  absorbs: "WDS Saga — Phase 2 (Trigger Mapping)"
7
- status: stub
7
+ status: ready
8
8
  ---
9
9
 
10
10
  # Trigger Map
11
11
 
12
- **Goal.** Map user psychology to business goals. For each user action we want to drive, identify the **trigger** (need/anxiety/desire) and the **business outcome** it unlocks.
12
+ **Goal.** Map user psychology to business goals. For each user action the product wants to drive, name the **trigger** (the need/anxiety/desire that precedes it), the **friction** that blocks it today, the **business outcome** unlocked, and the **signal** that confirms it happened.
13
+
14
+ This is the bridge between Pepper's brief and Maria Hill's PRD: it forces the team to argue *why* users would do the thing before *what* the team will build.
15
+
16
+ Pepper drives. Output lands in `.wize/planning/ux/trigger-map.md`.
13
17
 
14
18
  ## Inputs
15
19
 
16
- - `.wize/planning/brief.md`
17
- - `.wize/planning/research.md` (if exists)
20
+ - `.wize/planning/brief.md` (vision + audience + success criteria).
21
+ - `.wize/planning/research.md` (when present — strengthens triggers with evidence).
18
22
 
19
23
  ## Outputs
20
24
 
@@ -22,19 +26,79 @@ status: stub
22
26
 
23
27
  ## Steps
24
28
 
25
- 1. **List target user actions.** From the brief, list the 3–8 actions we want users to take.
26
- 2. **For each action**, fill the row:
27
- - **Trigger** what state of mind/need precedes this action?
28
- - **Friction** — what stops users from doing it today?
29
- - **Business outcome** what changes for the business when this action happens?
30
- - **Signal** what telemetry/event proves it happened?
31
- 3. **Validate.** Cite research or mark `hypothesis`.
32
- 4. **Hand off to Mantis** for UX Scenarios.
29
+ ### 1. List target user actions
30
+
31
+ From the brief, list **3–8 actions** users must take for the product to succeed. Verb-led. Concrete.
32
+
33
+ - "Sign up using a work email."
34
+ - "Add a teammate."
35
+ - "Confirm the first invoice."
36
+ - "Get value." (too abstract)
37
+
38
+ If you have more than 8, you're conflating products. Trim.
39
+
40
+ ### 2. Per row: trigger / friction / business outcome / signal
41
+
42
+ For each action, fill four cells. Each cell ≤ 1 sentence.
43
+
44
+ | Field | What goes here |
45
+ |---|---|
46
+ | **Trigger** | The mental state preceding the action. *Need / anxiety / desire.* What makes the user think "I need to do this now"? |
47
+ | **Friction** | The cost of doing it today (in the current workaround or competitor). What stops them? |
48
+ | **Business outcome** | What changes for the business when this action happens. Revenue, retention, cost, NPS, risk reduction. |
49
+ | **Signal** | The telemetry event/state-change proving it happened. Name it like an event (`signup_succeeded`), not a phrase ("user signs up"). |
50
+
51
+ ### 3. Mark each row evidence-backed or hypothesis
52
+
53
+ Every cell must be tagged:
54
+
55
+ - `evidence:<source>` — when based on an interview, survey, analytics or a citable doc.
56
+ - `hypothesis` — when we believe it but haven't proven it.
57
+
58
+ Hypotheses are fine. Hidden hypotheses are not. Force the label.
59
+
60
+ ### 4. Wire to success criteria
61
+
62
+ For each of Pepper's success criteria in the brief, identify **which row of the map is the load-bearing one**. If a criterion has no row mapped to it, either it's not a real success criterion or the map is missing an action.
33
63
 
34
- ## Trigger Map template
64
+ ### 5. Hand off
65
+
66
+ Mark `status: ready-for-prd`. Tell Wizer the next step is Maria Hill.
67
+
68
+ ## Output template
35
69
 
36
70
  ```markdown
37
- | Action | Trigger | Friction | Business outcome | Signal | Evidence |
38
- |---|---|---|---|---|---|
39
- | | … | … | … | … | research:/hypothesis |
71
+ ---
72
+ status: ready-for-prd | draft
73
+ owner: Pepper Potts
74
+ created: YYYY-MM-DD
75
+ ---
76
+
77
+ # Trigger Map — {{project_name}}
78
+
79
+ ## Actions
80
+
81
+ | # | Action | Trigger | Friction | Business outcome | Signal | Evidence |
82
+ |---|---|---|---|---|---|---|
83
+ | 1 | Sign up with work email | "We need a tool we can hand to the team next week." | Existing tool requires manual SSO; we want self-serve. | New paid-team conversion. | `signup_completed` | research:user-interview-2026-04 |
84
+ | 2 | Invite first teammate | Won't move forward solo. | Email + reminder loops cost manager 10min. | Activation. | `teammate_invited` | hypothesis |
85
+ | … | … | … | … | … | … | … |
86
+
87
+ ## Coverage of brief success criteria
88
+
89
+ - **Criterion 1** ("TTI ≤ 1.5s on Android by Q3") → covered by row 4 (`page_loaded`).
90
+ - **Criterion 2** ("…") → covered by row 1.
91
+ - …
40
92
  ```
93
+
94
+ ## Anti-patterns Pepper rejects
95
+
96
+ - **Triggers written as features.** "Wants the dashboard." Wrong layer. Reword to the emotion/need: "Wants to know if the team is okay."
97
+ - **Friction in vague language.** "It's confusing." Wrong. Name the step that breaks: "After invite, no email arrives for 4 hours."
98
+ - **Business outcomes with no metric.** "Drives engagement." Wrong. "Reduces churn by ≥ 1pp in cohort C." If you can't measure it, it's not an outcome — it's a hope.
99
+ - **Signals that fire on intent, not completion.** `signup_button_clicked` is intent. `signup_completed` is the signal.
100
+ - **Same row repeated for two actions.** Each row must justify a distinct action. If you can collapse them, do it.
101
+
102
+ ## Hand-off
103
+
104
+ > Trigger map is in `.wize/planning/ux/trigger-map.md`. Hill, the PRD goals should anchor on rows 1, 3, and 5 — they map to the success criteria in the brief.
@@ -3,55 +3,164 @@ code: wize-create-prd
3
3
  name: Create PRD
4
4
  phase: 2-plan
5
5
  owner: wize-agent-pm # Maria Hill
6
- status: stub
6
+ status: ready
7
7
  ---
8
8
 
9
9
  # Create PRD
10
10
 
11
- **Goal.** Turn brief + research + trigger-map into a Product Requirements Document the team can build from.
11
+ **Goal.** Turn brief + research + trigger map into a Product Requirements Document the team can build from. The PRD names *what* and *why* with measurable boundaries. Mantis, Fury, Tony will read it. Shuri ships against the acceptance criteria.
12
+
13
+ Maria Hill drives. Peggy edits prose. Output lands in `.wize/planning/prd.md`.
12
14
 
13
15
  ## Inputs
14
- - `.wize/planning/brief.md`
15
- - `.wize/planning/research.md`
16
- - `.wize/planning/ux/trigger-map.md`
16
+
17
+ - `.wize/planning/brief.md` (vision, audience, success criteria).
18
+ - `.wize/planning/research.md` (when present).
19
+ - `.wize/planning/ux/trigger-map.md` (every PRD goal references rows of this map).
20
+ - `.wize/planning/prfaq.md` (when present — PRD scope mirrors FAQ Q5 "what's in/out").
17
21
 
18
22
  ## Outputs
23
+
19
24
  - `.wize/planning/prd.md`
25
+ - `.wize/solutioning/epics/` — coarse epic outlines Tony refines later.
20
26
 
21
27
  ## Steps
22
- 1. **Goals.** Pull the success criteria from the brief; restate as PRD goals.
23
- 2. **Scope (in / out).** Explicit list of in-scope and out-of-scope items.
24
- 3. **User stories backbone.** "As a … I want … so that …" — coarse, will be sliced by Tony.
25
- 4. **Acceptance criteria per scope item.** Each scope item gets ACs Hawkeye can test.
26
- 5. **Constraints + assumptions.** From brief and Fury (if Fury has run already).
27
- 6. **Open questions.** Owners assigned.
28
- 7. **Hand-off.** Trigger Mantis to start UX scenarios.
29
28
 
30
- ## PRD template
29
+ ### 1. Goals (3–5)
30
+
31
+ Pull the success criteria from the brief; restate as PRD goals. Each goal is:
32
+ - One sentence.
33
+ - Measurable (named metric + target + deadline).
34
+ - Tied to a trigger-map row.
35
+
36
+ Example: *"Reduce signup time from 3.5min to 1min by Q3 (signal: `signup_completed` median; row 1)."*
37
+
38
+ ### 2. Scope — in / out (explicit)
39
+
40
+ | In | Out (for now) |
41
+ |---|---|
42
+ | First-team signup flow | Multi-team admin roles |
43
+ | Self-serve invite | SSO via SAML |
44
+ | English (US) | Other locales |
45
+
46
+ If a stakeholder asked for it and it isn't here, they will ask again at gate review. Put their item in **Out** with a one-line reason, not silence.
47
+
48
+ ### 3. User stories backbone
49
+
50
+ Coarse stories that map to scope items. "As a {role}, I want to {action}, so that {outcome}." Each story will be sliced finer by Tony in `wize-create-epics-and-stories`.
51
+
52
+ Use the trigger-map rows as backbone:
53
+ - Row 1 (Sign up) → "As a team admin, I want to sign up with my work email, so that I can invite my team within 5 minutes."
54
+
55
+ ### 4. Acceptance criteria per scope item
56
+
57
+ For every In-scope item, write 3–7 ACs Hawkeye can test.
58
+
59
+ Format: `Given … When … Then …` or a numbered behavioral list.
60
+
61
+ ACs are **observable**. ✓ "If the user enters an invalid email, the input shows error text within 200ms." ✗ "The form validates emails correctly."
62
+
63
+ Each AC gets an ID: `AC-{epic}-{n}`. Hawkeye references these in `tea-trace.md`.
64
+
65
+ ### 5. Constraints + assumptions
66
+
67
+ Pull constraints from the brief. Add:
68
+ - **Assumptions** that, if wrong, change scope.
69
+ - **Dependencies** on other teams/services with name + deadline.
70
+
71
+ Each assumption is one line + verification plan. *"Assumption: Stripe Connect onboarding average 7 days. Verification: confirm with Stripe by 2026-07-01."*
72
+
73
+ ### 6. NFR pointer
74
+
75
+ Don't redefine NFRs in the PRD. Reference `.wize/planning/nfr-principles.md` (Fury's) once. Note any project-specific tightening.
76
+
77
+ ### 7. Open questions
78
+
79
+ What still needs deciding before solutioning starts. Each with an owner + deadline. Blockers can't carry into Phase 3.
80
+
81
+ ### 8. Hand off
82
+
83
+ - Mark `status: ready-for-validation`.
84
+ - Run `wize-validate-prd` (Maria Hill + Mantis + Fury sign-off).
85
+ - Then Mantis starts `wize-ux-scenarios`.
86
+
87
+ ## Output template
31
88
 
32
89
  ```markdown
90
+ ---
91
+ status: draft | ready-for-validation | validated
92
+ owner: Maria Hill
93
+ created: YYYY-MM-DD
94
+ ---
95
+
33
96
  # PRD — {{project_name}}
34
97
 
35
98
  ## Goals
36
- 1. …
99
+ 1. {{goal}} (metric: …, target: …, deadline: …, trigger-map row: )
100
+ 2. …
37
101
 
38
102
  ## Scope
103
+
39
104
  ### In scope
40
- -
105
+ - {{item}} — {{2–3 lines of detail}}
106
+
41
107
  ### Out of scope
42
- -
108
+ - {{item}} — {{one-line reason: not now / not us / not yet}}
43
109
 
44
- ## Backbone (user stories)
45
- -
110
+ ## Backbone (coarse stories)
111
+ - E01: As a {{role}}, I want to {{action}}, so that {{outcome}}.
112
+ - E02: …
46
113
 
47
114
  ## Acceptance criteria
48
- | Item | ACs |
49
- |---|---|
50
- | … | AC1 …; AC2 … |
51
115
 
52
- ## Constraints / assumptions
116
+ ### E01 Sign-up
117
+ - **AC-01-1:** Given a new visitor on `/signup`, When they submit a valid work email + password, Then an account is created and they land on `/onboarding` within 1.5s.
118
+ - **AC-01-2:** Given an invalid email, When the user blurs the field, Then error text appears within 200ms identifying which rule failed.
119
+ - **AC-01-3:** Given a duplicate email, When the user submits, Then they see a "Sign in instead?" CTA and the request returns HTTP 409.
53
120
  - …
54
121
 
122
+ ## Constraints
123
+ - Deadline: …
124
+ - Budget: …
125
+ - Compliance: GDPR, LGPD, SOC2.
126
+
127
+ ## Assumptions
128
+ - Stripe Connect onboarding ≤ 7 days avg. — verify by …
129
+ - Auth0 free tier sufficient for first 6 months. — verify by …
130
+
131
+ ## Dependencies
132
+ - Design system tokens from Mantis by {{date}}.
133
+ - Database from infra team by {{date}}.
134
+
135
+ ## NFR pointer
136
+ See `.wize/planning/nfr-principles.md`. Project tightening: p95 LCP ≤ 2.0s (vs. global 2.5s) on signup pages.
137
+
55
138
  ## Open questions
56
- - [ ] (owner: …)
139
+ - [ ] (blocker) Pricing tier exposed pre-payment? — *owner: NAME, by: DATE*
140
+ - [ ] (important) Brazil-only beta or global launch? — *owner: NAME, by: DATE*
57
141
  ```
142
+
143
+ ## INVEST checklist (per AC group)
144
+
145
+ Maria Hill validates every story's ACs against INVEST:
146
+
147
+ - **I**ndependent: no implicit dependency on another story being built first.
148
+ - **N**egotiable: details can move; intent can't.
149
+ - **V**aluable: a real outcome to a real user.
150
+ - **E**stimable: Tony can size it.
151
+ - **S**mall: ≤ 1 PR worth (sliced finer in Phase 3 if not).
152
+ - **T**estable: every AC is observable.
153
+
154
+ If any letter fails, fix the story before it leaves Plan.
155
+
156
+ ## Anti-patterns Maria Hill rejects
157
+
158
+ - **PRD as wishlist.** Pages of "the system shall…" with no Out-of-Scope. Force the cut.
159
+ - **ACs as descriptions.** "The form is responsive." → no. *"At 360px, the form fits in the viewport with no horizontal scroll."*
160
+ - **Open questions with no owner / no deadline.** They never get answered.
161
+ - **Constraint hidden in prose.** Pull to its own bullet.
162
+ - **PRD without a version + status.** Reviewers can't tell what they're reviewing.
163
+
164
+ ## Hand-off
165
+
166
+ > PRD draft is at `.wize/planning/prd.md`. Two open blockers; CEO and Sales Lead have until Friday. Mantis — once we're `validated`, you start with the trigger map + PRD. Fury — your call on stack family.
@@ -4,63 +4,167 @@ name: UX Design
4
4
  phase: 2-plan
5
5
  owner: wize-agent-ux-designer # Mantis
6
6
  absorbs: "WDS Freya — Phase 4 (Page Specs)"
7
- status: stub
7
+ status: ready
8
8
  ---
9
9
 
10
10
  # UX Design
11
11
 
12
- **Goal.** Page-by-page specifications. Each screen documents layout, content, interactions, edge/empty/error states.
12
+ **Goal.** Turn scenarios into page-by-page specifications Tony can architect against and Shuri can implement. One spec per screen. Every spec answers: purpose, primary action, layout, content, interactions, states (loading/empty/error/success/disabled), accessibility, and metrics.
13
+
14
+ Mantis drives. Output lands in `.wize/planning/ux/ux-design/{screen-name}.md`.
13
15
 
14
16
  ## Inputs
15
- - `.wize/planning/ux/ux-scenarios.md`
16
- - `.wize/planning/prd.md`
17
+
18
+ - `.wize/planning/ux/ux-scenarios.md` (every screen traces back to ≥ 1 scenario)
19
+ - `.wize/planning/prd.md` (every screen advances at least one AC)
20
+ - `.wize/solutioning/design-system/` (when Mantis already wrote tokens; otherwise this runs in parallel with `wize-design-system`)
21
+ - Overlay playbooks if active:
22
+ - `web-overlay/playbooks/wcag-aa.md`, `responsive-breakpoints.md`, `semantic-html.md`
23
+ - `app-overlay/playbooks/apple-hig.md`, `material-design-3.md`, `touch-targets-and-gestures.md`, `permissions-ux.md`
17
24
 
18
25
  ## Outputs
26
+
19
27
  - `.wize/planning/ux/ux-design/{screen-name}.md` (one per screen)
28
+ - `.wize/planning/ux/ux-design/index.md` (map of screens → scenarios → PRD ACs)
29
+
30
+ ## Steps
31
+
32
+ ### 1. Enumerate the screens
33
+
34
+ From the scenarios, list every screen needed to deliver the moment-of-truth. Name them by role + state: `signup-empty.md`, `signup-error.md`, `team-list-with-members.md`, `team-list-empty.md`. Empty/error/loading states are screens.
35
+
36
+ ### 2. Per screen: fill the spec template
37
+
38
+ For each screen, write the spec below. Stay disciplined; if a section is empty, ask why.
20
39
 
21
- ## Per-screen template
40
+ ### 3. Write the index
41
+
42
+ `index.md` is a single table mapping screen → scenarios touched → PRD ACs advanced. Tony reads this first; Hawkeye references it in `tea-design.md`.
43
+
44
+ ### 4. Hand off
45
+
46
+ Mark `status: ready-for-architecture` on each spec. Notify Wizer; Tony reads next.
47
+
48
+ ## Spec template (one file per screen)
22
49
 
23
50
  ```markdown
24
51
  ---
25
- screen: {{name}}
26
- linked_scenario: ux-scenarios.md#scenario-N
52
+ screen: signup-empty
53
+ status: ready-for-architecture
54
+ owner: Mantis
55
+ linked_scenarios: [S1]
56
+ linked_acs: [AC-01-1, AC-01-2]
27
57
  ---
28
58
 
29
- # {{Screen name}}
59
+ # Sign up (empty state)
30
60
 
31
61
  ## Purpose
32
-
62
+ First contact: a manager wants to create an account. The goal of *this* screen is to collect work email + password with minimum friction, in service of scenario S1 moment-of-truth (3 invites within 5 minutes).
33
63
 
34
64
  ## Primary user action
35
-
65
+ Submit the form (CTA: "Create account").
36
66
 
37
- ## Layout (ASCII wireframe or description)
67
+ ## Layout (ASCII or Mermaid)
68
+
69
+ (web overlay)
38
70
  ```
39
- ┌───────────────────────────────────────┐
40
- Header
41
- ├───────────────────────────────────────┤
42
- Content
43
- └───────────────────────────────────────┘
71
+ ┌─────────────────────────────────────────────────┐
72
+ Wize logo [Sign in →]
73
+ ├─────────────────────────────────────────────────┤
74
+
75
+ │ Create your team's account │
76
+ │ ────────────────────────── │
77
+ │ [ Work email ] │
78
+ │ [ Password (12+) ] │
79
+ │ │
80
+ │ [ Create account ] │
81
+ │ │
82
+ │ Already a member? Sign in │
83
+ │ │
84
+ └─────────────────────────────────────────────────┘
44
85
  ```
45
86
 
46
- ## Content
47
- - Headline: …
48
- - Body:
49
- - CTA: …
87
+ (app overlay note: stacked, top-aligned, system back disabled.)
88
+
89
+ ## Content (copy)
90
+
91
+ - Headline: "Create your team's account"
92
+ - Sub: (none — keep the screen empty for focus)
93
+ - Field 1 label: "Work email"
94
+ - Field 1 placeholder: "name@yourcompany.com"
95
+ - Field 2 label: "Password"
96
+ - Field 2 helper text: "At least 12 characters."
97
+ - CTA: "Create account"
98
+ - Secondary: "Already a member? Sign in" → routes to /signin
50
99
 
51
100
  ## Interactions
52
- - Click {{element}} → {{outcome}}
101
+
102
+ - Click CTA with valid form → submit; show loading state; redirect on success.
103
+ - Click CTA with invalid form → set focus to first invalid field; show error region.
104
+ - Tab order: email → password → CTA → "Sign in" link.
105
+ - Enter on either field submits if both are valid.
53
106
 
54
107
  ## States
55
- - Loading: …
56
- - Empty:
57
- - Error:
58
- - Success:
108
+
109
+ - **Loading:** CTA shows spinner; button is disabled; inputs remain editable.
110
+ - **Empty (this state):** placeholders visible; CTA disabled until both fields non-empty.
111
+ - **Error (inline per field):** error region appears under each field, `role="alert"`, identifies the rule and the fix.
112
+ - **Error (global):** Banner above headline if the back-end fails with a non-field error; provides a "retry" action.
113
+ - **Success:** redirect; no flash. The next screen owns acknowledgement.
114
+ - **Disabled:** CTA opacity 0.4; aria-disabled="true"; tooltip *"Fill both fields to continue"*.
59
115
 
60
116
  ## Accessibility notes
61
- - (web-overlay) WCAG …
62
- - (app-overlay) HIG / Material …
117
+
118
+ (web overlay)
119
+ - Both inputs have visible persistent labels (no placeholder-only).
120
+ - `lang="en"` on `<html>`.
121
+ - Error region: per-field `aria-describedby`, ALL `role="alert"` after first submit only.
122
+ - Contrast pairs all ≥ 4.5:1 in light mode, ≥ 4.5:1 in dark mode.
123
+ - 200% zoom: no horizontal scroll on 360px viewport.
124
+ - Skip link absent (no main nav before).
125
+
126
+ (app overlay)
127
+ - Apple HIG / Material 3 systemic input components.
128
+ - Dynamic Type / font scale: layout reflows at largest accessibility size; CTA pinned to bottom-safe-area.
129
+ - Touch targets ≥ 44pt (iOS) / 48dp (Android).
130
+ - VoiceOver order: headline → email → password → CTA → secondary link.
131
+
132
+ ## Metrics
133
+
134
+ - Event `signup_completed` (Q7 success quote): fires after redirect.
135
+ - Event `signup_error_shown {rule}`: fires on inline error.
136
+ - Event `signup_abandoned`: fires on `beforeunload` if form had focus and CTA never fired.
137
+
138
+ ## Open questions for Tony
139
+
140
+ - Should we use Auth0 hosted UI or our own form? (UX-decision is to keep our own; Tony decides feasibility.)
141
+ - Magic-link as an alternative path? Out of scope per PRD; Mantis recommends putting in *Out*.
63
142
  ```
64
143
 
144
+ ## Index template
145
+
146
+ ```markdown
147
+ # UX Design — index
148
+
149
+ | Screen | Scenarios | PRD ACs |
150
+ |---|---|---|
151
+ | signup-empty | S1 | AC-01-1, AC-01-2 |
152
+ | signup-error | S1 | AC-01-2 |
153
+ | onboarding-step-1 | S1 | AC-02-1 |
154
+ | team-list-empty | S1, S2 | AC-03-1 |
155
+ | team-list-with-members | S1, S2 | AC-03-2, AC-03-3 |
156
+ | invite-modal | S1, S2 | AC-02-2, AC-02-3 |
157
+ ```
158
+
159
+ ## Anti-patterns Mantis rejects
160
+
161
+ - **Specs without states.** A screen with no empty/error spec is half a spec.
162
+ - **Copy as marketing tone.** Use the user's voice. Cut "world-class," "delightful," "seamless."
163
+ - **Mystery icons.** Icons need accessible labels; if you can't name it, draw a word next to it.
164
+ - **Hover-only affordances on touch.** Spec the non-hover equivalent.
165
+ - **Touch targets < platform minimum.** 24×24 CSS px on web (WCAG 2.5.8), 44pt iOS, 48dp Android — non-negotiable.
166
+ - **Screens that don't trace to scenarios + PRD ACs.** If you can't fill the index row, the screen isn't justified.
167
+
65
168
  ## Hand-off
66
- "Tony, screen specs in `.wize/planning/ux/ux-design/`. Architecture time."
169
+
170
+ > UX specs are at `.wize/planning/ux/ux-design/`. Index points screen → scenario → AC. Tony, you can start `wize-create-architecture` now; the moment-of-truth lines in scenarios tell you which interactions are load-bearing. Hawkeye, `tea-design.md` should index by screen to keep test design and UI aligned.