start-vibing 4.4.12 → 4.4.14

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "start-vibing",
3
- "version": "4.4.12",
3
+ "version": "4.4.14",
4
4
  "description": "Setup Claude Code with 9 plugins, 6 community skills, and 8 MCP servers. Parallel install, auto-accept, superpowers + ralph-loop. e2e-audit 0.2.0 refactor (skill-only, no agents): SessionStart hook + slash command make the skill keyword-invokable (\"e2e audit\", \"roda o e2e\", \"integration test\", \"test coverage gaps\"). Source-first discovery via detect-stack, discover-routes (Next app/pages/Remix/SvelteKit/Nuxt/Astro), discover-api-surface (HTTP handlers, tRPC procedures, GraphQL, server actions, middleware auth), inventory-existing-tests (preserve prior corpus + sha256 drift hash), and detect-uncovered (branch-diff vs origin/main finds changes not covered by existing specs). Report-then-ask between mapping and Playwright run; post-run-feedback report before writing findings. SHOT+TRACE+ASSERT+SOURCE evidence quad per non-meta finding; meta rules (coverage-gap-*, uncovered-*, test-drift, stack-detect, post-run-feedback) exempt. verify-audit.sh enforces schema + quad. Generic (no project leakage). super-design 0.7.0 carries over.",
5
5
  "type": "module",
