spirewise 1.7.1 → 1.9.0

package/skills/ai-agent-os-design-system/spacing-system.md

@@ -0,0 +1,87 @@
+# Spacing System — AI Agent Operating System
+
+A strict **4-point base / 8-point rhythm** tuned for **two densities**: spacious **marketing**
+sections and compact **control-room** UI (consoles, timelines, graphs, logs). Whitespace,
+surface elevation, and tone separate sections — never borders.
+
+## 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 — crisp, tooling (small) */
+  --radius-sm: 6px;  --radius-md: 8px;  --radius-lg: 12px; --radius-xl: 16px;
+  --radius-pill: 999px;
+
+  /* Containers */
+  --container-sm: 680px;   --container-md: 840px;  --container-lg: 1080px;
+  --container-xl: 1240px;  --container-2xl: 1440px;  /* wide consoles/graphs */
+  --gutter: clamp(20px, 4vw, 40px);
+
+  /* Section rhythm (marketing) */
+  --section-y: clamp(64px, 8vw, 120px);
+  --section-y-lg: clamp(88px, 10vw, 160px);
+
+  /* Control-room density (compact) */
+  --panel-gap:  clamp(12px, 1.2vw, 20px);   /* gap between panels/cards */
+  --panel-pad:  clamp(16px, 1.6vw, 24px);   /* padding inside a panel */
+  --log-line-y: 4px;                         /* tight log/trace line spacing */
+  --node-pad:   var(--space-3) var(--space-4); /* graph node padding */
+  --step-gap:   var(--space-4);              /* timeline step gap */
+  --stack: clamp(12px, 1.4vw, 20px);
+}
+```
+
+## Two densities
+
+- **Marketing density** (hero, features, pricing, CTA): generous — `--section-y` padding, larger
+  type, whitespace. Sells the product.
+- **Control-room density** (graphs, timelines, consoles, logs, tables): compact — `--panel-gap`
+  between panels, `--panel-pad` inside, tight `--log-line-y`/`--step-gap`. Information-rich but
+  aligned and calm (mono + consistent status keeps density legible).
+
+Use the right density per context — a console/graph is denser than a hero.
+
+## Usage map
+
+- **4-pt** (`--space-1..6`): inside components — node padding, chip/badge padding, log line
+  spacing, step gaps, button padding, label↔value.
+- **8-pt** (`--space-8..16`): between components — panel gaps (`--panel-gap`), section-internal
+  blocks, form rows.
+- **Container widths:** marketing `--container-lg/xl`; **wide consoles/graphs** `--container-2xl`;
+  prose/docs `--container-md`.
+- **Section spacing:** marketing `--section-y` (hero/CTA `--section-y-lg`); a control-room
+  *section* still gets `--section-y`, but the console/graph *inside* uses `--panel-gap`.
+- **Page spacing:** sections stack with no extra margins and **no borders/dividers** —
+  `--section-y` + surface elevation + tone separate them.
+
+## Rules
+
+1. **Only use scale values** (plus the deliberate density tokens).
+2. **Align everything.** Mono + consistent paddings make logs/graphs/timelines read as orderly.
+3. **Consistent panel radius/padding** so a console reads as one system.
+4. **Logs/traces breathe just enough:** tight `--log-line-y` but ≥ 36px row targets for any
+   interactive log rows; scroll long consoles inside a labelled region.
+5. **Whitespace + elevation > dividers.** Separate sections this way, never lines.
+
+## Helpers
+
+```css
+.container { width:100%; max-width: var(--container-xl);
+             margin-inline:auto; padding-inline: var(--gutter); }
+.container--wide { max-width: var(--container-2xl); }
+.section   { padding-block: var(--section-y); border: 0; }   /* never a section border */
+.section--lg { padding-block: var(--section-y-lg); }
+.section--alt { background: var(--bg-800); }                 /* alternate tone, not a line */
+.panels { display:grid; gap: var(--panel-gap); }
+.panel { background: var(--surface-1); border:1px solid var(--border-default);
+         border-radius: var(--radius-lg); padding: var(--panel-pad); }
+.console { background: var(--canvas); border:1px solid var(--border-default);
+           border-radius: var(--radius-lg); }                /* graph/log canvas */
+.stack > * + * { margin-top: var(--stack); }
+```

package/skills/ai-agent-os-design-system/typography-system.md

@@ -0,0 +1,91 @@
+# Typography System — AI Agent Operating System
+
+A precise, tooling-grade type system: a clean **grotesk** for headings/marketing and a
+first-class **monospace** for the agent mechanics — logs, traces, tool calls, node labels,
+timestamps, IDs, code. Dense but legible. Fluid scale.
+
+## Fonts
+
+```css
+:root {
+  --font-sans: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+               Helvetica, Arial, sans-serif;
+  --font-display: var(--font-sans);   /* or "Geist" for tighter display */
+  /* Monospace — the agent-OS voice: logs, traces, node labels, code, IDs, timestamps */
+  --font-mono: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;
+}
+```
+Mono is core here — agent runs *look* like logs/traces. Use it for the console, timelines,
+graph labels, tool calls, status chips, metrics, and code/terminal panels.
+
+## Fluid type scale (clamp)
+
+```css
+:root {
+  --fs-display: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);  /* 36 → 60px hero */
+  --fs-h1:      clamp(2rem, 1.5rem + 2.4vw, 3rem);        /* 32 → 48px */
+  --fs-h2:      clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);   /* 24 → 36px section */
+  --fs-h3:      clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); /* 20 → 26px panel title */
+  --fs-h4:      clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);  /* 17 → 20px */
+  --fs-lead:    clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);/* 17 → 21px */
+  --fs-body:    0.9375rem;     /* 15px base (dense, technical) */
+  --fs-body-lg: 1.0625rem;     /* 17px marketing body */
+  --fs-small:   0.8125rem;     /* 13px caption / log / label */
+  --fs-mono:    0.8125rem;     /* 13px console/trace */
+  --fs-micro:   0.6875rem;     /* 11px chip / tick */
+}
+```
+
+## Roles (each: family · size · weight · line-height · tracking)
+
+| Role | Family | Size | Weight | LH | Tracking |
+|---|---|---|---|---|---|
+| **Display** (hero) | sans | `--fs-display` | 600–700 | 1.06 | -0.02em |
+| **H1** | sans | `--fs-h1` | 600–700 | 1.08 | -0.02em |
+| **H2** (section) | sans | `--fs-h2` | 600 | 1.15 | -0.015em |
+| **H3** (panel title) | sans | `--fs-h3` | 600 | 1.25 | -0.01em |
+| **Eyebrow / label** | mono | `--fs-micro` | 600 | 1.2 | 0.08em, UPPERCASE |
+| **Lead / deck** | sans | `--fs-lead` | 400 | 1.5 | 0 |
+| **Body** | sans | `--fs-body`/`-lg` | 400 | 1.6 | 0 |
+| **Console / log line** | mono | `--fs-mono` | 400–500 | 1.55 | 0 |
+| **Trace / step** | mono | `--fs-mono` | 400–500 | 1.5 | 0 |
+| **Node label** | mono | `--fs-small` | 500–600 | 1.2 | 0 |
+| **Status chip** | mono | `--fs-micro` | 600 | 1 | 0.04em, UPPERCASE |
+| **Timestamp / ID** | mono | `--fs-micro` | 400 | 1.2 | 0 · tabular-nums |
+| **Metric** | mono | `clamp(1.5rem,1.2rem+1.4vw,2.25rem)` | 600 | 1 | -0.01em · tabular-nums |
+| **Button** | sans/mono | `--fs-body` | 600 | 1 | 0 |
+| **Navigation** | sans/mono | `--fs-small`/`--fs-body` | 500 | 1 | 0 |
+| **Pricing amount** | sans | `clamp(2.25rem,1.8rem+2vw,3.25rem)` | 700 | 1 | -0.02em · tabular-nums |
+| **Code / terminal** | mono | `--fs-small` | 400–500 | 1.6 | 0 |
+
+## Rules
+
+1. **Mono for the mechanics.** Logs, traces, tool calls, node labels, timestamps, IDs, metrics,
+   status chips, and code are mono — it reads as a real agent system and aligns columns.
+2. **Tabular numerals** for timestamps, durations, token counts, metrics, pricing
+   (`font-variant-numeric: tabular-nums`) so values align and don't jump while streaming.
+3. **Dense but legible:** product/console body 15px, marketing prose 17px; console line-height
+   ~1.55; never below ~13px for read logs.
+4. **Sans for marketing voice, mono for system voice** — the contrast reinforces "OS for agents".
+5. **UPPERCASE for labels/chips/eyebrows** (tracked), sentence case for body.
+6. **One display moment per page** (the hero); panel titles stay calm.
+7. **Measure** marketing prose ≤ 68ch; log/trace lines can run wide in a scroll container.
+
+## 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 { color: var(--text-primary); font-family: var(--font-display); font-weight: 600;
+           text-wrap: balance; letter-spacing: -0.015em; }
+h1 { font-size: var(--fs-h1); line-height: 1.08; }
+.eyebrow, .chip, .node__label, .log, .trace, code, pre, .mono, .metric, .ts {
+  font-family: var(--font-mono); }
+.metric, .ts, .num { font-variant-numeric: tabular-nums; }
+.eyebrow { font-size: var(--fs-micro); font-weight:600; letter-spacing:.08em;
+           text-transform:uppercase; color: var(--text-muted); }
+.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; }
+```

