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.
- package/.claude-plugin/marketplace.json +1 -1
- package/.claude-plugin/plugin.json +1 -1
- package/package.json +1 -1
- package/skills/luckiest-design-website/ATTRIBUTION.md +38 -0
- package/skills/luckiest-design-website/CHANGELOG.md +104 -0
- package/skills/luckiest-design-website/LICENSE +21 -0
- package/skills/luckiest-design-website/SKILL.md +372 -0
- package/skills/luckiest-design-website/UPSTREAM-CHANGELOG.md +526 -0
- package/skills/luckiest-design-website/engine/scrollcraft.css +432 -0
- package/skills/luckiest-design-website/engine/scrollcraft.js +1167 -0
- package/skills/luckiest-design-website/evals/evals.json +33 -0
- package/skills/luckiest-design-website/references/assets.md +286 -0
- package/skills/luckiest-design-website/references/device-diag.html +214 -0
- package/skills/luckiest-design-website/references/devices.md +466 -0
- package/skills/luckiest-design-website/references/feel.md +277 -0
- package/skills/luckiest-design-website/references/registry-examples.md +305 -0
- package/skills/luckiest-design-website/references/taste.md +304 -0
- package/skills/luckiest-design-website/references/template.html +138 -0
- package/skills/luckiest-design-website/references/uniqueness.md +480 -0
- package/skills/luckiest-design-website/references/verify.md +381 -0
- package/skills/luckiest-design-website/references/worldflight.md +349 -0
- package/skills/luckiest-design-website/references/worlds.md +178 -0
- package/skills/luckiest-design-website/scripts/doctor.mjs +177 -0
- package/skills/luckiest-design-website/scripts/encode.sh +80 -0
- package/skills/luckiest-design-website/scripts/kie.mjs +202 -0
- package/skills/luckiest-design-website/scripts/serve.mjs +52 -0
- package/skills/luckiest-design-website/scripts/shoot.mjs +644 -0
- package/skills/luckiest-design-website/scripts/workspace.mjs +106 -0
- package/skills/luckiest-design-website/scripts/worldflight-assert.mjs +273 -0
- package/skills/luckiest-design-website/templates/FINGERPRINTS.md +65 -0
- package/skills/luckiest-research/ATTRIBUTION.md +250 -0
- package/skills/luckiest-research/CHANGELOG.md +59 -0
- package/skills/luckiest-research/LICENSE +229 -0
- package/skills/luckiest-research/SKILL.md +145 -0
- package/skills/luckiest-research/references/sources.md +115 -0
- package/skills/luckiest-research/references/visual-read.md +57 -0
- package/skills/luckiest-research/scripts/doctor.sh +16 -0
package/package.json
CHANGED
|
@@ -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.
|