@topy-ai/maggie 0.8.4 → 0.8.5

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.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.5` — it adopts 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-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,289 @@
+---
+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.0
+---
+
+# 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.
+
+## 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,227 @@
+---
+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.0
+---
+
+# 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.
+
+## 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.5",
   "description": "Install and manage Maggie Skills for AI coding agents",
   "license": "MIT",
   "type": "module",