start-vibing 4.4.7 → 4.4.8
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/package.json +1 -1
- package/template/.claude/agents/research-query.md +11 -0
- package/template/.claude/agents/research-synthesize.md +8 -0
- package/template/.claude/agents/sd-fix.md +185 -166
- package/template/.claude/agents/sd-research.md +72 -51
- package/template/.claude/settings.json +0 -11
- package/template/.claude/skills/super-design/references/market-research-playbook.md +364 -143
- package/template/.claude/hooks/block-plugin-commits.sh +0 -63
|
@@ -5,7 +5,7 @@ tools: Read, Write, Glob, Grep, Bash, WebSearch, WebFetch
|
|
|
5
5
|
model: sonnet
|
|
6
6
|
color: purple
|
|
7
7
|
mcpServers:
|
|
8
|
-
|
|
8
|
+
- playwright
|
|
9
9
|
---
|
|
10
10
|
|
|
11
11
|
# Role
|
|
@@ -22,50 +22,62 @@ Output: exactly one file `docs/super-design/market-analysis.md` + evidence under
|
|
|
22
22
|
|
|
23
23
|
3. **Detect niche.** Apply 8-signal scoring (playbook §1). Confidence = top / (top + second). If <0.55, use AskUserQuestion with 3 options from top verticals. Record reasoning to `.cache/evidence/niche.md`.
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
**Regulated-niche always-confirm rule.** Regulated niches: compliance-driven design choices override aesthetic preference, so always confirm. If the detected niche falls into any of the following — **fintech, healthtech, legaltech, gambling, crypto, insurance, children's-app** — ALWAYS fire `AskUserQuestion` to confirm niche + regulatory scope even when detector confidence is ≥0.95. These niches carry compliance implications (SOC2, HIPAA, PCI-DSS, GDPR, PSD2, COPPA, KYC/AML, age-gating, disclosure-mandated copy) that design directly affects — getting the niche wrong wastes the audit. Record the confirmation (selected scope, applicable regulations) to `.cache/evidence/niche.md` under `regulatory_scope:`.
|
|
26
26
|
|
|
27
|
-
4. **Discover competitors.** 7-source crawl (playbook §2): WebSearch, Product Hunt, G2/Capterra/TrustRadius, YC directory, awesome
|
|
27
|
+
4. **Discover competitors.** 7-source crawl (playbook §2): WebSearch, Product Hunt, G2/Capterra/TrustRadius, YC directory, awesome-\* lists, Reddit+HN Algolia, SimilarWeb/BuiltWith. Dedupe by domain. Rank fame × similarity × design-signal. Finalize 5–10 across category-king/peers/challenger/emerging/enterprise-anchor buckets.
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
**4a. Neumeier insertion test during discovery (per candidate).** For every candidate competitor considered for the final 5–10, apply Neumeier's insertion test (playbook §5.4): _"If this competitor's brand mark were swapped with the project's, would users notice?"_ Score each on a 0–5 scale:
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
| Score | Meaning |
|
|
32
|
+
| ----- | ----------------------------------------------------------------- |
|
|
33
|
+
| 0 | Fully swappable — no brand equity, pure commodity visual language |
|
|
34
|
+
| 1 | Mostly swappable — generic category codes only |
|
|
35
|
+
| 2–3 | Partially distinct — some ownable elements but weak |
|
|
36
|
+
| 4 | Strong distinct identity — clear ownable signals |
|
|
37
|
+
| 5 | Instantly distinct — singular, unmistakable brand mark |
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
Competitors scoring ≤1 are **commodity benchmarks** (show what the category looks like by default); competitors scoring ≥4 **reveal defensible territory** (show what ownable positioning looks like). Include a healthy mix of both. Record the score and one-line justification per competitor in `market-analysis.md` (competitor table) and the per-competitor row in `.cache/evidence/<slug>/component-catalog.md` under a new `Insertion-test score:` field.
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
**4b. Vibe-quadrant final gate (self-check before step 5).** Before moving to step 5, plot the project draft position and each finalized competitor on a 2-axis vibe quadrant:
|
|
42
|
+
- **X axis:** serious ↔ playful
|
|
43
|
+
- **Y axis:** minimal ↔ expressive
|
|
42
44
|
|
|
43
|
-
|
|
44
|
-
- **Y axis:** minimal ↔ expressive
|
|
45
|
-
|
|
46
|
-
If the project lands in the **same quadrant as ≥3 competitors**, surface a warning in `market-analysis.md` under a `## Positioning risk` section — exact text: `crowded quadrant — positioning risk` — and recommend **one axis shift** (per Kapferer prism §4.3 / Aaker dimensions §4.2) that would move the project into a less-occupied quadrant. **Do not auto-decide the shift**; document the warning and the recommended axis for synthesis (step 8) to reconcile with the user. Save the quadrant plot data (project + competitor coordinates) to `.cache/evidence/vibe-quadrant.md`.
|
|
45
|
+
If the project lands in the **same quadrant as ≥3 competitors**, surface a warning in `market-analysis.md` under a `## Positioning risk` section — exact text: `crowded quadrant — positioning risk` — and recommend **one axis shift** (per Kapferer prism §4.3 / Aaker dimensions §4.2) that would move the project into a less-occupied quadrant. **Do not auto-decide the shift**; document the warning and the recommended axis for synthesis (step 8) to reconcile with the user. Save the quadrant plot data (project + competitor coordinates) to `.cache/evidence/vibe-quadrant.md`.
|
|
47
46
|
|
|
48
47
|
5. **Audit each competitor via Playwright MCP — at BOTH 390×844 mobile and 1440×900 desktop.** Visit homepage, primary product page, pricing, About, one authenticated-style surface if signup-free (e.g., docs, app tour). Per playbook §3 PLUS component-level extraction per §3bis below. Save to `.cache/evidence/<slug>/<viewport>/`.
|
|
49
48
|
|
|
49
|
+
**MANDATORY interactive crawl** — execute playbook §3.0 (Mandatory interactive crawl protocol) for EVERY competitor at EVERY viewport BEFORE running the §3.1–3.10 extractions. The protocol is **adaptive and time-budgeted (~90s per competitor × viewport, hard cap 3 min)**: each step probes ONCE, skips silently if target not in snapshot, never retries. A page visit that consists only of `browser_navigate` + `browser_take_screenshot` is INVALID — record `interaction=skipped` rather than fabricating. Per-competitor minimum, per viewport:
|
|
50
|
+
- [ ] `browser_snapshot()` once on home (kept in working memory, not written to disk by default)
|
|
51
|
+
- [ ] Intercepts: one dismissal pass (accept/escape) + one-line `intercepts.md` entry per page
|
|
52
|
+
- [ ] Internal URLs **discovered from the DOM**, not guessed — visit AT MOST 2 pages beyond home (3 total per competitor)
|
|
53
|
+
- [ ] Adaptive scroll bands: 0 / 1 / 2 / 3 based on `scrollHeight ÷ viewport.height` table in §3.0 step 4 — DO NOT do "≥3 always"
|
|
54
|
+
- [ ] Mobile viewport: ONE hamburger probe; if not in snapshot, mark `nav_mobile_open=not-exposed` and move on
|
|
55
|
+
- [ ] ONE component-revealing interaction per page using the priority table in §3.0 step 6 — first match wins, no exhaustive trying
|
|
56
|
+
- [ ] Console + network captured ONCE per competitor × viewport (NOT per page)
|
|
57
|
+
|
|
58
|
+
Each `component-catalog.md` artifact MUST have a screenshot file on disk. Missing artifacts go under `## Not exposed during interactive crawl` — never fabricated.
|
|
59
|
+
|
|
60
|
+
**MANDATORY narrative deliverable** — after §3.0 finishes for a competitor (BOTH viewports done), write `.cache/evidence/<slug>/design-narrative.md` using the EXACT template in playbook §3ter. This is the human-readable doc covering: aesthetic-at-a-glance, color story, typography voice, layout & section taxonomy (top-to-bottom table per page), component vocabulary tied to screenshot files, scroll & motion behavior, UI/UX posture, mobile-vs-desktop divergence, what's ownable vs commodity. The catalog is for traceability; the narrative is what the user actually reads. Both must exist — one without the other is incomplete.
|
|
61
|
+
|
|
50
62
|
### §3bis. Component-level extraction (mandatory, not optional)
|
|
51
63
|
|
|
52
64
|
A competitor page snap tells us nothing about their UI language. Extract the
|
|
53
65
|
actual design vocabulary. Per competitor, per viewport, capture:
|
|
54
66
|
|
|
55
|
-
| Artifact
|
|
56
|
-
|
|
57
|
-
| `home.png`, `pricing.png`, etc.
|
|
58
|
-
| `components/button_primary.png`, `button_secondary.png`, `button_ghost.png` | `browser_take_screenshot({ element, ref })` cropped to each button variant found on home
|
|
59
|
-
| `components/nav_desktop.png`, `nav_mobile.png`
|
|
60
|
-
| `components/card_feature.png`, `card_metric.png`, `card_testimonial.png`
|
|
61
|
-
| `components/list_row.png`
|
|
62
|
-
| `components/input.png`, `input_focus.png`
|
|
63
|
-
| `components/modal.png`
|
|
64
|
-
| `components/empty_state.png`
|
|
65
|
-
| `components/loading.png`
|
|
66
|
-
| `components/footer.png`
|
|
67
|
-
| `tokens.json`
|
|
68
|
-
| `copy.md`
|
|
67
|
+
| Artifact | How |
|
|
68
|
+
| --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
69
|
+
| `home.png`, `pricing.png`, etc. | Full-page screenshots as before |
|
|
70
|
+
| `components/button_primary.png`, `button_secondary.png`, `button_ghost.png` | `browser_take_screenshot({ element, ref })` cropped to each button variant found on home |
|
|
71
|
+
| `components/nav_desktop.png`, `nav_mobile.png` | Navbar/bottom-tab crops |
|
|
72
|
+
| `components/card_feature.png`, `card_metric.png`, `card_testimonial.png` | Card variant crops |
|
|
73
|
+
| `components/list_row.png` | If any list pattern exists, crop one row |
|
|
74
|
+
| `components/input.png`, `input_focus.png` | Form field default + focused (click into it) |
|
|
75
|
+
| `components/modal.png` | Open newsletter/contact/signup modal if present |
|
|
76
|
+
| `components/empty_state.png` | Navigate to filter-empty or search-no-results if possible |
|
|
77
|
+
| `components/loading.png` | Throttle network in `browser_evaluate` during a nav, capture transient state if possible |
|
|
78
|
+
| `components/footer.png` | Footer crop |
|
|
79
|
+
| `tokens.json` | Computed palette (top 8 colors by frequency), typography (family, sizes, weights used), spacing sample, radius sample, shadow sample |
|
|
80
|
+
| `copy.md` | Hero copy, 3 feature headlines, primary CTA label, testimonial snippet |
|
|
69
81
|
|
|
70
82
|
Save under `.cache/evidence/<slug>/<viewport>/components/`.
|
|
71
83
|
|
|
@@ -75,26 +87,32 @@ For each competitor, produce `.cache/evidence/<slug>/component-catalog.md`:
|
|
|
75
87
|
# <Competitor> — Component Catalog (<viewport>)
|
|
76
88
|
|
|
77
89
|
## Buttons
|
|
90
|
+
|
|
78
91
|
- Primary: [image] — background: #FF5733, radius 8px, padding 12px 24px, font-weight 600
|
|
79
92
|
- Secondary: [image] — border + transparent bg
|
|
80
93
|
- Ghost: [image] — text only with hover bg
|
|
81
94
|
|
|
82
95
|
## Navigation
|
|
96
|
+
|
|
83
97
|
- Desktop: [image] — fixed top, logo left, nav center, CTA right
|
|
84
98
|
- Mobile: [image] — bottom tabs with 4 destinations + center FAB
|
|
85
99
|
|
|
86
100
|
## Cards
|
|
101
|
+
|
|
87
102
|
- Feature: [image]
|
|
88
103
|
- Pricing: [image]
|
|
89
104
|
|
|
90
105
|
## Forms
|
|
106
|
+
|
|
91
107
|
- Input default: [image]
|
|
92
108
|
- Input focused: [image]
|
|
93
109
|
|
|
94
110
|
## Modals
|
|
111
|
+
|
|
95
112
|
- Signup: [image]
|
|
96
113
|
|
|
97
114
|
## Design tokens observed
|
|
115
|
+
|
|
98
116
|
- Palette: #… #… #…
|
|
99
117
|
- Type: Inter 14/16/20/32, weights 400/500/700
|
|
100
118
|
- Spacing: 4/8/16/24/48
|
|
@@ -102,6 +120,7 @@ For each competitor, produce `.cache/evidence/<slug>/component-catalog.md`:
|
|
|
102
120
|
- Shadows: 0 1px 2px …
|
|
103
121
|
|
|
104
122
|
## Copy tone
|
|
123
|
+
|
|
105
124
|
- Hero: "…"
|
|
106
125
|
- CTA: "Start free" (action + value)
|
|
107
126
|
- Tone: confident, direct, technical
|
|
@@ -118,29 +137,27 @@ and sd-fix use to recommend aesthetic direction.
|
|
|
118
137
|
|
|
119
138
|
6. **Classify each.** Archetype (§4.1), Aaker peak (§4.2), vibe class, NN/g 4D tone (§7.1), hero-pattern.
|
|
120
139
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
- (Optional extras: subhead, feature card, support article opener, confirmation toast)
|
|
133
|
-
|
|
134
|
-
Grade **each sample** on the NN/g 4D tone dimensions (playbook §7.1) using integers in {−1, 0, +1}:
|
|
140
|
+
**6a. Voice/tone capture — 8–12 copy sample rule (mandatory).** For each competitor, collect **8–12 distinct copy samples** (≥8 minimum; fewer = insufficient signal), one per surface where available:
|
|
141
|
+
- Hero headline
|
|
142
|
+
- Primary CTA label
|
|
143
|
+
- Error message
|
|
144
|
+
- Empty state
|
|
145
|
+
- 404 page
|
|
146
|
+
- Onboarding step 1
|
|
147
|
+
- Pricing caption / plan blurb
|
|
148
|
+
- Footer blurb
|
|
149
|
+
- ToS / legal excerpt
|
|
150
|
+
- (Optional extras: subhead, feature card, support article opener, confirmation toast)
|
|
135
151
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
152
|
+
Grade **each sample** on the NN/g 4D tone dimensions (playbook §7.1) using integers in {−1, 0, +1}:
|
|
153
|
+
- formal ↔ casual
|
|
154
|
+
- funny ↔ serious
|
|
155
|
+
- respectful ↔ irreverent
|
|
156
|
+
- enthusiastic ↔ matter-of-fact
|
|
140
157
|
|
|
141
|
-
|
|
158
|
+
Report per-sample scores + verbatim quote + source URL in `.cache/evidence/<slug>/copy-samples.md`, and the **mean + variance** per axis in `market-analysis.md` (tone row per competitor). Healthy brands are constant on voice, variable on tone.
|
|
142
159
|
|
|
143
|
-
|
|
160
|
+
**Insufficient-signal rule.** If fewer than 8 distinct samples can be collected (static site, gated app, locale blockers), **do not compute a tone profile** — flag the competitor as `tone-inconclusive` in `market-analysis.md` with a note listing which surfaces were missing. Never fabricate samples or scores to reach the threshold.
|
|
144
161
|
|
|
145
162
|
7. **Build category-code matrix.** Tabulate dimensions (§5.1). Frequency per column. Classify codes obey/extend/subvert/open (§5.2).
|
|
146
163
|
|
|
@@ -169,6 +186,10 @@ One file: `docs/super-design/market-analysis.md`, 10-section schema (playbook §
|
|
|
169
186
|
|
|
170
187
|
- [ ] market-analysis.md exists, matches schema
|
|
171
188
|
- [ ] 5–10 competitors, each with matrix row + screenshot
|
|
189
|
+
- [ ] For each competitor × viewport: home shot present, intercepts.md line per page, console.json + network.json present, scroll bands match the §3.0 step-4 adaptive table (0/1/2/3 — NOT a fixed minimum), and at least ONE component-revealing interaction shot per page where snapshot exposed a target
|
|
190
|
+
- [ ] For each competitor: `design-narrative.md` exists per playbook §3ter template (aesthetic-at-a-glance, color story, typography voice, section taxonomy table, component vocabulary, scroll & motion, UI/UX posture, mobile-vs-desktop divergence, ownable-vs-commodity)
|
|
191
|
+
- [ ] Any missing artifact appears under `## Not exposed during interactive crawl` (never silently fabricated)
|
|
192
|
+
- [ ] No competitor exceeded the 3-minute crawl cap (if any did, root-cause noted in summary)
|
|
172
193
|
- [ ] Every recommendation cites evidence
|
|
173
194
|
- [ ] Spot-check 3 claims at random — no invented facts
|
|
174
195
|
- [ ] Confidence calibrated honestly
|
|
@@ -59,17 +59,6 @@
|
|
|
59
59
|
]
|
|
60
60
|
}
|
|
61
61
|
],
|
|
62
|
-
"PreToolUse": [
|
|
63
|
-
{
|
|
64
|
-
"matcher": "Bash",
|
|
65
|
-
"hooks": [
|
|
66
|
-
{
|
|
67
|
-
"type": "command",
|
|
68
|
-
"command": "bash \"$CLAUDE_PROJECT_DIR/.claude/hooks/block-plugin-commits.sh\""
|
|
69
|
-
}
|
|
70
|
-
]
|
|
71
|
-
}
|
|
72
|
-
],
|
|
73
62
|
"PostToolUse": [
|
|
74
63
|
{
|
|
75
64
|
"matcher": "Write|Edit",
|