package/skills/ai-agent-os-design-system/website-generation-rules.md

@@ -0,0 +1,192 @@
+# Website Generation Rules — AI Agent Operating System
+
+How an agent turns this design system into a **production-ready, multi-page, agentic-AI product
+website**. Output clean, semantic **pure HTML + CSS + vanilla JavaScript** plus design tokens.
+The signature: the page renders the product's real mechanics — agent graphs, run timelines,
+tool-call streams, reasoning traces, command palette — **honestly and accessibly**, with
+**graphs/timelines hand-built in inline SVG/Canvas/semantic HTML (no graph library)**.
+
+## Technology stack (MANDATORY — no frameworks, no libraries)
+
+Build everything — including all agent visuals — with **HTML5 + CSS3 + vanilla JavaScript only**.
+The generated site must contain **zero** of:
+
+> ❌ React · ❌ Vue · ❌ Angular · ❌ Svelte/Next/Nuxt · ❌ Bootstrap · ❌ Tailwind · ❌ jQuery ·
+> ❌ D3 · ❌ Cytoscape · ❌ React Flow · ❌ vis.js · ❌ mermaid runtime · ❌ any graph/charting/UI/animation library
+
+**Agent graphs/timelines/traces are authored as inline SVG, `<canvas>`, or semantic HTML
+(`<ol>`/`<table>`)** with positions/edges computed in plain JS. No build step, no npm, no CDN
+kits. Exporting `tokens.json` (and sample `data/*.json` runs/graphs) is allowed; shipping the
+site in a framework/graph library 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)**, leading with agent mechanics where it fits.
+- **No borders or dividers between sections** — separate with **whitespace, surface elevation
+  (panels), and background tone (`--bg-900`/`--bg-800`)**. In CSS: `.section { border: 0 }`; never
+  `<hr>`/divider or `border-top/bottom` between sections. (Node/edge borders, timeline connectors,
+  and panel edges are *inside* components — not section dividers.)
+- **Honest, accessible agent UI:** coherent example runs (no gibberish); a consistent **status
+  system** (color + icon + label); **every graph/timeline/trace has a text/list equivalent**.
+- **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 agent/
+integration/changelog subpages freely.
+
+## Required sections (every page — ≥10, recommend 12)
+Hero (workspace/run) · Feature Sections · Product Highlights · Trust Signals (logos) ·
+Testimonials · Use Cases · Statistics (status/metrics) · Integrations · CTA · Footer. Add more
+(Agent Graph, Run Timeline, Tool Stream, Security, Enterprise, Code/Terminal) to reach 12.
+
+## 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; agent visuals with text/list equivalents.
+- **CSS** — `tokens.css` (`:root` vars incl. status + node/edge) + `styles.css` (base + agent
+  components + console + tables).
+- **JavaScript** — vanilla agent engine (SVG/canvas graph layout, run progression, tool-stream
+  log, command palette, count-up) + nav/menu/accordion — all reduced-motion-aware; usable without
+  JS (server-rendered SVG + `<ol>` runs).
+- **`vercel.json`** + **`sitemap.xml`** + **`robots.txt`**; optional `data/*.json` sample runs.
+- **Design tokens** — `tokens.json` (token export only).
+- **Component specifications** — when asked for the *system*, emit graph/timeline/palette/status markup.
+- **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, agent.js }    # vanilla graph/timeline/stream + command palette
+├── data/ { runs.json, graph.json }  # sample agent runs (optional)
+├── assets/  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 internal link is extensionless.
+
+## Navigation system (vanilla JS)
+- **Desktop nav** with optional product/solutions dropdown/mega-menu **+ a Cmd-K command-palette
+  trigger**; 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; agent visuals are inline SVG/Canvas/semantic HTML** — no graph/charting/UI library.
+2. **Render real mechanics, coherently.** Lead with graph/run-timeline/tool-stream/trace using
+   **realistic example runs** (no gibberish); a consistent **status system** (color + icon + label).
+3. **Every agent visual has a text/list equivalent** (`<ol>`/`<table>`) + `aria` summary; **status
+   never color-only**; streaming logs use `role="log" aria-live="polite"` + pause.
+4. **Command palette** done right (Cmd-K + visible button; dialog/combobox/listbox semantics; Esc).
+5. **Tokens first, once** (incl. status + node/edge); no scattered hex/px.
+6. **No section borders.** Separate with space + surface/tone. `.section{border:0}`.
+7. **Mobile-first + responsive**; workspace stacks; graphs simplify; consoles scroll — no page h-scroll.
+8. **Semantic + accessible** per `accessibility-system.md`. Non-negotiable.
+9. **Performance:** SVG for typical graphs, `<canvas>` for huge ones; compute layout once;
+   rAF-throttle run progression/streaming; `content-visibility` offscreen; high Lighthouse (90+).
+10. **No AI-magic clichés** (glowing brains/orbs); real, plausible runs/data; mark guesses `[PLACEHOLDER]`.
+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` + `SoftwareApplication` for the product; `FAQPage`, `BreadcrumbList`, `Article` where
+relevant); **`sitemap.xml`** + **`robots.txt`**. (Runs are real HTML `<ol>`/text, so content is crawlable.)
+
+## Performance requirements
+SVG graphs (canvas for huge), layout computed once, rAF-throttled run/stream, `content-visibility`
+offscreen, lazy media, cached assets (via `vercel.json`), no 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="dark 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 / SoftwareApplication JSON-LD --></script>
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+  <header><!-- Navbar + Cmd-K trigger (links extensionless: /platform, /pricing) --></header>
+  <main id="main"><!-- workspace hero + 10–12 sections, no dividers --></main>
+  <footer><!-- Footer --></footer>
+  <script src="/js/agent.js" defer></script>
+  <script src="/js/main.js" defer></script>
+</body></html>
+```
+
+## Required base CSS (no section borders; control-room)
+```css
+html, body { background: var(--bg-base); color: var(--text-secondary); }
+.section { padding-block: var(--section-y); border: 0; }   /* no borders/dividers between sections */
+.section--alt { background: var(--bg-800); }               /* alternate tone by COLOR, not lines */
+.section + .section { border-top: 0; }
+.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
+  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }  /* for graph/run text equivalents */
+/* Separation = whitespace + surface elevation + tone. Node/edge/panel borders are INSIDE
+   components, never section dividers; no <hr> between sections. */
+```
+
+## tokens.json shape (excerpt)
+```json
+{
+  "color": { "bg": {"base":"#0a0c10","900":"#0e1116","800":"#12161d"},
+             "surface": {"1":"#141923","2":"#1a212d","3":"#222b3a"}, "canvas":"#0b0e13",
+             "text": {"primary":"#eef2f8","secondary":"#aeb7c7","muted":"#828c9e"},
+             "accent":"#5b9dff",
+             "status": {"running":"#5b9dff","success":"#2dd4a0","failed":"#f4516c",
+                        "waiting":"#38bdf8","approve":"#f5a524","blocked":"#c0566b","queued":"#828c9e"},
+             "edge":"rgba(255,255,255,0.18)", "edgeActive":"#5b9dff" },
+  "space": { "4":"16px","6":"24px","8":"32px","16":"64px" },
+  "radius": { "md":"8px","lg":"12px","xl":"16px","pill":"999px" },
+  "type": { "body":"0.9375rem","mono":"Geist Mono, JetBrains Mono, monospace","numerals":"tabular-nums" }
+}
+```
+
+## Definition of done
+**15+ pages (≈20), each with ≥10 sections (≈12), leading with agent mechanics where it fits, no
+borders/dividers between sections.** Pure HTML/CSS/vanilla JS with **graphs/timelines/traces
+hand-built in inline SVG/Canvas/semantic HTML (no graph library)**; coherent example runs + a
+consistent **status system**; **every agent visual has a text/list equivalent** + `aria` summary +
+not-color-only; a working accessible **command palette** (Cmd-K + button); clean extensionless URLs
+with `vercel.json` (refresh + deep links work); desktop nav + mobile + breadcrumb; per-page SEO +
+sitemap; tokens centralized (incl. status); fully responsive (workspace/graph/console reflow); AA
+accessible; precise functional motion (run progression) with reduced-motion fallback; high
+Lighthouse; zero anti-patterns; could sit next to Cursor/Cognition/Sierra — a real, trustworthy agent OS.

