luckiest-co 1.0.16 → 1.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/.claude-plugin/marketplace.json +1 -1
  2. package/.claude-plugin/plugin.json +1 -1
  3. package/package.json +1 -1
  4. package/skills/luckiest-design-website/ATTRIBUTION.md +38 -0
  5. package/skills/luckiest-design-website/CHANGELOG.md +104 -0
  6. package/skills/luckiest-design-website/LICENSE +21 -0
  7. package/skills/luckiest-design-website/SKILL.md +372 -0
  8. package/skills/luckiest-design-website/UPSTREAM-CHANGELOG.md +526 -0
  9. package/skills/luckiest-design-website/engine/scrollcraft.css +432 -0
  10. package/skills/luckiest-design-website/engine/scrollcraft.js +1167 -0
  11. package/skills/luckiest-design-website/evals/evals.json +33 -0
  12. package/skills/luckiest-design-website/references/assets.md +286 -0
  13. package/skills/luckiest-design-website/references/device-diag.html +214 -0
  14. package/skills/luckiest-design-website/references/devices.md +466 -0
  15. package/skills/luckiest-design-website/references/feel.md +277 -0
  16. package/skills/luckiest-design-website/references/registry-examples.md +305 -0
  17. package/skills/luckiest-design-website/references/taste.md +304 -0
  18. package/skills/luckiest-design-website/references/template.html +138 -0
  19. package/skills/luckiest-design-website/references/uniqueness.md +480 -0
  20. package/skills/luckiest-design-website/references/verify.md +381 -0
  21. package/skills/luckiest-design-website/references/worldflight.md +349 -0
  22. package/skills/luckiest-design-website/references/worlds.md +178 -0
  23. package/skills/luckiest-design-website/scripts/doctor.mjs +177 -0
  24. package/skills/luckiest-design-website/scripts/encode.sh +80 -0
  25. package/skills/luckiest-design-website/scripts/kie.mjs +202 -0
  26. package/skills/luckiest-design-website/scripts/serve.mjs +52 -0
  27. package/skills/luckiest-design-website/scripts/shoot.mjs +644 -0
  28. package/skills/luckiest-design-website/scripts/workspace.mjs +106 -0
  29. package/skills/luckiest-design-website/scripts/worldflight-assert.mjs +273 -0
  30. package/skills/luckiest-design-website/templates/FINGERPRINTS.md +65 -0
  31. package/skills/luckiest-research/ATTRIBUTION.md +250 -0
  32. package/skills/luckiest-research/CHANGELOG.md +59 -0
  33. package/skills/luckiest-research/LICENSE +229 -0
  34. package/skills/luckiest-research/SKILL.md +145 -0
  35. package/skills/luckiest-research/references/sources.md +115 -0
  36. package/skills/luckiest-research/references/visual-read.md +57 -0
  37. package/skills/luckiest-research/scripts/doctor.sh +16 -0
@@ -9,7 +9,7 @@
9
9
  "name": "luckiest",
10
10
  "source": "./",
11
11
  "description": "Plan, go, finish, plus bundled free Luckiest skills that work in Claude Code, web chat, and Cowork.",
12
- "version": "0.1.14",
12
+ "version": "0.1.17",
13
13
  "author": { "name": "Luckiest" }
14
14
  }
15
15
  ]
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "luckiest",
3
3
  "description": "Plan, go, finish. Guided planning, progress dashboards, and your luckiest.co tribe inside Claude Code.",
4
- "version": "0.1.15",
4
+ "version": "0.1.17",
5
5
  "author": { "name": "Luckiest" }
6
6
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "luckiest-co",
3
- "version": "1.0.16",
3
+ "version": "1.0.18",
4
4
  "description": "Luckiest for Claude Code: plan, go, finish. Your luckiest.co skills and tribe, inside Claude.",
