@topy-ai/maggie 0.8.4 → 0.8.6

package/README-zh-TW.md

@@ -143,7 +143,7 @@ structure drift 或重複 treatment product 時 fail closed。
 deployment、memory、feedback 和 MaggieDash。內容先 draft/review，外部寫入、
 publish 與 production deployment 需要明確確認。
 
-目前 npm 版本為 `0.8.4`,將技能庫擴展成完整的「一人用 AI 跑一家公司」C-suite,新增八條職能線:maggie-sales(CRM 中立的銷售管線)、maggie-finance(只解釋的 CFO 指標,含確定性 maggie_finance.py 計算器)、maggie-support(面向客戶的客戶成功)、maggie-product(路線圖 + 預註冊實驗)、maggie-fundraising(pitch deck、data room、投資人更新)、maggie-legal(ToS/隱私/DPA/SOC2 readiness)、maggie-monetization(定價/paywall/dunning,金錢操作需人工批准)、maggie-orchestrator(CEO 編排層:將目標拆成帶審批門的 mission 分派到各職能線,含 maggie_orchestrator.py 規劃器)。先前 0.8.3 將 cmo.so/www 開發經驗沉澱進技能庫:新增兩個技能 maggie-skill-authoring(依 catalog 與 MCP 工具白名單撰寫/校驗社區營銷 playbook 技能)與 maggie-feedback-triage(反饋的團隊接收端:決策/定級/分派、PRD + issue 流程、24/7 隊列守護);新增多個 reference(OAuth PKCE 登入、Expo 約定與 Router 骨架、MCP evals 測試框架、conversation cards、WordPress→Firebase 認證遷移手冊);並增補 maggie-assistant-tools(tool≤user 每輪工具過濾、agent loop 安全不變量、preview-only 橋接代理、MCP resources/prompts、注解加固、CLI 與 ChatGPT 插件打包)、maggie-auth-reference(自清理登入測試套件、自簽單次令牌)、maggie-mobile-app(OTA 開機拉取、live==built 部署守衛)、maggie-deployment(pm2 單包發布、live-hash 校驗)與 maggie-ops(template-as-code 郵件同步)。先前 0.8.2 新增 maggie-spirit(為 AI 品牌生成平面像素 spirit/sprite 系統)與 goal-led AI agent 設計參考;0.8.0 為安全優化 roadmap(scan、image-patch、標頭評分、SSVC、GDPR 日誌規則、新 MCP 工具)。先前 0.8.0 為安全優化 roadmap(scan、image-patch、標頭評分、SSVC、GDPR 日誌規則、新 MCP 工具),含 fix-plan 修補風險分級 T1–T4(判斷補丁是否安全套用)與 host-impact 補丁影響面量測(哪些服務需重啟、是否需重開機)、public-check、Maggie Security、batch 31 排程 agent routines、報告收件匣與無人值守 agent 限制、PHP runtime 盤點與主機鎖、pull 網站改寫、query 點子與社群佇列檢查，batch 30 MaggieDash 先裝核心、release privacy gate、feedback 備援、社群連結與圖片檢查、大量頁面產生與 app 檢查，batch 29 預約規則、部署、app QA、助理與社群功能，以及 batch 28 產品 app、assistant tools、mobile、product release、skills catalog 與 bridge host 功能、batch 26、27 feedback 修正與 idempotent `maggie update`與 Booking email-template 合約/CLI validator 同步。本版完成 2026-09-24 booking feedback batch：Calendar grid/free-slot entry 與 host modal focus-restoration evidence。本版新增 Starter marketplace provisioning plan；本版完成 feedback batches 22、23：加入 declarative browser interaction evidence、design markup/style/content-key gate、compiler source anchoring、entity double-escape protection、`update --help` read-only、noindex hypothetical indexability、可過期 baseline acknowledgement、DOM-only link extraction regression，以及 MaggieDash 0.2.10 的 content override、短期 browser session、CDN-safe public-session cache contracts。authentication 和 isolated dev server 仍由 host 負責。`maggie-booking` workflow、傳統 email/password、Stripe、Resend、public booking flow 及既有安全邊界維持不變；provider-bound video generation 與 transactional delivery 仍記錄在 issue #39，前一批延後功能仍在 issue #38，不會直接成為 active memory。0.7.33 記錄並審查一筆更正回饋；確認 0.7.32 已正確處理 batch index，沒有修改已驗證的 shared behavior。0.7.32 加入 feedback 一基索引支援、MaggieDash panel 的 source/freshness/error evidence、Consent Mode 與實際 write/no-op reconciliation、SEO baseline recapture、sitemap origin rebasing、content-diff scope、migration ledger reconciliation、deployment credential preflight、release provenance/runtime preflight、icon release gate、opt-in blog auto-publish gate，以及 least-privilege VPS deployer。也修復 top-level `maggie feedback` dispatcher parity。0.7.31 加入 update 差異摘要、atomic installer copy、subset install manifest merge，以及 inventory drift 時 doctor non-zero。0.7.30 補上 feedback tracking issue closeout gate 與 batch 14/15 audit ledger。0.7.29 修正 npm package landing page 使用英文 README；0.7.28 加入 versioned Gemini model policy、明確 fallback 與 provenance、bundled-first CLI
+目前 npm 版本為 `0.8.6`,補齊兩個設計技能:加入完整的生產 reference(所有可複製的程式碼片段與預設表格),並把設計來源明確為 Figma 非必需(實時 URL、既有程式碼、Figma、或純截圖)。先前 0.8.5 採納兩個設計技能(改編自 MIT 的 `elayadesign/ai-design-skills`):maggie-landing-page(轉化策略 + 視覺系統紀律,具體數值為可被專案 DESIGN.md 覆蓋的預設值;由 maggie-design 生產與驗證)與 maggie-design-motion(靜態設計→像素級動畫 HTML 複刻→匯出 MP4 + GIF)。先前 0.8.4 將技能庫擴展成完整的「一人用 AI 跑一家公司」C-suite,新增八條職能線:maggie-sales(CRM 中立的銷售管線)、maggie-finance(只解釋的 CFO 指標,含確定性 maggie_finance.py 計算器)、maggie-support(面向客戶的客戶成功)、maggie-product(路線圖 + 預註冊實驗)、maggie-fundraising(pitch deck、data room、投資人更新)、maggie-legal(ToS/隱私/DPA/SOC2 readiness)、maggie-monetization(定價/paywall/dunning,金錢操作需人工批准)、maggie-orchestrator(CEO 編排層:將目標拆成帶審批門的 mission 分派到各職能線,含 maggie_orchestrator.py 規劃器)。先前 0.8.3 將 cmo.so/www 開發經驗沉澱進技能庫:新增兩個技能 maggie-skill-authoring(依 catalog 與 MCP 工具白名單撰寫/校驗社區營銷 playbook 技能)與 maggie-feedback-triage(反饋的團隊接收端:決策/定級/分派、PRD + issue 流程、24/7 隊列守護);新增多個 reference(OAuth PKCE 登入、Expo 約定與 Router 骨架、MCP evals 測試框架、conversation cards、WordPress→Firebase 認證遷移手冊);並增補 maggie-assistant-tools(tool≤user 每輪工具過濾、agent loop 安全不變量、preview-only 橋接代理、MCP resources/prompts、注解加固、CLI 與 ChatGPT 插件打包)、maggie-auth-reference(自清理登入測試套件、自簽單次令牌)、maggie-mobile-app(OTA 開機拉取、live==built 部署守衛)、maggie-deployment(pm2 單包發布、live-hash 校驗)與 maggie-ops(template-as-code 郵件同步)。先前 0.8.2 新增 maggie-spirit(為 AI 品牌生成平面像素 spirit/sprite 系統)與 goal-led AI agent 設計參考;0.8.0 為安全優化 roadmap(scan、image-patch、標頭評分、SSVC、GDPR 日誌規則、新 MCP 工具)。先前 0.8.0 為安全優化 roadmap(scan、image-patch、標頭評分、SSVC、GDPR 日誌規則、新 MCP 工具),含 fix-plan 修補風險分級 T1–T4(判斷補丁是否安全套用)與 host-impact 補丁影響面量測(哪些服務需重啟、是否需重開機)、public-check、Maggie Security、batch 31 排程 agent routines、報告收件匣與無人值守 agent 限制、PHP runtime 盤點與主機鎖、pull 網站改寫、query 點子與社群佇列檢查，batch 30 MaggieDash 先裝核心、release privacy gate、feedback 備援、社群連結與圖片檢查、大量頁面產生與 app 檢查，batch 29 預約規則、部署、app QA、助理與社群功能，以及 batch 28 產品 app、assistant tools、mobile、product release、skills catalog 與 bridge host 功能、batch 26、27 feedback 修正與 idempotent `maggie update`與 Booking email-template 合約/CLI validator 同步。本版完成 2026-09-24 booking feedback batch：Calendar grid/free-slot entry 與 host modal focus-restoration evidence。本版新增 Starter marketplace provisioning plan；本版完成 feedback batches 22、23：加入 declarative browser interaction evidence、design markup/style/content-key gate、compiler source anchoring、entity double-escape protection、`update --help` read-only、noindex hypothetical indexability、可過期 baseline acknowledgement、DOM-only link extraction regression，以及 MaggieDash 0.2.10 的 content override、短期 browser session、CDN-safe public-session cache contracts。authentication 和 isolated dev server 仍由 host 負責。`maggie-booking` workflow、傳統 email/password、Stripe、Resend、public booking flow 及既有安全邊界維持不變；provider-bound video generation 與 transactional delivery 仍記錄在 issue #39，前一批延後功能仍在 issue #38，不會直接成為 active memory。0.7.33 記錄並審查一筆更正回饋；確認 0.7.32 已正確處理 batch index，沒有修改已驗證的 shared behavior。0.7.32 加入 feedback 一基索引支援、MaggieDash panel 的 source/freshness/error evidence、Consent Mode 與實際 write/no-op reconciliation、SEO baseline recapture、sitemap origin rebasing、content-diff scope、migration ledger reconciliation、deployment credential preflight、release provenance/runtime preflight、icon release gate、opt-in blog auto-publish gate，以及 least-privilege VPS deployer。也修復 top-level `maggie feedback` dispatcher parity。0.7.31 加入 update 差異摘要、atomic installer copy、subset install manifest merge，以及 inventory drift 時 doctor non-zero。0.7.30 補上 feedback tracking issue closeout gate 與 batch 14/15 audit ledger。0.7.29 修正 npm package landing page 使用英文 README；0.7.28 加入 versioned Gemini model policy、明確 fallback 與 provenance、bundled-first CLI
 dispatch、`maggie --version`、feedback batch review 聚合與重複偵測、marketplace enrichment evidence、booking
 worker/resolver evidence，以及 read-only migration preflight。它也包含 host-owned mobile app surface contract、signed-in
 camera-state QA、直接 Astro route resolution、correlated feedback batch，以及