package/skills/ai-dark-futuristic-design-system/README.md

@@ -0,0 +1,91 @@
+# ai-dark-futuristic-design-system
+
+A world-class, **dark-futuristic design system** distilled from the top AI startup
+websites — **OpenAI, Anthropic, Perplexity, Cursor, Lovable, Replit, Runway,
+ElevenLabs, Midjourney, xAI, Scale AI, Cognition, Sierra, Harvey**. It gives
+coding/design/UI/branding/website-generation agents a complete, reusable system so
+they can ship AI-startup sites that visually compete with those references while
+staying accessible, responsive, and conversion-optimized. It also ships a **production
+website-generation framework**: a multipage site (15+ pages, 10+ sections/page) in
+**pure HTML/CSS/vanilla JS** (no React/Vue/Tailwind/Bootstrap/jQuery/any library),
+with **clean Vercel-ready URLs**, mega-menu 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.
+
+## Install
+
+```bash
+npx spirewise install -s ai-dark-futuristic-design-system          # pick agents + scope
+npx spirewise install -s ai-dark-futuristic-design-system -a claude,cursor -sc workspace
+```
+
+## Remove
+
+```bash
+npx spirewise remove -s ai-dark-futuristic-design-system           # pick agents + scope
+npx spirewise remove -s ai-dark-futuristic-design-system -a claude,cursor -sc both
+```
+
+(No Node? `./install.sh -s ai-dark-futuristic-design-system` and `./install.sh remove -s ai-dark-futuristic-design-system`.)
+
+## Use
+
+After installing, ask your agent:
+
+> "Design an AI startup landing page — dark, futuristic, like Anthropic/Cursor"
+> "Generate design tokens + components for our AI SaaS site"
+
+It reads the relevant companion files, locks the tokens, composes layouts from the
+component library, applies motion + accessibility, and emits **pure HTML + CSS +
+vanilla JS + design tokens + `vercel.json` + `sitemap.xml`** into a `website/` folder.
+
+## What's inside
+
+| File | What it gives you |
+|---|---|
+| `SKILL.md` | Orchestrator: philosophy summary, workflow, output, checklist |
+| `design-principles.md` | Philosophy, visual-hierarchy laws, do/don'ts |
+| `color-system.md` | Dark palettes + accents + gradients as CSS variables |
+| `typography-system.md` | Fonts, fluid type scale, weights, tracking, roles |
+| `spacing-system.md` | 4/8-pt scale, container widths, section/card rhythm |
+| `layout-system.md` | 12-col grid + canonical section layouts |
+| `component-library.md` | Specs for all 17 components |
+| `motion-system.md` | Easing, durations, hover/scroll/micro-interactions |
+| `accessibility-system.md` | Contrast, focus, semantics, keyboard, reduced motion |
+| `website-generation-rules.md` | Pure-vanilla build rules: page list, clean URLs + `vercel.json`, nav, SEO, perf |
+| `example-page-structures.md` | Section-by-section page blueprints per site type |
+
+## The look
+
+Near-black blue-violet backgrounds, layered surfaces, one high-contrast text ramp, a
+restrained **violet→cyan** AI accent, subtle gradients/glow, generous spacing, large
+fluid display type, and quiet fast micro-motion — premium and enterprise-credible.
+
+## Components (17)
+
+Navbar · Hero · Feature Grid · Bento Grid · Testimonials · Logos · Pricing · FAQ ·
+CTA · Footer · Dashboard Preview · Agent Workflow · Code Preview · Terminal Preview ·
+Trust · Security · Enterprise.
+
+## Rules it enforces
+
+- **Multipage scale (mandatory)** — builds a **15+ page (≈20)** site, **≥10 sections
+  per page (≈12)**, **all sections on one shared background color**, and **no
+  borders/dividers between sections** (separation by spacing only).
+- **Pure vanilla stack** — HTML5 + CSS3 + vanilla JS only; **no React/Vue/Angular/
+  Svelte/Bootstrap/Tailwind/jQuery/any UI or CSS library** and no build step.
+- **Clean Vercel-ready URLs** — extensionless routes (`/pricing`), with `vercel.json`
+  (`cleanUrls`), `sitemap.xml`, and `robots.txt`; refresh + deep links work.
+- **Full navigation + SEO** — desktop mega-menus, mobile overlay, breadcrumbs; per-page
+  title/description, Open Graph, Twitter card, canonical, and JSON-LD structured data.
+- **Centralized tokens** (`:root`/`tokens.css` + optional `tokens.json`) — rebrand by
+  changing the accent only; no scattered hex/px.
+- **Accessible by default** — AA contrast, visible focus, semantics, reduced motion.
+- **Mobile-first responsive**, 4/8-pt spacing, fluid type, 12-col grid.
+- **Restraint** — ≤1 prominent gradient/glow per section, glass as a garnish.
+- **Zero anti-patterns** — no Bootstrap/ThemeForest/WordPress/template look, frameworks
+  in the shipped site, overloaded gradients, excessive glassmorphism, weak hierarchy,
+  or poor contrast.
+
+See `SKILL.md` for the full workflow and the companion files for every token and spec.

