spirewise 1.7.1 → 1.8.0

package/skills/apple-premium-minimal-design-system/spacing-system.md

@@ -0,0 +1,73 @@
+# Spacing System — Apple Premium Minimal
+
+A strict **4-point base / 8-point rhythm** with **extra-generous whitespace** — the
+single biggest signal of premium minimal design. Sections breathe; content groups by
+proximity and soft panels, 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 — Apple uses large, soft corners */
+  --radius-sm: 10px;  --radius-md: 14px; --radius-lg: 18px;
+  --radius-xl: 24px;  --radius-2xl: 32px; --radius-pill: 980px;
+
+  /* Containers */
+  --container-sm: 692px;   --container-md: 820px;  --container-lg: 980px;
+  --container-xl: 1120px;  --container-2xl: 1280px;
+  --gutter: clamp(22px, 5vw, 48px);   /* page side padding */
+
+  /* Section rhythm (fluid, generous) */
+  --section-y: clamp(72px, 9vw, 140px);    /* vertical padding per section */
+  --section-y-lg: clamp(104px, 13vw, 200px);/* hero / major sections */
+  --stack: clamp(16px, 2vw, 24px);          /* gap between stacked elements */
+}
+```
+
+## Usage map
+
+- **4-pt system** (`--space-1..6`): inside components — icon↔label, input padding,
+  badge padding, button padding (`--space-3 --space-6`, pill), list-item gaps.
+- **8-pt system** (`--space-8..16`): between components — card internal gaps, form
+  rows, header↔body, gaps within a card grid.
+- **Container widths:** Apple-style content is fairly narrow and centered — marketing
+  content `--container-lg` (980) to `--container-xl` (1120); wide galleries
+  `--container-2xl` (1280); long-form/docs prose `--container-md` (820).
+- **Section spacing:** every section gets `padding-block: var(--section-y)`; hero and
+  final CTA use `--section-y-lg`. This generous rhythm is the premium feel.
+- **Card spacing:** padding `--space-8` (32) default, `--space-10` (40) feature cards;
+  internal `--stack` between elements.
+- **Grid gaps:** `--space-6`/`--space-8` (24–32) default; `--space-5` (20) dense grids.
+- **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 white/`--bg-muted` panels separate them.
+
+## Rules
+
+1. **Only use scale values.** No arbitrary `13px`/`27px`; pick the nearest token.
+2. **Bigger viewport → much more space.** The fluid `clamp()` tokens scale section
+   padding up on desktop generously (premium minimal needs more air than usual).
+3. **Proximity + panels group meaning.** Related items get small gaps; section breaks
+   get a full `--section-y` plus a soft panel color change — never a border.
+4. **Consistent large radii by elevation:** inputs/badges `--radius-sm/md`; cards
+   `--radius-lg/xl`; modals/feature panels `--radius-2xl`; pills/buttons `--radius-pill`.
+5. **Whitespace > dividers, always.** Separate with space and panel color, not lines.
+
+## Helpers
+
+```css
+.container { width:100%; max-width: var(--container-xl);
+             margin-inline:auto; padding-inline: var(--gutter); }
+.container--narrow { max-width: var(--container-md); }
+.section   { padding-block: var(--section-y); border: 0; }   /* never a section border */
+.section--hero, .section--cta { padding-block: var(--section-y-lg); }
+.section--muted { background: var(--bg-muted); }             /* alternate panel, not a line */
+.stack > * + * { margin-top: var(--stack); }                 /* vertical rhythm utility */
+```

package/skills/apple-premium-minimal-design-system/typography-system.md

@@ -0,0 +1,86 @@
+# Typography System — Apple Premium Minimal
+
+Big, tight, semibold headlines + a clean, comfortable body ramp carry the design.
+San-Francisco-style grotesk for everything; optional mono for code/dev proof. Fluid
+scale so headlines feel grand on desktop and stay legible on mobile.
+
+## Fonts
+
+```css
+:root {
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
+               "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-display: var(--font-sans);   /* SF-style display for headings */
+  --font-mono: "SF Mono", "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
+}
+```
+Notes:
+- `-apple-system` / `BlinkMacSystemFont` give true **SF Pro** on Apple devices for
+  free; **Inter** is the closest cross-platform fallback. No webfont needed.
+- For more character (Linear/Stripe energy) you may swap the display face to
+  "Inter Tight" / "Geist" — keep body neutral and legible.
+
+## Fluid type scale (clamp)
+
+```css
+:root {
+  --fs-display: clamp(2.5rem, 1.2rem + 6.2vw, 5rem);     /* 40 → 80px Apple-size hero */
+  --fs-h1:      clamp(2rem, 1.3rem + 3.2vw, 3.5rem);     /* 32 → 56px */
+  --fs-h2:      clamp(1.625rem, 1.2rem + 2vw, 2.5rem);   /* 26 → 40px */
+  --fs-h3:      clamp(1.3125rem, 1.1rem + 1vw, 1.75rem); /* 21 → 28px */
+  --fs-h4:      clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);/* 17 → 21px */
+  --fs-lead:    clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);/* 19 → 24px intro text */
+  --fs-body:    1.0625rem;     /* 17px base (Apple body) */
+  --fs-body-lg: 1.1875rem;     /* 19px */
+  --fs-small:   0.9375rem;     /* 15px caption */
+  --fs-micro:   0.8125rem;     /* 13px labels/eyebrow */
+}
+```
+
+## Roles (each: size · weight · line-height · tracking)
+
+| Role | Size | Weight | Line-height | Tracking | Color |
+|---|---|---|---|---|---|
+| **Display** (hero) | `--fs-display` | 600–700 | 1.05 | -0.015em to -0.03em | `--text-primary` (or `--grad-text` on 1 word) |
+| **H1** | `--fs-h1` | 600 | 1.08 | -0.02em | `--text-primary` |
+| **H2** (section) | `--fs-h2` | 600 | 1.1 | -0.015em | `--text-primary` |
+| **H3** | `--fs-h3` | 600 | 1.2 | -0.01em | `--text-primary` |
+| **H4 / overline** | `--fs-h4` | 600 | 1.3 | 0 | `--text-primary` |
+| **Eyebrow / label** | `--fs-micro` | 600 | 1.2 | 0.06em, UPPERCASE | `--accent` or `--text-muted` |
+| **Lead / subhead** | `--fs-lead` | 400 | 1.45 | 0 | `--text-secondary` |
+| **Body** | `--fs-body`/`-lg` | 400 | 1.47–1.6 | 0 | `--text-secondary` |
+| **Caption / meta** | `--fs-small` | 400 | 1.45 | 0 | `--text-muted` |
+| **Button** | `--fs-body` (`1rem` compact) | 500–600 | 1 | -0.005em | `--text-on-accent` / `--text-primary` |
+| **Navigation** | `--fs-small`/`--fs-body` | 400–500 | 1 | 0 | `--text-secondary` → `--text-primary` on hover |
+| **Pricing amount** | `clamp(2.25rem,1.8rem+2vw,3.25rem)` | 600 | 1 | -0.02em | `--text-primary` |
+| **Code / terminal** | `--fs-small` | 400 | 1.55 | 0 | mono, syntax-tinted (subtle) |
+
+## Rules
+
+1. **Tighten as it grows.** Big headings get tighter line-height + slightly negative
+   tracking; body stays ~1.47–1.6 and 0 tracking.
+2. **Measure (line length) 60–75ch** for body; cap with `max-width: 68ch`. Apple often
+   centers short, punchy lines — keep hero copy brief.
+3. **Weights:** body 400, UI/emphasis 500–600, headings 600 (occasionally 700). Apple
+   favors **semibold (600)** headlines over heavy 800/900.
+4. **One display moment per page** (the hero). Don't make every heading huge.
+5. **Gradient text** (`--grad-text`) on at most one hero phrase; never body/small text.
+6. **Eyebrows** label sections (uppercase, tracked, small, accent/muted) above H2s.
+7. **Numbers/metrics** use `font-variant-numeric: tabular-nums` for stat rows + pricing.
+
+## Base CSS
+
+```css
+body { font-family: var(--font-sans); font-size: var(--fs-body);
+       line-height: 1.5; 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:.06em;
+           text-transform:uppercase; color: var(--accent); }
+.lead { font-size: var(--fs-lead); color: var(--text-secondary); max-width: 60ch; }
+a { color: var(--accent-link); text-underline-offset: 2px; }
+p { max-width: 68ch; }
+code, pre { font-family: var(--font-mono); }
+```

package/skills/apple-premium-minimal-design-system/website-generation-rules.md

@@ -0,0 +1,207 @@
+# Website Generation Rules — Apple Premium Minimal
+
+How an agent turns this design system into a **production-ready, multi-page website**.
+Output clean, semantic **pure HTML + CSS + vanilla JavaScript** plus design tokens.
+(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 with **HTML5 + CSS3 + vanilla JavaScript only**. The generated site
+must contain **zero** of the following:
+
+> ❌ 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. Layout, motion, nav,
+dropdowns, accordions, tabs, carousels — all hand-written with native HTML/CSS/JS
+(Grid/Flexbox, custom properties, `IntersectionObserver`). Exporting **design tokens**
+(`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)** from the layouts/components.
+- **No borders or dividers between sections** — separate with `--section-y` spacing
+  and **alternating white ↔ `--bg-muted` panels** only. In CSS: `.section { border: 0 }`
+  and **never** an `<hr>`/divider element or `border-top/bottom` between sections.
+  (Panel **color** changes are allowed and encouraged — that's not a border.)
+- **Clean, extensionless, Vercel-ready URLs** (`/pricing`, not `/pricing.html`).
+
+## Required pages (build all of these — 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 must contain these — ≥10, recommend 12)
+Hero · Feature Sections · Product Highlights · Trust Signals (logos) · Testimonials ·
+Use Cases · Statistics · Integrations · CTA Sections · Footer. Add more from
+`component-library.md` (Security, Enterprise, Bento, Agent Workflow, Code/Terminal,
+Pricing, FAQ) to reach 12 and to fit the page's purpose.
+
+## Site types this must support
+Landing pages · startup websites · AI company websites · enterprise SaaS · developer
+platforms · agentic-AI startups · infrastructure startups. Pick the page set + tone
+per type (see `example-page-structures.md`).
+
+## What to generate
+- **HTML** — semantic, accessible, one file per page.
+- **CSS** — `tokens.css` (`:root` variables from color/typography/spacing) + `styles.css`
+  (base + components + utilities). No inline styles except dynamic values.
+- **JavaScript** — vanilla, progressive enhancement only (nav/dropdown, accordion,
+  tabs, reveal, parallax, toggle, copy, carousel). Usable without JS.
+- **`vercel.json`** — clean-URL + routing config (see below).
+- **`sitemap.xml`** + **`robots.txt`** — for SEO.
+- **Design tokens** — also emit `tokens.json` (machine-readable). (Token export only —
+  the site stays vanilla.)
+- **Component specifications** — when asked for the *system* (not a site), emit each
+  component's markup + token usage from `component-library.md`.
+- **Accessibility guidance** + **responsive guidance** inline (comments) and honored.
+
+## File/output layout (default — flat files + clean URLs)
+```
+website/
+├── index.html              # served at /
+├── platform.html           # served at /platform   (cleanUrls strips .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          # :root design tokens (single source of truth)
+│   └── styles.css          # base, components, utilities
+├── js/
+│   └── main.js             # nav/dropdown, reveal, parallax, accordion, tabs, copy
+├── assets/                 # logos, product images, icons (SVG preferred), og images
+├── tokens.json             # machine-readable tokens for other agents
+├── sitemap.xml  robots.txt
+└── vercel.json             # cleanUrls + routing
+```
+Alternative: folder-per-page `platform/index.html` served at `/platform`. 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. Nav and all
+  internal links use clean paths (`/`, `/platform`, `/pricing`…).
+- Emit **`vercel.json`** so `.html` is stripped, direct 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 the `.html`
+  form. Provide a `404.html`. Ensure every nav/footer/internal link is extensionless so
+  production routing, refresh, and deep links all work.
+
+## Navigation system (build fully, in vanilla JS)
+- **Desktop nav** with **dropdown/mega-menus**: top items open a clean multi-column
+  panel of links + descriptions (white panel, soft shadow, large radius). Keyboard +
+  `aria-expanded`/`aria-haspopup`.
+- **Mobile nav**: full-screen overlay, accordion sub-menus, focus-trap, ESC to close.
+- **Multi-level navigation** + **breadcrumbs** on deep pages (docs/blog/case studies),
+  `aria-label="Breadcrumb"`.
+- Active route highlighted via `aria-current="page"`. See Navbar in `component-library.md`.
+
+## Hard rules
+1. **Vanilla only.** No frameworks/libraries in the shipped site. Hand-write interactivity.
+2. **Tokens first, once.** All colors/type/spacing as `:root` variables in `tokens.css`;
+   every rule references them. **No scattered raw hex / px**. Rebrand = change `--accent-*`.
+3. **Mobile-first + responsive.** Base styles for small screens; enhance up with
+   `min-width` media queries. Multi-column → single column by `md`. No 320px scroll.
+4. **Semantic + accessible.** Follow `accessibility-system.md` (landmarks, one H1,
+   focus-visible, alt text, labels, reduced motion). Non-negotiable.
+5. **No section borders.** **No borders/dividers between sections** — separate with
+   `--section-y` spacing + alternating white/`--bg-muted` panels. `.section{border:0}`.
+6. **Components from the library.** Reuse `.btn`/`.card` primitives and the 17 specs;
+   don't invent ad-hoc styles. Every component: responsive, accessible, reusable,
+   production-ready, animation-ready.
+7. **Restraint + whitespace.** ≤ one subtle gradient per section; generous spacing;
+   hairlines only inside cards/inputs. Premium minimal, never busy.
+8. **Performance:** system fonts (`-apple-system`/Inter), no webfont needed; SVG icons;
+   lazy-load below-the-fold images (`loading="lazy"`); animate only transform/opacity;
+   minimal JS, no libraries; target excellent Lighthouse (90+).
+9. **SEO on every page** (see below): unique title + description, Open Graph + Twitter
+   cards, canonical, JSON-LD, and a site `sitemap.xml` + `robots.txt`.
+10. **Real content, not lorem.** Plausible, specific copy and data. Mark guesses `[PLACEHOLDER]`.
+11. **Self-verify** against the anti-patterns and every companion checklist before done.
+
+## SEO requirements (every page)
+- Unique **`<title>`** and **meta description** (150–160 chars).
+- **Open Graph** + **Twitter card** (`summary_large_image`) tags + an OG image.
+- **Canonical** URL using the clean path.
+- **Structured data** (JSON-LD): `Organization` + `WebSite` site-wide; `Product`,
+  `FAQPage`, `BreadcrumbList`, `Article` where relevant.
+- **`sitemap.xml`** listing all clean URLs + **`robots.txt`** referencing it.
+
+## Performance requirements
+Fast first paint, minimal vanilla JS, optimized/centralized CSS, lazy media, cached
+assets (via `vercel.json` headers), no blocking libraries — enterprise-grade, 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"><!-- 10–12 sections, alternating white/muted panels, no dividers --></main>
+  <footer><!-- Footer --></footer>
+  <script src="/js/main.js" defer></script>
+</body></html>
+```
+
+## Required base CSS (no section borders; panel alternation)
+```css
+html, body { background: var(--bg-canvas); 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 */
+/* Do NOT add <hr> or divider elements between sections.
+   Separation = whitespace (--section-y) + panel color (white ↔ --bg-muted). */
+```
+
+## tokens.json shape (excerpt)
+```json
+{
+  "color": { "bg": {"canvas":"#fbfbfd","white":"#ffffff","muted":"#f5f5f7"},
+             "text": {"primary":"#1d1d1f","secondary":"#424245","muted":"#6e6e73"},
+             "accent": {"base":"#0071e3","link":"#0066cc"} },
+  "space": { "4":"16px","6":"24px","8":"32px","16":"64px" },
+  "radius": { "md":"14px","lg":"18px","xl":"24px","pill":"980px" },
+  "type": { "display":"clamp(2.5rem,1.2rem + 6.2vw,5rem)", "body":"1.0625rem" }
+}
+```
+
+## Definition of done
+**15+ pages (≈20), each with ≥10 sections (≈12), no borders/dividers between sections
+(separation by whitespace + alternating white/muted panels).** 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; quiet motion with reduced-motion
+fallback; high Lighthouse; zero anti-patterns; could sit next to Apple/Linear/Stripe/
+Vercel without looking out of place.

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

@@ -0,0 +1,97 @@
+# bento-grid-design-system
+
+A world-class, **bento-grid design system** for building modular, tile-based websites —
+pages composed from **asymmetric grids of varied-span tiles** that package each idea
+(feature, metric, product shot, code, quote) into its own clean card. Distilled from
+bento-led leaders (**Apple product pages, Linear, Vercel, Raycast, Resend, Notion**) and
+modern AI sites (**OpenAI, Anthropic, Perplexity, Cursor**). It gives coding/design/UI/
+branding/website-generation agents a complete, reusable system so they can ship modular
+sites that look premium and scannable.
+
+It also ships a **production website-generation framework**: a multipage site (15+ pages,
+10+ sections/page, mostly bento grids, **no borders/dividers between sections**) in **pure
+HTML/CSS/vanilla JS** (the bento is CSS Grid — no masonry library; no React/Vue/Tailwind/
+Bootstrap/jQuery/any library), with **clean Vercel-ready URLs** (no `.html`), navigation,
+and full SEO.
+
+> The full design intelligence is **baked into the companion files** (live research
+> optional, to save tokens). Outputs a generated site/system into a `website/` folder.
+> Sibling skills: `ai-dark-futuristic-design-system`, `apple-premium-minimal-design-system`,
+> `product-demo-first-design-system`.
+
+## Install
+
+```bash
+npx spirewise install -s bento-grid-design-system          # pick agents + scope
+npx spirewise install -s bento-grid-design-system -a claude,cursor -sc workspace
+```
+
+## Remove
+
+```bash
+npx spirewise remove -s bento-grid-design-system           # pick agents + scope
+npx spirewise remove -s bento-grid-design-system -a claude,cursor -sc both
+```
+
+(No Node? `./install.sh -s bento-grid-design-system` and `./install.sh remove -s bento-grid-design-system`.)
+
+## Use
+
+After installing, ask your agent:
+
+> "Build a bento-grid website for our product"
+> "Make it like Apple/Linear/Raycast — modular bento tiles"
+
+It reads the companion files, locks the tokens, plans each section's tiles (anchor +
+varied spans), composes the bento grids + tile variants, applies motion + accessibility,
+and emits **pure HTML + CSS + vanilla JS + tokens + `vercel.json` + `sitemap.xml`** into a
+`website/` folder.
+
+## What's inside
+
+| File | What it gives you |
+|---|---|
+| `SKILL.md` | Orchestrator: bento philosophy, mandates, workflow, output, checklist |
+| `design-principles.md` | One-idea-per-tile philosophy, anchor-tile hierarchy, do/don'ts |
+| `color-system.md` | Palette + **tile-surface** tokens (light + dark) as CSS vars |
+| `typography-system.md` | Fonts, fluid type scale, tile-title roles |
+| `spacing-system.md` | 4/8-pt scale, container widths, **bento gap + tile padding** |
+| `layout-system.md` | The **bento grid engine** (CSS Grid + spans) + section layouts |
+| `component-library.md` | 17 components + Bento Grid + Bento Tile variants |
+| `motion-system.md` | Staggered tile reveals, hover lift, pointer spotlight |
+| `accessibility-system.md` | Contrast, reading order, link-tiles, focus, reduced motion |
+| `website-generation-rules.md` | Pure-vanilla build: pages, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Bento-led page blueprints per site type |
+
+## The look
+
+Soft rounded **tiles** on a calm canvas, consistent grid gaps, large radii, gentle
+elevation, faint per-tile gradients, big confident headlines, one restrained accent, and
+quiet hover/reveal motion. Modular and scannable — a well-designed bento box. Works light
+or dark (default light).
+
+## Components (17 + bento toolkit)
+
+Navbar · Hero bento · Capabilities bento · Bento Grid · Testimonials (quote tiles) · Logo
+bento · Pricing · FAQ · CTA tile · Footer · Dashboard tile · Agent Workflow · Code tile ·
+Terminal tile · Stat bento · Security · Enterprise — **plus** the Bento Grid engine and
+tile variants (Feature, Metric, Media, Code, Quote, Integration, CTA, List).
+
+## Rules it enforces
+
+- **Bento-led** — most sections are bento grids with **an anchor tile + varied spans**,
+  one idea per tile, mixed content types, real content (no empty/filler/monotonous grids).
+- **Multipage scale (mandatory)** — **15+ pages (≈20)**, **≥10 sections/page (≈12)**, and
+  **no borders/dividers between sections** (separation by whitespace + panels + tile surfaces).
+- **Pure vanilla stack** — HTML5 + CSS3 + vanilla JS only; the bento is **CSS Grid** (no
+  masonry lib); **no React/Vue/Angular/Svelte/Bootstrap/Tailwind/jQuery/any library**; no build.
+- **Clean Vercel-ready URLs** — extensionless routes (`/pricing`), with `vercel.json`
+  (`cleanUrls`), `sitemap.xml`, `robots.txt`; refresh + deep links work.
+- **Full navigation + SEO** — desktop dropdowns, mobile overlay, breadcrumbs; per-page
+  title/description, Open Graph, Twitter card, canonical, JSON-LD.
+- **Centralized tokens**, **accessible by default** (sensible reading order despite `dense`
+  flow, link-wrapped tiles, focus, reduced motion), **mobile-first responsive** (graceful
+  6→4→2→1 reflow), **restraint**. **Zero anti-patterns** — no template look, frameworks in
+  the shipped site, monotonous grids, or empty tiles.
+
+See `SKILL.md` for the full workflow and the companion files for every token and spec.

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

@@ -0,0 +1,185 @@
+---
+name: bento-grid-design-system
+description: >-
+  A world-class, BENTO-GRID design system for building modular, tile-based websites
+  where content is organized into asymmetric bento grids — varied-span cards that
+  package features, metrics, product shots, code, and media into a clean, scannable
+  mosaic. Distilled from bento-led leaders (Apple product pages, Linear, Vercel,
+  Raycast, Vercel/Resend, Cron/Notion) and modern AI sites (OpenAI, Anthropic,
+  Perplexity, Cursor). It gives coding/design/UI/branding/website-generation agents a
+  complete, reusable system: design philosophy, color/typography/spacing/grid/layout
+  tokens (with a first-class bento grid engine), a 17+ -component library (Bento Grid,
+  Bento Tile variants, Hero Bento…), a motion system, accessibility + responsive
+  rules, and a production website-generation framework. The framework builds a
+  multipage site (15+ pages, 10+ sections/page, NO borders/dividers between sections)
+  in PURE HTML/CSS/vanilla JS (no React/Vue/Tailwind/Bootstrap/jQuery/any library),
+  with clean Vercel-ready URLs (no `.html`), navigation, and full SEO. Use when the
+  user asks for a "bento grid website", "bento layout", "modular tile landing page",
+  "make it like Apple/Linear/Raycast bento", or "a bento design system / tokens". The
+  full system is baked into the companion files (live research optional). Outputs a
+  generated site/system into a `website/` folder.
+---
+
+# Bento Grid Design System
+
+A complete, agent-ready design system for **bento-grid websites** — pages built from
+**modular, asymmetric tiles** of varying spans that package each idea (a feature, a
+metric, a product shot, a code sample, a quote) into its own card, arranged into a
+clean, scannable mosaic. Distilled from Apple's bento product pages, Linear, Vercel,
+Raycast, Resend, Notion, and modern AI sites (OpenAI, Anthropic, Perplexity, Cursor).
+
+This skill is the **single source of truth**. The detailed system lives in the
+companion files in this folder — read the ones relevant to the task, then generate.
+
+## The core idea — bento as the organizing principle
+
+- **Compose pages from bento grids.** Most sections are an asymmetric grid of tiles
+  (1×1, 2×1, 1×2, 2×2 spans) — a "bento box" — rather than plain stacked rows.
+- **One idea per tile.** Each tile holds a single, self-contained thought: a feature +
+  visual, a stat, a mini product frame, a quote, a code snippet, an integration logo.
+- **Varied spans create rhythm.** Mix a large anchor tile with several small tiles so
+  every section has a clear focal point and a pleasing, scannable mosaic.
+- **Tiles are the "cards"; the grid replaces dividers.** Separation comes from the
+  grid gaps and tile surfaces — **never borders between sections**.
+
+## Hard structural requirements (MANDATORY — never skip)
+
+These are non-negotiable and override any conflicting guidance elsewhere:
+
+1. **Multipage — 15+ pages (≈20).** Always generate a **full multipage website with
+   more than 15 distinct pages** (not a single landing page) — a real site map.
+2. **10+ sections per page (≈12).** Every page contains **at least 10 full sections**;
+   most are bento grids, composed from the layout + component library.
+3. **No borders/dividers between sections.** **Zero border widths, lines, rules, or
+   `<hr>` between sections.** Separate sections with whitespace, soft background panels,
+   the bento tiles' own surfaces/elevation, and type hierarchy — never a section border.
+   (Tiles may have their own hairline/surface; that's a tile, not a section divider.)
+4. **Pure HTML + CSS + vanilla JS — no frameworks/libraries.** The generated site uses
+   **only HTML5, CSS3, and vanilla JavaScript** (the bento grid is CSS Grid — no
+   masonry library). No React/Vue/Angular/Svelte/Next, no Bootstrap/Tailwind/any CSS
+   framework, no jQuery/any UI or JS library, no build step. (Exporting `tokens.json`
+   for other agents is fine — that's data, not a framework.)
+5. **Clean, Vercel-ready URLs.** All routes are **extensionless** (`/pricing`, not
+   `/pricing.html`); ship a `vercel.json` (`cleanUrls: true`) plus `sitemap.xml` /
+   `robots.txt` so production refresh and deep links work.
+6. **Full navigation + SEO.** Desktop nav (dropdown/mega-menu where useful) + mobile
+   menu + breadcrumbs; per-page SEO (unique title/description, Open Graph, Twitter
+   card, canonical, JSON-LD). Every component: responsive, accessible, reusable,
+   production-ready, animation-ready.
+
+See `website-generation-rules.md` for the required page list, required sections, the
+`vercel.json`, navigation, and SEO specifics. Enforce in code: `.section { border: 0 }`
+and never place `<hr>`/divider elements between sections.
+
+## When to use
+
+Building or designing any landing page, marketing site, or product site that should use
+a **modular bento-grid** aesthetic (Apple/Linear/Raycast/Vercel energy) — for a product,
+AI startup, developer platform, or enterprise SaaS — or producing **design tokens / a
+design system** for other agents.
+
+## The companion files (read what you need)
+
+| File | What it gives you |
+|---|---|
+| `design-principles.md` | The bento philosophy, hierarchy laws, do/don'ts |
+| `color-system.md` | Palette + tile-surface tokens (works light or dark) as CSS vars |
+| `typography-system.md` | Fonts, fluid type scale, weights, tracking, tile-text roles |
+| `spacing-system.md` | 4/8-pt scale, container widths, grid gaps, tile padding |
+| `layout-system.md` | The **bento grid engine** + canonical bento section layouts |
+| `component-library.md` | 17 components + Bento Grid + Bento Tile variants |
+| `motion-system.md` | Tile hover/reveal stagger, spotlight, content micro-interactions |
+| `accessibility-system.md` | Contrast, focus, motion, tile/grid semantics, keyboard |
+| `website-generation-rules.md` | Pure-vanilla build: pages, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Ready bento-grid page blueprints |
+
+All tokens use the same names across files, so they compose into one stylesheet.
+
+## Phase 1 — Research is baked in (live analysis OPTIONAL)
+
+The design intelligence extracted from the reference sites is **already encoded in the
+companion files** — patterns, palettes, type scales, spacing, the bento grid engine,
+components, motion. **Do NOT re-scrape the references for the basics; use the baked-in
+system** (saves tokens). Only browse live when the user wants a *current* look from a
+specific site, a brand-new pattern not covered here, or to verify a font/feature.
+
+What the baked-in system already captures (the Phase-1 extraction): design patterns,
+visual hierarchy, typography/spacing/grid/layout systems, color + gradient systems,
+animation/motion, navigation, CTA + hero patterns, trust/enterprise/social-proof
+components, footer/pricing/feature structures, interactive + micro-interactions,
+glassmorphism usage, accessibility, mobile responsiveness, developer-experience
+patterns, and AI-startup conversion patterns — all expressed as bento tiles.
+
+## Phase 2 — Generate (the workflow)
+
+1. **Clarify intent:** site type (product / SaaS / dev platform / AI / enterprise),
+   theme (light or dark base), brand accent (or default), and page set.
+2. **Lock the tokens:** start from `color-system.md` + `typography-system.md` +
+   `spacing-system.md`. Emit them once as `:root` CSS variables (and `tokens.json`).
+3. **Plan the bentos:** for each section, decide the tiles (the ideas) and their spans —
+   one anchor tile + supporting tiles. The grid is designed, not random.
+4. **Compose layouts + components:** use the bento grid engine and the Bento Tile
+   variants (feature, metric, media, quote, code, integration, CTA tile).
+5. **Apply motion + a11y:** tile hover/reveal stagger per `motion-system.md`, gated by
+   `prefers-reduced-motion`; meet every rule in `accessibility-system.md`.
+6. **Emit code:** follow `website-generation-rules.md` to produce clean, semantic,
+   responsive **pure HTML + CSS + vanilla JS** plus tokens, `vercel.json`, `sitemap.xml`,
+   `robots.txt`.
+7. **Self-check** against the anti-patterns and the verification checklist below.
+
+## Output
+
+Unless the user specifies otherwise, write the generated **multipage site (15+ pages,
+~20)** into a `website/` folder in the project root:
+- `website/index.html` **plus 15+ additional pages** (≥10 sections each, bento-led, no
+  inter-section borders), linked with **extensionless URLs** (`/pricing`)
+- `website/css/tokens.css` + `website/css/styles.css`
+- `website/js/main.js` (vanilla nav, tile interactions, motion — progressively enhanced)
+- `website/vercel.json`, `website/sitemap.xml`, `website/robots.txt`
+- `website/assets/` (tile media, icons, og images)
+- `website/tokens.json` (machine-readable tokens for other agents)
+
+When the user only wants the **system** (not a site), emit the tokens + component specs.
+
+## Default look (baked-in identity)
+
+Soft rounded **tiles** on a calm canvas, generous grid gaps, large radii, gentle
+elevation and faint tile gradients, big confident headlines, one restrained accent, and
+quiet hover/reveal motion that brings tiles to life. Clean and modular — like a
+well-designed bento box. Works **light or dark** (default light); a dark base is
+included. (For a fully dark identity use `ai-dark-futuristic-design-system`; for Apple
+minimal use `apple-premium-minimal-design-system`; for product-demo focus use
+`product-demo-first-design-system`.)
+
+## Anti-patterns (never ship these)
+
+Outdated startup designs · Bootstrap/ThemeForest/WordPress-template look · generic SaaS
+or old-startup templates · poor typography · weak visual hierarchy · overloaded
+gradients · excessive glassmorphism · poor accessibility · inconsistent spacing ·
+**uniform/monotonous grids with no focal anchor tile · empty or filler tiles · borders
+or dividers between sections · single-page sites or thin pages with fewer than 10
+sections · any framework/library in the shipped site (React/Vue/Tailwind/Bootstrap/
+jQuery/…) · `.html` in URLs**. The result must feel like Apple/Linear/Raycast — never
+like a template.
+
+## Verification checklist (run before finishing)
+
+0. **Multipage scale met:** the site has **> 15 pages** (≈20), each page has **≥ 10
+   sections** (≈12), and there are **no borders/dividers between sections**.
+0b. **Bento-led met:** most sections are bento grids, each with **a clear anchor tile +
+   varied-span supporting tiles** (no monotonous uniform grid, no empty/filler tiles).
+0c. **Pure vanilla + clean URLs:** zero frameworks/libraries (bento is CSS Grid); all
+   routes extensionless with a working `vercel.json` (`cleanUrls`), `sitemap.xml`, `robots.txt`.
+0d. **Nav + SEO:** desktop nav/dropdowns + mobile menu + breadcrumbs; per-page title/
+   description, Open Graph + Twitter card, canonical, and JSON-LD.
+1. Tokens emitted once (`:root`/`tokens.css`) and reused — no scattered one-off hex.
+2. Type uses the fluid scale; spacing uses the 4/8-pt scale; bento uses the grid engine +
+   container widths — all from the companion files.
+3. Every section is a recognized layout; every tile/component matches `component-library.md`.
+4. Body text ≥ 4.5:1 contrast, large text ≥ 3:1; visible focus; motion respects
+   `prefers-reduced-motion`; semantic landmarks + alt text; tiles keyboard-navigable.
+5. Fully responsive (360 → 1440+): bento reflows gracefully to fewer columns / single
+   column; no horizontal scroll; tap targets ≥ 44px.
+6. Trips **zero** anti-patterns; tile content is real (not empty/filler).
+7. Output looks like it belongs next to Apple/Linear/Raycast — modular, clean, and
+   conversion-focused.