spirewise 1.7.0 → 1.8.0

package/skills/bento-grid-design-system/accessibility-system.md

@@ -0,0 +1,54 @@
+# Accessibility System — Bento Grid
+
+Bento layouts add a11y risk around **reading order, link-wrapped tiles, and dense grids**.
+This system bakes WCAG 2.1 AA into the look, including the tile/grid patterns.
+
+## Color & contrast
+- **Body text ≥ 4.5:1**, large/UI text **≥ 3:1**, on the tile's real surface — check
+  light tiles (`--tile`), accent tiles (`--text-on-accent` on `--grad-accent`), and dark
+  tiles (`--text-on-dark` on `--tile-dark`). Use `--text-secondary`/`--text-muted` for
+  content; never `--text-faint` for real text.
+- **Non-text contrast ≥ 3:1** for tile hairlines that carry meaning, icons, focus rings.
+- **Don't encode meaning in color alone** — status pairs color with an icon/label; the
+  highlighted pricing tile says "Most popular" in text, not just color.
+- **Gradient/low-contrast text banned for body**; `--grad-text` only on large hero display.
+
+## Reading order & structure (key for grids)
+- **DOM order = reading order.** Author tiles in a sensible reading order; `grid-auto-flow:
+  dense` may move tiles *visually*, so verify the DOM order still makes sense (anchor →
+  supporting) for screen readers and keyboard users. Avoid large visual/DOM mismatches.
+- One `<h1>` per page; each tile with a title uses a real heading (`<h3>`/`<h4>`) so the
+  page has a coherent outline. Landmarks: `<header><nav><main id="main"><section><footer>`.
+- A bento that's a list of similar items can be a `<ul>` of `<li>` tiles for semantics.
+
+## Tiles as links/controls
+- A clickable tile should wrap its content in a single `<a href>` (or be a `<button>`),
+  containing a real heading — not a div with a click handler. One primary link per tile
+  (avoid nested interactive elements that confuse focus order).
+- Every interactive tile/element has **visible focus**: `:focus-visible { outline:2px
+  solid var(--ring); outline-offset:2px }`. Never bare `outline:none`.
+- **Keyboard:** all tiles/controls reachable and operable; logical tab order; no traps
+  (except intended modal focus-trap with ESC). **Skip link** to `#main` first in DOM.
+
+## Media & motion
+- Informative tile media has meaningful **`alt`**; decorative visuals (spotlight glows,
+  faint gradients, mock chrome) are `aria-hidden`/`alt=""`.
+- Honor `prefers-reduced-motion` (see motion-system): tiles appear in final state; no
+  spotlight/parallax/marquee; metric count-ups render final value in DOM.
+- No flashing > 3×/sec; no autoplaying audio.
+
+## Forms
+- Programmatic `<label>` per input (placeholders aren't labels); `<fieldset><legend>` for
+  groups; errors in text + `aria-describedby`, focus to first error.
+
+## Touch & responsive
+- **Tap targets ≥ 44×44px** (incl. small tiles acting as links). The grid reflows
+  6→4→2→1 columns; no horizontal scroll at 320px; 200% zoom OK; pinch-zoom not disabled.
+
+## Checklist (run before finishing)
+1. Text/icons meet AA contrast on light, accent, **and** dark tiles.
+2. DOM/reading order is sensible despite `dense` flow; tiles use real headings; landmarks + one H1.
+3. Clickable tiles are real links/buttons wrapping a heading; visible focus; keyboard-complete; skip link.
+4. Informative tile media has alt; decorative hidden; reduced-motion honored.
+5. Labelled, error-accessible forms.
+6. 44px targets; grid reflows to single column at 320px; 200% zoom; zoom not disabled.

package/skills/bento-grid-design-system/color-system.md

@@ -0,0 +1,98 @@
+# Color System — Bento Grid
+
+A versatile palette built around **tiles**: a calm canvas, soft tile surfaces with gentle
+elevation and faint per-tile gradients, one restrained accent, and accessible text. Ships
+**light by default** with a **dark base** included — the bento system works in both.
+Sections separate via panels + grid gaps + tile surfaces — **never borders**. Override
+only `--accent-*` to rebrand. Contrast: body ≥ 4.5:1, large/secondary ≥ 3:1.
+
+## Tokens (`:root`) — light base (default)
+
+```css
+:root {
+  /* ---- Canvas + section panels ---- */
+  --bg-canvas:  #f6f7f9;  /* page background (tiles float on this) */
+  --bg-white:   #ffffff;  /* white section panel */
+  --bg-muted:   #eef0f4;  /* alternate section panel */
+
+  /* ---- Tile surfaces (the bento cards) ---- */
+  --tile:        #ffffff;  /* default tile */
+  --tile-alt:    #f3f5f8;  /* secondary tile (for contrast within a grid) */
+  --tile-accent: #f1f0ff;  /* highlight/CTA tile (accent-tinted) */
+  --tile-dark:   #0e1116;  /* a "dark feature" tile on a light page (media/code) */
+  --tile-glass:  rgba(255,255,255,0.7); /* glass tile (sparingly) */
+
+  /* ---- Text ramp ---- */
+  --text-primary:   #0c0e14;
+  --text-secondary: #3b4250;
+  --text-muted:     #6a7283;
+  --text-faint:     #9aa1b0;  /* decorative/disabled — non-essential only */
+  --text-on-accent: #ffffff;
+  --text-on-dark:   #e7eaf0;  /* text inside --tile-dark */
+
+  /* ---- Borders / hairlines (tile edges/inputs — NOT between sections) ---- */
+  --border-subtle:  rgba(12,14,20,0.06);
+  --border-default: rgba(12,14,20,0.10);
+  --border-strong:  rgba(12,14,20,0.16);
+  --ring:           #6d5efc;  /* focus ring */
+
+  /* ---- Accent ---- */
+  --accent:        #6d5efc;  /* violet-indigo — primary actions/links/highlights */
+  --accent-hover:  #7d70ff;
+  --accent-press:  #5a4ce6;
+  --accent-2:      #18b4c9;  /* teal — secondary highlight */
+  --accent-soft:   rgba(109,94,252,0.10);
+
+  /* ---- Semantic ---- */
+  --success: #1aa35a; --success-soft: rgba(26,163,90,0.12);
+  --warning: #b4690e; --warning-soft: rgba(180,105,14,0.12);
+  --error:   #d92d3c; --error-soft:   rgba(217,45,60,0.12);
+  --info:    #6d5efc; --info-soft:    rgba(109,94,252,0.12);
+
+  /* ---- Gradients (faint, per-tile accents) ---- */
+  --grad-tile:     linear-gradient(160deg, #ffffff 0%, #f3f2ff 100%); /* subtle tile sheen */
+  --grad-accent:   linear-gradient(135deg, #6d5efc 0%, #18b4c9 100%); /* accent/CTA tile */
+  --grad-spot:     radial-gradient(70% 80% at 30% 0%, rgba(109,94,252,0.14) 0%, transparent 60%);
+  --grad-text:     linear-gradient(90deg, #0c0e14 0%, #6d5efc 100%);
+
+  /* ---- Elevation (tiles float gently) ---- */
+  --shadow-sm: 0 1px 2px rgba(12,14,20,0.05);
+  --shadow-md: 0 8px 24px rgba(12,14,20,0.08);
+  --shadow-lg: 0 24px 56px rgba(12,14,20,0.12);
+  --shadow-tile: 0 2px 6px rgba(12,14,20,0.05), 0 16px 40px rgba(12,14,20,0.06);
+}
+```
+
+## Palette roles
+
+- **Canvas + panels** (`--bg-*`): full-bleed section fills; alternate `--bg-canvas`/
+  `--bg-muted`/white between sections to separate by color — **never a border**.
+- **Tile surfaces** (`--tile*`): the bento cards. Mix `--tile`, `--tile-alt`, an
+  accent-tinted `--tile-accent`, and an occasional **dark feature tile** (`--tile-dark`
+  with `--text-on-dark`) to vary the grid. All use `--shadow-tile` + large radius.
+- **Text** (`--text-*`): primary tile titles, secondary tile body, muted meta. Use
+  `--text-on-dark` inside dark tiles. Never `--text-faint` for real content.
+- **Borders** (`--border-*`): hairline tile edges/inputs only — not section dividers.
+- **Accent** (`--accent*`): primary CTA, links, and 1–2 highlight tiles per section
+  (e.g., the CTA tile via `--grad-accent`). `--accent-2` for secondary highlights.
+- **Gradients** (`--grad-*`): `--grad-tile` as a faint sheen on a few tiles; `--grad-spot`
+  behind a hero bento; `--grad-accent` on the CTA/highlight tile; `--grad-text` on one
+  hero phrase. Subtle, not on every tile.
+- **Success / Warning / Error / Info**: status, badges, validation only.
+
+## Usage rules
+
+1. **Vary tiles, not chaos.** Within a grid, alternate `--tile`/`--tile-alt` and add **one**
+   accent or dark tile for focus — keep it cohesive.
+2. **Separate sections with panels + gaps + tile surfaces, not lines.** Mandatory.
+3. **Faint gradients only.** At most a couple of subtly-gradient tiles per section; never
+   rainbow or every-tile-gradient (anti-pattern).
+4. **Consistent elevation/radius** across tiles so the grid reads as one set.
+5. **Check contrast** on light tiles, accent tiles, and dark tiles (`--text-on-dark`).
+
+## Optional dark base
+
+`[data-theme="dark"]`: `--bg-canvas:#070809; --bg-white:#0e1014; --bg-muted:#14171d;
+--tile:#12151c; --tile-alt:#0e1116; --tile-accent:#171a2e; --text-primary:#f4f6fb;
+--text-secondary:#c4cad6; --text-muted:#8a92a6; --accent:#8b7bff;` and re-verify
+contrast. Bento works equally well dark; **light is the default identity.**

package/skills/bento-grid-design-system/component-library.md

@@ -0,0 +1,138 @@
+# Component Library — Bento Grid
+
+Specs for the 17 required components **plus the Bento Grid engine and Bento Tile
+variants** that define this system. Each: purpose, anatomy, tokens, states, responsive +
+a11y. Semantic HTML; shared tokens; **no borders between sections** (tile surfaces +
+grid gaps separate ideas; whitespace/panels separate sections).
+
+Shared primitives:
+
+```css
+.btn { display:inline-flex; align-items:center; gap: var(--space-2);
+  font-weight:600; font-size:.9375rem; padding: var(--space-3) var(--space-6);
+  border-radius: var(--radius-pill); border:1px solid transparent; cursor:pointer;
+  transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
+.btn:active { transform: translateY(1px); }
+.btn-primary { background: var(--accent); color: var(--text-on-accent); }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-secondary { background: var(--tile-alt); color: var(--text-primary);
+  border-color: var(--border-default); }
+:where(a,button,input,[tabindex]):focus-visible { outline:2px solid var(--ring);
+  outline-offset:2px; border-radius: var(--radius-sm); }
+```
+
+## ★ Bento Grid (the signature) — see layout-system for the engine
+```css
+.bento { display:grid; grid-template-columns:repeat(6,1fr);
+  grid-auto-rows:var(--bento-row); gap:var(--bento-gap); grid-auto-flow:dense; }
+.tile { background: var(--tile); border:1px solid var(--border-subtle);
+  border-radius: var(--radius-tile); padding: var(--tile-pad);
+  box-shadow: var(--shadow-tile); display:flex; flex-direction:column; gap: var(--stack);
+  position:relative; overflow:hidden; transition: transform .2s ease, box-shadow .2s ease; }
+.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
+.tile--alt { background: var(--tile-alt); }
+.tile--accent { background: var(--grad-accent); color: var(--text-on-accent); }
+.tile--dark { background: var(--tile-dark); color: var(--text-on-dark); }
+.tile--glass { background: var(--tile-glass); backdrop-filter: blur(12px); }
+```
+Each section's bento has **one anchor tile + varied-span supporting tiles**, one idea per
+tile, mixed content types. Tiles are keyboard/focus accessible if interactive
+(link-wrapped tile → `<a class="tile">` with a real heading inside).
+
+## ★ Bento Tile variants
+- **Feature tile** — icon + title + short body (+ optional mini visual). The workhorse.
+- **Metric tile** — big tabular-nums number + label (stat).
+- **Media tile** — image/clip filling the tile (`object-fit:cover`), title overlaid.
+- **Code tile** — `--tile-dark`, mono snippet + filename/copy (a mini Code Preview).
+- **Quote tile** — short testimonial + avatar/name (a mini testimonial).
+- **Integration tile** — a logo + name (small `t-1x1`/`t-2x1`).
+- **CTA tile** — `--tile--accent` with headline + button (the section's primary action).
+- **List tile** — a compact checklist (e.g., "What's included").
+
+---
+
+## 1. Navbar (+ dropdown/mega-menu + breadcrumb)
+Sticky glass bar. Logo · nav links · primary CTA + "Sign in" · mobile hamburger.
+**Extensionless hrefs** (`/platform`). **Dropdown/mega-menu** (vanilla JS) opens a
+multi-column panel — itself often a mini bento of link tiles. Mobile: full-screen
+overlay, accordion, focus-trap, ESC. **Breadcrumb** on deep pages. a11y:
+`aria-haspopup/expanded`, `aria-current="page"`.
+
+## 2. Hero
+Layout HB-A (hero bento) or HB-B (split + bento). Eyebrow · H1 (optional `--grad-text`
+on one word) · lead · CTA pair, plus a **bento** of an anchor tile (product/headline) +
+small stat/logo/CTA tiles. One H1, one primary CTA. `--grad-spot` behind. Decorative glow `aria-hidden`.
+
+## 3. Feature Grid → **Capabilities bento**
+Layout FB-A/FB-B. A bento of **Feature tiles** with one anchor feature (`t-3x2`) and
+supporting tiles of mixed content. Hover lift. This is the core feature section.
+
+## 4. Bento Grid (component)
+The reusable grid + tile set above — used by most sections. Always anchor + varied spans,
+one idea per tile, real content (no empty/filler tiles).
+
+## 5. Testimonials
+**Quote tiles** in a bento (one large featured quote `t-3x2` + small quote tiles), or a
+3-up quote grid. `<blockquote>` + `<cite>`; carousel optional with prev/next.
+
+## 6. Logos Section → **Logo bento**
+Integration/customer logos as small **Integration tiles** + one "why teams choose us"
+anchor tile; or a simple monochrome logo row. Logos `<img alt="Company">`.
+
+## 7. Pricing
+Layout P-A/P-B. Tiers as tiles (price tabular-nums, feature list, CTA); highlighted tier
+`--tile--accent`/ring + "Most popular"; monthly/annual toggle. a11y: real `role="switch"`/radio.
+
+## 8. FAQ
+Accordion (Q-A) or **FAQ-as-tiles** (Q-B: each Q/A a tile). Accordion: `<button>` +
+collapsible answer, height/opacity animation. a11y: `aria-expanded`/`aria-controls`.
+
+## 9. CTA → **CTA tile band**
+A prominent **CTA tile** (`--tile--accent`, `--grad-accent`) with headline + primary
+button (+ secondary text link), full-width or anchoring a small bento. `--section-y-lg`, no border.
+
+## 10. Footer
+FT-A: brand · 4–6 link columns · legal · locale/social. Muted text, generous space, soft
+panel; columns can be light tiles. `<footer>`, `<nav>` link lists.
+
+## 11. Dashboard Preview
+A product screenshot/app shell inside a large **Media/Dashboard tile** (anchor), with
+real-looking data, soft elevation, optional parallax. Decorative → `aria-hidden`;
+informative → alt text.
+
+## 12. Agent Workflow Section
+Steps as connected tiles (Plan → Retrieve → Act → Verify), or one anchor tile showing the
+agent + small step tiles. Animate sequential reveal. a11y: `<ol>` text equivalent.
+
+## 13. Code Preview → **Code tile**
+`--tile--dark` mono snippet with filename tab + copy button (+ optional language tabs).
+Low-saturation syntax tint. `<pre><code>`; copy `aria-label`.
+
+## 14. Terminal Preview
+A dark **Code tile** styled as a terminal (header + prompt lines; optional typewriter →
+final state under reduced motion). Real text, not an image.
+
+## 15. Trust Section → **Stat bento**
+**Metric tiles** (big tabular-nums numbers + muted labels; count-up on reveal, final
+value in DOM) + one wide quote/logo band tile (`t-6x1`). Accent on numbers only.
+
+## 16. Security Section
+Compliance badges (SOC 2/ISO/GDPR/HIPAA) + assurances (encryption, SSO/SAML, audit logs)
+as small **List/Feature tiles** + a "Read security docs" link. Badges have alt text.
+
+## 17. Enterprise Section
+"Built for enterprise" bento: SSO/RBAC/SLAs/VPC value props as tiles + a "Talk to sales"
+**CTA tile** + optional logo bento. Soft panels, no border.
+
+---
+
+## Component rules
+- **Bento-first:** prefer composing sections as bentos with an anchor + varied spans;
+  one idea per tile; vary content types; never empty/filler tiles.
+- Compose from shared `.btn`/`.tile`/tokens — no bespoke colors/radii per component.
+- Every interactive tile/element has hover **and** `:focus-visible`; link-tiles wrap a
+  real heading; tiles are keyboard navigable.
+- Every component reflows to fewer columns / single column by `md`/`sm` (grid engine).
+- Decorative visuals `aria-hidden`; informative tile media has meaningful `alt`.
+- Restraint: ≤ a couple of subtly-gradient/accent tiles per section; hairlines only on
+  tiles/inputs — **never between page sections**.

package/skills/bento-grid-design-system/design-principles.md

@@ -0,0 +1,72 @@
+# Design Principles — Bento Grid
+
+The philosophy distilled from bento-led leaders (Apple product pages, Linear, Vercel,
+Raycast, Resend, Notion) and modern AI sites (OpenAI, Anthropic, Perplexity, Cursor).
+
+## The one-sentence philosophy
+
+**Package every idea into a tile.** A bento page is a designed mosaic of self-contained
+cards of varied size — each holding one thought — arranged so the page reads as a clean,
+scannable, premium box of modules.
+
+## Core principles
+
+1. **Bento as the default layout.** Prefer an asymmetric grid of tiles over plain
+   stacked rows. Most sections are a bento grid.
+2. **One idea per tile.** A tile holds a single, complete thought (feature + visual,
+   metric, quote, code, media, integration). If a tile says two things, split it.
+3. **Span = importance.** Bigger tiles carry the more important idea; small tiles carry
+   supporting facts. Every section has **one anchor tile** that dominates.
+4. **Varied spans, intentional rhythm.** Mix 1×1, 2×1, 1×2, 2×2 tiles into a balanced
+   composition — never a monotonous uniform grid, never random chaos.
+5. **The grid replaces dividers.** Separation between ideas comes from grid gaps and
+   tile surfaces; separation between **sections** comes from whitespace and panels —
+   **never borders**.
+6. **Calm canvas, characterful tiles.** The page is quiet; each tile can carry its own
+   small personality (a faint gradient, an icon, a mini visual) without overwhelming.
+7. **Soft, rounded, elevated.** Large radii + gentle elevation make tiles feel tactile
+   and modern (Apple bento). Consistent radius/shadow across all tiles.
+8. **Scannable first, deep second.** A visitor should grasp a section by skimming tile
+   titles; detail lives inside the tile for those who look closer.
+9. **Quiet motion brings tiles alive.** Staggered reveals, subtle hover lift, optional
+   pointer spotlight — motion animates tiles, not the page. Honor `prefers-reduced-motion`.
+10. **Consistency over novelty.** Reuse tile variants + tokens everywhere; a coherent
+    tile system beats bespoke one-offs.
+
+## Visual-hierarchy laws
+
+- **One H1 per page.** Within a bento section, the **anchor tile** is the focal point.
+- **Size + position = hierarchy:** the largest/top-left-ish tile reads first; arrange so
+  the eye flows anchor → supporting tiles.
+- **Contrast ladder:** primary text, secondary, muted — readable (AA). Tile titles are
+  primary; tile body secondary; tile meta muted.
+- **One primary CTA per viewport**, often as its own accent **CTA tile** within the grid.
+- **Group by the grid + tile surface**, not by boxes/borders around sections.
+- **Accent = importance.** Reserve the accent for the primary action and 1–2 highlight
+  tiles per section — not every tile.
+
+## Bento composition recipes
+
+- **Anchor + satellites:** one 2×2 (or 2×1) anchor + four 1×1 tiles around it.
+- **Feature trio + wide stat:** three 1×1 feature tiles + one 3×1 metric/quote band.
+- **Hero bento:** big 2×2 product/headline tile + small tiles (stat, logo, CTA) beside.
+- **Mosaic:** 6–9 tiles of mixed spans for a dense capabilities overview.
+- Keep one clear anchor per recipe; vary tile content types (text, media, metric, code).
+
+## Reference cues (what each does well)
+
+- **Apple (product bento):** rounded elevated tiles, big anchor + small detail tiles,
+  generous gaps, calm background.
+- **Linear / Raycast:** dark bento of feature tiles with subtle gradients + mini visuals.
+- **Vercel / Resend:** crisp modular tiles mixing code, metrics, and product shots.
+- **Notion / Cron:** friendly rounded tiles, clear one-idea-per-tile structure.
+
+## Do / Don't
+
+**Do:** design the grid (anchor + varied spans) · one idea per tile · consistent radius/
+elevation · mix content types across tiles · calm canvas · one accent · gaps + panels to
+separate · real tile content · graceful mobile reflow.
+
+**Don't:** monotonous uniform grids with no anchor · empty/filler tiles · two ideas in
+one tile · borders between sections · heavy gradients on every tile · glass overload ·
+tiny low-contrast text · motion that distracts · stock "AI brain" clichés.

package/skills/bento-grid-design-system/example-page-structures.md

@@ -0,0 +1,91 @@
+# Example Page Structures — Bento Grid
+
+Ready-to-assemble, **bento-led** page blueprints. Each section names a layout (see
+`layout-system.md`) and components/tiles (see `component-library.md`). Most sections are
+bento grids with **one anchor tile + varied-span supporting tiles**, one idea per tile.
+No borders between sections (separate by whitespace + alternating panels + tile surfaces).
+
+Legend: `HB-* / FB-* / MB-* / P-* / C-* / Q-* / FT-*` layouts · tiles/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 (bento) · Feature Sections (bento) · Product
+Highlights · Trust Signals · Testimonials · Use Cases · Statistics (stat bento) ·
+Integrations · CTA (CTA tile) · Footer.**
+
+---
+
+## 1. Home (default)
+1. **Navbar** (glass, dropdowns) — extensionless links
+2. **Hero bento** `HB-A` — anchor tile (H1 + product/headline) + stat tile + logo tile + **CTA tile**
+3. **Logo bento** `MB-B` — trusted-by logos as tiles
+4. **Capabilities bento** `FB-A` — anchor feature `t-3x2` + supporting feature tiles  (core)
+5. **Anchor + satellites** `FB-B` — a second capability cluster (different content mix)
+6. **Stat bento** `MB-A` — metric tiles + wide quote band
+7. **Testimonials** — featured quote tile + small quote tiles
+8. **Integrations bento** — integration tiles + "why" anchor tile
+9. **Pricing** `P-A` (or teaser) — tiers as tiles
+10. **CTA tile band** `C-A` + **Footer** `FT-A`
+
+## 2. Platform / Product
+1. Navbar · 2. **Hero bento** `HB-B` · 3. **Capabilities bento** `FB-A` · 4. **Dashboard
+tile** (anchor media) · 5. **Anchor + satellites** `FB-B` · 6. **Code tile** bento · 7.
+Use Cases bento · 8. **Stat bento** · 9. Testimonials · 10. CTA tile + Footer
+
+## 3. Features
+1. Navbar · 2. Hero bento · 3.–8. several **capabilities bentos** (`FB-A`/`FB-B`), each a
+different anchor feature + supporting tiles (vary text/media/metric/code tiles) · 9.
+Integrations bento · 10. CTA tile + Footer
+
+## 4. Developers / Documentation
+- **Developers:** Navbar · **Hero bento** with **Code/Terminal tile** anchor · Logo bento
+  · **Code tile** bento (SDK snippets) · Capabilities bento · Use Cases · Stat bento · CTA
+  tile ("Read docs" + "Get API key") · Footer (≥10).
+- **Docs:** Layout `DOC-A` three-pane; callouts as tiles; inline Code tiles; breadcrumb.
+
+## 5. Enterprise / Security
+1. Navbar · 2. Hero bento (outcome-led) · 3. Logo bento · 4. Capabilities bento · 5.
+**Enterprise bento** (SSO/RBAC/SLAs/VPC tiles + CTA tile) · 6. **Security** (compliance
+tiles) · 7. **Stat bento**/ROI · 8. Testimonials (exec) · 9. CTA tile (demo/contact) · 10. Footer
+
+## 6. Pricing
+1. Navbar · 2. Hero (short + toggle) · 3. **Pricing** `P-A/P-B` tiles · 4. Feature
+comparison (bento of "what's included" tiles) · 5. **Enterprise** band tile · 6. Logo
+bento · 7. **Stat bento** · 8. Testimonials · 9. **FAQ-as-tiles** `Q-B` · 10. CTA tile + Footer
+
+## 7. Content pages (About, Careers, Customers, Case Studies, Blog, Partners, Resources, Contact, FAQ)
+Reach **≥10 sections** by composing bentos: Hero bento → body bentos (values tiles,
+timeline, open-role tiles, customer-logo bento, case-study anchor + result tiles, article
+tiles, partner-tier tiles, resource tiles, contact form) → Trust Signals → Testimonials →
+Stat bento → Integrations → CTA tile → Footer.
+
+---
+
+## Assembly notes
+- **Scale is mandatory:** 15+ pages, **≥10 sections each**, **most as bento grids**. Never
+  a single page, a thin page, or a monotonous uniform grid.
+- **Every bento has one anchor tile + varied spans**, one idea per tile, mixed content
+  types, **real content** (no empty/filler tiles).
+- **No borders/dividers between sections** — whitespace + alternating panels + tile
+  surfaces. One bento (one theme) per section.
+- Vary the content types across tiles (text, media, metric, code, quote, logo, CTA) so
+  each grid feels rich, not repetitive.
+- Reflow gracefully: 6→4→2→1 columns; spanning tiles collapse predictably on mobile.

package/skills/bento-grid-design-system/layout-system.md

@@ -0,0 +1,93 @@
+# Layout & Grid System — Bento Grid
+
+The heart of this system: a **bento grid engine** (CSS Grid, no libraries) plus the
+canonical bento section layouts. Tiles span columns/rows; the grid reflows gracefully.
+**No borders between sections.**
+
+## Bento grid engine
+
+A 12-ish column grid where tiles claim spans. Use a 6-column desktop grid (clean for
+1–6 spans) with `grid-auto-flow: dense` to pack tiles.
+
+```css
+.bento {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: var(--bento-row);
+  gap: var(--bento-gap);
+  grid-auto-flow: dense;
+}
+/* Span utilities (col x row) */
+.t-2x1 { grid-column: span 2; }                 /* small wide */
+.t-3x1 { grid-column: span 3; }                 /* half-width band */
+.t-2x2 { grid-column: span 2; grid-row: span 2; }/* square anchor */
+.t-3x2 { grid-column: span 3; grid-row: span 2; }/* large anchor */
+.t-4x2 { grid-column: span 4; grid-row: span 2; }/* hero anchor */
+.t-6x1 { grid-column: span 6; }                 /* full-width band */
+.t-1x1 { grid-column: span 1; }                 /* small (rare on 6-col) */
+
+/* Tablet → 4 columns, Mobile → 2 then 1 */
+@media (max-width: 1024px){
+  .bento { grid-template-columns: repeat(4, 1fr); }
+  .t-4x2,.t-3x2,.t-6x1 { grid-column: span 4; }
+  .t-3x1 { grid-column: span 2; }
+}
+@media (max-width: 680px){
+  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
+  .t-2x2,.t-3x2,.t-4x2,.t-6x1,.t-3x1 { grid-column: span 2; grid-row: auto; }
+  .t-2x1,.t-1x1 { grid-column: span 1; }
+}
+@media (max-width: 460px){
+  .bento { grid-template-columns: 1fr; }
+  .bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
+}
+```
+
+**Rule:** every bento section has **one anchor tile** (`t-3x2`/`t-4x2`/`t-2x2`) plus
+varied supporting spans. Use `dense` flow so smaller tiles fill gaps tidily.
+
+## Canonical bento section layouts
+
+### Hero
+- **HB-A Hero bento (default):** a big **anchor tile** (`t-4x2`, the headline/product)
+  + small tiles (a stat, a logo strip, a "Get started" **CTA tile**) filling the row.
+- **HB-B Hero split + bento:** centered eyebrow→H1→lead→CTA on top, then a bento row of
+  feature/metric tiles below.
+
+### Feature
+- **FB-A Capabilities bento:** 6–9 feature tiles of mixed spans; one `t-3x2` anchor
+  feature + small feature tiles; vary content (text, mini visual, code, metric).
+- **FB-B Anchor + satellites:** one `t-2x2`/`t-3x2` anchor + four `t-2x1`/`t-1x1` tiles.
+- **FB-C Alternating bentos:** stacked bento rows, each led by a different anchor.
+
+### Metrics / Social proof
+- **MB-A Stat bento:** 3–4 metric tiles + one wide quote/logo band (`t-6x1`).
+- **MB-B Logo bento:** integration/customer logos as small tiles + one "why" anchor tile.
+
+### Pricing / CTA / FAQ / Footer
+- **P-A 3-tier** (middle highlighted) — tiers as tiles; toggle above. **P-B 2-tier +
+  enterprise** band tile.
+- **C-A CTA tile band:** a full-width accent **CTA tile** (`--grad-accent`) inside a
+  section, or a small bento ending with a prominent CTA tile. `--section-y-lg`, no border.
+- **Q-A Accordion FAQ** (`--container-md`) or **Q-B FAQ-as-tiles** (each Q/A a tile).
+- **FT-A Mega footer** (brand + 4–6 link columns + legal); **FT-B minimal**.
+
+### Dashboard / Docs
+- **D-A Dashboard tile:** a product screenshot/app shell inside a large anchor tile.
+- **DOC-A Three-pane docs:** nav · prose (`--container-md`) · TOC; callouts can be tiles.
+
+## Composition rules
+
+1. **Separate sections by panel + space, NEVER borders.** Alternate `--bg-canvas`/
+   `--bg-muted`/white; `.section{border:0}`; no `<hr>`. Tiles' own surfaces handle
+   *intra*-section separation.
+2. **Every bento has one anchor tile + varied spans.** No monotonous uniform grids; no
+   empty/filler tiles. One idea per tile.
+3. **Vary tile content types** across a grid (text, media, metric, code, quote, logo, CTA).
+4. **Full-bleed panel, contained grid:** sections span edge-to-edge; inner `.container`/
+   `.container--wide` constrains the bento.
+5. **At least 10 sections per page**, and **15+ pages**; most sections are bentos. Never thin.
+6. **Rhythm:** Hero bento → logos/trust → capabilities bento → metrics bento →
+   testimonials → integrations bento → pricing → FAQ → CTA tile → footer.
+7. **Reflow gracefully:** 6→4→2→1 columns; spanning tiles collapse predictably (engine
+   above). The mosaic stays tidy at every breakpoint.

package/skills/bento-grid-design-system/motion-system.md

@@ -0,0 +1,81 @@
+# Motion System — Bento Grid
+
+Motion brings the **tiles** to life: staggered reveals as a grid scrolls in, subtle hover
+lift, an optional pointer spotlight, and small in-tile content micro-interactions. The
+page stays calm; tiles do the moving. Everything degrades under `prefers-reduced-motion`.
+
+Distilled from Apple bento reveals, Linear/Raycast tile hovers, and OpenAI/Anthropic/
+Perplexity/Cursor restraint.
+
+## Tokens
+
+```css
+:root {
+  --dur-fast: 140ms;   --dur-base: 240ms;  --dur-slow: 380ms;  --dur-slower: 620ms;
+  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+}
+```
+
+## Principles
+1. **Animate tiles, not the page.** Focal motion is the grid revealing + tile hovers.
+2. **Short + eased** (140–380ms); reserve 620ms for big anchor-tile reveals.
+3. **Move a little:** translate 8–18px, hover lift 2–3px, scale ≤1.02.
+4. **One focal animation per viewport.** Stagger, don't stampede.
+5. **Cheap props only** (`transform`/`opacity`).
+
+## Patterns (tile-centric)
+
+- **Grid reveal (signature):** tiles start `opacity:0; translateY(16px)` → `.in` via
+  `IntersectionObserver`, `--dur-slow` `--ease-out`, **staggered ~60–80ms** in DOM order
+  so the bento assembles. Reveal once.
+- **Tile hover:** `translateY(-3px)` + shadow `--shadow-tile`→`--shadow-lg` + a faint
+  `--grad-tile`/`--grad-spot` brighten over `--dur-base`. Anchor/media tiles can scale
+  inner media 1.0→1.03.
+- **Pointer spotlight (optional):** a soft radial glow follows the cursor inside a tile
+  (CSS custom props updated on `pointermove`); desktop only, off for touch/reduced motion.
+- **In-tile micro-interactions:** copy-button check swap, toggle slide, number count-up
+  on a metric tile, code-tile cursor blink, small chart draw.
+- **CTA tile pulse:** a very subtle one-time glow on the accent CTA tile when revealed.
+- **Nav on scroll:** glass blur + faint shadow after ~24px scroll.
+- **Section/page transitions:** soft cross-fade + small rise; no harsh wipes.
+- **Marquee (logo bento):** slow, linear, pausable, duplicated track.
+
+## 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: tiles appear in final state immediately; disable spotlight/parallax/
+marquee/typewriter; metric tiles show final value (count-up skipped). Hover lift may stay
+(it's instant) but no large transforms.
+
+## Minimal vanilla helpers
+
+```js
+// staggered bento reveal
+const io = new IntersectionObserver((es)=>es.forEach((e,i)=>{ if(e.isIntersecting){
+  e.target.style.transitionDelay = `${Math.min(i*70, 320)}ms`;
+  e.target.classList.add('in'); io.unobserve(e.target);} }, {threshold:.15}));
+document.querySelectorAll('.bento > .tile').forEach(t=>{ t.setAttribute('data-reveal',''); io.observe(t); });
+
+// optional pointer spotlight
+document.querySelectorAll('.tile[data-spot]').forEach(t=>{
+  t.addEventListener('pointermove', e=>{ const r=t.getBoundingClientRect();
+    t.style.setProperty('--mx', `${e.clientX-r.left}px`);
+    t.style.setProperty('--my', `${e.clientY-r.top}px`); });
+});
+```
+```css
+[data-reveal]{ opacity:0; transform: translateY(16px);
+  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
+[data-reveal].in{ opacity:1; transform:none; }
+.tile[data-spot]::before{ content:""; position:absolute; inset:0; pointer-events:none;
+  background: radial-gradient(180px 180px at var(--mx) var(--my), var(--accent-soft), transparent 60%);
+  opacity:0; transition: opacity var(--dur-base) ease; }
+.tile[data-spot]:hover::before{ opacity:1; }
+```