spirewise 1.7.1 → 1.9.0

package/skills/product-demo-first-design-system/example-page-structures.md

@@ -0,0 +1,95 @@
+# Example Page Structures — Product Demo First
+
+Ready-to-assemble, **demo-first** page blueprints. Each section names a layout (see
+`layout-system.md`) and components (see `component-library.md`). Every page leads with a
+**Demo Hero** and contains **≥3 distinct demo moments**; major feature sections each
+prove the claim with a **Product Frame** / clip / code / before-after. No borders between
+sections (separate by whitespace + alternating panels + the floated frame's shadow).
+
+Legend: `DH-* / F-* / P-* / C-* / Q-* / FT-*` layouts · components by name.
+
+## MANDATORY: 15+ page site map (≈20), 10+ sections/page, clean URLs
+
+Always ship a **full multipage website with 15+ pages (≈20)** — never a single landing
+page. Every page carries **at least 10 sections (≈12)**, **no borders/dividers between
+sections**, pure HTML/CSS/vanilla JS, **extensionless URLs**. Required 20-page map:
+
+```
+/                Home              /customers      Customers
+/platform        Platform          /case-studies   Case Studies
+/solutions       Solutions         /developers     Developers
+/products        Products          /docs           Documentation  ← + DOC-A subpages
+/features        Features          /about          About
+/ai-agents       AI Agents         /careers        Careers
+/enterprise      Enterprise        /blog           Blog           ← + article pages
+/security        Security          /contact        Contact
+/pricing         Pricing           /partners       Partners
+                                   /resources      Resources   /faq  FAQ
+```
+
+Each blueprint below is a **10-section** skeleton — extend toward 12, never fewer than
+10. Every page must include: **Hero (Demo) · Feature Sections (with demos) · Product
+Highlights · Trust Signals · Testimonials · Use Cases · Statistics · Integrations · CTA
+· Footer.**
+
+---
+
+## 1. Home (default)
+1. **Navbar** (glass, dropdowns) — extensionless links
+2. **Demo Hero** `DH-A` — eyebrow · H1 · lead · CTA pair · **big interactive Product
+   Frame** (live demo or autoplay clip) with spotlight  ← demo #1
+3. **Logos Section** — trusted-by row
+4. **Feature Sections** `F-A` alternating — 2–3 feature stories, each with a **Product
+   Frame** showing it  ← demos #2–#4
+5. **Tabbed Feature Demo** `F-B` — one frame, tabs swap capabilities  ← deep demo #5
+6. **Product Highlights** `F-C` bento of demos/metrics
+7. **Statistics** — Trust Section metrics (count-up)
+8. **Testimonials** — featured quote (+ customer result frame)
+9. **Integrations** — app grid + "See all" link
+10. **CTA** `C-A` (with a final mini demo / "try it") + **Footer** `FT-A`
+
+## 2. Platform / Product
+1. Navbar · 2. **Demo Hero** `DH-B` split (copy + live frame) · 3. Feature story `F-A` ·
+4. **Tabbed Feature Demo** `F-B` · 5. **Annotated Walkthrough** `F-E` · 6. **Dashboard
+Preview** (App frame) · 7. Use Cases · 8. **Statistics** · 9. Testimonials · 10. CTA + Footer
+
+## 3. Features
+1. Navbar · 2. Demo Hero · 3.–8. one **Feature + Product Frame** per major capability
+(`F-A` alternating / `F-B` tabbed / `F-D` before-after) · 9. Integrations · 10. CTA + Footer
+
+## 4. Developers / Documentation
+- **Developers:** Navbar · **Demo Hero** with **Code/Terminal Product Frame** · Logos ·
+  **Code Preview** (tabbed) · **Interactive Demo** (mini editor) · Product Highlights ·
+  Use Cases · Statistics · CTA ("Read docs" + "Get API key") · Footer (≥10).
+- **Docs:** Layout `DOC-A` three-pane; inline mono **Code/Terminal** demos in frames;
+  breadcrumb; prev/next.
+
+## 5. Enterprise / Security
+1. Navbar · 2. Demo Hero (outcome-led, demo of admin/SSO) · 3. Logos · 4. Feature `F-A` ·
+5. **Enterprise Section** · 6. **Security Section** · 7. **Statistics**/ROI · 8.
+Testimonials (exec) · 9. CTA `C-B` (demo request form) · 10. Footer
+
+## 6. Pricing
+1. Navbar · 2. Demo Hero (short + plan toggle) · 3. **Pricing** `P-A/P-B` · 4. Feature
+comparison (with mini demos) · 5. **Enterprise** band · 6. Trust Signals · 7. **Statistics**
+· 8. Testimonials · 9. **FAQ** `Q-A` · 10. CTA + Footer
+
+## 7. Content pages (About, Careers, Customers, Case Studies, Blog, Partners, Resources, Contact, FAQ)
+Reach **≥10 sections** by composing: Hero (with a relevant demo/visual) → body sections
+(values/timeline, roles, customer grid with result frames, **case-study walkthroughs**,
+article list, partner tiers, resource cards, contact form) → Trust Signals → Testimonials
+→ Statistics → Integrations → CTA → Footer. Case Studies especially use **Annotated
+Walkthrough** / **Before-After** to show the product's impact.
+
+---
+
+## Assembly notes
+- **Scale is mandatory:** 15+ pages, **≥10 sections each**, **≥3 demos each**. Never a
+  single page or a thin/claim-only page.
+- **Lead with the product** every time (Demo Hero), and prove each major claim with a
+  framed demo. Show, don't tell.
+- **No borders/dividers between sections** — whitespace + alternating panels + the
+  floated Product Frame shadow. One layout + one demo per section.
+- Choose hero by content: live/interactive → `DH-A` centered or `DH-B` split; big visual/
+  video → `DH-C`.
+- Use **real product UI/data** in every frame; never empty/lorem/fake frames or filler.

package/skills/product-demo-first-design-system/layout-system.md

@@ -0,0 +1,76 @@
+# Layout & Grid System — Product Demo First
+
+A 12-column fluid grid + canonical **demo-first** section layouts. Every layout exists
+to frame and spotlight the product. **No borders between sections.**
+
+## Grid
+
+```css
+:root { --grid-cols: 12; --grid-gap: clamp(16px, 2.2vw, 28px); }
+
+.grid { display: grid; gap: var(--grid-gap);
+        grid-template-columns: repeat(var(--grid-cols), 1fr); }
+
+/* Responsive helpers (mobile-first) */
+.cols-1 { grid-template-columns: 1fr; }
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.cols-4 { grid-template-columns: repeat(4, 1fr); }
+.split  { grid-template-columns: 1fr 1.15fr; }   /* copy | demo (demo slightly larger) */
+@media (max-width: 900px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr); } }
+@media (max-width: 820px){ .split { grid-template-columns: 1fr; } }
+@media (max-width: 600px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }
+```
+
+Breakpoints: `sm 480` · `md 768` · `lg 1024` · `xl 1280` · `2xl 1440`. Mobile-first;
+collapse multi-column to single column by `md`. The demo always stays prominent.
+
+## Canonical demo-first section layouts
+
+### Hero layouts (always show the product)
+- **DH-A Centered demo (default):** eyebrow → H1 → short lead → CTA pair → **large
+  centered Product Frame** (interactive demo, video, or crisp screenshot) below, with a
+  `--grad-spotlight` glow. The frame is the biggest element.
+- **DH-B Split demo:** copy + CTAs left (`.split` left), **live Product Frame right** —
+  often an interactive or tabbed demo. Collapses to stacked on `md`.
+- **DH-C Immersive demo:** short copy over/above a **full-bleed product showcase** (big
+  framed app or an autoplay clip) on a `--bg-muted` panel.
+
+### Feature layouts (each proves a claim with a demo)
+- **F-A Alternating feature stories:** copy ↔ **Product Frame**, flipping sides each row
+  — the core demo-first pattern (Linear/Stripe). One feature + one demo per row.
+- **F-B Tabbed feature demo:** left tabs (capabilities) drive one **Product Frame** on
+  the right that swaps content per tab — high-density, very product-led.
+- **F-C Bento of demos:** asymmetric tiles, each a small framed product moment / clip /
+  metric.
+- **F-D Before/After:** a slider or side-by-side framed comparison.
+- **F-E Annotated walkthrough:** one large frame with sequential callouts pointing at UI.
+
+### Pricing / CTA / FAQ / Footer
+- **P-A 3-tier** (middle highlighted) + monthly/annual toggle; **P-B 2-tier + enterprise**.
+- **C-A Centered CTA band** on a soft panel — often with a final mini product frame or a
+  "try it" interactive demo. `--section-y-lg`, no border. **C-B Split CTA** (copy + form).
+- **Q-A Accordion FAQ** (`--container-md`); **Q-B two-column**.
+- **FT-A Mega footer** (brand + 4–6 columns + legal); **FT-B minimal**.
+
+### Dashboard / Docs
+- **D-A Shell:** the product's own app layout (sidebar + top bar + content) — used inside
+  the Product Frame / Dashboard Preview.
+- **DOC-A Three-pane docs:** nav · prose (`--container-md`) · TOC; inline mono Code/
+  Terminal demos; breadcrumb. (Hairlines allowed *within* docs, not between sections.)
+
+## Composition rules
+
+1. **Separate sections by panel + space + frame shadow, NEVER borders.** Alternate
+   `--bg-canvas`/`--bg-muted` (add `.section--muted`); `.section{border:0}`; no `<hr>`.
+2. **Every major section contains a product moment** (frame, clip, code, before/after).
+   Aim for **≥3 distinct demos per page** (hero + features + a deep interactive/video).
+3. **Full-bleed panel, contained content:** sections span edge-to-edge; inner
+   `.container`/`.container--wide` constrains content (wide for big showcases).
+4. **One layout + one demo per section.** Don't stack competing product shots.
+5. **At least 10 sections per page**, and the **site has 15+ pages.** Never thin.
+6. **Rhythm:** Demo Hero → logos/trust → alternating feature demos (F-A) → tabbed deep
+   demo (F-B) → before/after or walkthrough → metrics → testimonials → integrations →
+   pricing → FAQ → CTA (with a final demo) → footer.
+7. **Vertical rhythm** from `--section-y` (+`--frame-lift` around hero frames); horizontal
+   from the 12-col grid. The demo is always the visual anchor.

package/skills/product-demo-first-design-system/motion-system.md

@@ -0,0 +1,82 @@
+# Motion System — Product Demo First
+
+Motion exists to **animate the product** — reveal how it works through tabbed demos,
+autoplay-on-scroll clips, scrubbable walkthroughs, and gentle frame parallax. The page
+itself stays calm. Everything degrades under `prefers-reduced-motion`.
+
+Distilled from Linear/Stripe (tabbed product demos, annotated flows), Vercel/Retool
+(interactive previews), Loom (video storytelling), and OpenAI/Cursor (live code demos).
+
+## Tokens
+
+```css
+:root {
+  --dur-fast: 140ms;   --dur-base: 240ms;  --dur-slow: 380ms;  --dur-slower: 640ms;
+  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);       /* primary — decelerate */
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+}
+```
+
+## Principles
+1. **Animate the product, not the chrome.** The focal motion is inside/around the
+   Product Frame; page sections just fade/rise gently.
+2. **Short + eased** (140–380ms); reserve 640ms for big demo reveals/parallax.
+3. **Move a little:** translate 8–20px, scale 1.0→1.02; the frame can lift/tilt subtly.
+4. **One focal demo animation per viewport.** Don't autoplay five things at once.
+5. **Cheap props only** (`transform`/`opacity`); video/canvas for live demos.
+
+## Patterns (demo-centric)
+
+- **Scroll reveal:** sections/cards start `opacity:0; translateY(18px)` → `.in` via
+  `IntersectionObserver`, `--dur-slow` `--ease-out`, stagger ~70ms. Reveal once.
+- **Frame entrance:** the hero Product Frame rises + scales slightly (1.0→1.0 from 0.98)
+  and the `--grad-spotlight` fades in as it enters.
+- **Autoplay-on-scroll video:** Product-Frame `<video muted loop playsinline>` plays when
+  ≥50% in view, pauses when out; poster shown until play; reduced-motion → poster only.
+- **Tabbed feature demo:** switching a tab cross-fades + slides the Product Frame content
+  (`--dur-base`); active tab indicator slides.
+- **Annotated walkthrough:** callouts reveal sequentially (advance on scroll or prev/next),
+  each with a short connector-line draw; numbers fade in.
+- **Before/After:** draggable handle (pointer + arrow keys); smooth clip-path transition.
+- **Frame parallax/tilt:** hero frame translates a few px slower than scroll, or tilts
+  ≤4° toward the pointer (desktop only; off for touch/reduced motion).
+- **Hover:** card/frame shadow lift (`--shadow-md`→`--shadow-lg`); buttons bg shift +
+  press `translateY(1px)`.
+- **Count-up / typewriter:** metrics count up; terminal types a command (final state in DOM).
+- **Marquee (logos):** slow, linear, pausable.
+
+## Reduced motion (required)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration:.001ms !important;
+    animation-iteration-count:1 !important; transition-duration:.001ms !important;
+    scroll-behavior:auto !important; }
+}
+```
+Under reduced motion: show reveals/frames in final state; **don't autoplay video** (show
+poster); stop parallax/tilt/marquee/typewriter/count-up at final values; tabbed/before-
+after demos still work via clicks/keys without animation.
+
+## Minimal vanilla helpers
+
+```js
+// reveal
+const io = new IntersectionObserver((es)=>es.forEach((e,i)=>{ if(e.isIntersecting){
+  e.target.style.transitionDelay = `${Math.min(i*70,300)}ms`;
+  e.target.classList.add('in'); io.unobserve(e.target);} }, {threshold:.15}));
+document.querySelectorAll('[data-reveal]').forEach(el=>io.observe(el));
+
+// autoplay product video on scroll (respect reduced motion)
+const rm = matchMedia('(prefers-reduced-motion: reduce)').matches;
+const vio = new IntersectionObserver((es)=>es.forEach(e=>{
+  const v=e.target; if(rm) return;
+  if(e.isIntersecting){ v.play?.(); } else { v.pause?.(); }
+}, {threshold:.5}));
+document.querySelectorAll('video[data-demo]').forEach(v=>vio.observe(v));
+```
+```css
+[data-reveal]{ opacity:0; transform: translateY(18px);
+  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
+[data-reveal].in{ opacity:1; transform:none; }
+```

package/skills/product-demo-first-design-system/spacing-system.md

@@ -0,0 +1,74 @@
+# Spacing System — Product Demo First
+
+A strict **4-point base / 8-point rhythm** with generous space — but the priority is
+**room for the product frame to breathe and float**. Sections separate by whitespace,
+panels, and the frame's shadow, never by lines.
+
+## Scale tokens
+
+```css
+:root {
+  /* 4-pt base, 8-pt rhythm */
+  --space-0: 0;        --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
+  --space-4: 16px;     --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
+  --space-10: 40px;    --space-12: 48px; --space-16: 64px; --space-20: 80px;
+  --space-24: 96px;    --space-28: 112px;--space-32: 128px;--space-40: 160px;
+
+  /* Radii — product frames + cards use large corners */
+  --radius-sm: 8px;   --radius-md: 12px; --radius-lg: 16px;
+  --radius-xl: 20px;  --radius-2xl: 28px; --radius-frame: 16px; --radius-pill: 999px;
+
+  /* Containers */
+  --container-sm: 680px;   --container-md: 820px;  --container-lg: 1040px;
+  --container-xl: 1200px;  --container-2xl: 1320px;  /* wide product showcases */
+  --gutter: clamp(20px, 5vw, 48px);
+
+  /* Section rhythm (fluid) — extra top room so the floated frame isn't cramped */
+  --section-y: clamp(72px, 9vw, 136px);
+  --section-y-lg: clamp(100px, 12vw, 184px);  /* hero / big demo sections */
+  --stack: clamp(16px, 2vw, 24px);
+  --frame-lift: clamp(24px, 4vw, 56px);       /* extra space around a floated product frame */
+}
+```
+
+## Usage map
+
+- **4-pt system** (`--space-1..6`): inside components and **inside the product frame**
+  (title bar padding, toolbar gaps, in-app spacing), button padding, badges, list gaps.
+- **8-pt system** (`--space-8..16`): between components — card gaps, copy↔demo gaps,
+  form rows, grid gaps.
+- **Container widths:** copy blocks `--container-md` (820); standard sections
+  `--container-lg/xl`; **wide product showcases** `--container-2xl` (1320) so big
+  framed demos have room.
+- **Section spacing:** `padding-block: var(--section-y)`; hero + big-demo sections use
+  `--section-y-lg`. Add `--frame-lift` margin around a hero product frame so it floats.
+- **Card spacing:** padding `--space-6`–`--space-8`; feature cards `--space-10`.
+- **Grid gaps:** `--space-6`/`--space-8`; demo galleries `--space-5` dense.
+- **Component spacing:** label→control `--space-2`; field→field `--space-5`; group→group `--space-8`.
+- **Page spacing:** sections stack with no extra margins and **no borders/dividers** —
+  `--section-y` padding + alternating panels + the floated frame's shadow separate them.
+
+## Rules
+
+1. **Only use scale values.** No arbitrary `13px`/`27px`.
+2. **Give the product frame air.** Use `--frame-lift` so the floated frame's shadow
+   reads and the demo feels premium; don't crowd it against text or edges.
+3. **Proximity + panels + elevation group meaning.** Section breaks = full `--section-y`
+   + panel color change + frame shadow — never a border.
+4. **Consistent large radii:** inputs/badges `--radius-sm/md`; cards `--radius-lg/xl`;
+   **product frames `--radius-frame`**; modals `--radius-2xl`; pills `--radius-pill`.
+5. **Whitespace > dividers, always.**
+
+## Helpers
+
+```css
+.container { width:100%; max-width: var(--container-xl);
+             margin-inline:auto; padding-inline: var(--gutter); }
+.container--wide   { max-width: var(--container-2xl); }   /* product showcases */
+.container--narrow { max-width: var(--container-md); }
+.section   { padding-block: var(--section-y); border: 0; }       /* never a section border */
+.section--hero, .section--demo { padding-block: var(--section-y-lg); }
+.section--muted { background: var(--bg-muted); }                  /* alternate panel, not a line */
+.frame-wrap { margin-block: var(--frame-lift); }                 /* air around a floated product frame */
+.stack > * + * { margin-top: var(--stack); }
+```

package/skills/product-demo-first-design-system/typography-system.md

@@ -0,0 +1,87 @@
+# Typography System — Product Demo First
+
+Modern, functional grotesk type that orients quickly and stays out of the product's
+way. Headlines are confident but not oversized (the product frame is the biggest visual);
+mono is first-class for code/terminal demos. Fluid scale across breakpoints.
+
+## Fonts
+
+```css
+:root {
+  --font-sans: "Inter", "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont,
+               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: var(--font-sans);          /* or "Geist"/"Inter Tight" for tighter display */
+  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
+}
+```
+Notes:
+- Inter/Geist read as "modern product UI" and pair naturally with framed app
+  screenshots. Mono is used heavily — code previews, terminals, annotations, API copy.
+- Match the page type to the product's own UI font family where possible for cohesion.
+
+## Fluid type scale (clamp)
+
+```css
+:root {
+  --fs-display: clamp(2.5rem, 1.5rem + 4.6vw, 4.5rem);    /* 40 → 72px hero (product still bigger) */
+  --fs-h1:      clamp(2.125rem, 1.5rem + 2.8vw, 3.25rem); /* 34 → 52px */
+  --fs-h2:      clamp(1.625rem, 1.25rem + 1.8vw, 2.375rem);/* 26 → 38px */
+  --fs-h3:      clamp(1.25rem, 1.1rem + 0.9vw, 1.625rem); /* 20 → 26px */
+  --fs-h4:      clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);  /* 17 → 20px */
+  --fs-lead:    clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);/* 17 → 21px intro/subhead */
+  --fs-body:    1rem;          /* 16px base */
+  --fs-body-lg: 1.0625rem;     /* 17px */
+  --fs-small:   0.875rem;      /* 14px caption */
+  --fs-micro:   0.75rem;       /* 12px labels/eyebrow/annotations */
+}
+```
+
+## Roles (each: size · weight · line-height · tracking)
+
+| Role | Size | Weight | Line-height | Tracking | Color |
+|---|---|---|---|---|---|
+| **Display** (hero) | `--fs-display` | 600–700 | 1.05 | -0.02em | `--text-primary` (or `--grad-text` on 1 word) |
+| **H1** | `--fs-h1` | 600–700 | 1.08 | -0.02em | `--text-primary` |
+| **H2** (section) | `--fs-h2` | 600 | 1.12 | -0.015em | `--text-primary` |
+| **H3** | `--fs-h3` | 600 | 1.25 | -0.01em | `--text-primary` |
+| **H4 / overline** | `--fs-h4` | 600 | 1.3 | 0 | `--text-primary` |
+| **Eyebrow / label** | `--fs-micro` | 600 | 1.2 | 0.07em, UPPERCASE | `--accent` or `--text-muted` |
+| **Lead / subhead** | `--fs-lead` | 400 | 1.5 | 0 | `--text-secondary` |
+| **Body** | `--fs-body`/`-lg` | 400 | 1.6 | 0 | `--text-secondary` |
+| **Caption / meta** | `--fs-small` | 400–500 | 1.45 | 0 | `--text-muted` |
+| **Demo annotation** | `--fs-micro`/`--fs-small` | 500–600 | 1.3 | 0 | `--accent-2` / `--frame-text` |
+| **Button** | `--fs-body` (`0.9375rem` compact) | 600 | 1 | -0.005em | `--text-on-accent` / `--text-primary` |
+| **Navigation** | `--fs-small`/`--fs-body` | 500 | 1 | 0 | `--text-secondary` → `--text-primary` |
+| **Pricing amount** | `clamp(2.25rem,1.8rem+2vw,3.25rem)` | 700 | 1 | -0.02em | `--text-primary` |
+| **Code / terminal** | `--fs-small` | 400–500 | 1.6 | 0 | mono, syntax-tinted (in `--frame-text`) |
+
+## Rules
+
+1. **Type orients, product persuades.** Keep hero copy short and scannable so the demo
+   gets the focus; don't let headings out-size the product frame.
+2. **Tighten as it grows;** body stays ~1.6 and 0 tracking. Measure 60–75ch (`max-width: 68ch`).
+3. **Weights:** body 400, UI/emphasis 500–600, headings 600–700.
+4. **One display moment per page** (the hero). Don't oversize every heading.
+5. **Mono is a feature.** Use `--font-mono` for code/terminal demos, inline API tokens,
+   and some annotations — it signals a real developer product.
+6. **Eyebrows** label sections (uppercase, tracked, small, accent/muted) above H2s.
+7. **Annotations** on product frames use small, high-contrast labels (`--accent-2`/white
+   on dark frame) with a connector line/dot — readable at a glance.
+8. **Numbers/metrics** use `font-variant-numeric: tabular-nums`.
+
+## Base CSS
+
+```css
+body { font-family: var(--font-sans); font-size: var(--fs-body);
+       line-height: 1.6; color: var(--text-secondary);
+       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
+h1,h2,h3,h4 { color: var(--text-primary); font-family: var(--font-display);
+              font-weight: 600; text-wrap: balance; letter-spacing: -0.02em; }
+h1 { font-size: var(--fs-h1); line-height: 1.08; }
+.eyebrow { font-size: var(--fs-micro); font-weight:600; letter-spacing:.07em;
+           text-transform:uppercase; color: var(--accent); }
+.lead { font-size: var(--fs-lead); color: var(--text-secondary); max-width: 60ch; }
+a { color: var(--accent); text-underline-offset: 2px; }
+p { max-width: 68ch; }
+code, pre { font-family: var(--font-mono); }
+```

package/skills/product-demo-first-design-system/website-generation-rules.md

@@ -0,0 +1,194 @@
+# Website Generation Rules — Product Demo First
+
+How an agent turns this design system into a **production-ready, multi-page, product-led
+website**. Output clean, semantic **pure HTML + CSS + vanilla JavaScript** plus design
+tokens. The signature: **every page leads with and revolves around a product demo**.
+(The token/spec system can be exported for other agents — see below — but the generated
+website itself is always pure vanilla.)
+
+## Technology stack (MANDATORY — no frameworks, no libraries)
+
+Build everything — including all interactive demos — with **HTML5 + CSS3 + vanilla
+JavaScript only**. The generated site must contain **zero** of:
+
+> ❌ React · ❌ Vue · ❌ Angular · ❌ Svelte/Next/Nuxt · ❌ Bootstrap · ❌ Tailwind ·
+> ❌ jQuery · ❌ any UI library · ❌ any CSS framework · ❌ any JS animation/utility library
+
+No build step, no npm dependencies, no CDN component kits. Product Frames, interactive
+demos, tabbed demos, before/after sliders, autoplay video, code/terminal previews — all
+hand-written with native HTML/CSS/JS (Grid/Flexbox, custom properties,
+`IntersectionObserver`, `<video>`). Exporting `tokens.json` for other agents is allowed;
+shipping the site in a framework is not.
+
+## Mandatory scale & structure (read first)
+- **Multipage: build 15+ pages (recommended ~20)** — a full site map, not one page.
+- **Every page has at least 10 sections (recommend 12)**, each built around a demo/the
+  product where possible.
+- **Demo-first:** every page opens with a **Demo Hero** and has **≥3 distinct demo
+  moments**; major feature sections each prove the claim with a Product Frame / clip /
+  code / before-after.
+- **No borders or dividers between sections** — separate with `--section-y` spacing,
+  alternating panels (`--bg-canvas` ↔ `--bg-muted`), and the floated frame's shadow. In
+  CSS: `.section { border: 0 }`; never `<hr>`/divider or `border-top/bottom` between sections.
+- **Clean, extensionless, Vercel-ready URLs** (`/pricing`, not `/pricing.html`).
+
+## Required pages (build all — 15+; ~20 recommended)
+Home `/` · Platform `/platform` · Solutions `/solutions` · Products `/products` ·
+Features `/features` · AI Agents `/ai-agents` · Enterprise `/enterprise` · Security
+`/security` · Pricing `/pricing` · Customers `/customers` · Case Studies `/case-studies`
+· Developers `/developers` · Documentation `/docs` · About `/about` · Careers `/careers`
+· Blog `/blog` · Contact `/contact` · Partners `/partners` · Resources `/resources` ·
+FAQ `/faq`. Add product/solution/blog/doc subpages freely.
+
+## Required sections (every page — ≥10, recommend 12)
+Hero (Demo Hero) · Feature Sections (with demos) · Product Highlights · Trust Signals
+(logos) · Testimonials · Use Cases · Statistics · Integrations · CTA · Footer. Add more
+(Security, Enterprise, Bento of demos, Tabbed Feature Demo, Before/After, Code/Terminal)
+to reach 12 and fit the page.
+
+## Site types this must support
+Landing pages · startup websites · AI company websites · enterprise SaaS · developer
+platforms · agentic-AI startups · infrastructure startups. (See `example-page-structures.md`.)
+
+## What to generate
+- **HTML** — semantic, accessible, one file per page; product media in **Product Frames**.
+- **CSS** — `tokens.css` (`:root` vars) + `styles.css` (base + components + utilities).
+- **JavaScript** — vanilla, progressive enhancement: nav/dropdown, tabbed demo, before/
+  after slider, autoplay-on-scroll video, interactive demo, reveal, accordion, copy.
+- **`vercel.json`** + **`sitemap.xml`** + **`robots.txt`**.
+- **Design tokens** — `tokens.json` (machine-readable; token export only).
+- **Component specifications** — when asked for the *system*, emit component markup +
+  token usage from `component-library.md` (incl. the Product Frame + demo components).
+- **Accessibility + responsive guidance** inline (comments) and honored.
+
+## File/output layout (default — flat files + clean URLs)
+```
+website/
+├── index.html              # served at /
+├── platform.html  solutions.html  products.html  features.html  ai-agents.html
+├── enterprise.html  security.html  pricing.html  customers.html  case-studies.html
+├── developers.html  docs.html  about.html  careers.html  blog.html  contact.html
+├── partners.html  resources.html  faq.html
+├── css/  { tokens.css, styles.css }
+├── js/   { main.js }        # nav, tabbed demo, before/after, video, reveal, copy
+├── assets/                  # product screenshots, clips (mp4/webm), posters, og images
+├── tokens.json
+├── sitemap.xml  robots.txt
+└── vercel.json
+```
+Alternative: folder-per-page `platform/index.html`. Either way **all internal links are
+extensionless** (`href="/pricing"`).
+
+## Clean URLs & Vercel (MANDATORY)
+- **No `.html` in any URL**, no `page.html` links, no ugly query params.
+- Emit **`vercel.json`** so `.html` is stripped, refresh works, and deep links resolve:
+```json
+{
+  "cleanUrls": true,
+  "trailingSlash": false,
+  "headers": [
+    { "source": "/assets/(.*)", "headers": [
+      { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] }
+  ]
+}
+```
+  `cleanUrls: true` serves `platform.html` at `/platform` and 301-redirects `.html`.
+  Provide a `404.html`. Every nav/footer/internal link is extensionless.
+
+## Navigation system (vanilla JS)
+- **Desktop nav** with **dropdown/mega-menus** (optionally with product thumbnails);
+  keyboard + `aria-expanded`/`aria-haspopup`.
+- **Mobile nav**: full-screen overlay, accordion, focus-trap, ESC.
+- **Multi-level nav** + **breadcrumbs** on deep pages; `aria-current="page"`.
+
+## Hard rules
+1. **Vanilla only** (incl. demos). No frameworks/libraries in the shipped site.
+2. **Demo-first.** Every page leads with a Demo Hero; ≥3 demo moments/page; every major
+   feature section proves the claim with a **Product Frame** (never claim-only).
+3. **Frame all product media** with the Product Frame primitive; no raw images dropped on
+   the page; no empty/lorem/fake frames — use real, specific product UI/data.
+4. **Tokens first, once.** All colors/type/spacing as `:root` vars; no scattered hex/px;
+   rebrand = change `--accent-*`.
+5. **No section borders.** Separate with spacing + panels + frame shadow. `.section{border:0}`.
+6. **Mobile-first + responsive**; multi-column → single column by `md`; no 320px scroll;
+   demos remain usable and prominent on mobile.
+7. **Semantic + accessible** per `accessibility-system.md` (incl. demo a11y: keyboard,
+   captions, reduced-motion, no-JS fallbacks, text equivalents). Non-negotiable.
+8. **Components from the library** (+ demo components). Every component: responsive,
+   accessible, reusable, production-ready, animation-ready.
+9. **Performance:** system/Inter fonts; lazy-load below-the-fold images **and posters**;
+   `<video preload="metadata">`, compressed mp4/webm; animate transform/opacity only;
+   minimal JS, no libraries; target high Lighthouse (90+).
+10. **SEO on every page** (below): unique title/description, OG + Twitter, canonical,
+    JSON-LD, sitemap + robots. Add `VideoObject` JSON-LD for demo videos.
+11. **Self-verify** against anti-patterns + every companion checklist before done.
+
+## SEO requirements (every page)
+Unique `<title>` + meta description (150–160); **Open Graph** + **Twitter card**
+(`summary_large_image`) + OG image; **canonical** (clean URL); **JSON-LD**
+(`Organization` + `WebSite` site-wide; `Product`, `FAQPage`, `BreadcrumbList`, `Article`,
+`VideoObject` where relevant); **`sitemap.xml`** + **`robots.txt`**.
+
+## Performance requirements
+Fast first paint, minimal vanilla JS, optimized/centralized CSS, lazy media + video
+posters, cached assets (via `vercel.json`), no blocking libraries — high Lighthouse.
+
+## Boilerplate `<head>`
+```html
+<!doctype html><html lang="en"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light">
+<title><!-- Page · Brand --></title>
+<meta name="description" content="<!-- 150–160 chars -->">
+<link rel="canonical" href="https://brand.com/path">
+<meta property="og:type" content="website">
+<meta property="og:title" content="<!-- Page · Brand -->">
+<meta property="og:description" content="<!-- … -->">
+<meta property="og:url" content="https://brand.com/path">
+<meta property="og:image" content="https://brand.com/assets/og.png">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="stylesheet" href="/css/tokens.css">
+<link rel="stylesheet" href="/css/styles.css">
+<script type="application/ld+json"><!-- Organization / WebSite JSON-LD --></script>
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+  <header><!-- Navbar (links extensionless: /platform, /pricing) --></header>
+  <main id="main"><!-- Demo Hero + 10–12 sections, ≥3 demos, no dividers --></main>
+  <footer><!-- Footer --></footer>
+  <script src="/js/main.js" defer></script>
+</body></html>
+```
+
+## Required base CSS (no section borders; product floats)
+```css
+html, body { background: var(--bg-page); color: var(--text-secondary); }
+.section { padding-block: var(--section-y); border: 0; }   /* no borders/dividers between sections */
+.section--muted { background: var(--bg-muted); }           /* alternate panels by COLOR, not lines */
+.section + .section { border-top: 0; }                     /* explicitly: no rule between sections */
+/* Separation = whitespace (--section-y) + panel color + the floated Product Frame shadow.
+   Never add <hr> or divider elements between sections. */
+```
+
+## tokens.json shape (excerpt)
+```json
+{
+  "color": { "bg": {"page":"#ffffff","canvas":"#f7f8fa","muted":"#f1f3f7"},
+             "frame": {"bg":"#0e1116","bar":"#171b22","text":"#e6e9ef"},
+             "text": {"primary":"#0b0d12","secondary":"#3c4250","muted":"#697186"},
+             "accent": {"base":"#4f46e5","2":"#06b6d4"} },
+  "space": { "4":"16px","6":"24px","8":"32px","16":"64px" },
+  "radius": { "md":"12px","lg":"16px","xl":"20px","frame":"16px","pill":"999px" },
+  "type": { "display":"clamp(2.5rem,1.5rem + 4.6vw,4.5rem)", "body":"1rem" }
+}
+```
+
+## Definition of done
+**15+ pages (≈20), each with ≥10 sections (≈12) and ≥3 demo moments, every page leading
+with a Demo Hero, all product media in Product Frames, no borders/dividers between
+sections.** Pure HTML/CSS/vanilla JS (no frameworks/libraries); clean extensionless URLs
+with `vercel.json` (refresh + deep links work); desktop dropdown + mobile + breadcrumb
+nav; per-page SEO + sitemap; tokens centralized; fully responsive; AA accessible (incl.
+demo a11y); quiet motion with reduced-motion fallback; high Lighthouse; zero
+anti-patterns; could sit next to Linear/Vercel/Retool without looking out of place.

package/skills/website-design-skills/01-proof/README.md

@@ -1,47 +0,0 @@
-# Proof Designer
-
-A **Website Design System Architect** skill modeled on the live
-[Proof](https://useproof.com/) website — a customer-obsessed, social-proof-driven
-SaaS conversion site.
-
-It makes the agent act as a senior design system architect + frontend engineer
-that designs, documents, enforces, and **generates production-grade websites
-using only HTML, CSS, and JavaScript**, recreating Proof's look and feel.
-
-## What it produces
-
-Writes a complete, token-driven site to `websites/01-proof/`:
-
-- `index.html` — full Proof-style landing page
-- `css/` — `tokens.css`, `base.css`, `components.css`, `utilities.css`
-- `js/main.js` — nav, mobile menu, scroll animations, form validation
-- `design-tokens.json`, `STYLE-GUIDE.md`, `COMPONENTS.md`
-
-## Signature Proof patterns it recreates
-
-- Dark navy conversion hero with white logo, "Welcome to Proof." eyebrow +
-  waving hand, white H1, and an inline **email-capture** form.
-- **Social proof everywhere**: inline activity ("1,000+ people started a free
-  trial…"), floating quote + stat cards, grayscale customer-logo strip, big
-  "25,000+ businesses" stat, single customer quote.
-- 3-up content card grid with wavy text links (Watch / Read / Learn).
-- Signature **wavy/squiggle motifs**, wavy underline links, and diagonal "angle"
-  section dividers.
-- Blue primary CTAs, teal accent, Lato + Droid Serif typography, soft shadows.
-
-## How to use
-
-Ask the agent to "build a site using the Proof design system" or "make a
-Proof-style SaaS landing page." It will build the design system first (tokens →
-components), then pages, then run the accessibility / performance / consistency
-checks — never random designs.
-
-See `SKILL.md` for the full method, design tokens, components, and quality bar.
-
-## Site scope
-
-- **15+ pages**, each with **10+ sections**, all sharing the design system.
-- A **products page** plus a **separate full page per product** (≥6 if count unknown).
-- A `SITEMAP.md` listing every page and its sections.
-
-See `SKILL.md` → "Site scope" for the required page list.