package/README.md

@@ -87,9 +87,9 @@ Then invoke the installed skills from your coding agent, for example:
 
 Maggie keeps the existing project foundation and asks for decisions before
 shared routes, analytics, or publishing boundaries change. The current
-package ships 34 installable skills and a local-first MaggieDash foundation.
+package ships 36 installable skills and a local-first MaggieDash foundation.
 
-This package is `0.8.4` — it expands the library into a full "one person runs a company with AI" C-suite with eight new function lanes: `maggie-sales` (CRM-neutral pipeline), `maggie-finance` (explain-only CFO metrics + a deterministic `maggie_finance.py` calculator), `maggie-support` (customer success), `maggie-product` (roadmap + pre-registered experiments), `maggie-fundraising` (deck, data room, investor updates), `maggie-legal` (ToS/privacy/DPA/SOC2 readiness), `maggie-monetization` (pricing/paywalls/dunning; money actions human-approved), and `maggie-orchestrator` (the CEO layer that decomposes a goal into gated missions across the lanes, with a `maggie_orchestrator.py` planner). `0.8.3` folded cmo.so/www development learnings in (maggie-skill-authoring, maggie-feedback-triage, and mobile/MCP/auth references); `0.8.2` added `maggie-spirit`; `0.8.0` was the security optimization roadmap.
+This package is `0.8.6` — it completes the two adopted design skills with full production references (every copy-ready snippet and default table) and makes the design source Figma-optional (live URL, existing code, Figma, or a screenshot). `0.8.5` adopted the two design skills (adapted, MIT, from `elayadesign/ai-design-skills`): `maggie-landing-page` (conversion strategy + a visual-system discipline whose values defer to the project's DESIGN.md) and `maggie-design-motion` (static design → pixel-exact animated HTML replica → MP4 + GIF export). `0.8.4` expanded the library into a full "one person runs a company with AI" C-suite with eight new function lanes: `maggie-sales` (CRM-neutral pipeline), `maggie-finance` (explain-only CFO metrics + a deterministic `maggie_finance.py` calculator), `maggie-support` (customer success), `maggie-product` (roadmap + pre-registered experiments), `maggie-fundraising` (deck, data room, investor updates), `maggie-legal` (ToS/privacy/DPA/SOC2 readiness), `maggie-monetization` (pricing/paywalls/dunning; money actions human-approved), and `maggie-orchestrator` (the CEO layer that decomposes a goal into gated missions across the lanes, with a `maggie_orchestrator.py` planner). `0.8.3` folded cmo.so/www development learnings in (maggie-skill-authoring, maggie-feedback-triage, and mobile/MCP/auth references); `0.8.2` added `maggie-spirit`; `0.8.0` was the security optimization roadmap.
 
 The 0.7.59 release made `maggie security host-audit` (the deep
 lynis audit over SSH) robust on hosts where a storage test can stall: lynis runs

package/bundled-references/design-motion-production.md

@@ -0,0 +1,234 @@
+# Design-motion production detail
+
+The complete, copy-ready snippets and tables for the `maggie-design-motion` skill.
+The skill carries
+the method in prose; this reference holds the full executable detail so nothing is
+lost. Values are the defaults from the skill's "Make it yours" section. Adapted from
+`elayadesign/ai-design-skills` `design-to-motion` (MIT); see the skill's Credits.
+
+## Source alternatives (Figma is optional)
+
+The best fidelity comes from a source with real layers and values, but **Figma is
+not required**. In order of "least guessing":
+
+1. **Live URL (recommended when the design is already on the web).** The design is
+   already rendered - do not replicate pixels. Open it in headless Chrome (the
+   project's browser tooling, as `maggie-clone`/`browser-inspection` do), read the
+   computed styles, fonts, and bounds from the DOM, and screenshot it for the
+   `?still` reference. You get exact values without pixel-lifting.
+2. **Existing code / component.** If the design already exists as HTML/React/etc.,
+   skip replication entirely: mount it, add the motion layer (Part B) and the
+   capture (Part C) on top. This is the highest fidelity of all.
+3. **Figma REST API.** Exact layers, bounds, fills, effects, radii (A2/A3). Best for
+   a design that lives only in Figma.
+4. **Screenshot / flat image.** Always works; every element is rebuilt or lifted
+   from pixels (A2). Lowest fidelity, no external dependency at all.
+
+Pick the first one that fits what the user actually has. Only paths 3-4 need the
+pixel work below; paths 1-2 jump straight to the motion system.
+
+## A3. Layer export placement (Figma)
+
+Export each moving element as its own PNG at 3x (batched 20-25 ids):
+
+| Case | Placement |
+|---|---|
+| PNG size equals `absoluteRenderBounds` (text always) | Place at the render bounds |
+| PNG larger than render bounds (parent clipped it), even overhang | `x = bbox.x - (pngW - bbox.w)/2`; use `renderBounds.y` unless the top was clipped |
+| Uneven overhang (arrowhead, one square cap) | Use `strokeGeometry`/`fillGeometry` bounds from the `geometry=paths` response |
+| Rotated vectors with a large layer blur | `use_absolute_bounds=true`, place at the bbox; PSNR offset search only if that region < ~45 dB; blobs may store at 1x |
+| Zero-height/width stroked vectors | `use_absolute_bounds=true` returns null; export without it |
+| Mask group with blurred content | Anchor on the edge that was not clipped |
+| Arcs, donuts, partial ellipses | `use_absolute_bounds=true` |
+| Patterns/overlays larger than their surface | `use_absolute_bounds=true`, then crop to the surface rect |
+| Instance children (`I12:34;56:78`) | Often null; export the parent instance |
+| Lines that draw on | Write the centerline yourself and use it as a mask over the PNG (below) |
+| Photo baked in a larger layer | Export the photo node separately; cover the baked photo with a skeleton, put the separate photo on top |
+
+Keep Figma z-order; render frame strokes as an overlay above clipped content;
+rebuild a container in CSS when its children must move separately; map drop-shadow
+blur `R` to `box-shadow` blur `R` (or `filter: drop-shadow()` ~`R/2` on a group); a
+group shadow is the shadow of the union; skip hidden layers.
+
+### Drawing a line on
+
+Read corner points and arc radii from `strokeGeometry` (centerline = halfway across
+the stroke; a rounded corner's centerline radius = inner radius + half the stroke):
+
+```html
+<svg class="ly" viewBox="0 0 1440 990" style="left:0;top:0;width:1440px;height:990px">
+  <mask id="draw1">
+    <path d="M193 832 V700 A45 45 0 0 1 238 655 H380" fill="none" stroke="#fff" stroke-width="8"
+          pathLength="1" stroke-dasharray="1" stroke-dashoffset="1"/>
+  </mask>
+  <image href="data:image/png;base64,..." x="192" y="653" width="190" height="181" mask="url(#draw1)"/>
+</svg>
+```
+
+Animate `stroke-dashoffset` 1 -> 0 on the JS clock. `pathLength="1"` avoids length
+measuring; the wide mask stroke covers antialiasing. For travelling pulses, read
+positions with `getPointAtLength` on the same path.
+
+## A5. Clip pattern
+
+Keeps stage coordinates valid inside a clip; for separate cards the card's unit
+wraps its clip so the card and contents move together:
+
+```html
+<div class="clip" style="left:113px;top:138px;width:305px;height:907px;border-radius:16px 0 0 16px">
+  <div class="cin" style="left:-113px;top:-138px"><!-- units in stage coordinates --></div>
+</div>
+```
+
+```css
+.clip { position: absolute; overflow: hidden; isolation: isolate; }
+.cin  { position: absolute; width: var(--stage-w); height: var(--stage-h); }
+```
+
+## B2. Loading choreography kinds
+
+| Kind | Use for | From |
+|---|---|---|
+| `card` | Separate cards, with shadow | `translateY(24px)`, `scale(0.985)`, `blur(6px)`, opacity 0 |
+| `up` | Text, headers, values, rows | `translateY(10px)`, `blur(4px)`, opacity 0 |
+| `down` | Top toolbars/bars | `translateY(-8px)`, `blur(4px)` |
+| `left` | Sidebar items, list rows, labels | `translateX(-10px)`, `blur(4px)` |
+| `pop` | Icons, badges, avatars, buttons, dots | `scale(0.82-0.88)` from own centre, `blur(4px)` |
+| `photo` | Images | skeleton shimmer, then `blur(14px) saturate(0.6)` to sharp |
+| `wipe` | Bars, fills, highlights | left-to-right `clip-path` reveal in pixels on the full-stage unit |
+| `line`/`grow` | Rules, ticks, timelines | `scaleX(0)`/`scaleY(0)` from the start edge |
+| `donut` | Rings, gauges | conic mask sweeping clockwise from 12 o'clock |
+| `tray`/`rise` | Sheets, trays, folders | slide up 40px from the container's bottom edge, clipped |
+| `fade` | Layers under another layer | opacity only |
+
+Containers load in reading order 80-90ms apart; items 30-80ms; total intro ~2-2.5s.
+Never `scale(0)` an object (only lines/bars grow from zero). Covered layers arrive
+last and leave first. Skeletons match the real shape, 1px inside it.
+
+## B4. Story + accent tables
+
+| Visual | Story |
+|---|---|
+| Stack (leads, notifications, files) | A new item lands on top with blur, others step back a slot, the last leaves |
+| Line/area chart | A scrubber glides across, dots ride the curve, the tooltip counts; or the line redraws and numbers count up |
+| Bar chart, equalizer, grid | Bars breathe like a live feed and settle to design heights; a dot/tooltip rides the active bar |
+| Donut, gauge | Segments ease out one at a time and back; or the ring sweeps again clockwise |
+| Table, list | A cursor inspects rows, the row highlights, a preview loads; or a soft highlight steps down |
+| Calendar, scheduler | A highlight searches for an open slot, the event glides in, then back |
+| Flow, connectors | Pulses travel along connectors in flow direction, nodes light up as a pulse passes |
+| AI, prompt, form | The prompt deletes and retypes, chips evaluate one by one, the result appears with blur |
+| Counters, KPIs | Numbers count up with the chart that drives them |
+| Logo row | A continuous marquee moving exactly one full set per loop |
+| Media player | The handle and progress advance while the play button pulses |
+
+| Accent | Use for | Values |
+|---|---|---|
+| Pulse ring | Status dots, live indicators, play | 1.8-2.2s period, ring scale 1 -> 2.6, opacity 0.55 -> 0 |
+| Heartbeat | Hearts, likes, sparkles | +20% over 0.35s, every 3s |
+| Gentle bob | Floating objects | +/-2.6px, 2.8s sine |
+| Sheen sweep | Photos, bars, buttons | band 38% width, peak 34% white, 1.5s pass every 3.4s |
+| Skeleton glimmer | Placeholder lines | 2.4s shimmer |
+
+### Story track helper
+
+```js
+// [[time, value], ...] eased per segment; values may be numbers or arrays
+function track(keys, t, ease = easeInOut) {
+  if (t <= keys[0][0]) return keys[0][1];
+  for (let i = 1; i < keys.length; i++) {
+    const [t1, v1] = keys[i], [t0, v0] = keys[i - 1];
+    if (t <= t1) {
+      const k = ease(Math.min(1, (t - t0) / (t1 - t0 || 1)));
+      return Array.isArray(v0) ? v0.map((v, j) => v + (v1[j] - v) * k) : v0 + (v1 - v0) * k;
+    }
+  }
+  return keys[keys.length - 1][1];
+}
+// a slot that scrubs along a curve and returns to its design position
+slot.style.transform = `translate(${track([[0,[0,0]],[1.2,[46,-18]],[2.6,[46,-18]],[3.8,[0,0]]], t).join('px,')}px)`;
+```
+
+## B5-B6. Cycle and easing
+
+| Phase | Default timing |
+|---|---|
+| Build in | 0 -> 2.4s |
+| Stories | 2.4 -> 11.0s |
+| Dissolve | 11.0 -> 11.6s |
+| Empty beat | 11.6 -> 12.0s |
+
+| Token | Curve | Use |
+|---|---|---|
+| `--e` | `cubic-bezier(0.16, 1, 0.3, 1)` | entrance transforms (~1.05s) |
+| `--e2` | `cubic-bezier(0.33, 1, 0.68, 1)` | opacity and blur (0.7-0.8s) |
+| `--io` | `cubic-bezier(0.65, 0, 0.35, 1)` | wipes, fills, sweeps, camera |
+| linear | `linear` | constant motion only (shimmer, playback) |
+
+## C1. Deterministic capture (full)
+
+```js
+await page.clock.install({ time: 0 });
+await page.goto(url + '?capture', { waitUntil: 'load' });
+await page.evaluate(() => document.fonts.ready);
+await page.clock.pauseAt(10000);
+const loopTime = [];
+for (let i = 0; i < frames; i++) {
+  // 1. whole milliseconds that average exactly 1000/60 (17,17,16,...); runFor(1000/60) drifts
+  const dt = Math.round((i + 1) * 1000 / 60) - Math.round(i * 1000 / 60);
+  await page.clock.runFor(dt);
+  loopTime.push(await page.evaluate(([i, PRE, dt]) => {
+    if (i === PRE) window.__start();          // 2. start inside the same evaluate as the seek
+    if (i >= PRE) window.__tick(dt / 1000);   // 3. the page clock advances here, never through rAF
+    const now = performance.now();
+    for (const a of document.getAnimations()) {  // CSS transitions follow the fake clock
+      a.__m ??= window.__mark;
+      a.pause(); a.currentTime = Math.max(0, now - a.__m);
+    }
+    return i >= PRE ? window.__lt : 0;
+  }, [i, PRE, dt]));
+  await page.screenshot({ path: `${out}/${String(i).padStart(5, '0')}.png` });
+}
+```
+
+`PRE` is ~15 settle frames before the start. Viewport = frame size;
+`deviceScaleFactor = min(1920/W, 1200/H)`; the export window starts at frame `PRE-1`
+(loop time 0, empty state) and spans `cycle x 60` frames; record ~10 past it for the
+seam check. Page side in `?capture`: `__start()` adds the `in` class and every state
+change sets `window.__mark = performance.now()`; `__tick(dt)` advances loop time,
+runs the cycle phases, draws stories/accents, sets `window.__lt`; never-ending loops
+(shimmer, marquee) are driven by the JS clock, not infinite CSS keyframes.
+
+## C2. Export commands
+
+| File | Spec |
+|---|---|
+| `<name>-x.mp4` | H.264, `yuv420p`, 60fps, CRF 14-15, preset slow, `+faststart`, max 1920x1200, even dims |
+| `<name>-loop.gif` | 960px wide, 15-20fps, ~2-3MB |
+| `<name>-800x500.gif` | always delivered; crop to content at 1.6:1 or fit+pad; 20fps (12 if heavy) |
+
+```bash
+# MP4 for X
+ffmpeg -start_number $A -framerate 60 -i frames/%05d.png -frames:v $N \
+  -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -c:v libx264 -preset slow -crf 15 \
+  -pix_fmt yuv420p -movflags +faststart name-x.mp4
+
+# website GIF (960px)
+ffmpeg -start_number $A -framerate 60 -i frames/%05d.png -filter_complex \
+  "trim=end_frame=$N,fps=20,scale=960:-2:flags=lanczos,split[a][b];\
+   [a]palettegen=max_colors=192:stats_mode=diff[p];\
+   [b][p]paletteuse=dither=bayer:bayer_scale=4:diff_mode=rectangle" -loop 0 name-loop.gif
+```
+
+For the 800x500 GIF, add before `split`:
+`scale=800:500:force_original_aspect_ratio=decrease,pad=800:500:(ow-iw)/2:(oh-ih)/2:color=<page bg>`.
+Keep bayer dithering whenever a photo is in frame (else photos band); if a GIF is
+too heavy, lower frame rate or colours before size.
+
+## Make it yours (defaults)
+
+Rise 10px (`up`), 8px (`down`/`left`); entrance blur 4px (photos 14px); pop scale
+0.82-0.88; transform 1.05s `--e`; opacity/blur 0.7-0.8s `--e2`; wipe 0.7s (slow bars
+1.1s) `--io`; card rise 24px + `scale(0.985)` + `blur(6px)`; website hero appear 6px
+rise + 2px blur, 50-70ms stagger, ~1.2s; container stagger 80-90ms; typing 45-70ms/
+glyph; story start 2.4s; story length 3-8s; cycle 12s; MP4 60fps CRF 15; GIFs 960px
+and 800x500 at 20fps.

package/bundled-references/landing-page-visual-defaults.md

@@ -0,0 +1,101 @@
+# Landing-page visual defaults
+
+The complete default value tables for the `maggie-landing-page` skill (Part B). These are
+**defaults**: the user's prompt and the project's own system (a `DESIGN.md`, token
+set, or brand) win over them. Use them to fill gaps or when there is no system yet,
+never to repaint an established brand. Adapted from `elayadesign/ai-design-skills`
+`landing-page-design` (MIT; itself from `Leonxlnx/taste-skill`); see the skill's
+Credits.
+
+## Fonts
+
+- **Default to:** Geist, Manrope, or Poppins (one typeface per site). A mono (Geist
+  Mono) only for code, data, or numeric UI where a monospace is functionally needed.
+- **Avoid defaulting to:** Inter, Roboto, Arial, Open Sans, Helvetica.
+- No italics in the interface; cap weight at bold (no 900/black).
+- The project's font choice always wins.
+
+## Type scale (snap every size to a step)
+
+Snap to the closest step **below**, taking its paired line height. Never leave
+arbitrary values (`text-[19px]`, `font-size: 22px`, `1.4rem`). Default scale is
+Tailwind's:
+
+| Class | Size | Line height |
+|---|---|---|
+| `text-xs` | 12px (0.75rem) | 16px |
+| `text-sm` | 14px (0.875rem) | 20px |
+| `text-base` | 16px (1rem) | 24px |
+| `text-lg` | 18px (1.125rem) | 28px |
+| `text-xl` | 20px (1.25rem) | 28px |
+| `text-2xl` | 24px (1.5rem) | 32px |
+| `text-3xl` | 30px (1.875rem) | 36px |
+| `text-4xl` | 36px (2.25rem) | 40px |
+| `text-5xl` | 48px (3rem) | 1 |
+| `text-6xl` | 60px (3.75rem) | 1 |
+| `text-7xl` | 72px (4.5rem) | 1 |
+| `text-8xl` | 96px (6rem) | 1 |
+| `text-9xl` | 128px (8rem) | 1 |
+
+Buttons: main `text-base` (16px) semibold; smaller header buttons `text-sm` (14px)
+semibold.
+
+## Spacing (only these values)
+
+| Token | Value | | Token | Value |
+|---|---|---|---|---|
+| Spacing-0 | 0 | | Spacing-300 | 24px |
+| Spacing-25 | 2px | | Spacing-400 | 32px |
+| Spacing-50 | 4px | | Spacing-500 | 40px |
+| Spacing-75 | 8px | | Spacing-600 | 48px |
+| Spacing-100 | 12px | | Spacing-700 | 64px |
+| Spacing-200 | 16px | | Spacing-800 | 80px |
+| | | | Spacing-900 | 96px |
+
+Main buttons: 8px vertical / 12px horizontal padding.
+
+## Corner radius
+
+Use the token radii. **Nested-radius formula** when a shape sits inside another and
+the gap is under 32px: `inner = outer - gap`, applied only when the result is > 2px
+(else leave square). Example: an outer card at 16px with 8px padding gives the inner
+element an 8px radius.
+
+## Backgrounds and hero
+
+- Backgrounds are flat - no gradients. The one exception is gradient **text** on the
+  hero heading. (A project whose brand uses gradient surfaces overrides this.)
+- Never border only one side of a card (all around or none).
+- Default dark-mode background colours: `#000000`, `#181818`, `#1F1F1F`, `#272727`,
+  `#313131`, `#131209`.
+- Hero heading text gradient: dark theme `#FFFFFF` -> `#9B9B9B`; light theme
+  `#000000` -> `#666666`, left to right. Cap heading and subheading width at ~680px;
+  break lines at meaningful points, never mid-phrase.
+
+## Icons
+
+Default to Phosphor, Solar, or Iconamoon; avoid Material Icons/Symbols. The
+project's icon set wins; validate it with `maggie-design`'s icon inventory +
+glyph-render gates before release.
+
+## Motion
+
+- Base curve `cubic-bezier(0.22,1,0.36,1)` with ~500ms for layout/position changes;
+  hover colour/opacity 300ms (never under 200ms). Never a browser-default curve
+  (`ease`, `linear`, `ease-in-out`).
+- Animate only `transform` and `opacity`; never `top`/`left`/`width`/`height`.
+- Respect `prefers-reduced-motion` (replace movement with a plain opacity change).
+- Scroll reveals rise ~32px and fade over 600-800ms, once, via `IntersectionObserver`
+  (never an unthrottled scroll listener).
+- Menu link entrance: items arrive in reading order, each rising ~24px while fading,
+  stepped 60ms apart, capped at 400ms total.
+- Tagline reveal: words go from ~25-35% opacity to full colour one at a time in
+  reading order as each crosses a trigger line (base curve; `IntersectionObserver`
+  per word or an rAF-throttled listener).
+
+## Banned filler words (content realism)
+
+Do not write "revolutionize", "supercharge", "cutting edge", "effortless",
+"transform your workflow", "take it to the next level", "harness the power", or
+"world class". Say what the product does in plain terms. Sentence case for headings
+and buttons; calm, specific system messages.

package/bundled-skills/catalog.json

@@ -46,6 +46,10 @@
       "name": "maggie-design",
       "description": "Design authorized interior pages, review rendered responsive layouts, or explicitly rebrand a packaged homepage/template. Use rebrand only with a named source brand and target brand."
     },
+    {
+      "name": "maggie-design-motion",
+      "description": "Turn a static design (a Figma frame, screenshot, dashboard, card set, app screen, or a UI on a photo) into a pixel-exact HTML replica that loads from an empty state, then has every visual act out what it does in a seamless loop, and export an MP4 plus GIFs. Use when asked to animate a design, a Figma link, a screenshot, UI cards, a dashboard or hero image, or to make a showcase loop, motion mockup, or a video/GIF of a design. Also for bento/feature cards on a landing page."
+    },
     {
       "name": "maggie-feedback",
       "description": "Collect, review, and explicitly submit privacy-safe feedback about a Maggie skill run, workflow result, bug, or feature request."
@@ -62,6 +66,10 @@
       "name": "maggie-fundraising",
       "description": "Fundraising and investor relations for a founder - draft a pitch deck and narrative, assemble a data room, write investor updates, keep cap-table and round hygiene, and prepare SEIS/EIS materials. Use when the user asks to prepare to raise, build a deck or data room, write an investor update, or organise round documents. Factual only; not securities, investment, legal, or tax advice. Pairs with maggie-finance and the TOPY/CEO tools."
     },
+    {
+      "name": "maggie-landing-page",
+      "description": "Build a high-converting landing page - intake, page structure, layout selection, conversion copy, SEO/AEO, plus a visual-system discipline (typography, spacing, radius, backgrounds, hero, icons, motion) whose specific values are defaults the project's DESIGN.md overrides. Use when building, editing, styling, or writing copy for a landing page, marketing page, or a page section meant to convert. Designs the page; maggie-design produces and validates it."
+    },
     {
       "name": "maggie-legal",
       "description": "Draft and maintain the routine legal and compliance documents a small company needs - terms of service, privacy policy, cookie/consent notice, DPA, and a SOC2/ISO readiness checklist - jurisdiction-aware and from reviewed templates. Use when the user asks for ToS/privacy/cookie/DPA documents, GDPR/CCPA compliance, or a security-compliance readiness map. Starting points for a qualified lawyer to review; not legal advice. Pairs with maggie-security."

package/bundled-skills/maggie-design-motion/SKILL.md

@@ -0,0 +1,299 @@
+---
+name: maggie-design-motion
+description: Turn a static design (a Figma frame, screenshot, dashboard, card set, app screen, or a UI on a photo) into a pixel-exact HTML replica that loads from an empty state, then has every visual act out what it does in a seamless loop, and export an MP4 plus GIFs. Use when asked to animate a design, a Figma link, a screenshot, UI cards, a dashboard or hero image, or to make a showcase loop, motion mockup, or a video/GIF of a design. Also for bento/feature cards on a landing page.
+metadata:
+  version: 0.1.1
+---
+
+# Maggie Design Motion
+
+A showcase animation is not a redesign. The viewer must see **the exact design**,
+and see that **it is alive**: exact frame -> empty state -> smooth load -> every
+visual acts out its story -> seamless repeat.
+
+This is the design-replica + video pipeline. For deterministic brand sprites and
+avatars use [`maggie-spirit`](../maggie-spirit/SKILL.md); when the animation lives
+on a landing page, pair with [`maggie-landing-page`](../maggie-landing-page/SKILL.md)
+and produce through [`maggie-design`](../maggie-design/SKILL.md).
+
+Follow the [Maggie Memory Hook](../../references/memory-hook.md) at invocation and
+completion. Timing/distance/curve values live in **Make it yours** (defaults;
+override there, never ad hoc). Adapted from `elayadesign/ai-design-skills` (MIT);
+see Credits.
+
+**Figma is optional.** Choose the source with the least guessing for what the user
+actually has: a **live URL** (already rendered - read computed styles + screenshot
+via the project's browser tooling, as `maggie-clone`/`browser-inspection` do; no
+pixel-lifting), **existing code/component** (skip replication, add the motion layer
+on top - highest fidelity), **Figma REST** (exact layers), or a **screenshot** (works
+with zero dependencies, elements rebuilt/lifted from pixels). Only Figma and
+screenshot need the pixel work in Part A; a live URL or existing code jumps to the
+motion system. See [design-motion production detail](../../references/design-motion-production.md)
+for the full source-alternatives list and every copy-ready snippet and table.
+
+## Two contexts (decide first)
+
+| | Showcase | Website |
+|---|---|---|
+| Request | "animate this design", a Figma link alone | building/editing a landing page/site |
+| Animated | the whole frame | only sections with a visual, plus the hero |
+| Start | page load, from empty | when the section scrolls into view, once |
+| After intro | stories run, frame dissolves, cycle repeats | stories run while on screen; no dissolve |
+| Text | exported layers (pixel-exact) | live HTML text (SEO/a11y); only visuals exported |
+| Deliver | page + MP4 + website GIF + 800x500 GIF | the animated sections in the site; exports on request |
+
+Inside a site's codebase assume website; with only a design assume showcase; if
+still unclear, ask once. On a website, animate the hero (a small 6px-rise + blur
+appear, reading order, ~1.2s, once on load) and bento/feature cards (intro on
+scroll + a story loop on each visual); leave text-only sections to the page's normal
+scroll reveal. Trigger with `IntersectionObserver`, pause stories off screen,
+respect `prefers-reduced-motion`.
+
+# Part A - Fidelity (the finished still must be indistinguishable from the source)
+
+## A1. Intake (one batch)
+
+Context (showcase/website); source (a Figma link with a node id is best; a
+screenshot works but every layer is rebuilt from pixels); layout (app frame vs
+separate cards, decided from the tree); background (a photo/texture must stay
+exact); which parts are visuals that should act out a story; deliverables; camera
+(default none). State any assumption in one line and continue.
+
+## A2. Source of truth
+
+- **Figma REST API** with a personal token. **Read the token from a secure store
+  (env var or OS keychain); never print, echo, paste, or commit it.**
+  `GET /v1/files/:key/nodes?ids=:node&geometry=paths` for the tree/bounds/fills/
+  effects/radii; `GET /v1/images/:key?ids=:node&format=png&scale=2` for the
+  reference frame; note the frame origin (layer pos = absolute bounds - origin);
+  retry CDN downloads and size-check each PNG.
+- **Screenshot / flat image:** find the pixel ratio (image width / common frame
+  widths 1440/1280/1920/390, checked against ~14-18px body text). Measure in
+  screenshot pixels (pixel `i` centre is `i+0.5`). Make each element by the first
+  fitting method: rebuild surfaces/cards/bars in CSS (sample fills as a median
+  patch; trace gradients per 10-20px; fit shadows against the edge profile); keep
+  website text live HTML; for showcase text, match the font and overlay, else lift
+  it out of the pixels (`alpha = (bg - px)/(bg - fg)` per pixel against the rebuilt
+  surface); redraw simple icons as SVG; trace lines/charts as SVG; crop only photos/
+  avatars/logos to their radius. **What is hidden stays hidden - never invent it
+  silently.** Tell the user, in a short list, what was rebuilt / lifted / cropped /
+  not separable / guessed before animating.
+
+## A3. Layer export (Figma)
+
+Export every moving element as its own PNG at 3x (batched 20-25 ids), placed from
+`absoluteRenderBounds` (text always) or the overhang formula / `strokeGeometry`
+bounds for uneven overhang. Keep Figma z-order; render frame strokes as an overlay
+above clipped content; rebuild a container in CSS when its children must move
+separately (so the API does not bake them in); map Figma drop-shadow blur `R` to a
+CSS `box-shadow` blur `R` (or `filter: drop-shadow()` ~`R/2` on a group); a group
+shadow is the shadow of the union; skip hidden layers. For a line that draws on,
+write its centerline as an SVG mask over the exported PNG and animate
+`stroke-dashoffset` 1 -> 0 (`pathLength="1"`).
+
+## A4. Background (sacred)
+
+When the design sits on a photo/texture, the background is part of the design: it
+never changes, moves, blurs, scales, fades, or recolours, in any variant. Export
+the original image (`GET /v1/files/:key/images`) and apply the fill's scale mode /
+`imageTransform` as CSS. Frosted panels (`backdrop-filter: blur()`) must be a
+sibling above the background with `transform: translateZ(0)` + a `z-index` so
+headless Chrome renders them. Verify the background region by PSNR (aim > 45 dB). If
+you cannot reproduce it, say so before building - never swap in a flat colour
+silently.
+
+## A5. Layout: app frame or separate cards
+
+- **App frame (joined surfaces):** sidebar + body etc. are present, opaque, and
+  still from the first frame; only the elements inside them load. Keep Figma
+  stacking where surfaces meet.
+- **Separate cards (bento/widgets):** the cards themselves rise in (the `card` kind
+  in B2), staggered in reading order, contents following; the empty state is the
+  background alone.
+- Both: each container clips its own contents to its exact radii; image-shaped
+  surfaces get an average-colour placeholder; nested content loads like any element.
+
+## A6. Page architecture (showcase)
+
+One self-contained HTML file: a fixed-size stage at the frame's exact size, scaled
+to fit; images inline as base64 (deduped); wait for `<img>` decode. Modes: `?still`
+(exact frame, no motion, also reduced-motion), `?loop` (repeats like exports),
+`?capture` (rAF off; exposes `window.__start()`, `__tick(dt)`, loop time `__lt` so
+the recorder drives the clock). One JS clock (`requestAnimationFrame`) drives all
+time-based effects from loop time, never wall clock. On a website, build inside the
+site's code instead; the clock/units/modes still apply per section.
+
+## A7. Verify the still
+
+Render `?still` at 2x and compare with the reference before any motion: PSNR whole
+frame and per container after a light blur (aim > 35 dB overall, > 30 dB per
+container; text-heavy containers sit near 30 dB); look at a blurred amplified diff
+for structural errors (misplaced glow, wrong stacking, missing stroke); for
+screenshot sources also score the rebuilt surfaces with lifted regions masked out.
+Fix structure, not sub-pixel antialiasing.
+
+# Part B - Motion system
+
+## B1-B3. Start empty, load in, bars
+
+The first frame of every load/export is the empty state (never the finished frame).
+Elements **rise from below and resolve blur -> sharp**, staggered. Loading kinds:
+`card` (whole separate cards, with shadow), `up`/`down`/`left` (text, bars, rows,
+sidebars), `pop` (icons/badges/avatars from their own centre), `photo` (skeleton
+shimmer then blur -> sharp), `wipe` (left-to-right `clip-path` reveal in pixels on
+the full-stage unit), `line`/`grow` (draw from the start edge), `donut` (conic
+sweep), `tray`/`rise` (slide up inside the container), `fade` (covered layers).
+Containers load in reading order 80-90ms apart; items 30-80ms. Never `scale(0)` an
+object (only lines/bars grow from zero). Data bars/meters fill like progress
+(left-to-right `clip-path`, 0.7-1.1s). **Never add loading lines not in the design.**
+
+## B4. Story loops (the main act)
+
+The intro is the opening; the main act is every visual **acting out what it does**,
+on a loop - a lead list receives leads, a chart is read, a calendar finds a slot, a
+prompt is typed. Write each story in one sentence first. Rules: start and end on the
+exact design (at rest the frame equals `?still`); use the design's own elements;
+change text only when it is the point (counters need live text in the matching font;
+typing reveals the exported text layer glyph by glyph, 45-70ms, with a blinking
+caret); obvious not busy (a clear action every 1-2s); readable at the 800x500 GIF
+size; offset cards so attention travels in reading order; one story per card, 3-8s,
+may repeat. Build stories from eased keyframe tracks on the JS clock:
+
+```js
+// [[time, value], ...] eased per segment; values may be numbers or arrays
+function track(keys, t, ease = easeInOut) {
+  if (t <= keys[0][0]) return keys[0][1];
+  for (let i = 1; i < keys.length; i++) {
+    const [t1, v1] = keys[i], [t0, v0] = keys[i - 1];
+    if (t <= t1) {
+      const k = ease(Math.min(1, (t - t0) / (t1 - t0 || 1)));
+      return Array.isArray(v0) ? v0.map((v, j) => v + (v1[j] - v) * k) : v0 + (v1 - v0) * k;
+    }
+  }
+  return keys[keys.length - 1][1];
+}
+```
+
+Accents sit on top of stories (pulse ring, heartbeat, gentle bob, sheen sweep,
+skeleton glimmer), starting after the intro lands (~2.4s).
+
+## B5-B8. Cycle, easing, camera, perf
+
+Showcase cycle (default): build in 0->2.4s, stories 2.4->11.0s, dissolve
+11.0->11.6s, empty beat 11.6->12.0s; the story phase holds at least one full story
+of every card; dissolve back to the empty state (app frame keeps its joined
+surfaces, background never dissolves); reset every JS value too, so the end frame
+equals the start frame. On a website there is no cycle (intro once on scroll,
+stories until off screen). Easing defaults: `--e` `cubic-bezier(0.16,1,0.3,1)`
+(entrance transforms ~1.05s), `--e2` `cubic-bezier(0.33,1,0.68,1)` (opacity/blur
+0.7-0.8s), `--io` `cubic-bezier(0.65,0,0.35,1)` (wipes/fills/sweeps), `linear` only
+for constant motion. No zoom/pan unless asked (then only the app frame scales, the
+background never moves). Animate `transform`/`opacity`/`filter`/`clip-path` only,
+never `top`/`left`/`width`/`height`; keep animated blur <= 14px; reduced motion
+renders the still.
+
+## B9. Motion checks (before encoding, on the recorded frames)
+
+- **Overflow:** build a mask from the page's real container shapes (exact radii,
+  grown 2px). App frame: every pixel outside the joined surfaces equals the empty
+  first frame (PSNR inf). Separate cards: during stories, every pixel outside the
+  cards (and their shadows) equals `?still`.
+- **Seam:** the first export frame equals the frame one cycle later.
+- **Empty beat:** every empty-beat frame equals the frame before `__start` (catches
+  JS state that failed to reset).
+- **Rest:** the last frame before the dissolve equals the landed frame (PSNR inf),
+  proving every story returned to the design.
+- **Contact sheet:** tile key moments and look for overflow, ghosting, pops, and
+  stories too timid to notice.
+
+# Part C - Recording and export
+
+## C1. Deterministic capture (never real-time screen recording)
+
+Step a fake clock and screenshot every frame. Three details make the loop smooth
+and the seam clean (all in the snippet): whole-millisecond steps that average
+1000/60; `__start()` inside the same evaluate as the seek; the page clock advances
+through `__tick`, never rAF.
+
+```js
+await page.clock.install({ time: 0 });
+await page.goto(url + '?capture', { waitUntil: 'load' });
+await page.evaluate(() => document.fonts.ready);
+await page.clock.pauseAt(10000);
+for (let i = 0; i < frames; i++) {
+  const dt = Math.round((i + 1) * 1000 / 60) - Math.round(i * 1000 / 60);
+  await page.clock.runFor(dt);
+  await page.evaluate(([i, PRE, dt]) => {
+    if (i === PRE) window.__start();
+    if (i >= PRE) window.__tick(dt / 1000);
+    const now = performance.now();
+    for (const a of document.getAnimations()) { a.__m ??= window.__mark; a.pause(); a.currentTime = Math.max(0, now - a.__m); }
+  }, [i, PRE, dt]);
+  await page.screenshot({ path: `${out}/${String(i).padStart(5, '0')}.png` });
+}
+```
+
+`PRE` is ~15 settle frames before the start. Viewport = frame size;
+`deviceScaleFactor = min(1920/W, 1200/H)`; the export window starts at frame
+`PRE-1` (loop time 0) and spans `cycle x 60` frames, recording ~10 past it for the
+seam check.
+
+## C2. Formats
+
+- `<name>-x.mp4` - H.264, `yuv420p`, 60fps, CRF 14-15, preset slow, `+faststart`,
+  max 1920x1200, even dimensions.
+- `<name>-loop.gif` - 960px wide, 15-20fps, ~2-3MB, for the website.
+- `<name>-800x500.gif` - always delivered; crop to content at 1.6:1 (or fit + pad
+  with the page background), 20fps (12 if heavy). Keep bayer dithering whenever a
+  photo is in frame.
+
+```bash
+ffmpeg -start_number $A -framerate 60 -i frames/%05d.png -frames:v $N \
+  -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -c:v libx264 -preset slow -crf 15 \
+  -pix_fmt yuv420p -movflags +faststart name-x.mp4
+```
+
+# Make it yours (defaults; edit here, never inline)
+
+Rise 10px (`up`), 8px (`down`/`left`); entrance blur 4px (photos 14px); pop scale
+0.82-0.88; transform 1.05s `--e`; opacity/blur 0.7-0.8s `--e2`; wipe 0.7s (slow bars
+1.1s) `--io`; card rise 24px + `scale(0.985)` + `blur(6px)`; website hero appear 6px
+rise + 2px blur, 50-70ms stagger, ~1.2s; container stagger 80-90ms; typing 45-70ms/
+glyph; story start 2.4s; story length 3-8s; cycle 12s; MP4 60fps CRF 15; GIFs 960px
+and 800x500 at 20fps.
+
+# Output format
+
+Before building: context (showcase/website, with per-section mapping on a website);
+layout (app frame + static surfaces, or separate cards); background (kept exactly or
+what cannot be reproduced); choreography (load order + kind per group); stories (one
+sentence per visual + accents); cycle (length + phases). After building: still
+fidelity (overall + worst-surface PSNR); overflow + seam results; the files with
+size/dimensions/fps/duration; anything not reproduced exactly, named plainly.
+
+# Guardrails
+
+- The Figma token is read from a secure store and is **never printed, echoed,
+  pasted into chat, or committed**; do not store it in Maggie artifacts.
+- Never fake fidelity: never animate the screenshot as one block, move crops that
+  carry their old background, or invent hidden areas silently. Report what was
+  rebuilt / lifted / cropped / guessed before animating.
+- The background is sacred (A4); every variant keeps it.
+- Local tools only (Figma REST is free, Playwright + ffmpeg run locally); no
+  third-party upload of the user's design.
+
+# Related skills
+
+- `maggie-spirit` - deterministic brand sprites/avatars (a different motion job).
+- `maggie-landing-page` / `maggie-design` - where website motion lives and is
+  produced.
+
+# Credits
+
+Adapted (not transcribed) from
+[`elayadesign/ai-design-skills`](https://github.com/elayadesign/ai-design-skills)
+`design-to-motion` by Elaya (MIT), which adapts general motion rules from
+[`emilkowalski/skills`](https://github.com/emilkowalski/skills),
+[`Owl-Listener/designer-skills`](https://github.com/Owl-Listener/designer-skills),
+and [`dylantarre/animation-principles`](https://github.com/dylantarre/animation-principles)
+(all MIT). Defaults originate there.

package/bundled-skills/maggie-landing-page/SKILL.md

@@ -0,0 +1,231 @@
+---
+name: maggie-landing-page
+description: Build a high-converting landing page - intake, page structure, layout selection, conversion copy, SEO/AEO, plus a visual-system discipline (typography, spacing, radius, backgrounds, hero, icons, motion) whose specific values are defaults the project's DESIGN.md overrides. Use when building, editing, styling, or writing copy for a landing page, marketing page, or a page section meant to convert. Designs the page; maggie-design produces and validates it.
+metadata:
+  version: 0.1.1
+---
+
+# Maggie Landing Page
+
+A landing page is not a homepage. A homepage serves many intents; a landing page
+wins one: **one offer -> one audience -> one primary action.** This skill decides
+what the page says and how it looks; [`maggie-design`](../maggie-design/SKILL.md)
+produces it and runs the responsive/icon/QA evidence gates, and
+[`maggie-seo-geo`](../maggie-seo-geo/SKILL.md) owns the SEO/AEO content side.
+
+Follow the [Maggie Memory Hook](../../references/memory-hook.md) at invocation and
+completion.
+
+**Values defer to the project.** The specific numbers and choices in Part B
+(fonts, type scale, spacing, radii, colours, motion curves) are sensible
+**defaults**. Precedence is: the user's explicit prompt, then the project's own
+system (a `DESIGN.md`, token set, or brand - see `maggie-design` and the
+artifact-design fundamentals), then these defaults. Never override a project's
+established palette or type system with the defaults below; use them only to fill
+gaps or when there is no system yet.
+
+Adapted from `elayadesign/ai-design-skills` (MIT); see Credits.
+
+# Part A - Strategy and structure
+
+Work through A before B.
+
+## A1. Intake (ask once, in one batch, only what is missing)
+
+- **Purpose:** the ONE primary action (trial, demo, buy, waitlist, download); the
+  exact offer; what counts as a conversion.
+- **Audience:** the ICP; the problem they are solving; their top three objections;
+  the traffic source (ads/search/social/email); what they already know on arrival.
+- **Proof/assets:** logos, testimonials, numbers, case studies; screenshots, demo,
+  product GIFs; guarantees and refund/cancel terms.
+- **Constraints:** brand voice; design direction; mobile priority.
+
+If the user cannot answer, make a reasonable assumption, state it in one line, and
+continue. Do not stall the build.
+
+## A2. Page structure
+
+**Above the fold (required):** headline (outcome + audience); subheadline
+(the how + specificity); one primary CTA (verb + what they get); one proof signal
+(logo strip, stat, short testimonial); hero visual.
+
+**Mid page (the argument):** problem -> solution; three to five outcome-driven
+benefits; a three-step "how it works"; social proof. Place the mandatory **tagline
+reveal** (B8) here as its own moment, not stacked under the hero.
+
+**Bottom (objection handling):** FAQ (six to twelve); risk reversal; a final CTA
+identical to the top.
+
+## A3. Layout selection (pick one, say why)
+
+| Type | Use when |
+|---|---|
+| A. Classic hero + sections | The product reads from a hero screenshot. Most common. |
+| B. Long-form story | You must educate and overcome skepticism. |
+| C. Minimal conversion page | High-intent traffic, or a short offer (download, waitlist). |
+| D. Comparison page | Search intent includes alternatives ("X vs Y", "best for"). |
+
+## A4. Conversion rules
+
+- **Match message to source** - mirror the ad/email promise and tone in the hero.
+- **One primary CTA**; never competing CTAs above the fold.
+- **Benefit first** - what the feature means for them, not what it does.
+- **Be specific** - "cut weekly reporting from 4 hours to 15 minutes", not "save
+  time and streamline".
+- **Reduce risk** - at least one of: free trial, free plan, no card, cancel
+  anytime, money-back.
+- **Objections are a section, not a footnote**; put proof beside the claim it
+  supports.
+
+## A5. Copywriting
+
+- **Headlines:** "{Outcome} without {pain}"; "The {category} for {audience}";
+  "Ship {result} in {time}".
+- **Subheadline:** one or two sentences; what it is and who it is for.
+- **CTA:** verb + what they get ("Start free trial", "Book a demo"), never "Learn
+  more" or "Submit".
+- **Benefit bullets:** bold benefit, then proof/detail.
+
+## A6. Build order (section by section, never rebuild the whole page each pass)
+
+Hero -> Benefits -> How it works -> Proof -> FAQ -> Final CTA. This keeps diffs
+reviewable and is how `maggie-design` produces each band.
+
+## A7. SEO and AEO
+
+`noindex` ad-only or time-bound pages; index evergreen offers where search intent
+matches the promise, with a clear title + meta, internal links, and the FAQ in
+plain Q&A (add FAQ schema if apt). Hand the SEO/AEO specifics to
+[`maggie-seo-geo`](../maggie-seo-geo/SKILL.md).
+
+## A8. Pitfalls
+
+Too many CTAs above the fold; vague value props; a feature list with no outcomes;
+proof buried; mobile that breaks readability; no clear next step.
+
+# Part B - Visual system (defaults; the project's DESIGN.md wins)
+
+Resolve every visual value through a rule, never ad hoc. When the project has a
+token system, use it; the values below are the starting defaults. The **complete
+default tables** (the full type scale, spacing tokens, dark-mode colours, hero
+gradients, motion curves and durations, banned filler words) are in
+[landing-page visual defaults](../../references/landing-page-visual-defaults.md); the
+summary below is the working subset.
+
+## B1. Typography
+
+- **Default fonts:** a clean geometric/grotesk (the upstream default set is Geist /
+  Manrope / Poppins, plus a mono only for code/numeric UI). Avoid defaulting to
+  Inter/Roboto/Arial. No italics in UI; one typeface per site unless asked; cap
+  weight at bold (no 900/black). The **project's font choice always wins.**
+- **Copy:** no hyphens inside sentences (rewrite the phrase); no orphaned last-line
+  words (`text-wrap: balance` for headings, `pretty` for body).
+- **Type scale:** snap every size to a defined scale step (the default is Tailwind's
+  scale); never leave arbitrary `text-[19px]`/`1.4rem`. Snap to the closest step
+  below, taking its paired line height.
+
+## B2. Spacing
+
+Use one spacing token set (default: 0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80,
+96 px); nothing between or outside it. Main buttons: 8px vertical / 12px horizontal
+padding.
+
+## B3. Corner radius
+
+Use the token radii. **Nested-radius formula** when a shape sits inside another and
+the gap is under 32px: `inner = outer - gap`, applied only when the result is > 2px
+(else leave square).
+
+## B4. Borders and backgrounds
+
+Never border only one side of a card (all around or none). Backgrounds are flat -
+no gradients (the one exception is gradient *text* on the hero heading). This is a
+default; a project whose brand uses gradient surfaces overrides it.
+
+## B5. Hero
+
+Hero heading may use a left-to-right text gradient (light->mid). Cap heading and
+subheading width (default ~680px) and break lines at meaningful points, never
+mid-phrase.
+
+## B6. Icons
+
+Default to a consistent modern set (upstream: Phosphor / Solar / Iconamoon); avoid
+Material by default. The project's icon set wins; validate it with `maggie-design`'s
+icon inventory + glyph-render gates before release.
+
+## B7. Motion
+
+Weighted, decelerating motion; never a browser-default curve. Default base curve
+`cubic-bezier(0.22,1,0.36,1)` ~500ms for layout/position; 300ms (never under 200ms)
+for hover colour/opacity. Animate only `transform`/`opacity`. Respect
+`prefers-reduced-motion` (replace movement with a plain opacity change). Scroll
+reveals rise ~32px and fade over 600-800ms, once, via `IntersectionObserver` (never
+an unthrottled scroll listener). If the animation becomes a showcase/video, hand it
+to [`maggie-design-motion`](../maggie-design-motion/SKILL.md).
+
+## B8. Content, states, ship, tagline reveal
+
+- **Content realism:** real draft copy (no lorem, no "Your headline here");
+  believable, non-repeating names; industry-fitting invented brands; non-round
+  numbers; sentence case; calm specific system messages. Banned filler:
+  "revolutionize", "supercharge", "cutting edge", "effortless", "transform your
+  workflow", "world class", and the like.
+- **States:** every interactive element ships hover / active / **focus ring** /
+  loading (skeletons shaped like the layout, not spinners) / empty (a composed
+  getting-started view) / error (inline, specific, never `alert()`). No dead links;
+  the current nav item is indicated.
+- **Ship requirements:** privacy/terms links, branded 404, client-side form
+  validation, skip-to-content, cookie consent where required (see `maggie-legal`),
+  branded favicon, `<title>`/meta/`og:image`, alt text, semantic HTML, a way back
+  from every page.
+- **Tagline reveal (mandatory):** one large-type section (default `text-4xl`..`6xl`)
+  stating the core benefit, min two lines, width-capped, separate from the hero.
+  Each word transitions from a muted tone (~25-35% opacity) to full colour in
+  reading order as it crosses a trigger line (base curve, `IntersectionObserver`
+  per word or an rAF-throttled listener - never unthrottled).
+
+# Output format
+
+Before code, return: page outline; hero copy (headline/subheadline/CTA/proof);
+three to five benefits; three "how it works" steps; six to twelve FAQ Q&A;
+SEO/AEO (index or noindex + title/meta); layout recommendation (A/B/C/D) and why.
+Then build section by section per A6, through `maggie-design`.
+
+# Quality bar
+
+- One offer / one audience / one primary action; no competing CTAs above the fold;
+  specific numbers; at least one risk reversal; proof beside its claim.
+- Every visual value resolves through a rule or the project's token system, never
+  ad hoc; the project's brand/palette/type is respected over the defaults.
+- All six states present; no dead links; 404/legal/validation/favicon/meta/alt done.
+- Tagline reveal present; motion uses the base curve and IntersectionObserver.
+
+# Guardrails
+
+- Values here are defaults; the user's prompt and the project's DESIGN.md/tokens
+  win. Never repaint an established brand with the defaults.
+- Real content only; never invent testimonials, customer logos, or metrics as if
+  genuine - draft clearly-sample copy, and mark placeholder proof as placeholder.
+- Production, responsive review, icon gates, and QA evidence run through
+  `maggie-design`; this skill does not bypass them.
+- Legal/consent wording belongs to `maggie-legal`; SEO specifics to
+  `maggie-seo-geo`.
+
+# Related skills
+
+- `maggie-design` - produces and validates the page (bands, icon inventory,
+  responsive/QA evidence).
+- `maggie-seo-geo` - SEO/AEO content and measurement.
+- `maggie-design-motion` - when a section becomes an animated showcase or a
+  video/GIF.
+- `maggie-spirit` - brand marks and avatars; `maggie-legal` - consent/terms.
+
+# Credits
+
+Adapted (not transcribed) from
+[`elayadesign/ai-design-skills`](https://github.com/elayadesign/ai-design-skills)
+`landing-page-design` by Elaya (MIT), which itself adapts content-realism and
+motion ideas from [`Leonxlnx/taste-skill`](https://github.com/Leonxlnx/taste-skill)
+by Leon Lin (MIT). The specific numeric defaults originate there; our version makes
+them overridable and defers to the project's design system.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topy-ai/maggie",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "Install and manage Maggie Skills for AI coding agents",
   "license": "MIT",
   "type": "module",

package/references/design-motion-production.md

@@ -0,0 +1,234 @@
+# Design-motion production detail
+
+The complete, copy-ready snippets and tables for the `maggie-design-motion` skill.
+The skill carries
+the method in prose; this reference holds the full executable detail so nothing is
+lost. Values are the defaults from the skill's "Make it yours" section. Adapted from
+`elayadesign/ai-design-skills` `design-to-motion` (MIT); see the skill's Credits.
+
+## Source alternatives (Figma is optional)
+
+The best fidelity comes from a source with real layers and values, but **Figma is
+not required**. In order of "least guessing":
+
+1. **Live URL (recommended when the design is already on the web).** The design is
+   already rendered - do not replicate pixels. Open it in headless Chrome (the
+   project's browser tooling, as `maggie-clone`/`browser-inspection` do), read the
+   computed styles, fonts, and bounds from the DOM, and screenshot it for the
+   `?still` reference. You get exact values without pixel-lifting.
+2. **Existing code / component.** If the design already exists as HTML/React/etc.,
+   skip replication entirely: mount it, add the motion layer (Part B) and the
+   capture (Part C) on top. This is the highest fidelity of all.
+3. **Figma REST API.** Exact layers, bounds, fills, effects, radii (A2/A3). Best for
+   a design that lives only in Figma.
+4. **Screenshot / flat image.** Always works; every element is rebuilt or lifted
+   from pixels (A2). Lowest fidelity, no external dependency at all.
+
+Pick the first one that fits what the user actually has. Only paths 3-4 need the
+pixel work below; paths 1-2 jump straight to the motion system.
+
+## A3. Layer export placement (Figma)
+
+Export each moving element as its own PNG at 3x (batched 20-25 ids):
+
+| Case | Placement |
+|---|---|
+| PNG size equals `absoluteRenderBounds` (text always) | Place at the render bounds |
+| PNG larger than render bounds (parent clipped it), even overhang | `x = bbox.x - (pngW - bbox.w)/2`; use `renderBounds.y` unless the top was clipped |
+| Uneven overhang (arrowhead, one square cap) | Use `strokeGeometry`/`fillGeometry` bounds from the `geometry=paths` response |
+| Rotated vectors with a large layer blur | `use_absolute_bounds=true`, place at the bbox; PSNR offset search only if that region < ~45 dB; blobs may store at 1x |
+| Zero-height/width stroked vectors | `use_absolute_bounds=true` returns null; export without it |
+| Mask group with blurred content | Anchor on the edge that was not clipped |
+| Arcs, donuts, partial ellipses | `use_absolute_bounds=true` |
+| Patterns/overlays larger than their surface | `use_absolute_bounds=true`, then crop to the surface rect |
+| Instance children (`I12:34;56:78`) | Often null; export the parent instance |
+| Lines that draw on | Write the centerline yourself and use it as a mask over the PNG (below) |
+| Photo baked in a larger layer | Export the photo node separately; cover the baked photo with a skeleton, put the separate photo on top |
+
+Keep Figma z-order; render frame strokes as an overlay above clipped content;
+rebuild a container in CSS when its children must move separately; map drop-shadow
+blur `R` to `box-shadow` blur `R` (or `filter: drop-shadow()` ~`R/2` on a group); a
+group shadow is the shadow of the union; skip hidden layers.
+
+### Drawing a line on
+
+Read corner points and arc radii from `strokeGeometry` (centerline = halfway across
+the stroke; a rounded corner's centerline radius = inner radius + half the stroke):
+
+```html
+<svg class="ly" viewBox="0 0 1440 990" style="left:0;top:0;width:1440px;height:990px">
+  <mask id="draw1">
+    <path d="M193 832 V700 A45 45 0 0 1 238 655 H380" fill="none" stroke="#fff" stroke-width="8"
+          pathLength="1" stroke-dasharray="1" stroke-dashoffset="1"/>
+  </mask>
+  <image href="data:image/png;base64,..." x="192" y="653" width="190" height="181" mask="url(#draw1)"/>
+</svg>
+```
+
+Animate `stroke-dashoffset` 1 -> 0 on the JS clock. `pathLength="1"` avoids length
+measuring; the wide mask stroke covers antialiasing. For travelling pulses, read
+positions with `getPointAtLength` on the same path.
+
+## A5. Clip pattern
+
+Keeps stage coordinates valid inside a clip; for separate cards the card's unit
+wraps its clip so the card and contents move together:
+
+```html
+<div class="clip" style="left:113px;top:138px;width:305px;height:907px;border-radius:16px 0 0 16px">
+  <div class="cin" style="left:-113px;top:-138px"><!-- units in stage coordinates --></div>
+</div>
+```
+
+```css
+.clip { position: absolute; overflow: hidden; isolation: isolate; }
+.cin  { position: absolute; width: var(--stage-w); height: var(--stage-h); }
+```
+
+## B2. Loading choreography kinds
+
+| Kind | Use for | From |
+|---|---|---|
+| `card` | Separate cards, with shadow | `translateY(24px)`, `scale(0.985)`, `blur(6px)`, opacity 0 |
+| `up` | Text, headers, values, rows | `translateY(10px)`, `blur(4px)`, opacity 0 |
+| `down` | Top toolbars/bars | `translateY(-8px)`, `blur(4px)` |
+| `left` | Sidebar items, list rows, labels | `translateX(-10px)`, `blur(4px)` |
+| `pop` | Icons, badges, avatars, buttons, dots | `scale(0.82-0.88)` from own centre, `blur(4px)` |
+| `photo` | Images | skeleton shimmer, then `blur(14px) saturate(0.6)` to sharp |
+| `wipe` | Bars, fills, highlights | left-to-right `clip-path` reveal in pixels on the full-stage unit |
+| `line`/`grow` | Rules, ticks, timelines | `scaleX(0)`/`scaleY(0)` from the start edge |
+| `donut` | Rings, gauges | conic mask sweeping clockwise from 12 o'clock |
+| `tray`/`rise` | Sheets, trays, folders | slide up 40px from the container's bottom edge, clipped |
+| `fade` | Layers under another layer | opacity only |
+
+Containers load in reading order 80-90ms apart; items 30-80ms; total intro ~2-2.5s.
+Never `scale(0)` an object (only lines/bars grow from zero). Covered layers arrive
+last and leave first. Skeletons match the real shape, 1px inside it.
+
+## B4. Story + accent tables
+
+| Visual | Story |
+|---|---|
+| Stack (leads, notifications, files) | A new item lands on top with blur, others step back a slot, the last leaves |
+| Line/area chart | A scrubber glides across, dots ride the curve, the tooltip counts; or the line redraws and numbers count up |
+| Bar chart, equalizer, grid | Bars breathe like a live feed and settle to design heights; a dot/tooltip rides the active bar |
+| Donut, gauge | Segments ease out one at a time and back; or the ring sweeps again clockwise |
+| Table, list | A cursor inspects rows, the row highlights, a preview loads; or a soft highlight steps down |
+| Calendar, scheduler | A highlight searches for an open slot, the event glides in, then back |
+| Flow, connectors | Pulses travel along connectors in flow direction, nodes light up as a pulse passes |
+| AI, prompt, form | The prompt deletes and retypes, chips evaluate one by one, the result appears with blur |
+| Counters, KPIs | Numbers count up with the chart that drives them |
+| Logo row | A continuous marquee moving exactly one full set per loop |
+| Media player | The handle and progress advance while the play button pulses |
+
+| Accent | Use for | Values |
+|---|---|---|
+| Pulse ring | Status dots, live indicators, play | 1.8-2.2s period, ring scale 1 -> 2.6, opacity 0.55 -> 0 |
+| Heartbeat | Hearts, likes, sparkles | +20% over 0.35s, every 3s |
+| Gentle bob | Floating objects | +/-2.6px, 2.8s sine |
+| Sheen sweep | Photos, bars, buttons | band 38% width, peak 34% white, 1.5s pass every 3.4s |
+| Skeleton glimmer | Placeholder lines | 2.4s shimmer |
+
+### Story track helper
+
+```js
+// [[time, value], ...] eased per segment; values may be numbers or arrays
+function track(keys, t, ease = easeInOut) {
+  if (t <= keys[0][0]) return keys[0][1];
+  for (let i = 1; i < keys.length; i++) {
+    const [t1, v1] = keys[i], [t0, v0] = keys[i - 1];
+    if (t <= t1) {
+      const k = ease(Math.min(1, (t - t0) / (t1 - t0 || 1)));
+      return Array.isArray(v0) ? v0.map((v, j) => v + (v1[j] - v) * k) : v0 + (v1 - v0) * k;
+    }
+  }
+  return keys[keys.length - 1][1];
+}
+// a slot that scrubs along a curve and returns to its design position
+slot.style.transform = `translate(${track([[0,[0,0]],[1.2,[46,-18]],[2.6,[46,-18]],[3.8,[0,0]]], t).join('px,')}px)`;
+```
+
+## B5-B6. Cycle and easing
+
+| Phase | Default timing |
+|---|---|
+| Build in | 0 -> 2.4s |
+| Stories | 2.4 -> 11.0s |
+| Dissolve | 11.0 -> 11.6s |
+| Empty beat | 11.6 -> 12.0s |
+
+| Token | Curve | Use |
+|---|---|---|
+| `--e` | `cubic-bezier(0.16, 1, 0.3, 1)` | entrance transforms (~1.05s) |
+| `--e2` | `cubic-bezier(0.33, 1, 0.68, 1)` | opacity and blur (0.7-0.8s) |
+| `--io` | `cubic-bezier(0.65, 0, 0.35, 1)` | wipes, fills, sweeps, camera |
+| linear | `linear` | constant motion only (shimmer, playback) |
+
+## C1. Deterministic capture (full)
+
+```js
+await page.clock.install({ time: 0 });
+await page.goto(url + '?capture', { waitUntil: 'load' });
+await page.evaluate(() => document.fonts.ready);
+await page.clock.pauseAt(10000);
+const loopTime = [];
+for (let i = 0; i < frames; i++) {
+  // 1. whole milliseconds that average exactly 1000/60 (17,17,16,...); runFor(1000/60) drifts
+  const dt = Math.round((i + 1) * 1000 / 60) - Math.round(i * 1000 / 60);
+  await page.clock.runFor(dt);
+  loopTime.push(await page.evaluate(([i, PRE, dt]) => {
+    if (i === PRE) window.__start();          // 2. start inside the same evaluate as the seek
+    if (i >= PRE) window.__tick(dt / 1000);   // 3. the page clock advances here, never through rAF
+    const now = performance.now();
+    for (const a of document.getAnimations()) {  // CSS transitions follow the fake clock
+      a.__m ??= window.__mark;
+      a.pause(); a.currentTime = Math.max(0, now - a.__m);
+    }
+    return i >= PRE ? window.__lt : 0;
+  }, [i, PRE, dt]));
+  await page.screenshot({ path: `${out}/${String(i).padStart(5, '0')}.png` });
+}
+```
+
+`PRE` is ~15 settle frames before the start. Viewport = frame size;
+`deviceScaleFactor = min(1920/W, 1200/H)`; the export window starts at frame `PRE-1`
+(loop time 0, empty state) and spans `cycle x 60` frames; record ~10 past it for the
+seam check. Page side in `?capture`: `__start()` adds the `in` class and every state
+change sets `window.__mark = performance.now()`; `__tick(dt)` advances loop time,
+runs the cycle phases, draws stories/accents, sets `window.__lt`; never-ending loops
+(shimmer, marquee) are driven by the JS clock, not infinite CSS keyframes.
+
+## C2. Export commands
+
+| File | Spec |
+|---|---|
+| `<name>-x.mp4` | H.264, `yuv420p`, 60fps, CRF 14-15, preset slow, `+faststart`, max 1920x1200, even dims |
+| `<name>-loop.gif` | 960px wide, 15-20fps, ~2-3MB |
+| `<name>-800x500.gif` | always delivered; crop to content at 1.6:1 or fit+pad; 20fps (12 if heavy) |
+
+```bash
+# MP4 for X
+ffmpeg -start_number $A -framerate 60 -i frames/%05d.png -frames:v $N \
+  -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -c:v libx264 -preset slow -crf 15 \
+  -pix_fmt yuv420p -movflags +faststart name-x.mp4
+
+# website GIF (960px)
+ffmpeg -start_number $A -framerate 60 -i frames/%05d.png -filter_complex \
+  "trim=end_frame=$N,fps=20,scale=960:-2:flags=lanczos,split[a][b];\
+   [a]palettegen=max_colors=192:stats_mode=diff[p];\
+   [b][p]paletteuse=dither=bayer:bayer_scale=4:diff_mode=rectangle" -loop 0 name-loop.gif
+```
+
+For the 800x500 GIF, add before `split`:
+`scale=800:500:force_original_aspect_ratio=decrease,pad=800:500:(ow-iw)/2:(oh-ih)/2:color=<page bg>`.
+Keep bayer dithering whenever a photo is in frame (else photos band); if a GIF is
+too heavy, lower frame rate or colours before size.
+
+## Make it yours (defaults)
+
+Rise 10px (`up`), 8px (`down`/`left`); entrance blur 4px (photos 14px); pop scale
+0.82-0.88; transform 1.05s `--e`; opacity/blur 0.7-0.8s `--e2`; wipe 0.7s (slow bars
+1.1s) `--io`; card rise 24px + `scale(0.985)` + `blur(6px)`; website hero appear 6px
+rise + 2px blur, 50-70ms stagger, ~1.2s; container stagger 80-90ms; typing 45-70ms/
+glyph; story start 2.4s; story length 3-8s; cycle 12s; MP4 60fps CRF 15; GIFs 960px
+and 800x500 at 20fps.

package/references/landing-page-visual-defaults.md

@@ -0,0 +1,101 @@
+# Landing-page visual defaults
+
+The complete default value tables for the `maggie-landing-page` skill (Part B). These are
+**defaults**: the user's prompt and the project's own system (a `DESIGN.md`, token
+set, or brand) win over them. Use them to fill gaps or when there is no system yet,
+never to repaint an established brand. Adapted from `elayadesign/ai-design-skills`
+`landing-page-design` (MIT; itself from `Leonxlnx/taste-skill`); see the skill's
+Credits.
+
+## Fonts
+
+- **Default to:** Geist, Manrope, or Poppins (one typeface per site). A mono (Geist
+  Mono) only for code, data, or numeric UI where a monospace is functionally needed.
+- **Avoid defaulting to:** Inter, Roboto, Arial, Open Sans, Helvetica.
+- No italics in the interface; cap weight at bold (no 900/black).
+- The project's font choice always wins.
+
+## Type scale (snap every size to a step)
+
+Snap to the closest step **below**, taking its paired line height. Never leave
+arbitrary values (`text-[19px]`, `font-size: 22px`, `1.4rem`). Default scale is
+Tailwind's:
+
+| Class | Size | Line height |
+|---|---|---|
+| `text-xs` | 12px (0.75rem) | 16px |
+| `text-sm` | 14px (0.875rem) | 20px |
+| `text-base` | 16px (1rem) | 24px |
+| `text-lg` | 18px (1.125rem) | 28px |
+| `text-xl` | 20px (1.25rem) | 28px |
+| `text-2xl` | 24px (1.5rem) | 32px |
+| `text-3xl` | 30px (1.875rem) | 36px |
+| `text-4xl` | 36px (2.25rem) | 40px |
+| `text-5xl` | 48px (3rem) | 1 |
+| `text-6xl` | 60px (3.75rem) | 1 |
+| `text-7xl` | 72px (4.5rem) | 1 |
+| `text-8xl` | 96px (6rem) | 1 |
+| `text-9xl` | 128px (8rem) | 1 |
+
+Buttons: main `text-base` (16px) semibold; smaller header buttons `text-sm` (14px)
+semibold.
+
+## Spacing (only these values)
+
+| Token | Value | | Token | Value |
+|---|---|---|---|---|
+| Spacing-0 | 0 | | Spacing-300 | 24px |
+| Spacing-25 | 2px | | Spacing-400 | 32px |
+| Spacing-50 | 4px | | Spacing-500 | 40px |
+| Spacing-75 | 8px | | Spacing-600 | 48px |
+| Spacing-100 | 12px | | Spacing-700 | 64px |
+| Spacing-200 | 16px | | Spacing-800 | 80px |
+| | | | Spacing-900 | 96px |
+
+Main buttons: 8px vertical / 12px horizontal padding.
+
+## Corner radius
+
+Use the token radii. **Nested-radius formula** when a shape sits inside another and
+the gap is under 32px: `inner = outer - gap`, applied only when the result is > 2px
+(else leave square). Example: an outer card at 16px with 8px padding gives the inner
+element an 8px radius.
+
+## Backgrounds and hero
+
+- Backgrounds are flat - no gradients. The one exception is gradient **text** on the
+  hero heading. (A project whose brand uses gradient surfaces overrides this.)
+- Never border only one side of a card (all around or none).
+- Default dark-mode background colours: `#000000`, `#181818`, `#1F1F1F`, `#272727`,
+  `#313131`, `#131209`.
+- Hero heading text gradient: dark theme `#FFFFFF` -> `#9B9B9B`; light theme
+  `#000000` -> `#666666`, left to right. Cap heading and subheading width at ~680px;
+  break lines at meaningful points, never mid-phrase.
+
+## Icons
+
+Default to Phosphor, Solar, or Iconamoon; avoid Material Icons/Symbols. The
+project's icon set wins; validate it with `maggie-design`'s icon inventory +
+glyph-render gates before release.
+
+## Motion
+
+- Base curve `cubic-bezier(0.22,1,0.36,1)` with ~500ms for layout/position changes;
+  hover colour/opacity 300ms (never under 200ms). Never a browser-default curve
+  (`ease`, `linear`, `ease-in-out`).
+- Animate only `transform` and `opacity`; never `top`/`left`/`width`/`height`.
+- Respect `prefers-reduced-motion` (replace movement with a plain opacity change).
+- Scroll reveals rise ~32px and fade over 600-800ms, once, via `IntersectionObserver`
+  (never an unthrottled scroll listener).
+- Menu link entrance: items arrive in reading order, each rising ~24px while fading,
+  stepped 60ms apart, capped at 400ms total.
+- Tagline reveal: words go from ~25-35% opacity to full colour one at a time in
+  reading order as each crosses a trigger line (base curve; `IntersectionObserver`
+  per word or an rAF-throttled listener).
+
+## Banned filler words (content realism)
+
+Do not write "revolutionize", "supercharge", "cutting edge", "effortless",
+"transform your workflow", "take it to the next level", "harness the power", or
+"world class". Say what the product does in plain terms. Sentence case for headings
+and buttons; calm, specific system messages.