dreative 0.2.0 → 0.3.0

package/dist/shared/design.js

@@ -6,6 +6,7 @@ const SKILL_SIGNATURES = {
     interaction: /\b(micro[- ]?interaction|hover (effect|state)s?|cursor|magnetic|tilt|spotlight|glow|ripple|tactile|interactive|draggable)\b/i,
     immersive: /\b(immersive|award[- ]?(site|winning)|awwwards|spatial( (transition|nav(igation)?))?|scene[- ]?based|world|page[- ]transitions?|camera (move|travel|path)|preloader|scroll (journey|story|as travel)|explorable|experience site|epic\.net)\b/i,
     cinematic: /\b(cinematic|experiential|unseen\.co|fluid (sim(ulation)?|distortion)|gpgpu|drag[- ]to[- ]explore|click ?(&|and) ?hold|film grain|graded|velocity[- ]reactive|sound design|ambient (audio|sound))\b/i,
+    refined: /\b(clean (and )?(modern|professional)|modern clean|business (site|website|use)|corporate|professional look|premium (minimal|clean)|dtc|d2c|e[- ]?commerce|ecommerce|shopify|maswitzerland|lovvelavva|not (too )?(flashy|animated)|calm|understated)\b/i,
 };
 function detectSkills(texts) {
     const hay = texts.filter(Boolean).join(" \n ");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dreative",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Layout-first visual editor skill for coding CLIs: extract your app's UI into editable wireframes, tweak with drag-drop + ref images, then the agent applies the diff back to your code.",
   "type": "module",
   "bin": {

package/skill/dreative/DESIGN.md

@@ -329,7 +329,9 @@ A redesign request has a depth, and styling is only the shallowest rung. When th
 user asks for meaningful change ("redesign", "make it modern", "make it look like
 <reference site>", "change it entirely") and the depth is ambiguous, present this
 ladder as explicit options (one short question, plain labels) and wait for the
-answer — do NOT silently default to the shallowest rung:
+answer — do NOT silently default to the shallowest rung. Bundle the specialist
+skill picker (SKILL.md) into the same question so the user answers depth and
+treatments in one pass:
 
 1. **Restyle** — tokens only: color, type, spacing, radius, shadows, motion
    polish. Markup and structure untouched. Right for "refresh the look".
@@ -385,3 +387,92 @@ the output is not done.
 14. Every block id from the layout appears as `data-dreative-id` (design-page only).
 15. Dark mode (when in scope): semantic-token swap, surface-lightness depth,
     desaturated accents, tested both modes.
+
+## 13. Mobile & touch adaptation (how ambitious effects degrade)
+
+Ambitious designs die on phones first. Every effect gets an explicit mobile
+strategy DECIDED AT DESIGN TIME, not patched after. The rule of thumb: touch
+devices get a *different good design*, never a broken half-version of the
+desktop one.
+
+**Pointer effects** (cursor followers, magnetic pull, spotlight, tilt, hover
+reveals): gate ALL of them behind `@media (hover: hover) and (pointer: fine)`.
+On touch, whatever hover revealed must be visible by default or reachable by
+tap — never lost. Custom cursors simply don't exist on touch; don't ship their
+DOM/listeners there.
+
+**Pinned/scrubbed sections**: pinning is fragile on mobile (URL-bar resize
+fires viewport changes mid-pin; iOS momentum scroll skips scrub frames).
+Strategies in preference order: (1) keep the pin but shorten it (≤ 1.5
+viewports) and drive it with `position: sticky`, never JS pinning; (2) unpin —
+the same content as stacked sections with simple in-view reveals;
+(3) `ScrollTrigger.matchMedia()` / a `matchMedia` branch that swaps the whole
+choreography. Never let a desktop pin length ride on a phone.
+
+**Parallax & depth layers**: halve the differential on small screens (8-15% →
+4-7%) or drop to zero; small viewports make parallax read as jitter. Layered
+depth scenes collapse to 2 layers max.
+
+**Drag-to-explore / spatial navigation**: on touch, drag conflicts with native
+scroll. Either give the pannable surface a dedicated full-screen mode entered
+by tap (with a visible close), or replace it with a swipeable carousel /
+plain scrolling index. The conventional index route (immersive.md's escape
+hatch) becomes the PRIMARY route on mobile, not the fallback.
+
+**WebGL/canvas**: assume the phone GPU is 5-10× weaker and thermally throttled.
+Tier at boot (`devicePixelRatio` capped at 2, sim resolution halved,
+post-processing off) or swap the sim for a pre-rendered video loop / poster.
+`deviceMemory`/first-dropped-frames checks pick the tier; a visible "reduce
+effects" toggle when the brief allows.
+
+**Layout & ergonomics floor** (extends checklist §12.12): tap targets ≥ 44px
+with ≥ 8px gaps; primary actions in thumb reach (bottom half) on app-register
+mobile; `100dvh` not `100vh`; no horizontal body scroll at 320px; type scale
+clamps DOWN gracefully (hero ≥ 2rem, body stays ≥ 16px — iOS zooms inputs
+under 16px); sticky navs shrink rather than stack; test the three widths 320 /
+768 / 1280 mentally before responding.
+
+**Motion budget on mobile**: entrance choreography total ≤ 600ms (vs 900ms
+desktop), at most 1 scroll-driven sequence per page, marquees pause when
+off-screen. Battery is a design constraint: continuous rAF loops must idle
+when nothing animates.
+
+## 14. Typography sourcing (kill the Inter-everywhere default)
+
+The reflex-reject list (§3) says what NOT to reach for; this is where to reach
+instead. All fonts below are free (Google Fonts or Fontshare/ITF). The
+commercial fonts real award sites use — verified: unseen.co sets **Saol
+Display Light/Italic + Neue Montreal**; unseen's Blossom lab sets **SangBleu
+Serif + PP Neue Montreal**; capsul-in-pro sets **Messina Sans** — are the
+targets; the pairings below are their honest free stand-ins, not lookalikes of
+each other.
+
+Per aesthetic register (display / body):
+
+- **Cinematic & experimental** (unseen-like): light editorial serif with a
+  true italic for display — `Boska`, `Sentient`, or `Gelasio Light Italic` —
+  over a neutral grotesk body — `Switzer`, `Hanken Grotesk`. Mixing italic
+  serif words INTO a grotesk headline is the genre move (unseen does exactly
+  this). Mono microtype for HUD labels: `Fragment Mono` or `Martian Mono`.
+- **Minimal / premium product**: one grotesk family carrying everything —
+  `General Sans`, `Switzer`, or `Schibsted Grotesk` in 3-4 weights. The
+  Neue Montreal / Messina Sans stand-in tier. Tight display tracking
+  (−0.02 to −0.04em), no second family.
+- **Editorial / luxury**: `Zodiak` or `Besley` display over `Hanken Grotesk`
+  or `Switzer` body; small-caps eyebrows tracked +0.08em. (Reach here only
+  when §3's serif discipline is satisfied.)
+- **Bold / brutalist / campaign**: `Clash Display` or `Cabinet Grotesk` (black
+  weights) display over `Switzer`/`General Sans` body; `Bricolage Grotesque`
+  when some warmth is wanted.
+- **Playful / consumer** (lovvelavva-like DTC): `Cabinet Grotesk` or `Gambetta`
+  display, rounded moments via weight and spacing — NOT a rounded font —
+  over `Hanken Grotesk` body.
+- **Corporate trust / clean business**: `Switzer` or system stack; Inter is
+  legitimate here (§3). Differentiate through scale contrast and spacing,
+  not font novelty.
+
+Rules: still run §3's selection procedure — this list feeds step 3, it does
+not replace the brand-voice reasoning. Self-host via Fontshare/google-webfonts
+downloads (`font-display: swap`, preload the display weight only). Never ship
+more than 2 families / ~5 weight files. If the brief names a commercial font
+the project already licenses, use the real thing.

package/skill/dreative/SKILL.md

@@ -7,14 +7,25 @@ description: Frontend design skill + optional visual round-trip editor. Use for
 
 You (the coding agent) are the intelligence. Dreative has **two modes**:
 
-- **Mode A — Direct design (default).** The user asks you to design, redesign, restyle, animate, or build UI. Read `DESIGN.md` (and any specialist `skills/<name>.md` the work calls for — motion, 3d, interaction), then design/edit the real code directly. No server, no extraction, no wireframes. When you finish, add one closing note: *"Tip: run `dreative start` / say 'open dreative' if you want to tweak this visually — I'll extract the pages into an editable canvas."* That's the only place the editor should come up; never force the round-trip on a plain design request. **Depth first:** when the request implies more than a fresh coat of paint ("redesign", "change it entirely", "make it like <reference site>"), present DESIGN.md §11's transformation-depth ladder (restyle → re-layout → restructure → reimagine) as explicit options and let the user pick BEFORE designing; a confirmed restructure/reimagine means rebuilding markup, component trees, and routing for real — never just editing stylesheets on the old skeleton.
+- **Mode A — Direct design (default).** The user asks you to design, redesign, restyle, animate, or build UI. Read `DESIGN.md` (and any specialist `skills/<name>.md` the work calls for — motion, 3d, interaction), then design/edit the real code directly. No server, no extraction, no wireframes. When you finish, add one closing note: *"Tip: run `dreative start` / say 'open dreative' if you want to tweak this visually — I'll extract the pages into an editable canvas."* That's the only place the editor should come up; never force the round-trip on a plain design request. **Depth first:** when the request implies more than a fresh coat of paint ("redesign", "change it entirely", "make it like <reference site>"), present DESIGN.md §11's transformation-depth ladder (restyle → re-layout → restructure → reimagine) as explicit options and let the user pick BEFORE designing; a confirmed restructure/reimagine means rebuilding markup, component trees, and routing for real — never just editing stylesheets on the old skeleton. **Skill picker:** in the same pre-design question (use the agent's structured question tool, e.g. AskUserQuestion, multi-select), offer the specialist skills with a one-line plain-language description each so the user chooses the treatments they want — recommend the ones the request obviously implies and mark them "(Recommended)":
+  - **motion** — scroll animations, staggered entrances, parallax, kinetic type
+  - **interaction** — micro-interactions: hover states, magnetic buttons, cursor effects, tactile feedback
+  - **3d** — WebGL / three.js scenes, shader backgrounds, 3D product showcases
+  - **immersive** — award-site feel: the page becomes a spatial world, scroll-as-journey, page transitions
+  - **cinematic** — dark, shader-graded experiential look: fluid/particle surfaces, drag-to-explore, sound
+  - **refined** — premium clean business look: whitespace, photography, calm minimal motion (the professional pole)
+  Plus a "none — plain design doctrine only" option. Skip the question only when the user already named the treatments or the request is trivially a restyle; read each chosen `skills/<name>.md` before designing.
 - **Mode B — Visual round-trip (only when asked).** The user explicitly wants the visual editor ("open dreative", "let me edit visually"). Flow: **extract → baseline → serve requests → finish → apply**. Be token-frugal at every step: read only the files you need, never re-read the whole app, and keep JSON compact.
 
 Everything below §0 describes Mode B; the design doctrine paragraphs apply to both modes.
 
 **Design quality is a hard requirement.** `DESIGN.md` (same folder as this file) is the design doctrine. Read it ONCE before servicing the first `propose-skeletons`, `propose-variants`, `design-page`, or `edit-element` request, keep it in mind for all later ones, and run its pre-flight checklist (§12) before every respond. Requests may carry a `brief` object (aesthetic preset + vibe + dials set by the user in the UI); when present it is the user's explicit direction and overrides doctrine defaults. Before writing any `design-page` code, state (to yourself, one line) the register, the design read, and the signature element — if you cannot name all three, you are about to produce the generic default; stop and commit first.
 
-**Specialist skills.** The `skills/` folder next to this file holds expert playbooks for advanced work: `motion.md` (animation & scroll choreography), `3d.md` (WebGL/three.js/shaders), `interaction.md` (micro-interactions & effect craft), `immersive.md` (award-site worlds, spatial page transitions, scroll-as-journey), `cinematic.md` (dark shader-graded experiential interfaces: fluid/particle surfaces, drag-to-explore, click & hold, sound design — opt-in aesthetic). All are universal: they apply directly to any codebase in Mode A; the editor is never required. When a request's `plan.skills` lists names, read each listed `skills/<name>.md` ONCE before writing code (then keep it in mind, like DESIGN.md); when `plan.sections[].skills` tags a section, that section gets that treatment (e.g. "this hero has 3d"). If the brief/prompt clearly calls for one of these but the plan missed it, read it anyway. If a listed file isn't installed, proceed on DESIGN.md alone and note it to the user (`dreative install-skill` installs all).
+**Specialist skills.** The `skills/` folder next to this file holds expert playbooks for advanced work: `motion.md` (animation & scroll choreography), `3d.md` (WebGL/three.js/shaders), `interaction.md` (micro-interactions & effect craft), `immersive.md` (award-site worlds, spatial page transitions, scroll-as-journey), `cinematic.md` (dark shader-graded experiential interfaces: fluid/particle surfaces, drag-to-explore, click & hold, sound design — opt-in aesthetic), `refined.md` (premium clean business/DTC/e-commerce: restraint, photography, whitespace — the calm pole). All are universal: they apply directly to any codebase in Mode A; the editor is never required. When a request's `plan.skills` lists names, read each listed `skills/<name>.md` ONCE before writing code (then keep it in mind, like DESIGN.md); when `plan.sections[].skills` tags a section, that section gets that treatment (e.g. "this hero has 3d"). If the brief/prompt clearly calls for one of these but the plan missed it, read it anyway. If a listed file isn't installed, proceed on DESIGN.md alone and note it to the user (`dreative install-skill` installs all).
+
+**References the user gives you.** If the user attaches screenshots/images, read them with your image tools and treat them as the visual target (extract palette, type feel, layout family, motion cues from any described behavior). If the user names reference URLs, fetch them (browser tools if available, else web fetch of the HTML — look at real script/font/class evidence, not just the text) and distill what specifically to borrow before designing; never guess at a named reference from memory alone when you can look.
+
+**Self-critique pass (Mode A, required before declaring done).** Doctrine at write-time is weaker than judgment at review-time. After implementing a design: run the app and screenshot the result (browser tools / the project's dev server) at desktop AND ~390px mobile width, then grade the screenshots against this rubric — (1) would a stranger name the brand's register and audience from one glance? (2) does it pass DESIGN.md §2's slop tests *as rendered* (not as intended)? (3) is the signature element actually visible and working? (4) any overflow, contrast failure, unloaded font/image, or motion jank? (5) does mobile hold up per DESIGN.md §13? Fix what fails and re-check once. If you cannot screenshot (no browser available), say so explicitly and walk the rendered DOM/CSS mentally against the same rubric — never silently skip the pass.
 
 ## 0. Setup
 

package/skill/dreative/skills/cinematic.md

@@ -150,6 +150,15 @@ All of 3d.md §7 and immersive.md §6, plus:
   Branding 5…); butterfly/petal particles drift through; HUD = wordmark
   top-left, Index/Projects/Contact top-right, globe "world" button bottom-center,
   © year bottom-right. Heavy uniform film grain glues all of it together.
+- **Single-flower lab page (verified on unseen.co/labs/blossom)**: the minimal
+  form of the genre — one WebGL subject (a blooming particle flower) on one
+  canvas, Lenis smooth scroll, headlines split into `overflow-hidden` line
+  masks (`splittext--line`) sliding up on arrival, and a two-family type system
+  (light serif with true italics — SangBleu-style — mixed into a neutral
+  grotesk). No drag, no sound, no HUD maximalism: one subject + line-mask type
+  + smooth scroll already reads as the genre. Start here; add §2 gestures only
+  if the brief earns them. (unseen.co's own home additionally runs a
+  `webgl-rain` particle layer over the scene — weather as grade texture.)
 - **Particle identity page**: brand mark as 50k particles that disperse on
   pointer force and reform; sections change the formation target; scroll
   velocity agitates; reduced-motion = the formed mark as a still.

package/skill/dreative/skills/immersive.md

@@ -30,7 +30,10 @@ intentional. Decide up front:
   No metaphor = you'll produce disconnected effects. The metaphor decides what
   transitions, camera moves, and layout make sense — everything below serves it.
 - Immersive sites still need an **escape hatch**: visible menu with plain links,
-  working back button, deep-linkable routes. Lost visitors close tabs.
+  working back button, deep-linkable routes. Lost visitors close tabs. On touch
+  devices the escape hatch becomes the PRIMARY route (DESIGN.md §13): drag/
+  spatial navigation conflicts with native scroll, so mobile gets the index-list
+  world view or a swipe carousel, with the full world behind an explicit tap-in.
 
 ## 1. Architecture: one persistent stage
 

package/skill/dreative/skills/interaction.md

@@ -5,6 +5,8 @@ for hover effects, cursor work, tilt, glow, "make it feel alive/tactile/premium"
 It EXTENDS DESIGN.md §6/§9/§10 — every ban there still stands (no hover-scale on
 `<img>`, custom cursors only on explicit request, one marquee max). This skill is
 about the last 5% of feel: small, physical, consistent responses to input.
+DESIGN.md §13 governs the touch story: everything pointer-driven here is
+fine-pointer-only, and whatever hover reveals must be reachable by tap.
 If an effect needs different markup (wrappers, layers, split spans), follow
 DESIGN.md §11's transformation-depth ladder — offer the restructure and, once
 confirmed, change the structure rather than approximating the effect in CSS.

package/skill/dreative/skills/motion.md

@@ -5,6 +5,8 @@ animation, parallax, scroll storytelling, kinetic type, or "cinematic" feel.
 It EXTENDS DESIGN.md §6 (which still applies: 100/300/500 durations, ease-out
 exponential curves, reduced-motion fallbacks, no scroll listeners, no bounce).
 This file is about doing ambitious motion WELL, not about adding more of it.
+Every effect here needs a mobile strategy per DESIGN.md §13 (shorter pins,
+halved parallax, 600ms mobile entrance budget) — decide it at design time.
 If the requested motion needs structure the current markup can't express (pinned
 sections, split text, persistent stages), use DESIGN.md §11's transformation-depth
 ladder: offer restructure as an option and, once confirmed, rebuild the markup —
@@ -127,6 +129,14 @@ tell. Instead:
   ~60-90px/s), masked edges with `mask-image: linear-gradient`.
 - **Scrub showcase**: sticky canvas/image sequence, `useScroll` on the wrapper,
   map progress to frame index / rotation; preload frames; ≤ 2.5 viewports tall.
+- **Canvas product story** (capsul-in-pro.com's form): a single-product launch
+  page as one scroll-scrubbed narrative — the product renders on a full-page
+  canvas (image-sequence or WebGL) and scroll drives its assembly/rotation
+  while short copy beats fade in at fixed progress stops; the site ships as
+  one bundled app with explicit portrait/landscape variants (it gates on
+  orientation rather than half-working in both). Copy the shape: one subject,
+  one scrubbed timeline, copy anchored to progress ranges, per-orientation
+  choreography decided up front.
 - **Text on a path** (verified on epic.net): a manifesto paragraph flows along a
   curved SVG path (`<textPath>` or per-word transforms sampled from a curve) and
   relaxes toward straight lines as scroll progress advances — the curve

package/skill/dreative/skills/refined.md

@@ -0,0 +1,99 @@
+# Dreative Specialist Skill — Refined Clean Business
+
+Load this file when `plan.skills` includes `refined`, or the brief/prompt asks
+for a "clean modern business site", premium-but-calm marketing, DTC/e-commerce
+polish, "professional, not flashy", or names references like ch.maswitzerland.com
+or lovvelavva.com. This is the OPPOSITE pole from immersive/cinematic: quality
+expressed through restraint — spacing, photography, and type doing all the work,
+with motion barely above zero. Most real client work lands here; treat it as a
+craft discipline, not the absence of one.
+
+It EXTENDS DESIGN.md (everything applies; this file tightens the dials). It does
+NOT stack with `immersive`/`cinematic` — those are different registers. It pairs
+well with a light dose of `interaction` (press states, underline draws) and the
+first tier of `motion` (one hero sequence, 2-3 in-view reveals).
+
+## 0. The register: expensive silence
+
+What separates premium-clean from generic-clean is not any element — it's the
+ratios:
+
+- **Whitespace is the brand.** Section padding 96-160px desktop / 56-80px
+  mobile; content max-width 1200-1320px with WIDE outer gutters; one idea per
+  viewport. If a section feels empty, that's the look working — resist filling.
+- **Photography carries the emotion.** Real product/lifestyle imagery, art-
+  directed to one consistent grade (one light temperature, one background
+  family). Full-bleed image sections alternate with contained text sections —
+  the rhythm image / text / image IS the page structure. Never decorate around
+  weak imagery; demand or generate better imagery instead.
+- **Type does hierarchy, color stays out of the way.** Near-monochrome palette:
+  warm or cool neutral family + ONE accent used almost exclusively on the
+  primary CTA and links. Backgrounds shift between 2-3 tints of the neutral
+  (e.g. white / #f6f5f2 / #111) to separate sections without borders.
+- **Motion whispers.** Motion dial effectively ≤ 4: fade-rise entrances
+  (300-400ms, once), a sticky nav that gains a hairline+blur, underline draws,
+  press states. No parallax beyond 4%, no pinning, no canvas. A single
+  restrained signature (a slow ken-burns on the hero image, or a marquee of
+  press logos) is the ceiling.
+
+## 1. Page anatomy (marketing/DTC form)
+
+The proven skeleton — vary the composition per DESIGN.md §5, not the order
+logic:
+
+1. **Hero**: one full-width image or split layout; headline ≤ 8 words stating
+   the value in plain language; one CTA. No feature bullets in the hero.
+2. **Credibility strip**: press/client logos, real marks, grayscale or
+   single-tint (lovvelavva runs Forbes/Women's Health/Real Simple here —
+   this section converts and belongs high on DTC pages).
+3. **Value sections** (2-4): alternating image/text, each making ONE claim
+   with 1-2 sentences of support. Icons only if custom-drawn; three-generic-
+   icon-cards is the tell this register must avoid most.
+4. **Product/collection grid**: large images, generous gaps (24-32px), minimal
+   card chrome — image, name, price/one-liner; hover = image swap or subtle
+   zoom-crop INSIDE a fixed frame (no card growth).
+5. **Social proof**: 1-3 real testimonials with names/photos, editorial layout
+   (big quote type), never a 3-card testimonial row.
+6. **Closing CTA**: calm full-width section, one sentence, one button.
+7. **Footer**: structured, generous, quiet — the footer's polish is a trust
+   signal in this register; give it real columns, legal, newsletter.
+
+E-commerce specifics: sticky add-to-cart on product pages (mobile bottom bar),
+price always visible, shipping/returns reassurance near the CTA, cart as a
+slide-over drawer not a page.
+
+## 2. The discovery-grid variant (cosmos.so-like)
+
+For content/discovery products (galleries, moodboards, catalogs): near-zero
+chrome around a masonry/justified image grid; dark or paper-white surface;
+images at native aspect ratios (never uniform crops); hover = slight lift +
+metadata fade-in on top of the image; infinite scroll with a sentinel loader;
+the search/filter bar is the only persistent UI. The product IS the grid —
+navigation, branding, and controls stay almost invisible until needed.
+
+## 3. What "modern" means here (2024+, not 2016 flat)
+
+- Hairline borders (1px, 8-12% alpha) instead of shadows for structure; the
+  2-3 stacked tinted shadows (interaction.md §3) reserved for genuinely
+  floating elements (dropdowns, drawers).
+- Larger type than feels safe: body 17-18px on marketing pages, display
+  clamped 2.5-4.5rem, tight leading. Small timid type is the #1 dated tell.
+- Radius system: one value family — either near-square (2-4px, editorial/
+  luxury) or soft (12-16px, DTC/consumer) — never mixed.
+- Buttons: solid accent primary + quiet text-link secondary. Pill shape only
+  in the consumer/DTC variant. No outlined-button armies.
+- Real `<img>`/`<picture>` with proper aspect-ratio boxes; no CSS-drawn
+  product mockups; `object-fit: cover` with art-directed focal points.
+
+## 4. Guardrails
+
+- If you're adding an effect to make a section interesting, the section's
+  content or imagery is the problem — fix that instead.
+- No gradient meshes, no glassmorphism cards, no floating blob backgrounds,
+  no emoji in UI copy: all instantly cheapen this register.
+- Accessibility floor is easy here — don't squander it: AA contrast on the
+  tinted neutrals (test the #767676-gray-on-white trap), visible focus,
+  semantic landmarks.
+- Performance IS the aesthetic: LCP image preloaded, fonts ≤ 2 files,
+  zero animation libraries unless motion is actually used — a clean site
+  that loads instantly reads as more premium than any effect.