dreative 0.5.1 → 0.5.3

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 (48) hide show
  1. package/README.md +49 -27
  2. package/dist/cli/audit.js +206 -0
  3. package/dist/cli/audit.test.js +79 -0
  4. package/dist/cli/docsCheck.js +163 -0
  5. package/dist/cli/docsCheck.test.js +8 -0
  6. package/dist/cli/index.js +45 -9
  7. package/dist/server/preview.js +73 -73
  8. package/dist/server/store.js +11 -0
  9. package/dist/shared/artifacts.js +220 -0
  10. package/dist/shared/design.js +45 -24
  11. package/dist/shared/ruleSystem.js +220 -0
  12. package/dist/shared/ruleSystem.test.js +262 -0
  13. package/dist/shared/skillSystem.js +173 -0
  14. package/dist/shared/skillSystem.test.js +110 -0
  15. package/dist/ui/assets/{index--vztc_MR.js → index-CKwmbx2j.js} +13 -13
  16. package/dist/ui/index.html +12 -12
  17. package/package.json +5 -3
  18. package/skill/dreative/DESIGN.md +144 -108
  19. package/skill/dreative/PLAN.md +285 -116
  20. package/skill/dreative/SKILL.md +237 -144
  21. package/skill/dreative/frameworks/nextjs.md +13 -0
  22. package/skill/dreative/frameworks/react-vite.md +12 -0
  23. package/skill/dreative/frameworks/styling.md +14 -0
  24. package/skill/dreative/frameworks/sveltekit.md +10 -0
  25. package/skill/dreative/frameworks/vue-nuxt.md +12 -0
  26. package/skill/dreative/recipes/3d-recipes.md +44 -0
  27. package/skill/dreative/recipes/cinematic-recipes.md +19 -0
  28. package/skill/dreative/recipes/immersive-recipes.md +18 -0
  29. package/skill/dreative/recipes/media-recipes.md +60 -0
  30. package/skill/dreative/recipes/motion-recipes.md +68 -0
  31. package/skill/dreative/references/ARTIFACTS.md +196 -0
  32. package/skill/dreative/references/REFLEX_FONTS.json +44 -0
  33. package/skill/dreative/references/RULES.json +186 -0
  34. package/skill/dreative/references/SKILL_CONTRACT.md +30 -0
  35. package/skill/dreative/references/TIERS.md +44 -0
  36. package/skill/dreative/schemas/plan.schema.json +309 -0
  37. package/skill/dreative/schemas/verify.schema.json +75 -0
  38. package/skill/dreative/skills/3d.md +94 -267
  39. package/skill/dreative/skills/cinematic.md +56 -232
  40. package/skill/dreative/skills/experimental.md +108 -95
  41. package/skill/dreative/skills/immersive.md +61 -223
  42. package/skill/dreative/skills/interaction.md +9 -1
  43. package/skill/dreative/skills/media.md +149 -564
  44. package/skill/dreative/skills/mobile.md +129 -117
  45. package/skill/dreative/skills/motion.md +126 -256
  46. package/skill/dreative/skills/refined.md +116 -102
  47. package/skill/dreative/skills/ux.md +155 -144
  48. package/dist/server/ai.js +0 -177
@@ -34,32 +34,31 @@ Enumerate what your environment can actually produce, and write the result down
34
34
  Rules:
35
35
  - Probe by LOOKING (list your tools, `which ffmpeg`, check MCP config), never by
36
36
  assuming. A capability you didn't verify doesn't exist.
37
- - If a capability is missing but the design clearly wants it (e.g. a cinematic
38
- brief with no video-gen), you MUST ask a real question with a real choice —
39
- **stating the gap and moving on is not an offer, it's a disclosure.** The
40
- bug this catches: saying "video generation isn't available, so I'll use
41
- stills" and continuing is a FAILURE even though it's honest. The fix is a
42
- question with at least two live options: "install <concrete MCP/tool name>
43
- now and use it" vs "skip it, use <the specific fallback>". Ask it in the
44
- question round (§3), phrased as a genuine fork, not a heads-up. Never
45
- install tools silently; never silently degrade either.
46
- - The probe result changes the blueprint: no video-gen → hero loops become
47
- generated stills + ken-burns or a shader surface; **no image-gen → media
37
+ - Missing video, 3D, or separated source layers is not automatically a blocker.
38
+ First plan the strongest honest treatment available from generated/sourced
39
+ stills, local image processing, transparent cutouts, SVG, CSS, Canvas,
40
+ generated keyframes, or existing project assets. Ask for a tool or source
41
+ asset only when the requested result cannot be approximated convincingly;
42
+ present the concrete best-effort fallback in that question. Never install a
43
+ tool silently and never leave an "advanced animation later" placeholder.
44
+ - The probe result changes the blueprint: no video-gen stills become layered
45
+ scenes, masks, related keyframes, frame sequences, tiles/fragments, Canvas
46
+ samples, or shader textures as the concept warrants; **no image-gen → media
48
47
  cells become `source-image` (DESIGN.md §7's priority: verified stock/CDN
49
48
  photography), every planned cutout prop becomes a sourced-and-matted photo