6
6
  "bin": {
@@ -5,16 +5,34 @@ For user-facing project rules, see `/CLAUDE.md`.
5
5
 
6
6
  ---
7
7
 
8
+ ## Language Policy (HARD RULE)
9
+
10
+ > **ENGLISH ONLY — for everything Claude produces — UNLESS the user explicitly asks for another language in the current request.**
11
+
12
+ Applies to **every** output, no exceptions beyond an explicit user override:
13
+
14
+ - Chat replies, status updates, summaries, questions back to the user
15
+ - Code (identifiers, variables, function/class names, type names)
16
+ - Comments, JSDoc, docstrings
17
+ - Commit messages, PR titles, PR descriptions, branch names
18
+ - Documentation (`/docs/**`, README, CLAUDE.md updates, changelogs, ADRs)
19
+ - Test names, error messages, log messages, CLI help strings
20
+ - File and folder names, configuration keys
21
+
22
+ The user may write to Claude in Portuguese, Spanish, or any other language — Claude still responds and writes in English unless the user explicitly says e.g. "responda em português", "write this in Spanish". An override applies only to the current request; revert to English on the next turn. Never mix English + another language in the same output. If unsure whether a request is an override, default to English and ask one short clarifying question.
23
+
24
+ ---
25
+
8
26
  ## What start-vibing v4 Installs
9
27
 
10
28
  start-vibing is a CLI (`npx start-vibing`) that sets up Claude Code with a complete development system in ~30 seconds:
11
29
 
12
- | Component | Count | Installation Method |
13
- |-----------|-------|-------------------|
14
- | **MCP Servers** | 8 | `claude mcp add` (parallel, ~20s) |
15
- | **Plugins** | 9 | `claude plugin install` (parallel, auto-accept, ~3s) |
16
- | **Community Skills** | 5 | Direct HTTPS download from GitHub (~0.3s) |
17
- | **Template Files** | ~30 | File copy (agents, skills, config, CLAUDE.md) |
30
+ | Component | Count | Installation Method |
31
+ | -------------------- | ----- | ---------------------------------------------------- |
32
+ | **MCP Servers** | 8 | `claude mcp add` (parallel, ~20s) |
33
+ | **Plugins** | 9 | `claude plugin install` (parallel, auto-accept, ~3s) |
34
+ | **Community Skills** | 5 | Direct HTTPS download from GitHub (~0.3s) |
35
+ | **Template Files** | ~30 | File copy (agents, skills, config, CLAUDE.md) |
18
36
 
19
37
  ### Installation Architecture
20
38
 
@@ -32,14 +50,14 @@ All phases run best-effort. MCP and plugin failures are non-blocking — `settin
32
50
 
33
51
  ### CLI Options
34
52
 
35
- | Flag | Effect |
36
- |------|--------|
37
- | `--force` | Overwrite all files (including custom ones) |
38
- | `--new` | Start fresh Claude session (default: resume last) |
39
- | `--no-claude` | Skip Claude Code installation and launch |
40
- | `--no-mcp` | Skip MCP server installation |
41
- | `--no-skills` | Skip community skills installation |
42
- | `--no-update-check` | Skip version check |
53
+ | Flag | Effect |
54
+ | ------------------- | ------------------------------------------------- |
55
+ | `--force` | Overwrite all files (including custom ones) |
56
+ | `--new` | Start fresh Claude session (default: resume last) |
57
+ | `--no-claude` | Skip Claude Code installation and launch |
58
+ | `--no-mcp` | Skip MCP server installation |
59
+ | `--no-skills` | Skip community skills installation |
60
+ | `--no-update-check` | Skip version check |
43
61
 
44
62
  ---
45
63
 
@@ -58,13 +76,13 @@ All phases run best-effort. MCP and plugin failures are non-blocking — `settin
58
76
 
59
77
  ## Agents (5 Active Subagents)
60
78
 
61
- | Agent | Model | Purpose |
62
- |-------|-------|---------|
63
- | **research-web** | sonnet | Researches best practices (2025-2026) with ontology-based structuring, output to `/docs/research/` |
64
- | **documenter** | sonnet | Analyzes sessions via git log/diff, writes changelog + technical docs + ADRs to `/docs/` |
65
- | **commit-manager** | haiku | Manages git commits, conventional format, merge workflow |
66
- | **claude-md-compactor** | sonnet | Compacts CLAUDE.md when it exceeds 40k chars |
67
- | **tester-unit** | sonnet | Creates unit tests with Vitest for new functions and utilities |
79
+ | Agent | Model | Purpose |
80
+ | ----------------------- | ------ | -------------------------------------------------------------------------------------------------- |
81
+ | **research-web** | sonnet | Researches best practices (2025-2026) with ontology-based structuring, output to `/docs/research/` |
82
+ | **documenter** | sonnet | Analyzes sessions via git log/diff, writes changelog + technical docs + ADRs to `/docs/` |
83
+ | **commit-manager** | haiku | Manages git commits, conventional format, merge workflow |
84
+ | **claude-md-compactor** | sonnet | Compacts CLAUDE.md when it exceeds 40k chars |
85
+ | **tester-unit** | sonnet | Creates unit tests with Vitest for new functions and utilities |
68
86
 
69
87
  ### Agent Workflow Order
70
88
 
@@ -79,6 +97,7 @@ Agents are dispatched via the `Agent` tool with `subagent_type` matching agent n
79
97
  The research-web agent outputs findings to `/docs/research/[topic].md` (NOT to `.claude/skills/research-cache/`).
80
98
 
81
99
  **Research flow:**
100
+
82
101
  1. Check `/docs/research/` for existing findings (reuse if fresh < 3 months)
83
102
  2. Build ontology map (concepts → relationships → constraints)
84
103
  3. Search with `[topic] [aspect] [2025-2026] [context]` queries
@@ -86,6 +105,7 @@ The research-web agent outputs findings to `/docs/research/[topic].md` (NOT to `
86
105
  5. Save structured output to `/docs/research/`
87
106
 
88
107
  **For UI/UX tasks, the agent also runs:**
108
+
89
109
  - Competitor analysis (3-5 competitors, heuristic evaluation)
90
110
  - Design system pattern check (shadcn/ui, Radix, WCAG 2.1)
91
111
  - User flow mapping (happy path + 2 error paths)
@@ -96,6 +116,7 @@ The research-web agent outputs findings to `/docs/research/[topic].md` (NOT to `
96
116
  The documenter agent runs after implementation, analyzes the session, and writes structured docs to `/docs/`.
97
117
 
98
118
  **Documentation flow:**
119
+
99
120
  1. Run `git log` + `git diff` to analyze what changed
100
121
  2. Classify changes: per-commit, per-feature, per-session
101
122
  3. Mini-research for technologies used (check `/docs/research/` first, else 1-2 queries)
@@ -103,6 +124,7 @@ The documenter agent runs after implementation, analyzes the session, and writes
103
124
  5. Update all indexes (`/docs/index.md` + per-folder indexes)
104
125
 
105
126
  **Output structure:**
127
+
106
128
  ```
107
129
  /docs/
108
130
  ├── index.md # Root index
@@ -121,6 +143,7 @@ The documenter agent runs after implementation, analyzes the session, and writes
121
143
  ```
122
144
 
123
145
  **Writing rules:**
146
+
124
147
  - Self-contained sections (AI RAG chunk retrieval)
125
148
  - What→Why→How progression (humans first)
126
149
  - Before→After pattern for all changes (mandatory)
@@ -136,22 +159,22 @@ Plugins are the primary extension mechanism. All 9 are installed in parallel wit
136
159
 
137
160
  ### Core Workflow Plugins
138
161
 
139
- | Plugin | Mechanism | Purpose |
140
- |--------|-----------|---------|
141
- | **superpowers** | Skills + commands | TDD, brainstorming, debugging, planning, code review, git worktrees |
142
- | **ralph-loop** | Stop hook + command | Iterative autonomous development loop with checkpoints |
143
- | **context7** | Skill + agent + MCP | Auto library docs — replaces manual context7 MCP server |
144
- | **code-simplifier** | Skill + command | Refine code for clarity, reduce nesting, improve naming |
162
+ | Plugin | Mechanism | Purpose |
163
+ | ------------------- | ------------------- | ------------------------------------------------------------------- |
164
+ | **superpowers** | Skills + commands | TDD, brainstorming, debugging, planning, code review, git worktrees |
165
+ | **ralph-loop** | Stop hook + command | Iterative autonomous development loop with checkpoints |
166
+ | **context7** | Skill + agent + MCP | Auto library docs — replaces manual context7 MCP server |
167
+ | **code-simplifier** | Skill + command | Refine code for clarity, reduce nesting, improve naming |
145
168
 
146
169
  ### Development Plugins
147
170
 
148
- | Plugin | Mechanism | Purpose |
149
- |--------|-----------|---------|
150
- | **typescript-lsp** | LSP server (auto) | Type diagnostics, go-to-definition, hover info |
151
- | **security-guidance** | PreToolUse hook (auto) | OWASP Top 10, vulnerability scan, blocks unsafe patterns |
152
- | **code-review** | `/code-review` command | Code quality analysis, PR review |
153
- | **commit-commands** | `/commit` command | Git commit, push, PR flows with conventional format |
154
- | **frontend-design** | `/frontend-design` command | Production-grade UI design with competitor research |
171
+ | Plugin | Mechanism | Purpose |
172
+ | --------------------- | -------------------------- | -------------------------------------------------------- |
173
+ | **typescript-lsp** | LSP server (auto) | Type diagnostics, go-to-definition, hover info |
174
+ | **security-guidance** | PreToolUse hook (auto) | OWASP Top 10, vulnerability scan, blocks unsafe patterns |
175
+ | **code-review** | `/code-review` command | Code quality analysis, PR review |
176
+ | **commit-commands** | `/commit` command | Git commit, push, PR flows with conventional format |
177
+ | **frontend-design** | `/frontend-design` command | Production-grade UI design with competitor research |
155
178
 
156
179
  ### Plugin Installation Details
157
180
 
@@ -193,6 +216,7 @@ All file changes and git history persist between iterations. Best for multi-file
193
216
  ### Using Code Simplifier (POST-IMPLEMENTATION)
194
217
 
195
218
  After implementing, run `/simplify` to:
219
+
196
220
  - Reduce nesting and redundancy
197
221
  - Improve naming and readability
198
222
  - Replace nested ternaries with early returns
@@ -206,10 +230,10 @@ All 8 MCPs are installed in parallel via `claude mcp add -s user` (~20s total).
206
230
 
207
231
  ### Required MCPs (ALWAYS use these)
208
232
 
209
- | Server | Package | Purpose |
210
- |--------|---------|---------|
233
+ | Server | Package | Purpose |
234
+ | --------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------- |
211
235
  | `sequential-thinking` | `@modelcontextprotocol/server-sequential-thinking` | Structured reasoning for multi-step tasks, architecture decisions, debugging |
212
- | `playwright` | `@playwright/mcp@latest` | Browser automation for UI verification, E2E tests, visual validation |
236
+ | `playwright` | `@playwright/mcp@latest` | Browser automation for UI verification, E2E tests, visual validation |
213
237
 
214
238
  > These 2 are **non-negotiable**. Skipping them leads to poor planning and untested UIs.
215
239
 
@@ -217,27 +241,27 @@ All 8 MCPs are installed in parallel via `claude mcp add -s user` (~20s total).
217
241
 
218
242
  ### Standard MCPs
219
243
 
220
- | Server | Package | Transport | Purpose |
221
- |--------|---------|-----------|---------|
222
- | `memory` | `@modelcontextprotocol/server-memory` | stdio (npx) | Persistent knowledge graph across sessions |
223
- | `nextjs-devtools` | `next-devtools-mcp@latest` | stdio (npx) | Next.js runtime errors, routes, cache inspection |
224
- | `mongodb` | `@mongodb-js/mongodb-mcp-server` | stdio (npx) | MongoDB queries, schema inspection, aggregation |
225
- | `jira` | `@aashari/mcp-server-atlassian-jira` | stdio (npx) | Issue tracking, task management |
226
- | `git` | `mcp-server-git` | stdio (uvx) | Git operations, repo search, history, diffs |
227
- | `fetch` | `mcp-server-fetch` | stdio (uvx) | Fetch web pages as markdown |
244
+ | Server | Package | Transport | Purpose |
245
+ | ----------------- | ------------------------------------- | ----------- | ------------------------------------------------ |
246
+ | `memory` | `@modelcontextprotocol/server-memory` | stdio (npx) | Persistent knowledge graph across sessions |
247
+ | `nextjs-devtools` | `next-devtools-mcp@latest` | stdio (npx) | Next.js runtime errors, routes, cache inspection |
248
+ | `mongodb` | `@mongodb-js/mongodb-mcp-server` | stdio (npx) | MongoDB queries, schema inspection, aggregation |
249
+ | `jira` | `@aashari/mcp-server-atlassian-jira` | stdio (npx) | Issue tracking, task management |
250
+ | `git` | `mcp-server-git` | stdio (uvx) | Git operations, repo search, history, diffs |
251
+ | `fetch` | `mcp-server-fetch` | stdio (uvx) | Fetch web pages as markdown |
228
252
 
229
253
  ### Optional MCPs (install manually)
230
254
 
231
255
  These are shown to the user after setup but not auto-installed:
232
256
 
233
- | Server | Install Command |
234
- |--------|----------------|
257
+ | Server | Install Command |
258
+ | -------- | ----------------------------------------------------------------------------------- |
235
259
  | `github` | `claude mcp add --transport http -s user github https://api.githubcopilot.com/mcp/` |
236
- | `sentry` | `claude mcp add --transport http -s user sentry https://mcp.sentry.dev/mcp` |
237
- | `figma` | `claude mcp add --transport http -s user figma https://mcp.figma.com/mcp` |
238
- | `linear` | `claude mcp add --transport http -s user linear https://mcp.linear.app/sse` |
239
- | `stripe` | `claude mcp add --transport http -s user stripe https://mcp.stripe.com` |
240
- | `vercel` | `claude mcp add --transport http -s user vercel https://mcp.vercel.com` |
260
+ | `sentry` | `claude mcp add --transport http -s user sentry https://mcp.sentry.dev/mcp` |
261
+ | `figma` | `claude mcp add --transport http -s user figma https://mcp.figma.com/mcp` |
262
+ | `linear` | `claude mcp add --transport http -s user linear https://mcp.linear.app/sse` |
263
+ | `stripe` | `claude mcp add --transport http -s user stripe https://mcp.stripe.com` |
264
+ | `vercel` | `claude mcp add --transport http -s user vercel https://mcp.vercel.com` |
241
265
 
242
266
  ---
243
267
 
@@ -260,13 +284,13 @@ Community skills are downloaded directly from GitHub raw URLs (the `skillsadd` n
260
284
 
261
285
  ### Installed Skills
262
286
 
263
- | Skill | Source Repo | Purpose |
264
- |-------|------------|---------|
265
- | **react-best-practices** | `vercel-labs/agent-skills` | React/Next.js performance optimization rules |
266
- | **web-design-guidelines** | `vercel-labs/agent-skills` | 100+ WCAG accessibility + UX audit rules |
267
- | **composition-patterns** | `vercel-labs/agent-skills` | Compound component and composition patterns |
268
- | **webapp-testing** | `anthropics/skills` | Real browser test execution with Playwright |
269
- | **mcp-builder** | `anthropics/skills` | Guide for building MCP servers |
287
+ | Skill | Source Repo | Purpose |
288
+ | ------------------------- | -------------------------- | -------------------------------------------- |
289
+ | **react-best-practices** | `vercel-labs/agent-skills` | React/Next.js performance optimization rules |
290
+ | **web-design-guidelines** | `vercel-labs/agent-skills` | 100+ WCAG accessibility + UX audit rules |
291
+ | **composition-patterns** | `vercel-labs/agent-skills` | Compound component and composition patterns |
292
+ | **webapp-testing** | `anthropics/skills` | Real browser test execution with Playwright |
293
+ | **mcp-builder** | `anthropics/skills` | Guide for building MCP servers |
270
294
 
271
295
  ### Adding More Skills
272
296
 
@@ -294,12 +318,12 @@ curl -o .claude/skills/<name>/SKILL.md \
294
318
 
295
319
  Project-specific settings in `.claude/config/`:
296
320
 
297
- | File | Purpose |
298
- |------|---------|
299
- | `project-config.json` | Stack, structure, commands |
300
- | `quality-gates.json` | Quality check commands |
321
+ | File | Purpose |
322
+ | --------------------- | ------------------------------ |
323
+ | `project-config.json` | Stack, structure, commands |
324
+ | `quality-gates.json` | Quality check commands |
301
325
  | `testing-config.json` | Test framework and conventions |
302
- | `security-rules.json` | Security audit rules |
326
+ | `security-rules.json` | Security audit rules |
303
327
 
304
328
  Agents read config files before acting. Do NOT hardcode project specifics — update the JSON files instead.
305
329
 
@@ -311,17 +335,17 @@ The `.claude/settings.json` file contains `enabledPlugins` which is the fallback
311
335
 
312
336
  ```json
313
337
  {
314
- "enabledPlugins": {
315
- "typescript-lsp@claude-plugins-official": true,
316
- "security-guidance@claude-plugins-official": true,
317
- "code-review@claude-plugins-official": true,
318
- "commit-commands@claude-plugins-official": true,
319
- "frontend-design@claude-plugins-official": true,
320
- "superpowers@claude-plugins-official": true,
321
- "ralph-loop@claude-plugins-official": true,
322
- "context7@claude-plugins-official": true,
323
- "code-simplifier@claude-plugins-official": true
324
- }
338
+ "enabledPlugins": {
339
+ "typescript-lsp@claude-plugins-official": true,
340
+ "security-guidance@claude-plugins-official": true,
341
+ "code-review@claude-plugins-official": true,
342
+ "commit-commands@claude-plugins-official": true,
343
+ "frontend-design@claude-plugins-official": true,
344
+ "superpowers@claude-plugins-official": true,
345
+ "ralph-loop@claude-plugins-official": true,
346
+ "context7@claude-plugins-official": true,
347
+ "code-simplifier@claude-plugins-official": true
348
+ }
325
349
  }
326
350
  ```
327
351
 
@@ -359,6 +383,7 @@ The `.claude/settings.json` file contains `enabledPlugins` which is the fallback
359
383
  ### After Completing Work
360
384
 
361
385
  The documenter agent runs automatically after implementation:
386
+
362
387
  1. Analyzes git log/diff for the session
363
388
  2. Writes changelog + technical docs + ADRs as needed
364
389
  3. Updates all indexes
@@ -397,23 +422,23 @@ All implementations MUST:
397
422
 
398
423
  ## FORBIDDEN Actions
399
424
 
400
- | Action | Reason |
401
- | ------------------------------ | ---------------------------- |
402
- | Write in non-English | ALL code/docs MUST be in EN |
403
- | Skip typecheck | Catches runtime errors |
404
- | Use `any` type | Defeats strict mode |
405
- | Define types in `src/` | Must be in `types/` |
406
- | Commit directly to main | Create feature/fix branches |
407
- | Skip documenter after implementation | Changelog + docs are mandatory |
408
- | Mix doc types in one file | Changelog ≠ technical ≠ decision |
409
- | Leave docs unlinked from index | Undiscoverable docs are useless |
410
- | Skip superpowers for features | Use brainstorming + TDD |
411
- | Skip code-simplifier | Run /simplify post-implementation |
412
- | Use MUI/Chakra | Use shadcn/ui + Radix |
413
- | Files > 400 lines | MUST split into smaller |
414
- | 'use client' at top level | Push to leaf components only |
415
- | Waterfall data fetching | Use Promise.all() for parallel |
416
- | Skip CLAUDE.md update | MUST update after implementations |
425
+ | Action | Reason |
426
+ | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
427
+ | Speak/write in non-English | EN ONLY (chat, code, docs, commits) see Language Policy. Override only via explicit user request, current turn only |
428
+ | Skip typecheck | Catches runtime errors |
429
+ | Use `any` type | Defeats strict mode |
430
+ | Define types in `src/` | Must be in `types/` |
431
+ | Commit directly to main | Create feature/fix branches |
432
+ | Skip documenter after implementation | Changelog + docs are mandatory |
433
+ | Mix doc types in one file | Changelog ≠ technical ≠ decision |
434
+ | Leave docs unlinked from index | Undiscoverable docs are useless |
435
+ | Skip superpowers for features | Use brainstorming + TDD |
436
+ | Skip code-simplifier | Run /simplify post-implementation |
437
+ | Use MUI/Chakra | Use shadcn/ui + Radix |
438
+ | Files > 400 lines | MUST split into smaller |
439
+ | 'use client' at top level | Push to leaf components only |
440
+ | Waterfall data fetching | Use Promise.all() for parallel |
441
+ | Skip CLAUDE.md update | MUST update after implementations |
417
442
 
418
443
  ---
419
444
 
@@ -0,0 +1,407 @@
1
+ ---
2
+ name: web3-lp
3
+ description: Cyber-tactical landing-page system for Web3 token launches with real product behind them — sticky live-price bar, hex-grid scanline hero, animated track-record proof, floating buy pill, "WHAT IS $TICKER" reveal. Built for fair launches (pump.fun / fair-launch DEX) where the coin is fun but the tech is real. Use when user says "build a token LP", "coin launch page", "web3 LP", "memecoin site with tech", "$TICKER landing", "pump.fun launch site".
4
+ license: MIT
5
+ metadata:
6
+ author: deadodds-build
7
+ origin: 'Synthesized from sd-research audits of HyperLiquid, Pump.fun, dYdX, GMX, Mog, Brett, Ondo, Polymarket, Limitless, Drift, Kalshi, Birdeye, Jupiter — and the DeadOdds AI / $ODDS landing page (2026-04-28).'
8
+ ---
9
+
10
+ # Web3-Launch Design System Skill (Universal)
11
+
12
+ ## Mission
13
+
14
+ You are an expert design-system author for **Web3 token-launch landing pages** — coin LPs that have real tech (not pure memes) and want both degen credibility AND product credibility.
15
+
16
+ The single hardest thing about a token-with-tech LP is balancing two audiences: degens scanning for ticker + chart + buy-button in <3 seconds, and serious users who need to verify the product works. This skill exists to resolve that tension.
17
+
18
+ When unsure: prioritize **proof** over **polish**. Numbers > adjectives. Live data > marketing copy. Receipts > promises.
19
+
20
+ ## Brand North-Star
21
+
22
+ > **The token is fun. The product is real.**
23
+
24
+ Every section either hypes the coin OR proves the tech. Never both at once. Every claim has a number behind it. Every button has a destination. Nothing is decorative — the cyberpunk aesthetic is the brand voice, not a costume.
25
+
26
+ ## Style Foundations
27
+
28
+ ### Visual style
29
+
30
+ - Dark base (`#050505` to `#0A0A0A`), single neon accent, monospace data, geometric display headlines
31
+ - Hex-grid or terminal-scanline hero background (open territory; competitors use blob gradients or photography)
32
+ - Glow-shadow CTAs (subtle 28px spread, 4px offset) — never flat
33
+ - Sharp corners (4–8px radius); never rounded-full except for floating pills
34
+
35
+ ### Typography scale
36
+
37
+ - **Display:** Rajdhani / Orbitron / Geist condensed bold, ALL CAPS, tight tracking
38
+ - **Body:** Inter / Geist Sans, sentence case
39
+ - **Numbers / data:** Geist Mono / JetBrains Mono / IBM Plex Mono, tabular-nums
40
+ - **Scale:** 10/11/12/13.5/14.5/16/22/24/32/48/clamp-hero
41
+
42
+ ### Color palette (default — override if user has tokens)
43
+
44
+ - `--brand-bg: #050505` (near-black surface)
45
+ - `--brand-surface: #0A0A0A` (cards)
46
+ - `--brand-accent: #7CFF3D` (neon — primary CTA + win signal)
47
+ - `--brand-danger: #FF3D5C` (lose signal / warning)
48
+ - `--brand-chrome: #C7CDD4` (secondary text)
49
+ - `--brand-text: #FFFFFF` (primary text)
50
+ - `--brand-text-muted: #64748B` (slate-500 — labels, captions)
51
+ - `--brand-line: #1A1A1A` (1px borders)
52
+
53
+ If the user has a token color (memecoin tradition: $MOG = gold, $BRETT = cyan, $PEPE = lime), keep `#7CFF3D` semantics for **GREEN/win** and use the user's color as a **secondary brand accent** for hero glow + token block emphasis. Never use 3+ accents.
54
+
55
+ ### Spacing scale
56
+
57
+ - `4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 80 / 112 / 144`
58
+ - Section vertical rhythm: `py-20 lg:py-28` minimum between major blocks
59
+ - Cards: `p-5 lg:p-7`
60
+ - Compact UI (price bar, tickers): `py-2.5 px-4`
61
+
62
+ ### Border radius
63
+
64
+ - Buttons / inputs / cards / pills: `rounded` (4px) — sharp, technical
65
+ - Floating buy pill: `rounded-full` — only exception
66
+ - Token block accent boxes: `rounded` (4–6px)
67
+ - NEVER `rounded-2xl` / `rounded-3xl` — that's SaaS, not Web3-tactical
68
+
69
+ ## Section Playbook (the LP recipe)
70
+
71
+ This is the canonical section order for a Web3-launch LP. Skip sections you don't have data for, but DO NOT reorder. The flow has been triangulated across 12 audited competitors.
72
+
73
+ ```
74
+ 01. PriceBar — sticky top, h-9, live ticker + MCap + Vol + buy links
75
+ 02. MarketingHeader — sticky top-9, wordmark + nav + social count badges + Launch App
76
+ 03. LiveTicker — marquee of recent product events (signals / trades / mints)
77
+ 04. Hero — hex-grid bg, headline, dual CTAs, contract row, in-hero proof row
78
+ 05. WhatIs — full-screen reveal: "WHAT IS $TICKER?" with poetic 2-liner
79
+ 06. TrackRecord — animated counters + sample resolved/historical data table
80
+ 07. HowItWorks — 3 steps, numbered cards (01 / 02 / 03), big oversized digit watermark
81
+ 08. TechPreview — "Not a meme. A weapon." — mock product UI screenshot or live embed
82
+ 09. TokenBlock — contract card + tokenomics 2x2 grid + buy CTAs
83
+ 10. Community — 3-card grid: Telegram / X / pump.fun (or chain-native exchange)
84
+ 11. FAQ — <details> accordion, 5–7 questions, first item open
85
+ 12. FinalCta — "stop guessing, start sniping" pattern
86
+ 13. MarketingFooter — 4 columns (brand / Product / Token / Community)
87
+ 14. FloatingBuy — fixed bottom-right pill, appears after hero scroll
88
+ ```
89
+
90
+ ### Section anatomy rules
91
+
92
+ **01. PriceBar** (mandatory if token is launched; mock with `TBA` placeholders pre-launch)
93
+
94
+ - Height `h-9` (36px), `sticky top-0 z-[60]`, `bg-black/95 backdrop-blur-md`
95
+ - Left side: `· $TICKER $price ±change% | MCap $X | Vol 24h $Y | Holders N`
96
+ - Right side: `pump.fun ↗ | Dexscreener ↗`
97
+ - Pulsing dot before ticker for "live" signal (`animate-pulse` + accent glow)
98
+ - Hide non-essential cells progressively at sm/md/lg breakpoints
99
+ - ALWAYS connectable to the launchpad's public API once token is live
100
+
101
+ **02. MarketingHeader**
102
+
103
+ - `sticky top-9 z-50 h-14 lg:h-16`
104
+ - Wordmark left, primary nav center, social-count badges + Launch App right
105
+ - Social badges show actual follower counts (e.g. `4,221`) on desktop
106
+ - Primary CTA = "Launch App" → links to the actual product, NOT to buy page
107
+ - Buy CTA lives in PriceBar + FloatingBuy, never in the header
108
+
109
+ **03. LiveTicker**
110
+
111
+ - 60s loop marquee, full-width, `border-y border-line bg-surface`
112
+ - Items show ACTUAL product events, not slogans (e.g. "AI: GREEN +14.2pp on [Trump 2028]" not "BUY $ODDS NOW")
113
+ - Pause on hover (already in `globals.css`)
114
+
115
+ **04. Hero** (the most important section)
116
+
117
+ - Hex-grid + scanline background — see Motion Catalog
118
+ - Eyebrow: "Fair-launching $TICKER on pump.fun" with pulsing dot
119
+ - Headline: 2 lines, second line is the brand color with `textShadow: 0 0 28px <accent>45`
120
+ - Add terminal-cursor blink (`_`) at end of color line — code-aesthetic signal
121
+ - Sub-copy: 2 sentences max, bold the receipts ("EV-edge bets", "real time", "with receipts")
122
+ - Dual CTA: Primary = "Buy $TICKER on pump.fun" (filled accent) · Secondary = "Launch Oracle/App" (ghost, `bg-black/50 backdrop-blur`)
123
+ - ContractRow card directly below CTAs — NEVER bury contract address in token section
124
+ - In-hero proof row (3 stats max) below contract — animated counters that fire on first paint
125
+ - Stats accent: middle stat is the headline metric (win rate / TVL / users) in brand color
126
+
127
+ **05. WhatIs** (the moment of poetry)
128
+
129
+ - `min-h-[80vh]`, oversized type at `clamp(3rem, 11vw, 9rem)`
130
+ - Eyebrow as terminal command: `> query: what_is_$ticker`
131
+ - Headline structure: "WHAT IS" newline "$TICKER?" — second line in accent
132
+ - 2–3 short statements (≤8 words each), the third in muted color as denouement
133
+ - Two CTAs: "Buy $TICKER" + "See the receipts" (anchor to TrackRecord)
134
+
135
+ **06. TrackRecord** (the onliness section — what no competitor has)
136
+
137
+ - 4-stat grid (counters animate on scroll into view)
138
+ - Resolved-events / sample-data table: desktop = `<table>`, mobile = card list (NEVER a horizontal scroll)
139
+ - Header row: monospace eyebrow `▸ resolved_predictions · sample` + Brier score / best result on the right
140
+ - Each row: market name + AI/your call + market consensus + resolution badge + edge captured
141
+ - Footer link: "See live signal feed in the [product] ›"
142
+
143
+ **07. HowItWorks**
144
+
145
+ - 3 numbered cards in a `lg:grid-cols-3`
146
+ - Big watermark digit (`01 / 02 / 03`) at top-right, opacity `0.025` → `0.10` on hover
147
+ - Card eyebrow: "Step 01" in accent monospace
148
+ - Card headline: ALL CAPS display, ≤3 words
149
+ - Card body: 2 sentences max, plain language
150
+
151
+ **08. TechPreview**
152
+
153
+ - Two-column grid `lg:grid-cols-2 lg:items-center`
154
+ - Left = copy + bullet list + CTA · Right = mock product UI in faux window chrome
155
+ - Mock window chrome: 3 dots + tab label `<wordmark> · live signals`
156
+ - 3 mock cards inside, one each: positive / negative / neutral signal — colored accent border
157
+ - Headline pattern: "Not a meme. A weapon." (or domain equivalent — "Not a fork. A protocol.")
158
+
159
+ **09. TokenBlock**
160
+
161
+ - 2-column `lg:grid-cols-[1.1fr_1fr]`: hero card on left, tokenomics 2×2 on right
162
+ - Hero card has accent radial blur top-right + ticker huge + chain badge + contract code-block + dual buy CTA
163
+ - Tokenomics tiles: Supply / Launch / Liquidity / Tax — each with label + big number + 1-line caption
164
+ - Default copy for fair launch: "Fair · 100% on pump.fun" / "Burned · LP locked at bond" / "0 / 0 · forever"
165
+
166
+ **10. Community**
167
+
168
+ - 3-card grid, each card = social platform with: brand-color icon, name, handle, blurb
169
+ - Cards have subtle hover glow + arrow shifts right
170
+ - Order: Telegram (community) · X (alpha) · pump.fun/Dexscreener (token)
171
+
172
+ **11. FAQ**
173
+
174
+ - Native `<details>` accordion (zero JS) inside `<dl>` semantics
175
+ - First item `open` by default
176
+ - "+" → "×" rotation on open via `group-open:rotate-45`
177
+ - 5–7 questions; first MUST be "Is $TICKER required to use the app?" (or domain analog)
178
+
179
+ **12. FinalCta**
180
+
181
+ - Centered, `py-24 lg:py-32`, radial-gradient floor accent
182
+ - Headline 2 lines, second line in brand color
183
+ - Same dual CTAs as hero
184
+
185
+ **13. Footer**
186
+
187
+ - 4 columns: brand+blurb / Product / Token / Community
188
+ - Disclaimer line: "Not financial advice. Markets are risky. Bet responsibly."
189
+ - Right-aligned tagline: "Built on [chain] · Powered by [tech]"
190
+
191
+ **14. FloatingBuy** (the conversion safety net)
192
+
193
+ - Fixed `bottom-5 right-4 lg:bottom-7 lg:right-7`
194
+ - Appears after `scrollY > 600`, hides when `nearFooter` (avoid double-CTA collision)
195
+ - `rounded-full` (only exception to sharp-radius rule), accent-filled
196
+ - Scale-up + glow-up on hover (`hover:scale-[1.03]`)
197
+
198
+ ## Motion Catalog
199
+
200
+ Six approved motion patterns. **Use ALL of them — collectively they make the LP feel alive, individually they feel decorative. Skip any and the page reads dead.**
201
+
202
+ 1. **Hex-grid scanline** — hero background. CSS gradient hex pattern + radial mask + 1 horizontal scanline sweeping top→bottom over 7s. Open territory; no audited competitor uses it.
203
+ 2. **Marquee tickers** — `LiveTicker` (60s loop), pause on hover, `animation-play-state: paused` on hover.
204
+ 3. **Animated counters** — IntersectionObserver fires when stat enters viewport at 0.4 threshold; cubic-eased count-up over 1.4s; honors `prefers-reduced-motion`.
205
+ 4. **Terminal cursor blink** — single `_` char at end of hero accent line; 1.05s step-end. Reads as "command line", not decorative.
206
+ 5. **Floating-pill entrance** — translate-y(20px) + scale(0.9) → identity, 240ms ease-out. Plays each time the pill mounts.
207
+ 6. **CTA glow on hover** — primary CTAs gain `box-shadow: 0 0 40px -2px var(--accent)85` on hover, 150ms transition.
208
+
209
+ **Do NOT add:** parallax (every Web3 LP has it; you'll look generic), full-page scroll-snapping, fade-in-on-scroll for every element (uncanny / slow), confetti, character mascots dancing.
210
+
211
+ **MUST honor `prefers-reduced-motion: reduce`** — `animation: none` for marquee, scanline, counters, cursor blink. The page must still be navigable and beautiful without motion.
212
+
213
+ ## Copy / Voice
214
+
215
+ ### Tone (Aaker × NN/g)
216
+
217
+ - **Sincere:** -1 (we're not earnest, we're sharp)
218
+ - **Excitement:** +2 (degen-adjacent, but with restraint)
219
+ - **Competence:** +2 (technical, precise, monospace numbers)
220
+ - **Sophistication:** +1 (cyberpunk minimalism, not luxury)
221
+ - **Ruggedness:** +1 (sniper / weapon / edge metaphors are OK)
222
+
223
+ ### Vocabulary
224
+
225
+ - **PREFER:** alpha · edge · receipts · ship · sniper · oracle · signal · degen · fair launch · proof · live · win rate · EV (expected value) · Kelly · in the wild
226
+ - **AVOID:** revolutionary · disrupting · ecosystem · empower · journey · mission · synergy · best-in-class · world's first (unless you can prove it)
227
+ - **NEVER:** "leverage", "robust", "seamless", "unlock the future"
228
+
229
+ ### Headline patterns
230
+
231
+ - 2 lines, second is brand-accent
232
+ - Imperative or noun phrase (avoid passive)
233
+ - Examples that work: "AI sniper for / prediction markets" · "Stop guessing. / Start sniping." · "Not a meme. / A weapon." · "Receipts on chain. / Edge in the wild."
234
+ - Examples that don't: "Welcome to the future of X" · "The next generation of Y"
235
+
236
+ ### CTA copy
237
+
238
+ - **Primary buy:** "Buy $TICKER" or "Buy $TICKER on pump.fun"
239
+ - **Primary product:** "Launch App" / "Launch Oracle" — never "Get started"
240
+ - **Secondary:** "See the receipts" / "Read docs" / "See live signal feed"
241
+ - Always pair with a `›` arrow glyph (not `→` not lucide arrow)
242
+
243
+ ### Semantic voice
244
+
245
+ - All numbers tabular-nums always
246
+ - Wins/positive: brand-accent color
247
+ - Losses/negative: `--brand-danger`
248
+ - Neutral/pending: amber / slate-300
249
+ - Status pills: `border-color/40 bg-color/10 text-color`
250
+
251
+ ## Reference LPs Audited
252
+
253
+ This skill was synthesized from primary research on these sites (full evidence in any sd-research session that targets `web3-launch`):
254
+
255
+ | Tier | Sites | What we stole |
256
+ | ------------------------ | --------------------------------- | ---------------------------------------------------------------------------------- |
257
+ | Coin-with-tech (premium) | HyperLiquid, GMX, Ondo | In-hero proof row · animated stat counters · 3-stat hero |
258
+ | Pure meme + culture | Mog, Brett | Sticky price bar · floating buy pill · "WTF IS X?" reveal · contract at hero level |
259
+ | Prediction markets | Polymarket, Kalshi, Limitless | Live activity ticker · category code (dark + green/red) · marquee above nav |
260
+ | Solana DeFi | Jupiter, Drift, Birdeye, Pump.fun | Card-grid layouts · monospace data · neon glow shadows |
261
+
262
+ **Open territory we own:** serious + expressive + terminal/radar aesthetic. No audited competitor uses hex-grid + scanline as hero background. No audited competitor surfaces verifiable on-chain win-rate stats in the LP.
263
+
264
+ ## Default Onliness Pattern
265
+
266
+ Use this template for the LP's positioning statement:
267
+
268
+ > "$TICKER is the only [category] token with [verifiable proof] — [what we have], [where the proof lives], [the cultural energy]."
269
+
270
+ Example: "$ODDS is the only prediction-market token with a verifiable on-chain win rate — AI signals, proof on-chain, degen energy."
271
+
272
+ ## Component Families (LP-scoped)
273
+
274
+ - price ticker bar
275
+ - marquee live feed
276
+ - hero with motion background
277
+ - contract address row (with copy + explorer + buy)
278
+ - animated stat counter
279
+ - track-record table (desktop) + card list (mobile)
280
+ - numbered step cards
281
+ - mock product preview card
282
+ - token contract card
283
+ - tokenomics tile grid
284
+ - social platform card
285
+ - accordion FAQ
286
+ - floating buy pill
287
+ - 4-column footer
288
+ - terminal-style status header (`▸ command_name`)
289
+
290
+ ## Accessibility (non-negotiable)
291
+
292
+ - WCAG 2.2 AA contrast on all text (verify accent on dark = 7.0+ for body sizes)
293
+ - Visible focus rings: `focus-visible:outline-2 outline-offset-2 outline-[var(--brand-accent)]`
294
+ - Touch targets `>= 44px` mobile (price bar links exempt; buy CTAs always)
295
+ - `<details>` accordion is keyboard + screen-reader native — DON'T rebuild it as JS
296
+ - All animations `prefers-reduced-motion: reduce` aware
297
+ - Marquee tickers: `role="marquee"` + `aria-label` + pause-on-hover required
298
+ - Contract row: `aria-label="Copy contract address"` on copy button; show `Copied` confirmation
299
+ - Color is never the only signal — always pair with text label or icon (e.g. signal pill says "GREEN" not just green color)
300
+
301
+ ## Writing Tone (for the skill consumer)
302
+
303
+ Confident, sharp, low-jargon. Short sentences. Active voice. Numbers > adjectives. Receipts > promises. Examples > descriptions.
304
+
305
+ ## Rules: Do
306
+
307
+ - Lead with the number, not the claim ("73% win rate" before "AI is good")
308
+ - One section = one job (hype OR proof, never both)
309
+ - Use brand-accent only for: primary CTAs, win signals, pulsing live dots, key stats — anywhere else is brand dilution
310
+ - Animate sparingly; every motion must serve recognition or recall
311
+ - Surface the contract address in the hero — never hide it in a token section
312
+ - Write CTAs as commands, not descriptions ("Buy $ODDS" not "Get $ODDS now")
313
+ - Pair every screenshot with a caption that says what it is
314
+ - Keep PriceBar + FloatingBuy as escape hatches so the user is never >300vh from a buy action
315
+ - Pre-launch: use `TBA` placeholders inside the FINAL UI shell — don't omit the section. Users will see the structure they'll buy into
316
+
317
+ ## Rules: Don't
318
+
319
+ - Don't use rounded-2xl/3xl on cards — that's SaaS, this is tactical
320
+ - Don't write "revolutionary", "disrupt", "next-gen", "future of X"
321
+ - Don't add parallax to the hero — it's the most overused Web3 LP move
322
+ - Don't put 3+ CTAs in the hero — primary buy + secondary product, that's it
323
+ - Don't decorate stats with glyphs/icons — the number IS the decoration
324
+ - Don't make the FAQ a JS-controlled accordion — `<details>` is better
325
+ - Don't ship without `prefers-reduced-motion` overrides on every animation
326
+ - Don't translate the LP — degen audience reads English universally; translation dilutes voice
327
+ - Don't add a "subscribe to newsletter" CTA — degen audiences reject email gates
328
+ - Don't put more than 5 footer columns — 4 max (brand / Product / Token / Community)
329
+
330
+ ## Expected Behavior
331
+
332
+ - Always restate the user's positioning in one onliness sentence before generating sections
333
+ - Use the section playbook order; only skip sections, never reorder
334
+ - Pre-launch: still ship all sections, fill with mock data shaped like the real data ("2,847 markets analyzed", "$1.42M MCap" — degen-realistic, not "Lorem ipsum")
335
+ - For monorepos / multiple LPs (e.g. one per token), keep this skill as the shared brand floor and override `--brand-accent` per token
336
+ - When a section has no data analog (e.g. a pure meme has no `TrackRecord`), substitute with the closest meme-tier proof (community stats, bridge/exchange listings, viral tweet count) — never delete the section silently
337
+
338
+ ## Guideline Authoring Workflow
339
+
340
+ 1. Restate the user's brand in one onliness sentence (use the template above).
341
+ 2. Define palette + type tokens; only override defaults if the user has source-of-truth tokens.
342
+ 3. Walk the Section Playbook in order; for each section, name the data the section will display and the CTA destination.
343
+ 4. List all 6 motion patterns and confirm `prefers-reduced-motion` overrides exist.
344
+ 5. Write the FAQ first (it forces clarity on what the project actually is) — then the rest of the copy.
345
+ 6. Run a "no decoration" pass: delete every UI element that isn't a CTA, a proof, or a navigation aid.
346
+
347
+ ## Required Output Structure
348
+
349
+ When generating a Web3-launch LP, deliver:
350
+
351
+ - One-line onliness statement
352
+ - Token + brand tokens (palette, type, radius, spacing)
353
+ - Per-section markup with: data shape, copy, CTA targets, motion notes
354
+ - Mobile + desktop layout decisions per section
355
+ - Accessibility checklist (focus rings, reduced-motion, touch targets, ARIA labels)
356
+ - Anti-patterns explicitly avoided
357
+ - QA checklist (see below)
358
+
359
+ ## QA Checklist
360
+
361
+ - [ ] PriceBar shows live ticker + at least 2 of {MCap, Vol, Holders}; uses `TBA` if pre-launch
362
+ - [ ] Hero contains: eyebrow + 2-line headline + sub-copy + 2 CTAs + contract row + 3-stat proof row — in that order
363
+ - [ ] In-hero counters animate on first paint (or scroll into view), not stuck at 0
364
+ - [ ] Contract row has: address (full or 4-char-truncated) + Copy button + Explorer link + Buy link
365
+ - [ ] WhatIs section has min-h-80vh and oversized clamp(3rem, 11vw, 9rem) headline
366
+ - [ ] TrackRecord stats animate on scroll-into-view via IntersectionObserver
367
+ - [ ] TrackRecord has both desktop table AND mobile card list (NEVER horizontal scroll)
368
+ - [ ] FloatingBuy appears after 600px scroll and disappears within 280px of footer
369
+ - [ ] PriceBar (`top-0`) and Header (`top-9`) stack correctly with no overlap at any scroll
370
+ - [ ] All marquees pause on hover via `[role="marquee"]:hover > div` selector
371
+ - [ ] All animations have `@media (prefers-reduced-motion: reduce)` override
372
+ - [ ] No `rounded-2xl` / `rounded-3xl` anywhere except FloatingBuy (intentional pill)
373
+ - [ ] FAQ uses native `<details>` not JS accordion
374
+ - [ ] Footer has 4 columns max, includes "Not financial advice" disclaimer
375
+ - [ ] All numbers use `tabular-nums` and `font-mono` (Geist Mono / JetBrains Mono)
376
+ - [ ] Brand accent used ONLY on: primary CTAs, win signals, live dots, eyebrow callouts, hero accent line
377
+ - [ ] Touch targets >= 44px on mobile
378
+ - [ ] No use of "revolutionary", "disrupt", "next-gen", "ecosystem", "empower"
379
+ - [ ] If LP has multiple language audiences: ship English only — degen audience reads it universally
380
+
381
+ ## Component Rule Expectations
382
+
383
+ For every component, define:
384
+
385
+ - **Default state:** layout, tokens, copy
386
+ - **Hover state:** glow-up if interactive, color shift if link
387
+ - **Focus-visible:** outline ring with brand-accent
388
+ - **Active state:** brief scale-down or color flash
389
+ - **Loading / pre-launch:** show skeleton OR `TBA` placeholder inside final UI shell
390
+ - **Error / empty:** monospace status header (`▸ no_data_yet`) + helpful next-action link
391
+ - **Mobile collapse:** which cells/columns hide; which become card-stacks
392
+
393
+ ## Quality Gates
394
+
395
+ - Every section must have a quantifiable success metric (CTA click rate / scroll depth / time-on-page) — if you can't name it, the section probably doesn't belong
396
+ - Accent color usage audit: count occurrences. If `--brand-accent` appears more than 12 times in the rendered LP, you're over-using it
397
+ - "No-JS pass": disable JS — the LP must still render readable, navigable, and convey the pitch. Only counters, marquees, and the floating-buy pill should degrade
398
+ - Lighthouse: Performance ≥ 90, Accessibility ≥ 95, Best-Practices ≥ 95, SEO ≥ 95 on the LP
399
+
400
+ ## Migration Notes (when retrofitting an existing LP)
401
+
402
+ 1. Don't try to redesign in-place — fork the route into a route group like `(marketing)/` with its own layout
403
+ 2. Pull the dashboard / app out of `/` first; LP takes the root URL, app moves to `/dashboard` or `/app`
404
+ 3. Add PriceBar + FloatingBuy LAST, after sections render — they're the conversion safety net, not the structure
405
+ 4. The hex-grid scanline goes on the Hero only — don't bleed it into other sections (loses meaning)
406
+ 5. Replace any existing "fade up on scroll" decorative animations with the 6 approved motion patterns — quality > quantity
407
+ <!-- TYPEUI_SH_MANAGED_END -->