@thebassclef/lite 1.1.0 → 1.2.0-alpha.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/dist/cli.cjs +258 -63
- package/dist/cli.js +258 -63
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/lite/.claude/bassclef-configs.jsonc +56 -0
- package/dist/lite/.claude/bassclef-orientation.md +120 -0
- package/dist/lite/.claude/hooks/adr-discipline-check.sh +132 -0
- package/dist/lite/.claude/hooks/atomic-pr-check.sh +169 -0
- package/dist/lite/.claude/hooks/auto-save-idle.sh +51 -0
- package/dist/lite/.claude/hooks/bassclef-sync.sh +51 -13
- package/dist/lite/.claude/hooks/bet-doc-gate.sh +283 -0
- package/dist/lite/.claude/hooks/bug-diagnosis.sh +64 -0
- package/dist/lite/.claude/hooks/destructive-command-guard.sh +136 -0
- package/dist/lite/.claude/hooks/file-rename-discipline-check.sh +147 -0
- package/dist/lite/.claude/hooks/hook-classifier-canary.sh +158 -0
- package/dist/lite/.claude/hooks/kiss-default-check.sh +129 -0
- package/dist/lite/.claude/hooks/multi-tenancy-check.sh +83 -0
- package/dist/lite/.claude/hooks/oo-ad-entry-point-check.sh +216 -0
- package/dist/lite/.claude/hooks/operator-private-path-check.sh +203 -0
- package/dist/lite/.claude/hooks/pattern-annotation-validate.sh +142 -0
- package/dist/lite/.claude/hooks/plain-english-steering.sh +15 -1
- package/dist/lite/.claude/hooks/post-write-trace.sh +66 -0
- package/dist/lite/.claude/hooks/pr-body-scrub-check.sh +446 -0
- package/dist/lite/.claude/hooks/pre-commit-identifier-leak-scrub.sh +137 -0
- package/dist/lite/.claude/hooks/pre-gh-pr-body-scrub.sh +192 -0
- package/dist/lite/.claude/hooks/pre-gh-pr-title-scrub.sh +172 -0
- package/dist/lite/.claude/hooks/role-entry-gate.sh +115 -0
- package/dist/lite/.claude/hooks/save-state.sh +268 -0
- package/dist/lite/.claude/hooks/session-reflection.d/08-settings-drift.sh +8 -1
- package/dist/lite/.claude/hooks/session-reflection.d/10-abrupt-stop-recovery.sh +52 -0
- package/dist/lite/.claude/hooks/session-reflection.d/55-orientation-gate.sh +40 -4
- package/dist/lite/.claude/hooks/session-reflection.d/80-hook-heartbeat-check.sh +12 -5
- package/dist/lite/.claude/hooks/session-reflection.d/81-hook-manifest-staleness.sh +18 -2
- package/dist/lite/.claude/hooks/session-reflection.d/91-npm-version-drift.sh +54 -0
- package/dist/lite/.claude/hooks/session-reflection.d/tests/10-abrupt-stop-recovery.test.sh +95 -0
- package/dist/lite/.claude/hooks/session-reflection.sh +62 -15
- package/dist/lite/.claude/hooks/tool-failure-diagnosis.sh +50 -0
- package/dist/lite/.claude/luminaries/andrej-karpathy.md +165 -0
- package/dist/lite/.claude/luminaries/dave-gray.md +155 -0
- package/dist/lite/.claude/luminaries/gary-klein.md +166 -0
- package/dist/lite/.claude/luminaries/kaoru-ishikawa.md +162 -0
- package/dist/lite/.claude/luminaries/lean-product-canvas.md +33 -0
- package/dist/lite/.claude/luminaries/luke-wroblewski.md +224 -0
- package/dist/lite/.claude/luminaries/ryan-singer.md +113 -0
- package/dist/lite/.claude/luminaries/steve-krug.md +168 -0
- package/dist/lite/.claude/luminaries/tony-ulwick.md +134 -0
- package/dist/lite/.claude/rules/arc-level-orientation-before-leaf.md +60 -0
- package/dist/lite/.claude/rules/architect-review-discipline.md +71 -0
- package/dist/lite/.claude/rules/auto-fix-criteria.md +126 -0
- package/dist/lite/.claude/rules/bassclef-hook-drift-blocker.md +144 -0
- package/dist/lite/.claude/rules/bassclef-models-discovery.md +107 -0
- package/dist/lite/.claude/rules/bassclef-workflow-parity.md +104 -0
- package/dist/lite/.claude/rules/cost-governance.md +154 -0
- package/dist/lite/.claude/rules/file-rename-discipline.md +95 -0
- package/dist/lite/.claude/rules/mechanism-fidelity.md +88 -0
- package/dist/lite/.claude/rules/prototype-production-coupling.md +125 -0
- package/dist/lite/.claude/rules/quick-fix-criteria.md +90 -0
- package/dist/lite/.claude/rules/session-artifacts.md +30 -0
- package/dist/lite/.claude/rules/sibling-smoke-after-substrate-change.md +107 -0
- package/dist/lite/.claude/rules/substrate-as-system.md +67 -0
- package/dist/lite/.claude/rules/usability.md +22 -0
- package/dist/lite/.claude/settings.json +20 -0
- package/dist/lite/.claude/skills/agent-research-spawn/SKILL.md +100 -0
- package/dist/lite/.claude/skills/architect-review/SKILL.md +201 -0
- package/dist/lite/.claude/skills/auto-fix/SKILL.md +297 -0
- package/dist/lite/.claude/skills/autonomous/SKILL.md +300 -0
- package/dist/lite/.claude/skills/bind-subdomain/SKILL.md +232 -0
- package/dist/lite/.claude/skills/canvas/SKILL.md +41 -0
- package/dist/lite/.claude/skills/deploy-prod/SKILL.md +106 -0
- package/dist/lite/.claude/skills/docs-sync/SKILL.md +188 -0
- package/dist/lite/.claude/skills/eisenhower/SKILL.md +273 -0
- package/dist/lite/.claude/skills/empathy-map/SKILL.md +168 -0
- package/dist/lite/.claude/skills/frontend-design/SKILL.md +53 -0
- package/dist/lite/.claude/skills/interview-me/SKILL.md +171 -0
- package/dist/lite/.claude/skills/journal-export/SKILL.md +293 -0
- package/dist/lite/.claude/skills/jtbd-tasks/SKILL.md +203 -0
- package/dist/lite/.claude/skills/objectory-decompose/SKILL.md +256 -0
- package/dist/lite/.claude/skills/pick-luminaries/SKILL.md +100 -0
- package/dist/lite/.claude/skills/pre-mortem/SKILL.md +180 -0
- package/dist/lite/.claude/skills/prototype-gallery/SKILL.md +264 -0
- package/dist/lite/.claude/skills/provision-deploy-host/SKILL.md +257 -0
- package/dist/lite/.claude/skills/quick-fix/SKILL.md +273 -0
- package/dist/lite/.claude/skills/release/SKILL.md +311 -0
- package/dist/lite/.claude/skills/release-notes/SKILL.md +202 -0
- package/dist/lite/.claude/skills/rfc/SKILL.md +222 -0
- package/dist/lite/.claude/skills/riff-prototypes/SKILL.md +637 -0
- package/dist/lite/.claude/skills/secrets-bootstrap/SKILL.md +209 -0
- package/dist/lite/.claude/skills/skill/SKILL.md +304 -0
- package/dist/lite/.claude/skills/smoke-test/SKILL.md +100 -0
- package/dist/lite/.claude/skills/state/SKILL.md +204 -0
- package/dist/lite/.claude/skills/substrate-check/SKILL.md +218 -0
- package/dist/lite/.claude/skills/synthetic-user/SKILL.md +381 -0
- package/dist/lite/.claude/skills/task-scenarios/SKILL.md +105 -0
- package/dist/lite/.claude/skills/tier-dependency-audit/SKILL.md +139 -0
- package/dist/lite/.claude/skills/ux-migration/SKILL.md +424 -0
- package/dist/lite/.claude/skills/value-prop-canvas/SKILL.md +297 -0
- package/dist/lite/README.md +5 -1
- package/dist/lite/gitignore +6 -0
- package/dist/lite/lib/bassclef-dir-resolver.sh +85 -0
- package/dist/lite/lib/clone-failure-classifier.sh +59 -0
- package/dist/lite/lib/fixture-builder.sh +190 -0
- package/dist/lite/lib/fresh-install-check.sh +49 -0
- package/dist/lite/lib/hook-heartbeat.sh +0 -1
- package/dist/lite/lib/mechanism-fidelity.sh +569 -0
- package/dist/lite/lib/npm-version-check.sh +112 -0
- package/dist/lite/lib/preview-state.sh +229 -0
- package/dist/lite/lib/session-rescue.sh +0 -1
- package/dist/lite/scripts/generate-lite-manifest.sh +145 -4
- package/dist/lite/scripts/lite-manifest-drift-check.sh +5 -1
- package/dist/lite/standards/architect-review-discipline.md +222 -0
- package/dist/lite/standards/bassclef-platform.md +249 -0
- package/dist/lite/standards/bassclef-test-repos.md +97 -0
- package/dist/lite/standards/bassclef-wiring-manifest.json +25 -1
- package/dist/lite/standards/cold-adopter-harness.md +205 -0
- package/dist/lite/standards/data-management.md +135 -0
- package/dist/lite/standards/frontend-stack/nextjs-prisma.md +124 -0
- package/dist/lite/standards/lite-manifest-schema-changes.md +27 -0
- package/dist/lite/standards/lite-manifest.json +1456 -14
- package/dist/lite/standards/mechanism-fidelity.md +205 -0
- package/dist/lite/standards/operator-private-discipline.md +200 -0
- package/dist/lite/standards/operator-to-public-flow.md +195 -0
- package/dist/lite/standards/prototype-gallery.md +251 -0
- package/dist/lite/standards/pseudonym-key-schema.md +109 -0
- package/dist/lite/standards/sibling-validation-checklist.md +181 -0
- package/dist/lite/standards/slack-notifications.md +161 -0
- package/dist/lite/standards/synthetic-user-testing.md +173 -0
- package/dist/lite/standards/vendor-bindings.md +165 -0
- package/dist/lite/standards/vendor-plugins/frontend-design.md +66 -0
- package/dist/lite/standards/vpc-fit-validation.md +167 -0
- package/dist/lite/templates/gallery-yml.md +113 -0
- package/dist/lite/templates/product-canvas.md +169 -0
- package/dist/lite/templates/value-prop-canvas.md +180 -0
- package/package.json +12 -5
- /package/dist/lite/{whereami.md → docs/whereami.md} +0 -0
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
---
|
|
2
|
+
tier: lite
|
|
3
|
+
name: Gary Klein
|
|
4
|
+
slug: gary-klein
|
|
5
|
+
claimed_by: [shaper, architect, reviewer, orchestrator]
|
|
6
|
+
referenced_by_skills: [pre-mortem, longrun, build]
|
|
7
|
+
primary_domain: decision-science
|
|
8
|
+
depth: full
|
|
9
|
+
solves_problems_greenfield:
|
|
10
|
+
- "Team is about to commit to a high-stakes design; risks are hidden in individual heads and hierarchy prevents them from surfacing"
|
|
11
|
+
- "One-way-door architectural decision needs a structured risk elicitation before commit"
|
|
12
|
+
- "Security, compliance, or finance scope needs a risk ledger before merge — failure has hard-to-reverse consequences"
|
|
13
|
+
- "Bet-doc authoring needs a risk ledger before scope commit; retrospective regret is the wrong point to discover the gaps"
|
|
14
|
+
solves_problems_brownfield:
|
|
15
|
+
- "Team is repeatedly missing failure modes discovered too late in past projects"
|
|
16
|
+
- "Retrospectives find 'everyone knew but nobody said' patterns — the meeting shape blocks the surface"
|
|
17
|
+
- "Legacy migration needs risk enumeration before touching the old system that most engineers no longer understand"
|
|
18
|
+
- "Deploy pipeline changes need a pre-check against past incidents"
|
|
19
|
+
anti_patterns:
|
|
20
|
+
- "Retrospective blame — running it after failure with names attached; that's a postmortem, and the blame-safe framing collapses"
|
|
21
|
+
- "Generic risk lists without vivid scenarios — 'the team might be busy' produces no signal"
|
|
22
|
+
- "Running the pre-mortem too late — after commitment locks in, the write-down produces regret, not mitigation"
|
|
23
|
+
- "Skipping the silent write-down step — group brainstorming lets the loudest voice anchor the list"
|
|
24
|
+
- "No follow-through — reasons surface in the meeting and evaporate; named-owner mitigation is required"
|
|
25
|
+
sources:
|
|
26
|
+
- type: article
|
|
27
|
+
title: "Performing a Project Premortem"
|
|
28
|
+
authors: ["Gary Klein"]
|
|
29
|
+
year: 2007
|
|
30
|
+
url: "https://hbr.org/2007/09/performing-a-project-premortem"
|
|
31
|
+
venue: "Harvard Business Review, September 2007"
|
|
32
|
+
methodology_covered:
|
|
33
|
+
- "The 4-step pre-mortem procedure — assume failure, silent write-down, round-robin readout, incorporate into plan"
|
|
34
|
+
- "Prospective hindsight — imagining an outcome has happened increases the ability to identify correct reasons by ~30% (citing Mitchell, Russo, Pennington 1989)"
|
|
35
|
+
- type: book
|
|
36
|
+
title: "Sources of Power: How People Make Decisions"
|
|
37
|
+
authors: ["Gary Klein"]
|
|
38
|
+
year: 1998
|
|
39
|
+
url: "https://mitpress.mit.edu/9780262611466/sources-of-power/"
|
|
40
|
+
isbn: "9780262611466"
|
|
41
|
+
methodology_covered:
|
|
42
|
+
- "Recognition-Primed Decision (RPD) model — experts decide by pattern-matching against experience, not by comparing options"
|
|
43
|
+
- "Naturalistic Decision Making framework"
|
|
44
|
+
- type: article
|
|
45
|
+
title: "Conditions for intuitive expertise: A failure to disagree"
|
|
46
|
+
authors: ["Daniel Kahneman", "Gary Klein"]
|
|
47
|
+
year: 2009
|
|
48
|
+
venue: "American Psychologist, 64(6), 515-526"
|
|
49
|
+
methodology_covered:
|
|
50
|
+
- "When expert intuition can be trusted and when it cannot — the adversarial-collaboration framework"
|
|
51
|
+
- type: website
|
|
52
|
+
title: "Pre-mortems (Shreyas Doshi playbook)"
|
|
53
|
+
authors: ["Shreyas Doshi"]
|
|
54
|
+
url: "https://coda.io/@shreyas/pre-mortems"
|
|
55
|
+
methodology_covered:
|
|
56
|
+
- "Tigers / Paper Tigers / Elephants lexicon for classifying threats"
|
|
57
|
+
- "1-hour timebox with named owners on top 3-5 threats"
|
|
58
|
+
- type: website
|
|
59
|
+
title: "Use a Pre-Mortem to Identify Project Risks Before They Occur"
|
|
60
|
+
authors: ["Mike Cohn"]
|
|
61
|
+
url: "https://www.mountaingoatsoftware.com/blog/use-a-pre-mortem-to-identify-project-risks-before-they-occur"
|
|
62
|
+
methodology_covered:
|
|
63
|
+
- "Three-step agile shape — brainstorm, prioritize top 10, assign trigger + mitigation per risk"
|
|
64
|
+
- "Risk burndown chart alongside sprint retros"
|
|
65
|
+
- type: website
|
|
66
|
+
title: "Pre-Mortem tool"
|
|
67
|
+
url: "https://www.theuncertaintyproject.org/tools/pre-mortem"
|
|
68
|
+
methodology_covered:
|
|
69
|
+
- "Seven-step shape with explicit 'no one will argue or object' rule"
|
|
70
|
+
- "Async survey mode for distributed teams"
|
|
71
|
+
- type: article
|
|
72
|
+
title: "Pre-mortem — Technically Working Backwards"
|
|
73
|
+
url: "https://medium.com/paypal-tech/pre-mortem-technically-working-backwards-1724eafbba02"
|
|
74
|
+
venue: "PayPal Tech, Medium"
|
|
75
|
+
methodology_covered:
|
|
76
|
+
- "Engineering-team adaptation — one-pager (problem + urgency + design + testing) precedes the meeting"
|
|
77
|
+
- "Multi-team pre-mortems catch architectural misalignment across teams"
|
|
78
|
+
verification_status: verified-with-caveat
|
|
79
|
+
verification_note: "HBR full-text extraction failed at the paywall; the two signature quotes are widely and consistently cited across secondary sources including Kahneman's Thinking, Fast and Slow. The 4-step methodology is consistent across all four operator-provided sources."
|
|
80
|
+
description: "\"Unlike a typical critiquing session, in which project team members are asked what might go wrong, the premortem operates on the assumption that the patient has died, and so asks…"
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
# Gary Klein
|
|
84
|
+
|
|
85
|
+
## Signature
|
|
86
|
+
|
|
87
|
+
*"Unlike a typical critiquing session, in which project team members are asked what might go wrong, the premortem operates on the assumption that the patient has died, and so asks what did go wrong."* — Klein, HBR 2007 [ref:1]
|
|
88
|
+
|
|
89
|
+
*"Too many people are reluctant to speak up about their reservations during the all-important planning phase."* — Klein, HBR 2007 [ref:1]
|
|
90
|
+
|
|
91
|
+
Founder of the **Naturalistic Decision Making** field and developer of the **Recognition-Primed Decision** model [ref:2]. Author of *Sources of Power* (MIT Press, 1998) [ref:2] and the *Harvard Business Review* article that introduced the pre-mortem method to broad practice [ref:1]. The bassclef voice on surfacing risks the group knows but the room dynamics suppress.
|
|
92
|
+
|
|
93
|
+
## Core methods
|
|
94
|
+
|
|
95
|
+
- **The 4-step pre-mortem procedure** — (1) assume failure vividly ("imagine the project has failed spectacularly"), (2) each person silently writes every reason they can imagine for the failure, (3) round-robin readout with no argument or ranking, (4) incorporate the strongest concerns into the plan as mitigations, monitoring signals, or scope cuts [ref:1].
|
|
96
|
+
- **Prospective hindsight** — imagining an outcome has already happened increases the ability to identify correct reasons for the outcome by roughly 30% versus asking "what could go wrong" [ref:1, citing Mitchell, Russo, Pennington 1989].
|
|
97
|
+
- **Blame-safe elicitation** — no argument during readout; concerns are gifts, not attacks. The room dynamics that would suppress dissent in a normal planning meeting are structurally removed.
|
|
98
|
+
- **Lens rotation** — running the pre-mortem through multiple perspectives (customer, engineer, ops, legal, finance) surfaces risks that any single lens would miss. Doshi's Tigers/Elephants classification and PayPal Tech's per-team runs both instantiate this shape [ref:4, ref:7].
|
|
99
|
+
|
|
100
|
+
## When to channel this luminary
|
|
101
|
+
|
|
102
|
+
Fire at any high-stakes scope-commit boundary. Bassclef applications:
|
|
103
|
+
|
|
104
|
+
- Bet-doc authoring — the risk ledger IS a pre-mortem output
|
|
105
|
+
- `/longrun` scope-shape pick — before committing to which shape
|
|
106
|
+
- Any change that touches security, authentication, compliance, payments, or user-lifecycle-critical paths
|
|
107
|
+
- Architectural decisions with hard-to-reverse consequences
|
|
108
|
+
- Deploy pipeline edits
|
|
109
|
+
- Adopter-observable API surface changes
|
|
110
|
+
|
|
111
|
+
INSTEAD of running Klein's pre-mortem for trivial low-cost work — the method has a real cost (60-90 minutes) and produces low signal on decisions that can be reversed cheaply. Reserve for one-way-door scope.
|
|
112
|
+
|
|
113
|
+
## Stack translation
|
|
114
|
+
|
|
115
|
+
In a bassclef bet doc:
|
|
116
|
+
|
|
117
|
+
- The `## Risk ledger (pre-mortem)` section IS the artifact
|
|
118
|
+
- Each rotated lens is a `@luminary` primary or supporting citation — Feathers for characterization coverage, Ousterhout for interface complexity, Nygard for stability patterns, Beck for TDD, Saltzer-Schroeder for security-adjacent scope
|
|
119
|
+
- Each identified risk gets an owner (which WU addresses it) and a mitigation (concrete fix)
|
|
120
|
+
- The `## Compounding sequence` per shape borrows from Doshi's "top 3-5 threats named" cadence
|
|
121
|
+
|
|
122
|
+
In an operator session:
|
|
123
|
+
|
|
124
|
+
- `/pre-mortem <scope>` (ship in bet 2026-07-07a) walks the 4 steps and produces `docs/risk-ledgers/<slug>.md`
|
|
125
|
+
- Always-fire domains: authentication, authorization, schema migrations with backfills, payments and billing, PII handling, multi-tenant boundaries, public marketing claims, user-lifecycle flows (account create/delete/password), deploy pipeline changes, third-party integrations, and compliance-scoped work (GDPR/HIPAA/SOC 2/PCI DSS)
|
|
126
|
+
|
|
127
|
+
## Anti-patterns it prevents
|
|
128
|
+
|
|
129
|
+
- **Retrospective blame** — running the exercise after failure with names attached collapses the blame-safe framing. Klein's discipline: run BEFORE the failure, so concerns are gifts about a hypothetical future.
|
|
130
|
+
- **Generic risk lists** — "the team might be busy" produces no mitigation because it does not describe a specific failure. Klein's discipline: imagine failure vividly. "The migration ran during the holiday freeze and locked the payments table for 3 hours" is actionable.
|
|
131
|
+
- **Skipping silent write-down** — group brainstorming lets the loudest voice anchor the list. Klein's silent step is load-bearing; without it, the pre-mortem regresses to a normal planning meeting.
|
|
132
|
+
- **Meeting-then-forget** — reasons surface and evaporate. Doshi's follow-up discipline (named owners + mitigation trigger per risk) is what makes pre-mortem produce compounding value.
|
|
133
|
+
|
|
134
|
+
## Worked example (bassclef application)
|
|
135
|
+
|
|
136
|
+
Bet 30b risk ledger at `docs/risk-ledgers/2026-06-30b-substrate-anchoring-cure.md` is a live bassclef pre-mortem. The bet author (working alone) rotated through 8 luminary lenses (each representing a distinct failure class) and produced concrete mitigations tied to specific WUs. The output shape:
|
|
137
|
+
|
|
138
|
+
- **Lens-by-lens risk enumeration** — Feathers surfaces "cure ships without characterization test"; Ousterhout surfaces "shared lib duplicates existing helper"; Beck surfaces "Tier 0 test written after source"; etc.
|
|
139
|
+
- **Per-risk owner and mitigation** — each risk names the WU that addresses it and the concrete change (e.g., "WU-E adds Tier 0 test at write-time; RED confirmed via `bash <test> && [ $? -eq 1 ]`")
|
|
140
|
+
- **Retrospective feedback loop** — the closeout chronicle checks whether each pre-mortem risk actually materialized and whether the mitigation held
|
|
141
|
+
|
|
142
|
+
The bassclef pattern extends Klein's original 4-step meeting into a written artifact that the operator can review async and re-consult during execution.
|
|
143
|
+
|
|
144
|
+
## Sources
|
|
145
|
+
|
|
146
|
+
1. Klein, G. (2007). "Performing a Project Premortem." *Harvard Business Review*, September 2007. https://hbr.org/2007/09/performing-a-project-premortem [ref:1]
|
|
147
|
+
2. Klein, G. (1998). *Sources of Power: How People Make Decisions.* MIT Press. ISBN 9780262611466 [ref:2]
|
|
148
|
+
3. Kahneman, D., & Klein, G. (2009). "Conditions for intuitive expertise: A failure to disagree." *American Psychologist*, 64(6), 515-526 [ref:3]
|
|
149
|
+
4. Doshi, S. Pre-mortems playbook. https://coda.io/@shreyas/pre-mortems [ref:4]
|
|
150
|
+
5. Cohn, M. "Use a Pre-Mortem to Identify Project Risks Before They Occur." https://www.mountaingoatsoftware.com/blog/use-a-pre-mortem-to-identify-project-risks-before-they-occur [ref:5]
|
|
151
|
+
6. The Uncertainty Project. Pre-Mortem tool. https://www.theuncertaintyproject.org/tools/pre-mortem [ref:6]
|
|
152
|
+
7. PayPal Tech. "Pre-mortem — Technically Working Backwards." https://medium.com/paypal-tech/pre-mortem-technically-working-backwards-1724eafbba02 [ref:7]
|
|
153
|
+
8. Mitchell, D., Russo, J., Pennington, N. (1989). "Back to the future: Temporal perspective in the explanation of events." *Journal of Behavioral Decision Making* — cited in the HBR piece as the ~30% prospective-hindsight lift
|
|
154
|
+
|
|
155
|
+
## Related luminaries
|
|
156
|
+
|
|
157
|
+
- **Daniel Kahneman** — planning fallacy, System 1/2, and the adversarial-collaboration partner (2009 paper). Pre-mortem is one direct application of Kahneman's finding that people plan too optimistically.
|
|
158
|
+
- **Paul Slovic** — risk perception and the affect heuristic; foundational to the naturalistic-decision-making tradition Klein extends.
|
|
159
|
+
- **Amos Tversky** — heuristics and biases; the tradition Klein both extends and pushes back against (Klein argues expertise can be trusted where general heuristics fail).
|
|
160
|
+
- **Herbert Simon** — bounded rationality; the RPD model is Simon's satisficing applied to expert decision-making.
|
|
161
|
+
- **Karl Weick** — sensemaking in high-reliability organizations; sibling to naturalistic decision-making.
|
|
162
|
+
- **Michael Feathers** — characterization tests as the code-side analog: pin what the system does before changing it, just as Klein's pre-mortem pins what could go wrong before shipping.
|
|
163
|
+
|
|
164
|
+
## Substrate-as-system anchor (bassclef)
|
|
165
|
+
|
|
166
|
+
Klein's pre-mortem anchors bet 2026-07-07a's `/pre-mortem` skill (ticket #655). The skill produces `docs/risk-ledgers/<slug>.md` — a written pre-mortem artifact — and is always-fire for the domain list documented in `docs/operator-questions/2026-07-07-longrun-open-questions.md` Q2. Klein's blame-safe silent-write-down + round-robin shape maps naturally to a solo-operator + Claude conversational shape: Claude prompts each lens; operator writes each concern; Claude collates without ranking during the pass; then a follow-up pass names owners and mitigations. The 4-step shape is preserved even when the "team" is one operator plus multiple luminary lenses summoned in sequence.
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
---
|
|
2
|
+
tier: lite
|
|
3
|
+
name: Kaoru Ishikawa
|
|
4
|
+
slug: kaoru-ishikawa
|
|
5
|
+
claimed_by: [builder, architect, closer]
|
|
6
|
+
primary_domain: engineering
|
|
7
|
+
depth: full
|
|
8
|
+
description: "\"Before you fix the cause, name every category it could live in.\""
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Kaoru Ishikawa
|
|
12
|
+
|
|
13
|
+
## Signature
|
|
14
|
+
|
|
15
|
+
*"Before you fix the cause, name every category it could live in."*
|
|
16
|
+
|
|
17
|
+
Kaoru Ishikawa (1915–1989) was a Tokyo University engineering professor
|
|
18
|
+
who created the **fishbone diagram** in 1968 — a tool that forces an
|
|
19
|
+
investigator to enumerate categories of possible cause before picking
|
|
20
|
+
which one to chase. He named six default categories (Method, Machine,
|
|
21
|
+
Material, Man, Measurement, Environment — the **6M**) so any team can
|
|
22
|
+
start from the same starting set rather than guessing what to look at
|
|
23
|
+
first. He also pioneered **quality circles** at Kawasaki Steel in 1962,
|
|
24
|
+
where shop-floor workers themselves ran the diagnosis loop on the
|
|
25
|
+
problems they could see better than any manager.
|
|
26
|
+
|
|
27
|
+
## Core methods
|
|
28
|
+
|
|
29
|
+
- **Fishbone diagram (Ishikawa diagram)** — draw the problem on the
|
|
30
|
+
right as the fish head; draw a horizontal spine; branch six diagonal
|
|
31
|
+
bones for the 6M categories. Fill each bone with contributing causes.
|
|
32
|
+
Use when the problem has more than one likely cause OR the team is
|
|
33
|
+
about to default to the most familiar cause without checking the rest.
|
|
34
|
+
- **6M categorization** — Method (how we do the work), Machine (tools
|
|
35
|
+
and systems), Material (inputs we depend on), Man (people, roles,
|
|
36
|
+
training), Measurement (what we count and how), Environment (context
|
|
37
|
+
the work runs in). Adapt the six to the domain when needed (software:
|
|
38
|
+
Methods, Tools, Data, People, Metrics, Context).
|
|
39
|
+
- **Quality circles** — small groups of people closest to the work meet
|
|
40
|
+
weekly, pick one problem, run the diagnosis, propose the fix. The
|
|
41
|
+
people who see the problem are the people who fix it. The discipline
|
|
42
|
+
is the regular cadence, not the size of the group.
|
|
43
|
+
- **Seven basic tools of quality** — fishbone, Pareto, check sheet,
|
|
44
|
+
control chart, histogram, scatter plot, flowchart. Ishikawa argued
|
|
45
|
+
any plant worker could be trained on all seven in a week and that
|
|
46
|
+
most quality problems yield to just these tools, no statistician
|
|
47
|
+
required.
|
|
48
|
+
|
|
49
|
+
## When to channel this luminary
|
|
50
|
+
|
|
51
|
+
Channel Ishikawa when the failure has multiple visible contributors and
|
|
52
|
+
the team is about to fix the most familiar one. Specifically: when the
|
|
53
|
+
agent is choosing between competing remediations (a / b / c framings),
|
|
54
|
+
when a single session surfaces three or more substrate defects of
|
|
55
|
+
different shapes, when an audit is starting and the question is "what
|
|
56
|
+
categories of defect do we expect to find," or when a chronicle starts
|
|
57
|
+
to read like a list of unrelated incidents that probably share a deeper
|
|
58
|
+
class.
|
|
59
|
+
|
|
60
|
+
Fishbone is the diagnostic move BEFORE the five-whys move. Five-whys
|
|
61
|
+
goes deep on one chain. Fishbone goes broad across categories first,
|
|
62
|
+
then five-whys picks the chain worth going deep on.
|
|
63
|
+
|
|
64
|
+
## Stack translation
|
|
65
|
+
|
|
66
|
+
Bassclef's substrate is the production system Ishikawa would analyze.
|
|
67
|
+
The 6M maps cleanly to bassclef surfaces:
|
|
68
|
+
|
|
69
|
+
- **Method** — the discipline rules in `.claude/rules/`, the procedures
|
|
70
|
+
in skill bodies, the gate cascades the operator runs by hand
|
|
71
|
+
- **Machine** — the hooks in `.claude/hooks/`, the validators, the
|
|
72
|
+
state-spine accessors, the harness itself
|
|
73
|
+
- **Material** — `substrate.config.md`, schemas in
|
|
74
|
+
`standards/state-spine/schemas/`, the source data the validators read
|
|
75
|
+
- **Man** — the operator, Claude Code agents, adopter agents downstream
|
|
76
|
+
- **Measurement** — gate-compliance counters, chronicle Gate Evidence
|
|
77
|
+
tables, marker counts in `state/markers/`
|
|
78
|
+
- **Environment** — the harness session lifecycle, the file-system
|
|
79
|
+
state, the network reachability for `gh` and `git fetch`
|
|
80
|
+
|
|
81
|
+
When a substrate defect surfaces, draw the fishbone before picking a
|
|
82
|
+
fix. The substrate.config.md missing-field gate that fired tonight is a
|
|
83
|
+
Material defect (the file is the input, the field is missing). The
|
|
84
|
+
unwired hooks are a Machine defect (the hooks exist but the wiring
|
|
85
|
+
plumbing dropped them). The validator-without-bootstrap is a Method
|
|
86
|
+
defect (the hardening shipped without the bootstrap row that the method
|
|
87
|
+
required). These are three categories, three classes, three remediation
|
|
88
|
+
paths — not one bug to patch.
|
|
89
|
+
|
|
90
|
+
## Anti-patterns it prevents
|
|
91
|
+
|
|
92
|
+
- **Narrow-fix default** — Without the fishbone categorization, the
|
|
93
|
+
agent picks the smallest visible fix and ships. Three sessions later
|
|
94
|
+
the same class of defect surfaces in a different category and the
|
|
95
|
+
operator carries the cost of re-diagnosing what was actually one
|
|
96
|
+
class of problem all along.
|
|
97
|
+
- **Cause-of-the-week** — Without the 6M anchor, every postmortem picks
|
|
98
|
+
whichever category was most recently in mind. Last week it was
|
|
99
|
+
Material (config files); this week it's Machine (hooks); next week
|
|
100
|
+
someone decides it's really Method (people not following rules). The
|
|
101
|
+
diagnosis bounces.
|
|
102
|
+
- **Single-author root-cause** — Without quality-circle discipline, the
|
|
103
|
+
diagnosis comes from whoever happens to be in the chair. Ishikawa's
|
|
104
|
+
insight: the operator running daily sees patterns the architect
|
|
105
|
+
doesn't. Bassclef's discipline-gate cascade where the operator
|
|
106
|
+
surfaces defects mid-session is the bassclef analog of the quality
|
|
107
|
+
circle.
|
|
108
|
+
|
|
109
|
+
## Worked example
|
|
110
|
+
|
|
111
|
+
PR #1371 CI failure on public bassclef (2026-06-24). Surface symptom:
|
|
112
|
+
one test references a script not shipped to public. The agent's first
|
|
113
|
+
framing was (a) narrow fix / (b) pause + audit / (c) investigate origin.
|
|
114
|
+
That framing is the cause-of-the-week trap: a is Material (mark test
|
|
115
|
+
`tier: upstream`), b is Method (run the audit first), c is Machine
|
|
116
|
+
(figure out where the 30 public-only scripts came from). The operator
|
|
117
|
+
sensing the framing was off is the quality-circle signal.
|
|
118
|
+
|
|
119
|
+
Applied fishbone to the symptom "release pipeline produces failing
|
|
120
|
+
public CI":
|
|
121
|
+
|
|
122
|
+
- **Method** — `release-to-bassclef.sh` ALLOWED_PATHS rule was added
|
|
123
|
+
without a parallel discipline for "what already lives on public"
|
|
124
|
+
- **Machine** — the release script `rsync --delete`s the public tree
|
|
125
|
+
for paths it ships; the rule "we do not break adopters" has no
|
|
126
|
+
mechanical guard at that surface
|
|
127
|
+
- **Material** — 30+ public-only scripts of unknown origin (apply-
|
|
128
|
+
migration.sh, install.sh, bind-subdomain.sh) — likely vestiges of the
|
|
129
|
+
pre-rename canonical-public era
|
|
130
|
+
- **Man** — single operator + agents; no quality-circle review of the
|
|
131
|
+
public bassclef tree's origin since the canonical→bassclef rename
|
|
132
|
+
- **Measurement** — no count of "files on public that do not exist on
|
|
133
|
+
bassclef-upstream" anywhere; the defect is invisible until /release
|
|
134
|
+
fires
|
|
135
|
+
- **Environment** — closed beta has not opened; cheapest possible
|
|
136
|
+
window to harden before any external adopter depends on those
|
|
137
|
+
scripts
|
|
138
|
+
|
|
139
|
+
Across all six categories, the deeper class is clear: public bassclef
|
|
140
|
+
holds files of unknown provenance because the canonical→bassclef rename
|
|
141
|
+
treated the public tree as a destination, not a source-to-reconcile.
|
|
142
|
+
That is the root class. Three of the four 2026-06-24 substrate defects
|
|
143
|
+
trace back to the same class. /architect-review at #320 reads as the
|
|
144
|
+
right next move.
|
|
145
|
+
|
|
146
|
+
## Sources
|
|
147
|
+
|
|
148
|
+
- *Guide to Quality Control* — Ishikawa (1968; English 1976)
|
|
149
|
+
- *What Is Total Quality Control? The Japanese Way* — Ishikawa (1985)
|
|
150
|
+
- *Introduction to Quality Control* — Ishikawa (1990)
|
|
151
|
+
|
|
152
|
+
## Related luminaries
|
|
153
|
+
|
|
154
|
+
- **Taiichi Ohno** — Five Whys goes deep on one chain; Ishikawa's
|
|
155
|
+
fishbone goes broad across categories first. Use Ishikawa then Ohno.
|
|
156
|
+
- **W. Edwards Deming** — PDCA cycle closes the diagnosis loop; PDCA
|
|
157
|
+
needs a category to act on, which is what fishbone delivers.
|
|
158
|
+
- **Kepner-Tregoe** — Is/Is Not narrows the scope of what is affected
|
|
159
|
+
before fishbone categorizes possible causes. Use KT then Ishikawa
|
|
160
|
+
then Ohno.
|
|
161
|
+
- **Joseph Juran** — Pareto principle on causes (80/20); after
|
|
162
|
+
fishbone surfaces categories, Pareto picks which one to chase first.
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
---
|
|
2
|
+
tier: lite
|
|
3
|
+
name: Lean Product Canvas
|
|
4
|
+
slug: lean-product-canvas
|
|
5
|
+
claimed_by: [product-manager]
|
|
6
|
+
primary_domain: product
|
|
7
|
+
depth: stub
|
|
8
|
+
description: "\"If you can't fill it in 30 minutes, you don't understand the problem.\""
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Lean Product Canvas (Dan Olsen)
|
|
12
|
+
|
|
13
|
+
## Signature
|
|
14
|
+
|
|
15
|
+
*"If you can't fill it in 30 minutes, you don't understand the problem."*
|
|
16
|
+
|
|
17
|
+
One-page product planning canvas from Dan Olsen (*The Lean Product
|
|
18
|
+
Playbook*). Forces concise articulation of target customer, problem,
|
|
19
|
+
value proposition, feature set, and UX.
|
|
20
|
+
|
|
21
|
+
## Core methods
|
|
22
|
+
|
|
23
|
+
- **Problem Space vs Solution Space** — clearly separate the two;
|
|
24
|
+
ideate on problem first, converge on solution second.
|
|
25
|
+
- **Product-Market Fit Pyramid** — target customer → needs → value
|
|
26
|
+
prop → feature set → UX. Each level supports the next.
|
|
27
|
+
- **Hypothesis-driven product** — treat canvas assumptions as
|
|
28
|
+
hypotheses to test, not decisions to commit to.
|
|
29
|
+
|
|
30
|
+
## Sources
|
|
31
|
+
|
|
32
|
+
- *The Lean Product Playbook* — Olsen (2015)
|
|
33
|
+
- leanproductplaybook.com
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
---
|
|
2
|
+
tier: lite
|
|
3
|
+
name: Luke Wroblewski
|
|
4
|
+
slug: luke-wroblewski
|
|
5
|
+
claimed_by: [designer]
|
|
6
|
+
referenced_by_skills: [frontend-design, prototype-variants, visual-review]
|
|
7
|
+
primary_domain: ux
|
|
8
|
+
depth: full
|
|
9
|
+
agent_drafted: 2026-05-06
|
|
10
|
+
operator_review_pending: true
|
|
11
|
+
verification_status: verified
|
|
12
|
+
sources:
|
|
13
|
+
- type: book
|
|
14
|
+
title: "Mobile First"
|
|
15
|
+
authors: ["Luke Wroblewski"]
|
|
16
|
+
year: 2011
|
|
17
|
+
isbn: "978-1937557096"
|
|
18
|
+
url: "https://abookapart.com/products/mobile-first"
|
|
19
|
+
methodology_covered: ["Mobile first principle", "thumb zones", "progressive enhancement"]
|
|
20
|
+
- type: book
|
|
21
|
+
title: "Web Form Design: Filling in the Blanks"
|
|
22
|
+
authors: ["Luke Wroblewski"]
|
|
23
|
+
year: 2008
|
|
24
|
+
isbn: "978-1933820224"
|
|
25
|
+
url: "https://rosenfeldmedia.com/books/web-form-design/"
|
|
26
|
+
methodology_covered: ["input reduction", "progressive disclosure in forms", "inline validation", "form field design patterns"]
|
|
27
|
+
- type: website
|
|
28
|
+
title: "LukeW.com — Ideation + Creation"
|
|
29
|
+
authors: ["Luke Wroblewski"]
|
|
30
|
+
url: "https://www.lukew.com"
|
|
31
|
+
methodology_covered: ["ongoing mobile + form design research and essays"]
|
|
32
|
+
solves_problems_brownfield:
|
|
33
|
+
- "Existing form has many fields and abandonment is high"
|
|
34
|
+
- "Mobile experience is desktop-first squeezed into small screens"
|
|
35
|
+
- "Input types, validation, and progressive disclosure aren't optimized for thumbs"
|
|
36
|
+
- "Forms ask for data the user has already provided or the system can infer"
|
|
37
|
+
solves_problems_greenfield:
|
|
38
|
+
- "Designing a mobile-first product where forms are core to the value"
|
|
39
|
+
- "Planning input surfaces where progressive disclosure must be designed from the start"
|
|
40
|
+
- "Building for mobile users where thumb-zone economy matters"
|
|
41
|
+
- "Designing form flows where staged input (now / later / never-asked) is a first-class concern"
|
|
42
|
+
anti_patterns:
|
|
43
|
+
- "Read-only data display — Wroblewski is for input"
|
|
44
|
+
- "Desktop-power-tool surfaces where mobile isn't primary"
|
|
45
|
+
- "Quick utilities where forms are minimal"
|
|
46
|
+
description: "\"Mobile first forces you to focus on what matters.\""
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
# Luke Wroblewski
|
|
50
|
+
|
|
51
|
+
## Signature
|
|
52
|
+
|
|
53
|
+
*"Mobile first forces you to focus on what matters."*
|
|
54
|
+
|
|
55
|
+
Author of *Mobile First* (2011) and *Web Form Design: Filling in the Blanks* (2008). Product Director at Google; previously co-founded Bagcheck (acquired by Twitter); led design at Yahoo + eBay. The voice for **mobile-first, touch-first, constraint-led interaction design** — using mobile's constraints as a forcing function for clarity.
|
|
56
|
+
|
|
57
|
+
Wroblewski's signature contribution is **mobile-first as discipline** (not as squeeze) — designing for the most constrained context (small screen, touch input, variable network, divided attention) FIRST, then progressively enhancing for less-constrained contexts. The constraints expose what's essential; less-essential elements naturally get cut.
|
|
58
|
+
|
|
59
|
+
For canonical, Wroblewski is the form-design + mobile-discipline luminary. Where Friedman is the broader pattern catalog and Krug is the comprehension discipline, Wroblewski is the specific authority on input surfaces + mobile-first thinking.
|
|
60
|
+
|
|
61
|
+
## Sources
|
|
62
|
+
|
|
63
|
+
- *Mobile First* — Wroblewski, A Book Apart (2011) — primary
|
|
64
|
+
- *Web Form Design: Filling in the Blanks* — Wroblewski, Rosenfeld Media (2008) — primary
|
|
65
|
+
- [lukew.com](https://lukew.com) — primary site, ongoing essays + research
|
|
66
|
+
- *Funnel: How Forms Convert* — research project (lukew.com/funnel)
|
|
67
|
+
- Google's mobile + form design teams influenced by Wroblewski's discipline (he leads them now)
|
|
68
|
+
|
|
69
|
+
## Core methods
|
|
70
|
+
|
|
71
|
+
- **Mobile first** — Design for the most constrained context first: [ref:1]
|
|
72
|
+
- Small screen → forces priority (what's essential?)
|
|
73
|
+
- Touch input → forces gesture-friendly affordances
|
|
74
|
+
- Variable network → forces lean payloads + offline-first
|
|
75
|
+
- Divided attention → forces clarity + scannability
|
|
76
|
+
- Larger screens are progressive enhancement; the mobile design is the truth
|
|
77
|
+
|
|
78
|
+
- **Thumb zones** — Physical-reach analysis of mobile devices: [ref:1]
|
|
79
|
+
- Bottom-center is most reachable (one-handed)
|
|
80
|
+
- Bottom-corners are reachable but uncomfortable
|
|
81
|
+
- Top of screen is hard-reach; reserve for non-primary
|
|
82
|
+
- Primary actions in thumb-reachable zone; chrome / less-frequent actions higher
|
|
83
|
+
|
|
84
|
+
- **Input reduction** — Every form field is friction: [ref:2]
|
|
85
|
+
- Audit every field: required? Why? Could the system infer it?
|
|
86
|
+
- Required fields: minimum count; explain why each is needed
|
|
87
|
+
- Optional fields: collect later if at all
|
|
88
|
+
- Pre-fill from sensors / context / user history wherever possible
|
|
89
|
+
|
|
90
|
+
- **Progressive disclosure** — Stage input over time:
|
|
91
|
+
- Now (essential to start)
|
|
92
|
+
- Later (when needed, contextually)
|
|
93
|
+
- Never-asked (the system infers or doesn't need)
|
|
94
|
+
|
|
95
|
+
- **Input type discipline** — Use HTML5 input types correctly:
|
|
96
|
+
- `type="email"` for email; triggers email keyboard
|
|
97
|
+
- `type="tel"` for phone; triggers number pad
|
|
98
|
+
- `type="number"` for quantities; triggers number keyboard
|
|
99
|
+
- `type="date"` for dates; triggers date picker
|
|
100
|
+
- Type discipline reduces friction substantially on mobile
|
|
101
|
+
|
|
102
|
+
- **Inline validation** — Validation on field-blur or after-typing-stops; not at submit
|
|
103
|
+
- **Form layout** — One column; labels above; touch-target sized inputs
|
|
104
|
+
- **Top of forms** — Don't show legal text / policy / context here; dive straight to inputs; legal at bottom or behind link
|
|
105
|
+
|
|
106
|
+
## INSTEAD-block discipline
|
|
107
|
+
|
|
108
|
+
| Anti-pattern | INSTEAD |
|
|
109
|
+
|---|---|
|
|
110
|
+
| Desktop-first design squeezed for mobile | Mobile-first; design for small screen first; larger is progressive enhancement |
|
|
111
|
+
| Form with 12+ fields | Audit ruthlessly; minimum fields to enable the user's task; defer or infer the rest |
|
|
112
|
+
| Labels beside inputs | Labels ABOVE inputs (mobile + desktop); easier to scan; works with screen readers |
|
|
113
|
+
| Multi-column form layout on mobile | One column; tap target accessibility; users scroll vertically anyway |
|
|
114
|
+
| Generic `<input type="text">` for everything | Use HTML5 input types: `email`, `tel`, `number`, `date`, etc.; right keyboard on mobile |
|
|
115
|
+
| Validation on submit only | Inline validation on field-blur; clear error messages; don't punish until submit-time |
|
|
116
|
+
| Touch targets sized for cursor (28-32px) | Touch targets ≥ 44x44px (iOS) / 48x48dp (Android); thumb-friendly |
|
|
117
|
+
| Required and optional fields visually identical | Mark optional explicitly ("Phone number (optional)"); reduces cognitive load |
|
|
118
|
+
| Long forms as one screen | Multi-step with progress indicator; chunks respect working memory; user feels progress |
|
|
119
|
+
| Top-of-form filled with legal/policy text | Top of form: dive straight to inputs; legal at bottom or behind link |
|
|
120
|
+
| "Sign up to continue" before user explores | Soft-lock: try the product, sign up when value is felt; reduces sign-up friction at value-discovery moment |
|
|
121
|
+
| Inferring nothing; asking for everything | Sensors + context + user history pre-fill: location from GPS, name from device-account, history from previous-fields |
|
|
122
|
+
| Mobile-only navigation hidden in hamburger | Critical actions visible by default; secondary in hamburger; hamburger should be #2 not #1 |
|
|
123
|
+
| Capturing data the system can derive | Don't ask date if creation-time is the answer; don't ask city if GPS or postal-code reveals; pre-fill |
|
|
124
|
+
|
|
125
|
+
## When to channel this luminary
|
|
126
|
+
|
|
127
|
+
- Always — when designing or auditing forms or any input-heavy surface
|
|
128
|
+
- Especially — when the product is mobile-first / touch-first; Wroblewski's discipline is mandatory there
|
|
129
|
+
- Pair with `vitaly-friedman` (broader pattern catalog) — Friedman + Wroblewski compose: Friedman's general patterns + Wroblewski's form/mobile depth
|
|
130
|
+
- Pair with `bj-fogg` (behavior model) — Wroblewski's input-reduction reduces required ABILITY (Fogg's lever); pair for behavior + form design
|
|
131
|
+
|
|
132
|
+
Do NOT use this luminary alone for read-only data display, desktop-power-tool surfaces, or quick utilities where forms are minimal.
|
|
133
|
+
|
|
134
|
+
## Stack translation
|
|
135
|
+
|
|
136
|
+
In React + Tailwind + accessible primitives:
|
|
137
|
+
|
|
138
|
+
- **Mobile-first CSS** → Tailwind's mobile-first utilities default; `md:` and `lg:` are progressive enhancement
|
|
139
|
+
- **Thumb zones** → Primary mobile actions (`<BottomActionBar>`) at bottom; chrome (logo, secondary nav) at top; hamburger only for tertiary
|
|
140
|
+
- **Form layout** → Single column always; labels above inputs (`<Label>` rendered before `<Input>` semantically + visually); generous spacing between fields
|
|
141
|
+
- **Input types** → HTML5 type attribute precise per field semantic: `email`, `tel`, `number`, `date`, `url`, etc.
|
|
142
|
+
- **Touch targets** → `min-h-[44px]` on all interactive elements (mobile); `<Button>` component enforces minimum
|
|
143
|
+
- **Inline validation** → `useFormState` or React Hook Form; validation on blur; error displayed below field with plain language
|
|
144
|
+
- **Progressive disclosure** → Multi-step forms with `<Wizard>` component; progress indicator visible; back-step always available
|
|
145
|
+
- **Optional field marking** → `(optional)` suffix on label OR distinct visual treatment for required vs optional
|
|
146
|
+
- **Input pre-fill** → `useUserContext()` / `useDevice()` hooks pre-fill known values; user can override
|
|
147
|
+
- **Sensor input** → Camera scan, geolocation, biometric where appropriate; reduce typing on mobile
|
|
148
|
+
- **Lean payloads** → Mobile-aware loading; defer non-critical assets; `loading="lazy"` images
|
|
149
|
+
- **Audit script** → `/visual-qa` includes mobile-specific checklist: thumb-zone, touch-targets, input-types, inline-validation, lean-payload
|
|
150
|
+
|
|
151
|
+
## Anti-patterns it prevents
|
|
152
|
+
|
|
153
|
+
- **Desktop-first squeeze** — designed for desktop, mobile is afterthought; mobile experience suffers
|
|
154
|
+
- **Form-as-friction** — long forms with default text inputs; mobile users abandon
|
|
155
|
+
- **Tap-target small** — 32px buttons; mobile users miss; frustrate
|
|
156
|
+
- **No input-type discipline** — generic `<input>` everywhere; wrong keyboard on mobile; friction
|
|
157
|
+
- **Submit-time validation** — user fills form, hits submit, sees 5 errors; rage; abandon
|
|
158
|
+
- **Cognitive-load form** — required + optional fields visually identical; user uncertain; abandon
|
|
159
|
+
- **Pre-fill skipped** — system has data, asks anyway; user types what's already known
|
|
160
|
+
- **Top-of-form legal** — user has to scroll past policy; gives up at "by signing up..." paragraph
|
|
161
|
+
|
|
162
|
+
## Worked example
|
|
163
|
+
|
|
164
|
+
For canonical's hypothetical mobile sign-up flow:
|
|
165
|
+
|
|
166
|
+
Wroblewski's prescription:
|
|
167
|
+
|
|
168
|
+
**Mobile-first design**:
|
|
169
|
+
- Single column; labels above inputs; generous spacing
|
|
170
|
+
- 4 fields total: email + name + repo-URL + create-button
|
|
171
|
+
- Below: "Why we ask for these" disclosure (legal at bottom, behind link)
|
|
172
|
+
|
|
173
|
+
**Input discipline**:
|
|
174
|
+
- Email: `type="email"` (email keyboard) + inline domain validation
|
|
175
|
+
- Name: pre-fill from device account (Google / Apple / etc.) if signed in
|
|
176
|
+
- Repo-URL: paste-from-clipboard hint visible (mobile users often paste); accepts GitHub URL or `owner/repo`
|
|
177
|
+
- Create button: full-width; `min-h-[48px]`; placed in thumb-reachable zone
|
|
178
|
+
|
|
179
|
+
**Progressive disclosure**:
|
|
180
|
+
- Sign-up = email + repo-URL ONLY (2 fields)
|
|
181
|
+
- After first session: "want to add your name? optional"
|
|
182
|
+
- Advanced settings (auth tokens, deploy targets): never-asked; configured later when needed
|
|
183
|
+
|
|
184
|
+
**Inline validation**:
|
|
185
|
+
- Email: validates on blur; "looks like a valid email" or "domain looks unfinished"
|
|
186
|
+
- Repo-URL: validates on blur; checks "github.com" reachability; suggests format if user typed something off
|
|
187
|
+
|
|
188
|
+
**Pre-fill**:
|
|
189
|
+
- If user is on a phone with active GitHub session: pre-fill email + name
|
|
190
|
+
- If user is on canonical-installed device: pre-fill from device's user
|
|
191
|
+
|
|
192
|
+
**Form payload (mobile-aware)**:
|
|
193
|
+
- Form HTML + minimal JS bundle; no analytics-blocking client-side; loads on slow connection in <2s
|
|
194
|
+
- After submit, optimistic UI ("setting up your repo...") + actual work async
|
|
195
|
+
|
|
196
|
+
What this luminary catches that "make a sign-up form" misses: the field-count discipline (4 not 12), the input-type precision, the pre-fill from context, the progressive disclosure (2 fields now, more later), the thumb-zone-button placement, the inline validation pattern.
|
|
197
|
+
|
|
198
|
+
## How to use in canonical's chain
|
|
199
|
+
|
|
200
|
+
In `/visual-review`:
|
|
201
|
+
- Form audit per Wroblewski rubric: field count, label position, input types, thumb zones, inline validation
|
|
202
|
+
- Mobile-specific audit category required for mobile-targeting surfaces
|
|
203
|
+
|
|
204
|
+
In `/visual-qa`:
|
|
205
|
+
- Mobile interactive testing per Wroblewski; thumb-zone reach + touch targets + input keyboards verified
|
|
206
|
+
- Form-completion timing measured; abandonment points identified
|
|
207
|
+
|
|
208
|
+
In `/riff-prototypes`:
|
|
209
|
+
- Mobile-first variants explicitly use Wroblewski's discipline as primary
|
|
210
|
+
- Champion-challenger against desktop-first variants if both modes target
|
|
211
|
+
|
|
212
|
+
In `/frontend-design`:
|
|
213
|
+
- Wroblewski's principles as input-surface defaults
|
|
214
|
+
- Form components in design system follow Wroblewski-shaped patterns
|
|
215
|
+
|
|
216
|
+
## Related luminaries
|
|
217
|
+
|
|
218
|
+
- **Vitaly Friedman** — Broader pattern catalog; Friedman + Wroblewski compose for forms + mobile
|
|
219
|
+
- **Steve Krug** — Don't make me think; Krug + Wroblewski share the input-reduction discipline
|
|
220
|
+
- **BJ Fogg** — Behavior model; Wroblewski's input-reduction lowers ability cost (Fogg's primary lever)
|
|
221
|
+
- **Susan Weinschenk** — Cognitive science; Weinschenk's working memory limits inform Wroblewski's progressive disclosure
|
|
222
|
+
- **Apple HIG** — Mobile platform conventions; HIG + Wroblewski align on touch-target sizes + thumb zones
|
|
223
|
+
- **Google Material Design** — Form components + mobile patterns; Material's primitives implement Wroblewski's principles
|
|
224
|
+
- **Aarron Walter** — Microcopy; Walter's voice + Wroblewski's structure compose for delightful forms
|