50
49
  or is cut, and any 3D of an organic real-world subject is re-planned as a
51
- photo billboard, an abstract form, or cut (3d.md §3 rungs 2/4 — coded
50
+ photo billboard, a brand-native abstract instrument, or cut (3d.md §1–2 — coded
52
51
  organic geometry never becomes the fallback)**; no browser tools → the
53
52
  verification protocol's manual fallback (SKILL.md) must be declared up front.
54
53
  Missing tools change WHERE assets come from, never whether media/3D rules
55
- apply — sourced media carries the same treatment obligations (media.md §0).
54
+ apply — sourced media carries the same treatment obligations (media.md §1–3).
56
55
 
57
56
  ## 2. The blueprint (section-by-section, media-first)
58
57
 
59
- Draft the page as a compact table BEFORE asking anything — the question round
58
+ Draft the page as a compact table BEFORE asking anything — the decision phase
60
59
  presents choices about a concrete plan, not abstractions. Per section:
61
60
 
62
- | section | layout family | media plan | motion treatment | interaction | intensity | fallback |
61
+ | section | layout family | media + preparation | motion class/treatment | interaction | intensity | fallback |
63
62
 
64
63
  - **media plan** — one of: `generate-image` (subject + exact aspect + palette/
65
64
  light-temperature prompt notes), `generate-video` (loop subject, 5-10s,
@@ -67,39 +66,52 @@ presents choices about a concrete plan, not abstractions. Per section:
67
66
  (exists in repo / user must supply — name it), `none`. Media enters through
68
67
  the motion system per `skills/media.md` — name the treatment (curtain reveal,
69
68
  mask-shaped, hover-woken, media-plane distortion…), never "add an image".
70
- At dial ≥ 7 the blueprint also names the page's ONE media set-piece
71
- (media.md §0 image tornado, disintegration on scroll, shatter/reassemble,
72
- living overlay…) and which section carries it; a dial-7+ plan whose media
73
- column is all quiet treatments is incomplete.
74
- When the set-piece is a media.md §3.5 dive (the award-tier default), its
69
+ At dial ≥ 7 the proven default is one meaningful media set-piece and the
70
+ blueprint names which section carries it. The outcome is a memorable moment
71
+ where media itself becomes the visitor-controlled spectacle, not a specific
72
+ catalog effect. A different solution uses a registered planning-time
73
+ substitution with observable success criteria and evidence IDs.
74
+ When a concept-led set-piece uses a depth dive, its
75
75
  `generate-image` cell must plan a DEPTH-CAPABLE composition (a corridor,
76
76
  room, landscape, machinery receding — something a camera can enter) and
77
77
  the companion assets in the same cell: the depth map and/or the separated
78
78
  foreground/background plates, generated in the same prompt world.
79
- The set-piece is chosen via
80
- media.md's exploration protocol: invent three brand-native candidates not
81
- listed in the catalogs, record them + the pick in the plan file — a media
82
- plan assembled only from listed effects with no rejected invention on
83
- record is minimum-effort compliance. **Custom 3D in a media cell must name
79
+ The set-piece is chosen via
80
+ media.md's exploration protocol: invent three brand-native candidates not
81
+ sourced from recipes, record them + the pick in `conceptExploration`, then
82
+ load recipe references only for feasibility/implementation/fallback and log
83
+ them in `recipeAccess`. A media plan assembled from listed effects before
84
+ original exploration is invalid. **Every media-plane / pixel-class cell
85
+ names WHICH image asset the effect consumes as its texture/source** — a
86
+ "shader plane" cell with no named image, or a plane carrying its own
87
+ separate texture (steel/noise/gradient) layered over the section's
88
+ photography, is an invalid cell (media.md §2's treatment-identity rule: the
89
+ treatment must transform the image's own pixels, aligned to its rect —
90
+ never a decorated rectangle floating over a static `<img>`).
91
+ **Custom 3D in a media cell must name
84
92
  its asset source in the blueprint** — a GLB path, a generated/sourced
85
93
  texture (the actual prompt or file), or the billboard cutout it will ride
86
94
  on. "Custom 3D bean/bottle/plant geometry" with no named source is an
87
- invalid cell: primitives can't produce an organic subject (3d.md §3), so
95
+ invalid cell: primitives can't produce an organic subject (3d.md §1), so
88
96
  re-plan it as rung 2 (photo billboard) or an abstract SUPPORTING form
89
- (3d.md §3 rung 3 — never the promoted signature object) at plan time —
97
+ (3d.md §2 — never a generic promoted signature object) at plan time —
90
98
  don't let the build stage discover this. The user picking "custom 3D" in
91
99
  the media question grants the *medium*, not an exemption from the ladder.
92
- Every 3D prop cell also names its BERTH (3d.md §1.5): which lane/stage of
100
+ Every 3D prop cell also names its BERTH (3d.md §3): which lane/stage of
93
101
  the section it occupies and what the layout does to make room — a prop
94
102
  planned "over the hero image" or with no berth is an invalid cell.
95
- At award-site ambition the blueprint must contain at least one 3D prop
96
- cell (3d.md §0's required prop GLB or cutout billboard, with its berth
97
- and asset source named); zero prop cells = incomplete plan.
98
- At dial 8 the media column additionally marks each hero/key image's
99
- treatment as quiet-class or PIXEL-class (media.md §0) and must already
100
- satisfy the coverage floor on paper: at least half pixel-class (min 3,
101
- set-piece included), each a different mechanism, quiet cells tied to the
102
- intensity curve's rests.
103
+ At the `award` tier the outcome gate is one unmistakable spatial, media,
104
+ typographic, or material signature that shapes the journey. If the concept
105
+ calls for a recognizable physical subject, use a real GLB or photoreal cutout
106
+ with a berth and source. Typography, layered photography, data, SVG/Canvas,
107
+ or a scene instrument may be the stronger direct choice; no substitution is
108
+ needed merely because 3D is absent. Generic orbs/blobs/toruses remain invalid.
109
+ At expressive/award, the media column records whether each hero/key image
110
+ stays flat or becomes motion-ready through cutouts, depth layers, masks,
111
+ fragments, maps, alternate states, a frame sequence, or a Canvas/WebGL
112
+ texture. Transform only where it strengthens the concept; a still may remain
113
+ flat as an intentional rest. The default in `media.keyAssetTreatment` is a
114
+ coherent asset-preparation decision, not a pixel-effect quota.
103
115
  - **Travel map (mandatory when any element persists across sections).** If
104
116
  the blueprint contains a fixed canvas object, a recurring signature, or any
105
117
  scroll-morphing prop that lives through more than one section, add a travel
@@ -108,50 +120,107 @@ presents choices about a concrete plan, not abstractions. Per section:
108
120
  it never sits over text or controls (DESIGN.md §15). No berth fits ⇒ the
109
121
  object is scripted HIDDEN for that section. A persistent object without a
110
122
  travel map is an unplanned collision that verify will find later — plan it
111
- now. The set-piece at dial 8 must also be pixel-transforming per
112
- media.md §0 (placement choreography like orbit/collapse doesn't qualify).
113
- - **Mechanism-diversity quota (dial ≥ 7 / expressive+).** Floors measure the
114
- weakest item; quotas measure the whole page. Across the blueprint's media +
115
- interaction columns count the DISTINCT mechanisms (curtain reveal, media
116
- plane, drag gallery, cursor torch, disintegration… by name) and the
117
- DISTINCT drivers (scroll, cursor/hover, drag, click, time/idle): the page
118
- needs **≥ 4 distinct mechanisms spanning 3 distinct drivers, and no
119
- mechanism used more than twice**. Every hero/key image gets BOTH an idle
120
- life and an input response one or the other is the floor, not the plan.
121
- "Curtain reveal ×5 + one set-piece" fails the quota: that is a page grazing
122
- its rules, not a designed page. The quota tallies go in the plan file and
123
- are re-counted at verify.
124
- - **motion treatment** — from motion.md/immersive.md/cinematic.md vocabulary,
125
- with the dial-appropriate ambition. **motion.md §9's inventory is a hard
126
- plan gate, not a target:** at expressive/award-site ambition the blueprint
127
- must enumerate every §9 item for its dial — which element carries it, what
128
- triggers it — or explicitly name the item as cut with a reason. A plan that
129
- neither covers nor justifies a §9 item is incomplete; rework it before
130
- presenting, don't ship the gap to the build.
123
+ now. When the set-piece claims transformation, its pixels, layers, form, or
124
+ role must visibly change; placement choreography alone does not qualify.
125
+ - **Diversity or development (dial ≥ 7 / expressive+).** Choose and record one
126
+ path in `creativeStrategy`. Diversity uses only the mechanisms and drivers the
127
+ concept needs, tied together by a shared language. Development evolves one
128
+ coherent signature through materially different roles with quieter support.
129
+ The same reveal repeated with different values is neither path. Do not add
130
+ unrelated mechanisms to satisfy a count.
131
+ - **motion treatment** from motion.md/immersive.md/cinematic.md vocabulary,
132
+ with dial-appropriate ambition. At `expressive`/`award`, complete every
133
+ `motionTreatment` field below and name the element/driver for each planned
134
+ moment. A generic or incomplete treatment is reworked before presentation.
131
135
  - **intensity (the pacing map)** — 1–10 per section: how loud this section is
132
136
  (motion + media + visual weight combined). The page must read as a CURVE, not
133
137
  a flat line: uniform intensity fails in both directions (all loud = exhausting,
134
- all quiet = the set-piece feels bolted on). Place deliberate rests (≤ 3)
135
- immediately before and after the set-piece so it lands; the hero and the
136
- set-piece section are the peaks, nothing else matches them. A blueprint whose
138
+ all quiet = the set-piece feels bolted on). Place deliberate rests around
139
+ hero moments where the content permits so they land; supporting sections
140
+ should not compete with them. A blueprint whose
137
141
  intensity column is all the same number is incomplete — rework the pacing
138
142
  before presenting.
139
- - **fallback** — for every ambitious cell (WebGL, sim, scrubbed sequence,
140
- generated video), the concrete boring version that ships if the fancy one
141
- fails runtime verification. A plan cell without a fallback is not ambitious,
142
- it's fragile.
143
+ - **fallback** — for every ambitious cell (WebGL, sim, scrubbed sequence,
144
+ generated video), the concrete boring version that ships if the fancy one
145
+ fails runtime verification. A plan cell without a fallback is not ambitious,
146
+ it's fragile.
147
+
148
+ ### Motion treatment and complexity budget
149
+
150
+ At expressive/award, write a coherent scene sequence before implementation. For
151
+ every major section record in `motionTreatment`:
152
+
153
+ - static composition and motion class (`none`, `decorative`, `structural`, or
154
+ `transformational`);
155
+ - starting and ending visual states;
156
+ - what changes, persists, pins, enters, transforms, combines, fragments, or exits;
157
+ - the handoff into the next composition;
158
+ - narrative/emotional purpose;
159
+ - rendering mechanism;
160
+ - mobile translation and reduced-motion state.
161
+
162
+ Decorative motion introduces or responds. Structural motion controls hierarchy,
163
+ pacing, pinning, and composition. Transformational motion changes form or turns
164
+ one composition into the next. Opacity, translate, scale, and light parallax are
165
+ not sufficient evidence of structural or transformational motion.
166
+
167
+ Record `motionComplexityBudget`: normally two or three hero moments (one is valid
168
+ for a short page), calm sections around them, shared motion language, target-
169
+ device limits, and progressive enhancement. Spend complexity where the story
170
+ changes state; do not distribute medium-complexity effects evenly.
171
+
172
+ Choose the simplest mechanism capable of producing the intended transformation
173
+ convincingly. Simplicity means implementation suitability, not visual blandness.
174
+ Choose deliberately among CSS, Motion, GSAP/ScrollTrigger, SVG masks/filters,
175
+ `clip-path`, DOM fragments, Canvas 2D, WebGL/shaders, image sequences, video,
176
+ Lottie/vector animation, and 3D. Neither basic transforms nor WebGL/3D/pixels are
177
+ an unexamined default.
178
+
179
+ Before approving the plan, record `antiDefaultReview` answers: are images mostly
180
+ fading/scaling/sliding; are sections independent reveals; where is the major
181
+ composition handoff; how does motion change visual state; could this system fit
182
+ an unrelated site; what is memorable; and how does movement express the concept?
183
+ If the result is generic at expressive/award, revise the scene plan now.
143
184
 
144
185
  Plus four page-level lines: register + design read (DESIGN.md §2), signature
145
- element, animation stack (ONE system: GSAP+Lenis or motion/react — motion.md §0),
186
+ element, animation stack (ONE system: GSAP+Lenis or motion/react — motion.md §2),
146
187
  and the mobile strategy per ambitious effect (DESIGN.md §13).
147
188
 
148
- ## 3. The questions (ONE question per call, asked in sequence)
149
-
150
- Ask with the structured question tool (AskUserQuestion), **one question at a
151
- time** never dump the whole pool in a single round; a wall of 4 simultaneous
152
- questions is exactly the failure this section prevents. Each answer can change
153
- what you ask next (e.g. a "cinematic" treatment pick makes the media question
154
- matter more; "restyle" depth kills the mockup question).
189
+ **Signature-element plan gate.** The signature line is checked HERE, not
190
+ discovered at build time: if the signature is a visual OBJECT, it must be a
191
+ subject a stranger names correctly (3d.md §1–2's subject test). An abstract
192
+ crude coded organic form is a hard-gate failure. Generic spheres/orbs/rings/
193
+ blobs/toruses with no brand-native function remain invalid signatures. The
194
+ award work chooses the medium that makes the signature most legible and
195
+ concept-specific. A real GLB or rung-2 transparent photoreal cutout is preferred
196
+ when the signature is a recognizable physical subject; spatial typography,
197
+ layered photography, data structure, or an interactive instrument can be the
198
+ direct plan when the concept supports it. **Coded custom 3D is
199
+ capability-gated at the probe (§1):** offer/plan it only when the probe
200
+ verified an actual quality path — a real GLB in reach, image-gen for
201
+ albedo/label textures, an HDRI/environment source. No verified texture path
202
+ ⇒ the `custom 3D` option is presented as "3D-look props (photoreal cutouts
203
+ sold with depth)" and every 3D cell is planned as a rung-2 billboard; coded
204
+ geometry without a texture path is never planned "to be figured out at
205
+ build".
206
+
207
+ **Previous-run divergence (reruns over the same project).** If
208
+ `.dreative/plan.md` (or verify.md) from an earlier run already exists in this
209
+ project and the user asked for a NEW take (rather than iterating the shipped
210
+ one), read the old plan first and diverge on at least: signature family,
211
+ set-piece family, hero layout family, and palette strategy. Reusing the old
212
+ run's choices because they're in context is the same reflex the entropy draw
213
+ exists to break — a rerun that a user would describe as "the same site again"
214
+ is a failed rerun. Record in the new plan file which axes diverged from the
215
+ previous run.
216
+
217
+ ## 3. The decision phase
218
+
219
+ Run one short decision phase containing several sequential single-question
220
+ calls. Use the environment's structured question tool when available; otherwise
221
+ ask in chat. Never dump the whole pool in one message: each answer can change
222
+ what comes next (for example, a cinematic treatment makes the media question
223
+ matter more, while restyle depth can remove the mockup question).
155
224
 
156
225
  **Skip what the prompt already answers.** Before asking anything, walk the pool
157
226
  below against the user's prompt + attachments: a question whose answer is
@@ -162,6 +231,33 @@ the ambiguity ("you said animated — full scroll choreography, or calm
162
231
  micro-interactions?"). Restate what you inferred from the prompt in the plan
163
232
  file so silently-skipped questions are still auditable.
164
233
 
234
+ **Answers come only from the user, through the tool.** Never infer, assume,
235
+ or self-supply an answer to a question you posed — an unanswered question
236
+ blocks; a fabricated answer is a corrupted plan. If the user's reply to ANY
237
+ question is itself a question, a request to re-see options, or free text that
238
+ doesn't answer what was asked ("wait, what were the vibe options?"), that
239
+ question is NOT answered: respond to what they asked first (re-present the
240
+ options, clarify), then re-ask the original question as its own call. A
241
+ question consumed by a side-exchange and never re-asked is a lost decision —
242
+ track which pool items actually have answers, not which were merely posed.
243
+ Free text volunteered mid-round (a new feature, a constraint) is captured in
244
+ the plan file AND acknowledged in the next message, but doesn't substitute
245
+ for pending questions.
246
+
247
+ **Skip-honesty (the under-asking bug).** "Skip what the prompt already
248
+ answers" has a strict test: a question may be skipped ONLY when the prompt
249
+ LITERALLY contains its answer — and the plan file must QUOTE the prompt words
250
+ that answer it next to the skip. "I can infer a reasonable choice" is not a
251
+ skip license; silence in the prompt means ASK. In particular, **treatments
252
+ (item 2), media/asset types (item 3), and references (item 5) are never
253
+ skipped on inference at expressive/award ambition** — these are the three
254
+ questions that most change the build, and a round that jumps from vibe →
255
+ ambition → mockups → remarks without them delivered a design the user never
256
+ chose. Questions that are genuinely N/A (depth on a from-scratch build, scope
257
+ on a single page) are the only inference-skips allowed. If the asked count
258
+ lands under 4 on a non-trivial build, re-check the pool — you almost
259
+ certainly over-skipped.
260
+
165
261
  Order most-decision-changing first, keep the total short (typically 3–5 asked,
166
262
  hard cap 7). Structured tools always offer an "Other" free-text option, so
167
263
  every question doubles as a remarks channel — and the last question asked
@@ -169,7 +265,7 @@ should explicitly invite extra direction.
169
265
 
170
266
  1. **Depth** (redesigns of existing code only) — the §11 transformation-depth
171
267
  ladder: restyle / re-layout / restructure / reimagine.
172
- 2. **Treatments** (multi-select — THE canonical skill-picker list). List every
268
+ 2. **Treatments** (multi-select — THE canonical skill-picker list). List every
173
269
  option **individually**, never pre-bundled into a combo choice (a
174
270
  "refined+motion+interaction+ux+mobile" single option is a bug — the user
175
271
  can't select a subset of a bundle). Mark the ones the request obviously
@@ -190,16 +286,11 @@ should explicitly invite extra direction.
190
286
  - **cinematic** — "dark, moody, movie-like atmosphere: glow, particles, fluid surfaces (think film title sequence)"
191
287
  - **refined** — "quiet luxury: lots of space, beautiful photography, very little movement — Apple/fashion-brand calm"
192
288
  - **media** — "AI-generated images/video made for this page and woven into the motion (hero film loop, images that come alive)"
193
- - **ux** — "everything actually works: menus, forms, cart, keyboard — pretty AND functional" (recommend by default)
194
- - **mobile** — first-class phone experience: bespoke mobile choreography and
195
- layout treatment beyond baseline responsiveness (thumb-ergonomic redesign,
196
- animations re-authored for touch, not just scaled down). **NOT recommended
197
- by default** baseline responsive/working-on-phone is already guaranteed
198
- for every build via `ux` + DESIGN.md §13's required mobile strategy line,
199
- so don't mark this "(Recommended)" just because a build is ambitious.
200
- Recommend it only when the user asks for it, or the brief signals mobile
201
- is a primary surface (e.g. explicitly mobile-first, or a mobile-heavy
202
- audience/product).
289
+ - **ux** — "everything actually works: menus, forms, cart, keyboard — pretty AND functional". This is always included; show it as locked/included rather than optional.
290
+ - **mobile** — first-class phone experience: thumb-ergonomic layout and
291
+ effects re-authored for touch, not merely scaled down. This is always
292
+ included at baseline; mark it as an emphasized treatment only when mobile
293
+ is the primary surface or the user explicitly asks for a mobile-first take.
203
294
  - **experimental** — user-facing phrasing: "go weird: images that tear/
204
295
  dissolve/reassemble as you scroll, the camera diving into scenes, one
205
296
  never-seen-before idea per section". Internally this is the
@@ -214,9 +305,18 @@ should explicitly invite extra direction.
214
305
  "never seen before", or award-tier + immersive/cinematic/3d stacked
215
306
  together — it's the difference between effects *placed on* the page and
216
307
  the page *behaving* like the reference sites when you interact with it.
217
- Plus "none — plain design doctrine only". Skip only when the user already
308
+ Plus "none — no optional treatments" (`ux` and `mobile` still apply). Skip only when the user already
218
309
  named the treatments or the request is trivially a restyle; read each
219
- chosen `skills/<name>.md` before designing.
310
+ chosen `skills/<name>.md` before designing.
311
+
312
+ **For multi-page work, follow selection with one page-assignment matrix.**
313
+ Rows are pages and columns are the user-selected optional treatments. Let the
314
+ user pin any treatment to specific pages. For unpinned selections, propose a
315
+ distribution based on page purpose and intensity, then ask for one approval
316
+ of the complete matrix. User pins are authoritative; routing cannot move
317
+ them or activate unselected optional skills. `ux` and baseline `mobile` apply
318
+ to every page. Selecting all means every skill is used somewhere in the
319
+ overall plan—not that every page receives every effect.
220
320
 
221
321
  **Propose extra, request-specific skills beyond this fixed list** when the
222
322
  brief hints at something the 10 named treatments don't cover well (sound
@@ -241,18 +341,33 @@ should explicitly invite extra direction.
241
341
  tokens/time, so "images only" or "placeholders" is a legitimate budget
242
342
  choice, not a downgrade. If a needed tool is missing, this is where the
243
343
  install offer goes ("I can add <X> MCP for video generation — ok?").
344
+ **Set the iteration expectation honestly:** when the user picks `custom
345
+ 3D`, `custom props`, or (later) the `award` tier, say plainly — in the
346
+ question's description or the plan recap — that complex 3D motion and prop
347
+ choreography rarely land perfectly in one pass: the first build ships a
348
+ working version (planned fallbacks where an effect fails verification),
349
+ and 1–2 follow-up prompts to tune specific moments are normal and
350
+ expected. This is a disclosure, not a discouragement; it prevents
351
+ "the plan promised more than the page shows" disappointment, and it never
352
+ licenses shipping less than the plan — the verify gates still apply in
353
+ full on pass one.
244
354
  4. **Ambition tier** — present each tier with a plain description, a
245
355
  best-fit use case, AND its honest tradeoff (a user choosing blind between
246
356
  "cool-sounding" labels is the failure this wording prevents):
247
- - **safe** — polished, clean, light motion. *Best for:* dashboards, apps,
248
- content-heavy sites, corporate audiences, tight deadlines. *Tradeoff:*
249
- looks professional, won't turn heads.
250
- - **expressive** — rich scroll motion, 3D accents, everything still
251
- instantly usable. *Best for:* most product, e-commerce, and marketing
252
- sites the show/usability sweet spot and the default recommendation.
253
- *Tradeoff:* heavier than safe, but visitors never fight the page.
254
- - **award-site** the page becomes an experience: immersive 3D, cinematic
255
- pacing, experimental transitions (dial 9-10). *Best for:* portfolios,
357
+ - **Solid (`solid`)** — polished, complete, responsive, and light on custom
358
+ effects. *Best for:* dashboards, apps,
359
+ content-heavy sites, corporate audiences, tight deadlines. *Tradeoff:*
360
+ looks professional, won't turn heads.
361
+ - **Premium (`premium`)** a strong design read, deliberate media, and one
362
+ signature detail with restrained motion. *Best for:* business, commerce,
363
+ and marketing work that should feel distinctive without becoming an
364
+ experience site. *Tradeoff:* more craft and media work than solid.
365
+ - **Expressive (`expressive`)** rich scroll motion, 3D accents, everything still
366
+ instantly usable. *Best for:* most product, e-commerce, and marketing
367
+ sites — the show/usability sweet spot and the default recommendation.
368
+ *Tradeoff:* heavier than premium, but visitors never fight the page.
369
+ - **Award (`award`)** — the page becomes an experience: immersive 3D, cinematic
370
+ pacing, experimental transitions (dial 9-10). *Best for:* portfolios,
256
371
  launches, brand showcases, agency work — anywhere wow IS the goal.
257
372
  *Tradeoff:* heaviest build, longest load, and deliberately unconventional —
258
373
  visitors explore rather than skim, so it can frustrate someone who just
@@ -261,11 +376,11 @@ should explicitly invite extra direction.
261
376
  pass — state that cost too.
262
377
  **Which option gets "(Recommended)" is computed, and the default bias is
263
378
  UP:** when the brief carries no strong signal either way, recommend
264
- **expressive** — unnamed ambition becomes beige (DESIGN.md §2), and this
265
- skill exists for drastic change. Recommend **safe** only on concrete
379
+ **expressive** — unnamed ambition becomes beige (DESIGN.md §2), and this
380
+ skill exists for drastic change. Recommend **solid** only on concrete
266
381
  counter-signals: explicit "minimal / corporate / clean / subtle" language,
267
382
  a product/app/dashboard surface rather than a marketing page, or a hard
268
- deadline constraint (item 7). Recommending safe to a signal-free brief is
383
+ deadline constraint (item 7). Recommending solid to a signal-free brief is
269
384
  a bug, same class as the item-8 mockup inversion.
270
385
  5. **References (ask unless the prompt already supplied them)** — "Do you have
271
386
  any reference — an image/screenshot, a website you love, or a video of a
@@ -300,17 +415,17 @@ should explicitly invite extra direction.
300
415
  assume "all" just because the brief said "redesign the site" — confirm it.
301
416
  Also capture what's in this pass vs later, and any hard constraints
302
417
  (existing brand tokens to keep, CMS/content that must survive, deadline
303
- implying the safe tier).
418
+ implying the solid tier).
304
419
  8. **Mockups first?** — offer to build 1:1 mockups BEFORE the full build:
305
420
  "Mockup the key pages first" / "Straight to build". **Which one is marked
306
421
  "(Recommended)" is NOT static — compute it from the depth + ambition
307
- answers already given:** reimagine or restructure depth, OR award-site
422
+ answers already given:** reimagine or restructure depth, OR `award`
308
423
  ambition, mean this is among the biggest changes the tool can make, so
309
424
  **"Mockup first" is the recommended option.** Recommend "Straight to
310
- build" only when depth is restyle/re-layout AND ambition is safe/
311
- expressive. Getting this backwards (recommending straight-to-build on a
312
- reimagine + award-site combo) is a bug, not a stylistic choice. When depth
313
- is restructure/reimagine OR ambition is award-site, also offer a third
425
+ build" only when depth is restyle/re-layout AND ambition is solid/premium/
426
+ expressive. Getting this backwards (recommending straight-to-build on a
427
+ reimagine + award combo) is a bug, not a stylistic choice. When depth
428
+ is restructure/reimagine OR ambition is `award`, also offer a third
314
429
  option: **"two divergent mockups"** — the two strongest concepts from the
315
430
  explore pass (DESIGN.md §2) each built as a mockup, user picks. State the
316
431
  honest cost (a second mockup is real tokens/time); it's an offer, never
@@ -337,7 +452,7 @@ defaults.
337
452
 
338
453
  ### Calibration references (what the top tiers actually look like)
339
454
 
340
- When the user picks award-site ambition or 3d/immersive/cinematic treatments,
455
+ When the user picks the `award` tier or 3d/immersive/cinematic treatments,
341
456
  these are the bar (fetch and study whichever is closest before designing):
342
457
 
343
458
  - https://www.experiencethebestyou.com/en-GB/ — coordinated scroll choreography
@@ -353,7 +468,7 @@ these are the bar (fetch and study whichever is closest before designing):
353
468
  `TextureLoader` — one model, N palettes. Scroll drives it with plain
354
469
  `ScrollTrigger.create`; backgrounds are pre-rendered per-flavor video
355
470
  loops, not live sims. Lesson: photoreal product 3D = real GLB + real label
356
- texture + HDRI environment — never coded geometry (3d.md §3) — and the
471
+ texture + HDRI environment — never crude organic coded geometry (3d.md §1) — and the
357
472
  cheap parts (backgrounds) are pre-rendered video.
358
473
  - https://www.cinetica.studio/ — the "composed chaos" register (stack
359
474
  verified): Webflow + the FULL GSAP plugin suite (ScrollTrigger, SplitText,
@@ -370,7 +485,7 @@ these are the bar (fetch and study whichever is closest before designing):
370
485
  darkness.
371
486
 
372
487
  These teardowns were verified July 2026 and will age — sites redesign and
373
- registers move on. At award-site ambition, when browser tools exist, spend ONE
488
+ registers move on. At the `award` tier, when browser tools exist, spend ONE
374
489
  fetch on a current source (Awwwards SOTD or godly.website) to confirm the
375
490
  register you're chasing is still the frontier, and note in plan.md what you
376
491
  saw. The stack LESSONS above outlive the sites themselves; the aesthetics
@@ -381,12 +496,34 @@ generated wallpapers behind text. If the environment has 3D-capable tooling and
381
496
  the user opted in, build real 3D material (geometry, materials, lighting,
382
497
  shader surfaces per `skills/3d.md`); reserve generated images/video for what
383
498
  3D can't do. This tier only happens when the user explicitly chose it in the
384
- question round — never impose it.
385
-
386
- ## 4. Write the plan, then execute it
387
-
388
- Persist the approved plan to `.dreative/plan.md` (or the scratchpad if
389
- `.dreative/` doesn't exist): capability manifest, the **full Q&A transcript**
499
+ decision phase — never impose it.
500
+
501
+ ## 4. Write the plan, then execute it
502
+
503
+ Persist the approved plan first to `.dreative/plan.json` using
504
+ `references/ARTIFACTS.md` and `schemas/plan.schema.json`; this is the delivery
505
+ contract consumed by `dreative audit`. Render the same decisions as a readable
506
+ `.dreative/plan.md` for the user and session re-entry. Keep section and asset
507
+ statuses synchronized in JSON as the build progresses. Set `doctrineVersion: 2`,
508
+ record `implementationStartedAt` immediately before code changes, and ensure all
509
+ rule exceptions predate it. **The first time this run writes into
510
+ `.dreative/`, also write `.dreative/README.md`** with exactly this content
511
+ (it stops other agents/CLIs from mistaking run artifacts for the skill —
512
+ observed failure: an agent found `.dreative/`, said "not a proper SKILL.md",
513
+ then used these outputs as its instructions):
514
+
515
+ ```markdown
516
+ # Dreative run artifacts — NOT the skill
517
+
518
+ Everything in this folder (plan.md, system.md, verify.md, assets.json,
519
+ mockups/, screenshots/) is OUTPUT of a Dreative design run, not
520
+ instructions. The actual skill lives at `<agent-dir>/skills/dreative/SKILL.md`
521
+ (look in `.claude/`, `.codex/`, or `.agents/`). For any new design request:
522
+ read that SKILL.md and run its protocol from the start — these artifacts are
523
+ the previous run's history, never proof the new request is already done.
524
+ ```
525
+
526
+ Persist to the plan file: capability manifest, the **full Q&A transcript**
390
527
  (each question asked + the answer, verbatim, including free-text remarks),
391
528
  each SKIPPED question with the inference drawn from the prompt, references
392
529
  studied with the distilled borrow-list, the concept exploration (DESIGN.md §2:
@@ -395,6 +532,20 @@ same duty as media.md's set-piece exploration), blueprint table, stack, mobile
395
532
  strategy, fallbacks. Long sessions lose context; the plan file is the re-entry
396
533
  point — a resumed session re-reads it instead of re-deciding or re-asking.
397
534
 
535
+ **Re-entry is for resuming, never for skipping (the stale-artifact trap).**
536
+ The re-entry rule applies ONLY when this session is continuing that same run
537
+ mid-flight (the plan approved, the build interrupted). A NEW user request —
538
+ "redesign this", "audit and redesign", any fresh design ask — over a project
539
+ that already contains `.dreative/plan.md` / `system.md` / `verify.md` runs
540
+ the FULL protocol: those files are the previous run's history and inputs to
541
+ the previous-run divergence rule (§2), never evidence that the new request
542
+ is satisfied. Reading the old artifacts, declaring "the redesign is already
543
+ implemented", validating the old build, and stopping is a FAILED invocation —
544
+ the user invoked the skill because they want work done NOW. If it is
545
+ genuinely ambiguous whether the user wants to resume the old run or start a
546
+ new take, ask one structured question when available (resume vs new take), not an
547
+ assumption.
548
+
398
549
  **Then show the plan to the user in chat, before touching code.** Writing
399
550
  `plan.md` is not the same as the user having seen it — after the last
400
551
  question (§3.9) is answered, post a readable recap in the same conversation:
@@ -436,20 +587,38 @@ tweak feedback into the plan file before building.
436
587
  **Execution order (always):**
437
588
 
438
589
  1. **Assets first.** Generate every planned image/video/sequence NOW, at the
439
- blueprint's aspect ratios, graded to the palette (media.md §1). Sections get
590
+ blueprint's aspect ratios, graded to the palette (media.md §4). Sections get
440
591
  designed around real assets, not around placeholders that "will be swapped".
441
- 2. **Foundation.** Install and WIRE the animation stack (motion.md §8), fonts,
592
+ 2. **Foundation.** Install and wire the animation stack (motion.md §2 and the
593
+ motion recipe reference), fonts,
442
594
  tokens, providers — before any section code.
443
595
  3. **Sections** in blueprint order, each honoring its row (skills tagged per
444
596
  section apply to that section).
445
597
  4. **Effects + choreography** across sections (page-level timelines, transitions,
446
598
  the signature element).
447
599
  5. **Verification** — the full runtime protocol (SKILL.md §V: runtime gates +
448
- self-critique, mobile first, evidence written to `.dreative/verify.md`).
600
+ self-critique, mobile first, evidence written to `.dreative/verify.json` and
601
+ summarized in `.dreative/verify.md`).
449
602
  Any effect that fails gets its planned fallback, and the final report says
450
603
  so: "shipped the §2 fallback for X because Y".
451
604
 
605
+ **Execution is mandatory, not advisory.** Once the plan is approved, it MUST be
606
+ carried out in full:
607
+
608
+ - Work through blueprint rows top to bottom; a row is only closed when its code
609
+ is written AND its verification gate passes (or its named fallback shipped).
610
+ - Never end the session, summarize, or declare done while unshipped rows
611
+ remain. If interrupted or the context is compacted, re-read
612
+ `.dreative/plan.json` (using `plan.md` for narrative context) and resume from
613
+ the first unshipped row — do NOT
614
+ re-plan, re-ask, or restart.
615
+ - Cutting a row requires an explicit user decision or a hard technical blocker
616
+ named in the report; "ran long" is not a reason.
617
+ - Before the final report, walk `plan.json` row by row, mark each one, and run
618
+ `dreative audit`.
619
+
452
620
  Report against the plan when done: each blueprint row → shipped / fallback /
453
- cut (with reason), plus the motion inventory (motion.md §9) and the preservation
621
+ cut (with reason), plus the motion inventory (motion.md §5) and the preservation
454
622
  ledger when §11 applies. A build that silently diverges from its approved plan
455
- is a bug even when it looks good.
623
+ is a bug even when it looks good — and a plan left half-executed is a failed
624
+ task, not a partial success.