5
5
  "bin": {
6
6
  "luckiest-co": "./bin/install.js"
@@ -0,0 +1,38 @@
1
+ # Attribution
2
+
3
+ This skill, `luckiest-design-website`, is the Luckiest edition of the original
4
+ skill **"scrollcraft"** from the **scroll-craft** project
5
+ (https://github.com/nateherkai/scroll-craft) by **Nate Herk**
6
+ (https://github.com/nateherkai), released under the MIT License.
7
+
8
+ The original work has been rebranded, security-reviewed, and improved. The
9
+ engine (`engine/scrollcraft.js`, `engine/scrollcraft.css`), the scripts, the
10
+ `SCROLLCRAFT_*` environment variables and the `.scrollcraft.json` workspace file
11
+ keep their original names so the upstream mechanism runs unchanged. The
12
+ original copyright and license are preserved verbatim below and in `LICENSE`.
13
+
14
+ ---
15
+
16
+ ## Original License (verbatim)
17
+
18
+ MIT License
19
+
20
+ Copyright (c) 2026 Nate Herk
21
+
22
+ Permission is hereby granted, free of charge, to any person obtaining a copy
23
+ of this software and associated documentation files (the "Software"), to deal
24
+ in the Software without restriction, including without limitation the rights
25
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
26
+ copies of the Software, and to permit persons to whom the Software is
27
+ furnished to do so, subject to the following conditions:
28
+
29
+ The above copyright notice and this permission notice shall be included in all
30
+ copies or substantial portions of the Software.
31
+
32
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
33
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
34
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
35
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
36
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
37
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
38
+ SOFTWARE.
@@ -0,0 +1,104 @@
1
+ # Changelog — luckiest-design-website
2
+
3
+ ## 1.0.0 — 2026-09-04
4
+ Rebranded from scrollcraft (scroll-craft by Nate Herk, MIT, upstream v0.2.0).
5
+
6
+ ### Security pass
7
+ - PASS. 29 files scanned. One low advisory, now documented in the skill body:
8
+ `scripts/kie.mjs` reads `KIE_AI_API_KEY` from env or the nearest `.env` and
9
+ sends it as a bearer token to two kie.ai hosts (`api.kie.ai` and the upload
10
+ host `kieai.redpandaai.co`). Only the `--ref` image the user names is
11
+ uploaded. Both hosts are central to the skill's stated purpose. The skill
12
+ now tells the agent to reference the env var name only and never ask for the
13
+ key in chat.
14
+
15
+ ### Best-practices pass
16
+ - SKILL.md rewritten from 415 to 372 lines, third person, each reference
17
+ named with when to load it. `license`, `metadata.version`, and
18
+ `metadata.listing_id` added. `allowed-tools` kept minimal (Bash is required
19
+ for the doctor, encode, serve and shoot scripts).
20
+ - Upstream `CHANGELOG.md` preserved as `UPSTREAM-CHANGELOG.md`; upstream
21
+ `EXAMPLES.md` preserved as `references/registry-examples.md`.
22
+ - Engine, scripts, env vars and workspace file names kept verbatim so the
23
+ upstream mechanism runs unchanged. Prose self-references rebranded.
24
+ - `scripts/doctor.mjs`: ffmpeg hint now names the macOS and Linux installs
25
+ next to the Windows one. The preflight was run on macOS during this rebrand
26
+ and works; upstream said it had only ever been run on Windows.
27
+
28
+ ### Improve pass (/refract)
29
+ - Interview question 9: a dollar spend cap for generated assets. Zero routes
30
+ the build to the user's own footage plus CSS-only devices. The source had a
31
+ first-class no-spend route but never asked for the cap up front.
32
+ - CSS-first device rule: `reveal`, `parallax`, `in` and `drift` run on
33
+ `animation-timeline: scroll()` / `view()` behind `@supports`, with the engine
34
+ as fallback; the engine keeps `scrub`, `pin`, `pan` and `--sc-p` consumers.
35
+ - Performance budget in the verify step: LCP under 2.5s on the hero poster,
36
+ INP under 200ms while scrubbing, and a mobile poster-plus-CSS fallback for
37
+ any act that cannot hold it.
38
+ - New triggers: "rebuild my landing page as an experience", "this looks
39
+ AI-made", "design my website".
40
+ - Copy is now a step, not an afterthought: `luckiest-copywriting` writes the
41
+ act headlines, belief sentence and CTA label; `luckiest-copywriting-humanize`
42
+ is the finishing pass.
43
+ - Head metadata and one JSON-LD block via `luckiest-schema`; an event plan
44
+ (act reached, peak reached, CTA click) via `luckiest-analytics`. The peak
45
+ reach rate is named as the page's success metric.
46
+ - `luckiest-extract-design-system` seeds tokens from an existing site when no
47
+ brand kit exists. `luckiest-image` and `luckiest-video` are offered as asset
48
+ generators alongside kie.ai. `luckiest-cro` reviews the close act.
49
+ - Hard rules extended with the AI-slop tells the trend pass surfaced: uniform
50
+ radius and card heights, Inter or system font as the display face, blue-purple
51
+ gradients, "Build the future" class headlines, and the INP ship-blocker.
52
+
53
+ ### Network hooks
54
+ - Assist-request: when the human is unreachable, offer to raise an
55
+ assist-request to the tribe before self-authoring the brief.
56
+ - Share-with-tribe: after the report, OFFER to share the fingerprint row and
57
+ contact sheet only. Never BRIEF.md, brand assets, client names or copy.
58
+ - Pick-up-where-they-left: offer to seed a follow-up Luckiest plan (events
59
+ wired, real-phone check, one A/B test on the peak or close).
60
+
61
+ ### Trend pass (/newsjack + /luckiest-trends)
62
+ - The luckiest-trends engine ran with a query plan but timed out on YouTube
63
+ transcript fetching before emitting evidence and saved no output. The
64
+ newsjack CLI is not installed. Signals below came from host web search on
65
+ 2026-09-04 and are best-effort on freshness.
66
+ - CSS scroll-driven animations (`animation-timeline: scroll()` / `view()`) at
67
+ roughly 84% global support, compositor-driven, Chrome 115+, Firefox 132+,
68
+ Safari 18+. Acted on as the CSS-first device rule. Sources: MDN CSS
69
+ scroll-driven animations guide; CSSAWWWARDS "Scroll Timelines Guide (2026)";
70
+ dev.to "Creating Complex Scroll-driven Animations with Pure CSS in 2026".
71
+ Retrieved 2026-09-04.
72
+ - Safari 26.2 (released 2025-12-12) ships LCP and the Event Timing API behind
73
+ INP, so iOS can now be measured; INP is the most-failed Core Web Vital
74
+ (about 43% of sites over 200ms) and scrollytelling video scrub is a known
75
+ offender on phones. Acted on as the performance budget and the INP
76
+ ship-blocker. Sources: DebugBear "Firefox And Safari Now Support Two Core
77
+ Web Vitals Metrics"; RUMvision "Safari catching up: INP and LCP in 26.2";
78
+ scrollytelling.ai examples review. Retrieved 2026-09-04.
79
+ - "AI slop" web design is being named by its tells: Inter or system fonts,
80
+ blue-purple gradients, "Build the future" headlines, uniform 16px radius,
81
+ identical card heights, distributional convergence. Acted on as new hard
82
+ rules and new triggers. Source: 925 Studios "AI Slop Web Design: Complete
83
+ Guide to Spotting and Fixing Generic Websites (2026)". Retrieved 2026-09-04.
84
+
85
+ ### Thumbnail
86
+ - Routes to the `nodes` scene via "design" in the title (also "structure",
87
+ "design", "system" in the description). No hash fallback.
88
+
89
+ ### Recommendations not implemented (next versions)
90
+ - R1. Ship a `scripts/vitals.mjs` that reads LCP and INP from the shoot run,
91
+ so the budget is measured by the harness rather than by hand. Small
92
+ Playwright addition to `shoot.mjs`.
93
+ - R2. Emit the CSS-first devices as a documented `engine/scrollcraft-css.css`
94
+ layer with `@supports` fallbacks, so builds do not hand-write the same
95
+ `animation-timeline` blocks.
96
+ - R3. Replace the kie.ai-only generator with a provider switch in `kie.mjs`
97
+ (kie.ai, fal, Replicate) so `luckiest-image` and `luckiest-video` routes
98
+ share the encode pipeline instead of ending at a file handoff.
99
+ - R4. A `--brand <dir>` flag on `workspace.mjs` that reads
100
+ `luckiest-extract-design-system` tokens straight into the `:root` block of
101
+ `template.html`.
102
+ - R5. An eval fixture: one recorded interview plus expected BRIEF.md, grammar
103
+ choice and gate result, so a regression in the procedure is caught without
104
+ a real build.
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Nate Herk
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,372 @@
1
+ ---
2
+ name: luckiest-design-website
3
+ description: "Builds a premium, scroll-driven landing page for any business and holds it to a real design floor. Scroll is the timeline: video scrubs under the wheel, sections pin and advance, rails pan sideways, headlines assemble, the ground shifts colour. Interviews the human first, picks one of eight page grammars plus a bespoke signature move so no two builds share a skeleton, writes copy with luckiest-copywriting, builds from own footage or generated assets, ships real semantic HTML, then verifies by screenshotting its own scroll and grading contrast, dead scroll and INP. Use for 'scrollytelling', 'scroll animation site', 'a site where scrolling plays a video', 'Apple-style landing page', 'interactive landing page', 'make my brand a scroll experience', 'rebuild my landing page as an experience', 'this looks like a template', 'this looks AI-made', 'design my website', or any page that should feel like an experience rather than a document."
4
+ license: See ATTRIBUTION.md
5
+ allowed-tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion
6
+ metadata:
7
+ version: "1.0.0"
8
+ listing_id: luckiest-design-website
9
+ author: luckiest
10
+ ---
11
+
12
+ # luckiest-design-website
13
+
14
+ Scroll is the only input every visitor already knows. This skill treats it as a
15
+ timeline: the wheel is a scrubber, the page is a film with real text on top, and
16
+ each section behaves differently enough that the visitor keeps going.
17
+
18
+ **What it produces:** an interview brief, a page grammar, a journey, a feeling
19
+ curve with one engineered peak, a scroll score, one signature move, page copy,
20
+ assets, one real HTML page on a token-driven design floor, and a strip of
21
+ screenshots proving it holds at every scroll position.
22
+
23
+ ## Staying current
24
+
25
+ On activation, call the Luckiest MCP `check_updates` tool with
26
+ `{ listingId: "c17e533c-42eb-48f2-a0ed-6ef717051512", installedSemver: "1.0.0" }`. If it
27
+ returns `upToDate: false`, surface the `notice` to the user once, then continue.
28
+ Do nothing further if `upToDate: true`. Never block on this check; if the tool
29
+ is unavailable, proceed.
30
+
31
+ When the skill's work is done, call the Luckiest MCP `report_usage` tool once
32
+ with `{ listing_id: "luckiest-design-website", skill_version: "1.0.0", matched: true, success: <true if the skill completed, false otherwise> }`.
33
+ Metadata only, never prompt text. Never block on it; if the tool is
34
+ unavailable, skip silently.
35
+
36
+ ## The spine
37
+
38
+ Four rules. Everything else follows from them.
39
+
40
+ 1. **Variety is the product.** At least four device families per page, never
41
+ the same device twice in a row. Read [references/devices.md](references/devices.md)
42
+ when scoring acts.
43
+ 2. **The world is photographic** unless the brand is genuinely illustrated.
44
+ Clay diorama and low-poly are banned defaults. Read
45
+ [references/worlds.md](references/worlds.md) before writing an asset prompt.
46
+ 3. **No continuous chain** unless the brief literally says "one continuous
47
+ journey". Varying the device hides the cut for free.
48
+ 4. **Structure is its own axis.** A different world is not a different page.
49
+ Read [references/uniqueness.md](references/uniqueness.md) before picking a
50
+ grammar.
51
+
52
+ ## Step 0: The interview
53
+
54
+ **Always interview the human before generating anything.** Nine questions, one
55
+ pass, answers written verbatim into `<workspace>/builds/<name>/BRIEF.md`.
56
+
57
+ 1. **Vibe in three to five words**, plus up to three references from any medium
58
+ except websites. Naming sites is how a page ends up looking like one.
59
+ 2. **The scroll journey, section by section, in their words.**
60
+ 3. **The energy curve.** Where calm, where intense.
61
+ 4. **How should someone feel, stage by stage, and what is the ONE moment they
62
+ should remember?** This becomes the feeling curve and the peak. See
63
+ [references/feel.md](references/feel.md).
64
+ 5. **One thing this site should do that no site they have seen does.** The seed
65
+ of the signature move. "Be memorable" is not an answer.
66
+ 6. **How far from premium-minimal?** Offer the range in uniqueness.md §5.
67
+ 7. **One unbroken world, or distinct scenes?** The biggest structural fork.
68
+ Offer both plainly. Continuous world is
69
+ [references/worldflight.md](references/worldflight.md).
70
+ 8. **What assets and brand material exist?** Footage, photos, product shots, a
71
+ brand kit, an existing site. "Nothing" is fine and means a generated world.
72
+ 9. **Spend cap for generated assets, in dollars.** Zero is a first-class answer
73
+ and routes the build to own-assets plus CSS-only devices. See Step 3.
74
+
75
+ If they have an existing site and no brand kit, run `luckiest-extract-design-system`
76
+ on the URL to pull colours, fonts, spacing and radius into starter tokens.
77
+ Those tokens seed the six colour roles and two fonts in Step 4. A hard rule in a
78
+ real brand kit beats anything in this skill.
79
+
80
+ BRIEF.md must also contain the feeling curve, the peak (as the sentence a
81
+ visitor would say to a friend), the completed "It's the site where ___"
82
+ sentence, and any authored silence, so verification can tell it from dead
83
+ scroll. Spec: [references/feel.md](references/feel.md).
84
+
85
+ **If the human is unreachable** on a fully autonomous run, first offer to raise
86
+ an assist-request to the user's Luckiest tribe: a person who knows the brand
87
+ answers questions 1, 4 and 5 better than a model guessing in the brand's voice.
88
+ Only if that is declined or unavailable, self-author BRIEF.md, mark it
89
+ `Self-authored, not interviewed` at the top, and say so in the final report.
90
+
91
+ ## Bootstrap
92
+
93
+ Once, after the interview, before Step 1.
94
+
95
+ ```bash
96
+ node <skill>/scripts/doctor.mjs # node, full ffmpeg, playwright, Chrome, key, workspace
97
+ node <skill>/scripts/workspace.mjs --ensure # resolves the workspace, seeds an empty registry
98
+ ```
99
+
100
+ `doctor` exists because the common setup faults surface later as misleading
101
+ errors: a stripped ffmpeg reports a missing filter as a syntax error in your
102
+ command. Say which items are missing rather than working around them silently.
103
+ Verified on macOS and Windows; the scripts also search Linux paths.
104
+
105
+ The workspace resolves, first hit wins: `SCROLLCRAFT_HOME`, then the nearest
106
+ `.scrollcraft.json` walking up from the cwd, then `<project root>/scrollcraft`.
107
+ Builds land in `<workspace>/builds/<name>/`, the registry is
108
+ `<workspace>/FINGERPRINTS.md`, and it starts empty on purpose. The engine, env
109
+ vars and workspace file keep their upstream names so the mature scripts run
110
+ unchanged; the skill's name is what changed.
111
+
112
+ Copy `engine/scrollcraft.js` and `engine/scrollcraft.css` into the build folder.
113
+ **Never edit the engine per project.** Theme it with tokens, write your own
114
+ markup, and drive anything bespoke off the `--sc-p` custom property it
115
+ publishes. A runtime that builds the page from a config object is exactly why
116
+ every site built on one looks the same.
117
+
118
+ `KIE_AI_API_KEY` is only needed to generate assets, and only if the user chose
119
+ kie.ai in Step 3. Reference the env var name; never ask the user to paste the
120
+ key into chat. The key is sent as a bearer token to two kie.ai hosts
121
+ (`api.kie.ai` for jobs, `kieai.redpandaai.co` for `--ref` image upload), and
122
+ the only local file that leaves the machine is the reference image the user
123
+ passes explicitly.
124
+
125
+ ## Step 1: The brief, journey first
126
+
127
+ Ask only what Step 0 did not cover, open-ended, never as a made-up industry menu:
128
+
129
+ 1. What is this, and who is it for?
130
+ 2. What must the visitor believe by the end? One sentence. Three means pick one.
131
+ 3. What does the visitor do next? One action, one label, used everywhere.
132
+ 4. Art direction: offer the worlds in worlds.md as a real choice.
133
+
134
+ Then write the journey: four to seven beats, each a shift in what the visitor
135
+ knows or feels (Recognition, Tension, Turn, Substance, Range, Commitment is one
136
+ shape, not the shape). Sections serve beats. A section that serves no beat is
137
+ cut. Show the journey and get it right before generating a single asset.
138
+
139
+ ## Step 2: Grammar, gate, then score
140
+
141
+ In order. Detail in [references/uniqueness.md](references/uniqueness.md).
142
+
143
+ **Pick a grammar.** Eight, mutually exclusive: filmic one-shot, chaptered
144
+ editorial, live surface, continuous world, typographic poster, gallery, split
145
+ stage, rhythmic cutlist. Nav, hero and close follow from it. Choosing filmic
146
+ one-shot means saying in the report why the other seven lost.
147
+
148
+ **Invent the signature move.** One bespoke interaction coded in the page, not a
149
+ parameter change to a kit device. Interview question 5 is the seed.
150
+
151
+ **Run the fingerprint gate.** The build must differ from every row in
152
+ `<workspace>/FINGERPRINTS.md` on at least 4 of 6 dimensions: grammar, nav, hero
153
+ device, act-sequence shape, close pattern, signature move. Fail it and change
154
+ the plan, not the registry.
155
+
156
+ **Write the feeling curve before the score table.** One line per act: the
157
+ emotion, then what causes it. Name the peak and give it the largest span.
158
+
159
+ Then score each beat with a device and write the table (beat, device, why).
160
+ Checks before building:
161
+
162
+ - The grammar's bans hold.
163
+ - Four or more device families, none twice in a row, at most two `scrub` acts.
164
+ - No two adjacent acts carry the same feeling.
165
+ - One peak, largest span by a visible margin, quieter act before it.
166
+ - Total length 8 to 14 viewport-heights.
167
+ - **Lightweight devices go to CSS first.** `reveal`, `parallax`, `in` and
168
+ `drift` can run on `animation-timeline: scroll()` / `view()` behind
169
+ `@supports`, off the main thread, with the engine's JS as the fallback. Keep
170
+ the engine for `scrub`, `pin`, `pan` and anything reading `--sc-p`. Fewer
171
+ scroll listeners is the cheapest INP win on the page.
172
+
173
+ ## Step 3: Assets
174
+
175
+ Route by the spend cap from question 9:
176
+
177
+ | Cap | Route |
178
+ |---|---|
179
+ | $0 | User's own footage and photos only. Grade and encode them (assets.md, "Real footage"). Stills-only acts where no footage exists. |
180
+ | Small | Stills from `luckiest-image` or kie.ai, at most two clips. |
181
+ | Real budget | kie.ai stills and camera moves via `scripts/kie.mjs`, or `luckiest-video` for a model the user already pays for. |
182
+
183
+ Whatever generates them, three things decide premium versus generated:
184
+
185
+ - **One style preamble, reused verbatim in every prompt.** Six images become
186
+ one shoot. Write it once, never paraphrase.
187
+ - **Look at every asset before using it.** Rerolling is cheaper than shipping a
188
+ bad frame.
189
+ - **Encode for scrubbing, not playback.** `scripts/encode.sh` sets a dense GOP;
190
+ a normal web encode scrubs like mud. Cut phone clips portrait.
191
+
192
+ ```bash
193
+ node <skill>/scripts/kie.mjs still "<style preamble>\n\n<scene>" out/01.png --ar 16:9 [--ref brand.png]
194
+ node <skill>/scripts/kie.mjs shot "<camera move>" out/01.png out/01.mp4 --dur 5
195
+ bash <skill>/scripts/encode.sh out/01.mp4 assets/01.mp4
196
+ bash <skill>/scripts/encode.sh out/01.mp4 assets/01-m.mp4 mobile
197
+ ```
198
+
199
+ Full pipeline, prompt scaffolds, ratios kie.ai actually accepts, and the cost
200
+ ceiling arithmetic: [references/assets.md](references/assets.md). Report
201
+ per-call sums as a planning ceiling, never as measured spend.
202
+
203
+ ## Step 4: Build the page
204
+
205
+ **Copy first, markup second.** Run `luckiest-copywriting` against BRIEF.md and
206
+ the journey: one headline per act, the belief sentence, the one CTA label, in
207
+ the awareness stage the traffic arrives at. Then run
208
+ `luckiest-copywriting-humanize` as the finishing pass. The refuse list in
209
+ taste.md and the filler-verb ban apply to copy as much as to layout: no
210
+ "Build the future" class headlines, no invented numbers, no em dashes.
211
+
212
+ Write real HTML: real `<h1>`, real `<p>`, real links, real reading order. The
213
+ engine reads `data-sc-*` attributes off your markup and never generates DOM.
214
+ Start from `references/template.html` and then delete what you keep verbatim,
215
+ because a page that keeps its structure looks like every other page that did.
216
+ Device patterns: [references/devices.md](references/devices.md). Spacing, type,
217
+ colour, depth, motion and the refuse list: read
218
+ [references/taste.md](references/taste.md) before writing markup, not after.
219
+
220
+ Theme by overriding tokens, six colours and two fonts:
221
+
222
+ ```css
223
+ :root {
224
+ --sc-canvas: #0A0806; --sc-surface: #16110E;
225
+ --sc-ink: #F5EBDD; --sc-ink-soft: #A2968A;
226
+ --sc-accent: #FF5A3D; --sc-accent-ink: #15110F;
227
+ --sc-font-display: "Archivo", system-ui, sans-serif;
228
+ --sc-font-text: "Geist", system-ui, sans-serif;
229
+ }
230
+ ```
231
+
232
+ Two things a scroll page still owes search and measurement, both cheap here
233
+ because the copy is real markup:
234
+
235
+ - **Head and structured data.** Title, meta description, OG image from the
236
+ hero poster, and one JSON-LD block. Run `luckiest-schema` for the block; a
237
+ service company is `LocalBusiness` or `Organization`, a product is `Product`.
238
+ - **Events.** Run `luckiest-analytics` for the tracking plan: `act_reached`
239
+ per act, `peak_reached`, `cta_click`, and one scroll-depth event. The peak
240
+ reach rate is the number that tells you whether the page works.
241
+
242
+ ## Step 5: Verify by scrolling it
243
+
244
+ Not optional. A scroll page has no single state; the failures live between the
245
+ two positions you looked at. Procedure: [references/verify.md](references/verify.md).
246
+
247
+ ```bash
248
+ cd <build> && npm i playwright-core # once
249
+ node <skill>/scripts/serve.mjs --root . --port 4500 &
250
+ node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/shots
251
+ node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/mobile --width 390 --height 844
252
+ node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/reduced --reduced-motion
253
+ ```
254
+
255
+ The harness walks every act at six positions, waits for the scrub video to
256
+ settle, and reports dead scroll, cues that never reach full opacity, contrast
257
+ measured on the composited page at the brightest frame under each line, and
258
+ legs stuck on a poster. It writes a contact sheet.
259
+
260
+ Then the passes the harness cannot do:
261
+
262
+ 1. **Read `sheet.png`.** Composition, motion, meaning.
263
+ 2. **Tab through** for focus order.
264
+ 3. **The feel check** (feel.md §6): scroll cold, one word per act, then diff
265
+ against the intended curve. Where they disagree the page is wrong.
266
+ 4. **Performance budget.** Load the page with the DevTools performance panel or
267
+ a `PerformanceObserver` for `event` and `largest-contentful-paint`: LCP
268
+ under 2.5s on the hero poster, INP under 200ms while scrubbing. Video scrub
269
+ is the usual INP offender on phones; if the mobile run cannot hold 200ms,
270
+ the mobile variant of that act falls back to the poster plus CSS motion
271
+ rather than shipping a stutter. Safari 26.2+ reports both metrics, so the
272
+ phone can now be measured, not guessed at.
273
+ 5. **A real phone.** Headless Chrome cannot reproduce an iPhone's decoder,
274
+ autoplay policy, Low Power Mode or touch scroll. On the first mobile defect
275
+ report, deploy `references/device-diag.html` beside the site and let the
276
+ device answer.
277
+ 6. **The close, through a conversion lens.** Run `luckiest-cro` on the final
278
+ act only: one action, label matches the page, nothing competing, the page
279
+ resolves and holds rather than fading into a footer.
280
+
281
+ Fix, shoot again, and report what was verified and what was not.
282
+
283
+ ## Hard rules
284
+
285
+ Ship-blockers. Each one makes a page read as machine-made.
286
+
287
+ | Never | Instead |
288
+ |---|---|
289
+ | Clay diorama, low-poly, claymation as the default world | Photographic. worlds.md |
290
+ | A "scroll" cue, arrow or animated mouse | Nothing. They know |
291
+ | `01 / 06` section counters | Delete. Sequence is not information |
292
+ | An eyebrow above every heading | At most one per three sections |
293
+ | Em dash anywhere visible | Period, comma, colon, parentheses |
294
+ | Centred copy in every act | Vary the anchor: lead, trail, centre, split |
295
+ | Same device twice in a row | Score the journey properly |
296
+ | Generating before the interview | Step 0, or mark BRIEF.md self-authored |
297
+ | No engineered peak, or three competing | One peak: asset budget, silence before it, most scroll room |
298
+ | An ending that fades into a footer | The close resolves and holds |
299
+ | Acts planned before the feeling curve | Curve first |
300
+ | No bespoke signature move | Invent one. A recoloured spotlight is not one |
301
+ | Fewer than 4 of 6 fingerprint dimensions cleared | Change the plan, not the registry |
302
+ | Editing the engine | Bespoke JS in the page off `--sc-p` and your own `data-sc-*` |
303
+ | Filmic one-shot by habit | Pick from all eight and say why seven lost |
304
+ | Full-frame dark overlay for contrast | A scrim only where the text sits |
305
+ | Text baked into an image | Real markup |
306
+ | Invented statistics | Real numbers or no counter |
307
+ | `transition: all`, animating width/height/top/left | `transform`, `opacity`, `clip-path` |
308
+ | Gradient text, neon glow, blue-purple AI gradients | Weight and size; offset blurred shadows |
309
+ | Uniform 16px radius and identical card heights everywhere | Hierarchy through intentional variation, or no cards |
310
+ | Inter or a system font as the display face by default | A display family chosen for this brand |
311
+ | Audio on a scrub clip | Strip it. encode.sh does |
312
+ | A build that stutters past 200ms INP on the phone | Poster plus CSS motion for that act on mobile |
313
+ | Shipping without Step 5 | Run Step 5 |
314
+
315
+ ## Output
316
+
317
+ The build folder including BRIEF.md, then a short report: grammar and why the
318
+ other seven lost, signature move, fingerprint gate result per row, journey,
319
+ feeling curve and peak, feel-check diff, score table, copy source, what was
320
+ generated and what it cost as a ceiling, what was verified with screenshots,
321
+ INP and LCP readings, and anything not verified. Say if the brief was
322
+ self-authored. Give the local URL. Then append the row to
323
+ `<workspace>/FINGERPRINTS.md`.
324
+
325
+ To put it on the web, `vercel:deploy` from the build folder works as-is: the
326
+ page is static HTML plus assets.
327
+
328
+ ## Share with your tribe
329
+
330
+ After the report, offer, never auto-post: "Want me to share this build's
331
+ grammar, signature move and contact sheet with your Luckiest tribe? Anyone
332
+ building a scroll page will see a shape that is already taken and one that
333
+ worked." If they accept, share the fingerprint row and `sheet.png` only. Never
334
+ share BRIEF.md, brand assets, client names or unpublished copy. If they
335
+ decline, stop.
336
+
337
+ Then offer to seed a follow-up Luckiest plan with the three things a shipped
338
+ page needs next: the analytics events wired, a real-phone check, and one A/B
339
+ test on the peak or the close via `luckiest-ab-testing`.
340
+
341
+ ## Luckiest skills this composes with
342
+
343
+ | Step | Skill | What it contributes |
344
+ |---|---|---|
345
+ | 0 | `luckiest-extract-design-system` | Tokens from an existing site when there is no brand kit |
346
+ | 3 | `luckiest-image`, `luckiest-video` | Asset generation on models the user already has, instead of kie.ai |
347
+ | 4 | `luckiest-copywriting`, `luckiest-copywriting-humanize` | Act headlines, belief sentence, CTA label, de-slop pass |
348
+ | 4 | `luckiest-schema` | JSON-LD and head metadata |
349
+ | 4 | `luckiest-analytics` | Event plan: act reached, peak reached, CTA click |
350
+ | 5 | `luckiest-cro` | The close act, judged as a conversion surface |
351
+ | after | `luckiest-ab-testing` | One test on the peak or the close |
352
+
353
+ ## References, and when to load each
354
+
355
+ - [references/uniqueness.md](references/uniqueness.md): before choosing a
356
+ grammar, the signature move, or running the gate.
357
+ - [references/feel.md](references/feel.md): writing the feeling curve and the
358
+ peak; running the feel check.
359
+ - [references/devices.md](references/devices.md): scoring acts and writing
360
+ device markup.
361
+ - [references/worldflight.md](references/worldflight.md): only when the answer
362
+ to question 7 is "one unbroken world".
363
+ - [references/worlds.md](references/worlds.md): before the first asset prompt.
364
+ - [references/taste.md](references/taste.md): before writing markup.
365
+ - [references/assets.md](references/assets.md): generating, grading, encoding.
366
+ - [references/verify.md](references/verify.md): running and reading the harness.
367
+ - [references/template.html](references/template.html): the starting skeleton.
368
+ - [references/device-diag.html](references/device-diag.html): real-phone clip diagnosis.
369
+ - [references/registry-examples.md](references/registry-examples.md): the
370
+ upstream author's twelve-row registry, illustration only.
371
+ - [UPSTREAM-CHANGELOG.md](UPSTREAM-CHANGELOG.md): what broke on each upstream
372
+ build and the rule that came out of it.