package/skills/ai-dark-futuristic-design-system/SKILL.md

@@ -0,0 +1,179 @@
+---
+name: ai-dark-futuristic-design-system
+description: >-
+  A world-class, dark-futuristic design system distilled from top AI startup
+  websites (OpenAI, Anthropic, Perplexity, Cursor, Lovable, Replit, Runway,
+  ElevenLabs, Midjourney, xAI, Scale AI, Cognition, Sierra, Harvey). It gives
+  coding/design/UI/branding/website-generation agents a complete, reusable system —
+  design philosophy, color/typography/spacing/grid/layout tokens, a 17-component
+  library, a motion system, accessibility rules, responsive rules, and a production
+  website-generation framework — so they can ship AI-startup sites that visually
+  compete with the references while staying accessible and conversion-optimized. The
+  framework builds a multipage site (15+ pages, 10+ sections/page, one shared section
+  background, no section borders) in PURE HTML/CSS/vanilla JS (no React/Vue/Tailwind/
+  Bootstrap/jQuery/any library), with clean Vercel-ready URLs, mega-menu navigation,
+  and full SEO.
+  Use when the user asks to "design an AI startup website", "make it look like
+  OpenAI/Anthropic/Cursor", "dark futuristic landing page", "build a premium AI SaaS
+  site", or "give me a design system / design tokens". The full system is baked into
+  the companion files in this folder (live research optional). Outputs a generated
+  site/system into a `website/` (or user-named) folder.
+---
+
+# AI Dark Futuristic Design System
+
+A complete, agent-ready design system for building **premium, dark, futuristic AI
+startup websites** that hold their own next to OpenAI, Anthropic, Perplexity,
+Cursor, Lovable, Replit, Runway, ElevenLabs, Midjourney, xAI, Scale AI, Cognition,
+Sierra, and Harvey.
+
+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.
+
+## Hard structural requirements (MANDATORY — never skip)
+
+These are non-negotiable and override any conflicting guidance elsewhere:
+
+1. **Multipage — 15+ pages.** Always generate a **full multipage website with MORE
+   THAN 15 distinct pages** (not a single landing page). Build a real site map (home,
+   product/feature pages, solutions, pricing, customers, about, blog/index, docs,
+   security, enterprise, careers, contact, legal, etc.) until you exceed 15 pages.
+2. **10 sections per page.** Every page must contain **at least 10 full sections** —
+   compose them from the layout + component library so each page is rich and complete.
+3. **One single background color for ALL sections.** Every section on every page uses
+   the **same background color** (`--bg-900`). Do **NOT** alternate section
+   backgrounds, and do **NOT** give sections different fills. The whole page is one
+   continuous dark canvas; separation comes from **spacing, type, and surfaces
+   (cards)** only.
+4. **No borders/dividers between sections.** There must be **zero border width, lines,
+   rules, or divider elements between sections**. Sections are separated by whitespace
+   (`--section-y` padding) alone — never by a border, `border-top/bottom`, `<hr>`, or
+   a background-color change.
+5. **Pure HTML + CSS + vanilla JS — no frameworks/libraries.** The generated website
+   uses **only HTML5, CSS3, and vanilla JavaScript**. No React/Vue/Angular/Svelte/
+   Next, no Bootstrap/Tailwind/any CSS framework, no jQuery/any UI or JS library, no
+   build step. Hand-write everything. (You may still export `tokens.json` for other
+   agents — that's token data, not a framework.)
+6. **Clean, Vercel-ready URLs.** All routes are **extensionless** (`/pricing`, not
+   `/pricing.html`); ship a `vercel.json` (`cleanUrls: true`) plus `sitemap.xml` /
+   `robots.txt` so refresh and deep links work in production.
+7. **Full navigation + SEO.** Desktop **mega-menu** nav + mobile overlay + breadcrumbs;
+   per-page SEO (unique title/description, Open Graph, Twitter card, canonical,
+   JSON-LD). Every component: responsive, accessible, reusable, production-ready,
+   animation-ready, dark-mode-optimized.
+
+See `website-generation-rules.md` for the required page list (15+, ~20), required
+sections (≥10, ~12), the `vercel.json`, nav, and SEO specifics.
+
+Enforce these in code: set one page background, give every `.section`
+`background: transparent; border: 0;`, and rely on `--section-y` padding for rhythm.
+
+## When to use
+
+Building or designing any landing page, marketing site, or product site for an AI
+company, agentic-AI startup, developer platform, infrastructure startup, 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 philosophy, visual-hierarchy laws, and do/don'ts |
+| `color-system.md` | Dark palettes + accents + gradients as CSS variables |
+| `typography-system.md` | Fonts, fluid type scale, weights, tracking, roles |
+| `spacing-system.md` | 4/8-pt scale, container widths, section/card rhythm |
+| `layout-system.md` | Grid + the canonical section layouts |
+| `component-library.md` | Specs for all 17 required components |
+| `motion-system.md` | Easing, durations, hover/scroll/micro-interactions |
+| `accessibility-system.md` | Contrast, focus, motion, semantics, keyboard |
+| `website-generation-rules.md` | Pure-vanilla build: pages, sections, clean URLs + `vercel.json`, nav, SEO, perf |
+| `example-page-structures.md` | Ready section-by-section 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, 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 —
+then fold it in and note what changed.
+
+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.
+
+## Phase 2 — Generate (the workflow)
+
+1. **Clarify intent:** site type (landing / SaaS / dev platform / enterprise /
+   agentic), brand accent (or use the default violet→cyan), 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 optionally a
+   `tokens.json`). Override only the accent to match the brand.
+3. **Compose layouts:** pick section layouts from `layout-system.md` /
+   `example-page-structures.md`; assemble components from `component-library.md`.
+4. **Apply motion + a11y:** add interactions per `motion-system.md`, gated by
+   `prefers-reduced-motion`; meet every rule in `accessibility-system.md`.
+5. **Emit code:** follow `website-generation-rules.md` to produce clean, semantic,
+   responsive **pure HTML + CSS + vanilla JS** (no frameworks/libraries) plus design
+   tokens, `vercel.json` (clean URLs), `sitemap.xml`, and `robots.txt`.
+6. **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** (one continuous same-background
+  canvas each, ≥10 sections per page, no inter-section borders), linked with
+  **extensionless URLs** (`/pricing`)
+- `website/css/tokens.css` (the `:root` design tokens) + `website/css/styles.css`
+- `website/js/main.js` (vanilla nav/mega-menu, motion, interactions — progressively enhanced)
+- `website/vercel.json` (clean-URL routing), `website/sitemap.xml`, `website/robots.txt`
+- `website/tokens.json` (machine-readable tokens for other agents)
+
+When the user only wants the **system** (not a site), emit the tokens + component
+specs as files/snippets they can drop into any stack.
+
+## Default look (baked-in identity)
+
+Near-black blue-violet backgrounds, layered surfaces, one high-contrast text ramp, a
+**violet→cyan** AI accent used sparingly, restrained gradients and glow, generous
+spacing, large fluid display type, and quiet, fast micro-motion. Premium and
+enterprise-credible — never neon-soaked or template-looking.
+
+## 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 ·
+**alternating/different section background colors · 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 OpenAI/Anthropic/Perplexity/Cursor/
+Lovable/Vercel/Linear — 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), **all sections share one background color** (`--bg-900`), and there
+   are **no borders/dividers between sections** (separation by spacing only).
+0b. **Pure vanilla + clean URLs:** zero frameworks/libraries (no React/Vue/Tailwind/
+   Bootstrap/jQuery/etc.); all routes extensionless with a working `vercel.json`
+   (`cleanUrls`), `sitemap.xml`, and `robots.txt`; refresh + deep links resolve.
+0c. **Nav + SEO:** desktop mega-menu + mobile overlay + breadcrumbs; every page has a
+   unique title/description, Open Graph + Twitter card, canonical, and JSON-LD.
+1. Tokens emitted once (`:root`/`tokens.css`) and reused — no hard-coded one-off hex
+   values scattered through the markup.
+2. Type uses the fluid scale; spacing uses the 4/8-pt scale; layout uses the grid +
+   container widths — all from the companion files.
+3. Every section is a recognized layout; every component matches `component-library.md`.
+4. Body text ≥ 4.5:1 contrast, large text ≥ 3:1; visible focus states; motion
+   respects `prefers-reduced-motion`; semantic landmarks + alt text present.
+5. Fully responsive (360 → 1440+), no horizontal scroll, tap targets ≥ 44px.
+6. Trips **zero** anti-patterns; gradients/glass are restrained; hierarchy is clear.
+7. Output looks like it belongs next to the reference sites — premium, dark,
+   futuristic, and conversion-focused.