spirewise 1.7.1 → 1.8.0

package/README.md

@@ -105,25 +105,10 @@ tidied up, and anything already absent is reported as skipped.
 | `nvidia-inception-idea-booster` | `nvidia-inception/elevated-idea.md` | Reads your idea files and elevates them to NVIDIA's preferences |
 | `nvidia-product-inventor` | `products_raw/<Product>/product.md` | Invents 3–6 GPU-essential products (4–10 letter names) from your idea |
 | `nvidia-startup-idea-founder` | `nvidia-inception/startup-ideas/<Idea>.md` | Crawls NVIDIA RFS + recently funded/accepted Inception startups and invents 10/10-acceptance startup ideas |
-| `website-design-skills/01-proof` … `35-jasper` | `websites/<NN-slug>/` | **35 Website Design System Architect skills**, each modeled on a real, live-scraped SaaS site — generates a production-grade HTML/CSS/JS site with that brand's tokens, components, and pages |
 
 The copywriting skills keep **every field below** the platform's character limit
 (with ~10% headroom) and verify counts before finishing.
 
-### Website-design skills (grouped)
-
-The 35 website-design skills live in `skills/website-design-skills/` as numbered
-folders (`01-proof` … `35-jasper`). They are discovered automatically and can be
-installed by their **short leaf name** or full path:
-
-```bash
-npx spirewise -s 01-proof -a claude --workspace          # short name
-npx spirewise -s website-design-skills/35-jasper -a cursor  # full path
-```
-
-Each installs into the agent's folder as `NN-slug` (e.g. `.claude/skills/01-proof`).
-See `skills/website-design-skills/README.md` for the full index.
-
 ## Usage after install
 
 Once installed, just ask your agent:

package/bin/cli.js

@@ -94,7 +94,7 @@ function resolveTarget(agent, scope) {
 
 // Recursively find every skill folder (a dir containing SKILL.md) at any depth
 // under skills/. Skill ids are POSIX-style relative paths, e.g.
-// "f6s-copywriting" or "website-design-skills/01-proof".
+// "f6s-copywriting" or "nvidia-product-inventor".
 function walkSkills(dir, baseDir, out) {
   for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
     if (!entry.isDirectory()) continue;
@@ -134,7 +134,7 @@ let NAME_BY_ID = new Map();
 const installName = (id) => NAME_BY_ID.get(id) || skillBase(id);
 
 // Resolve a user-supplied token to a full skill id. Accepts the full path
-// ("website-design-skills/01-proof") or the unique leaf name ("01-proof").
+// ("nvidia-inception-idea-booster") or the unique leaf name.
 function resolveSkillToken(tok, available) {
   if (available.includes(tok)) return tok;
   const matches = available.filter((id) => skillBase(id) === tok);
@@ -170,7 +170,7 @@ function copyDir(src, dest) {
   }
 }
 
-function installToAgent(agentKey, agent, scope, skills) {
+function installToAgent(agentKey, agent, scope, skills, onItem) {
   const targetDir = resolveTarget(agent, scope);
   fs.mkdirSync(targetDir, { recursive: true });
   for (const skill of skills) {
@@ -178,34 +178,31 @@ function installToAgent(agentKey, agent, scope, skills) {
     if (agent.format === 'skill') {
       const dest = path.join(targetDir, name);
       copyDir(skillSrc(skill), dest);
-      console.log(`      ${paint(RAW.green, '✓')} ${paint(RAW.bold, agent.label)} ${c.dim}(${scope === 'project' ? 'workspace' : scope})${c.reset} ${skill} ${c.dim}→ ${dest}${c.reset}`);
     } else {
       const { description, body } = readSkill(skill);
       const front = `---\ndescription: ${description}\nalwaysApply: false\n---\n\n`;
       const file = path.join(targetDir, name + (agent.ext || '.md'));
       fs.writeFileSync(file, front + body);
-      console.log(`      ${paint(RAW.green, '✓')} ${paint(RAW.bold, agent.label)} ${c.dim}(${scope === 'project' ? 'workspace' : scope})${c.reset} ${skill} ${c.dim}→ ${file}${c.reset}`);
     }
+    if (onItem) onItem(agent, skill);
   }
 }
 
 // Returns the number of items actually removed.
-function removeFromAgent(agentKey, agent, scope, skills) {
+function removeFromAgent(agentKey, agent, scope, skills, onItem) {
   const targetDir = resolveTarget(agent, scope);
-  const tag = scope === 'project' ? 'workspace' : scope;
   let removed = 0;
   for (const skill of skills) {
     const name = installName(skill);
     const target = agent.format === 'skill'
       ? path.join(targetDir, name)
       : path.join(targetDir, name + (agent.ext || '.md'));
-    if (fs.existsSync(target)) {
+    const existed = fs.existsSync(target);
+    if (existed) {
       fs.rmSync(target, { recursive: true, force: true });
       removed++;
-      console.log(`      ${paint(RAW.green, '✓')} ${paint(RAW.bold, agent.label)} ${c.dim}(${tag})${c.reset} ${skill} ${c.dim}removed ← ${target}${c.reset}`);
-    } else {
-      console.log(`      ${paint(RAW.dim, '·')} ${agent.label} ${c.dim}(${tag})${c.reset} ${skill} ${c.dim}— not found, skipped${c.reset}`);
     }
+    if (onItem) onItem(agent, skill, existed);
   }
   // Tidy up the now-empty rules/skills dir we may have created.
   try {
@@ -214,16 +211,37 @@ function removeFromAgent(agentKey, agent, scope, skills) {
   return removed;
 }
 
-function box(lines) {
-  const vis = (s) => s.replace(/\x1b\[[0-9;]*m/g, '');
-  const width = Math.max(...lines.map((l) => vis(l).length));
-  console.log(paint(RAW.green, '  ┌' + '─'.repeat(width + 2) + '┐'));
-  for (const l of lines) console.log(paint(RAW.green, '  │ ') + l + ' '.repeat(width - vis(l).length) + paint(RAW.green, ' │'));
-  console.log(paint(RAW.green, '  └' + '─'.repeat(width + 2) + '┘'));
+// Vertical wizard stepper. Each step is a rounded number square (#01, #02, #03)
+// with a vertical connector line dropping from the centre of each square to the
+// next — a left-rail "stepper" rendered above every wizard screen.
+function stepper(current, steps) {
+  const out = [];
+  const PAD = '  ';
+  for (let i = 0; i < steps.length; i++) {
+    const n = i + 1;
+    const num = '#' + String(n).padStart(2, '0');             // #01, #02, #03
+    const state = n < current ? 'done' : n === current ? 'active' : 'pending';
+    const color = state === 'done' ? RAW.green : state === 'active' ? RAW.cyan : RAW.dim;
+    const label = state === 'active' ? paint(RAW.bold, steps[i])
+                : state === 'done'   ? paint(RAW.dim, steps[i] + '  ✓')
+                :                      paint(RAW.dim, steps[i]);
+    // rounded square (≈10–15% corner radius via ╭╮╰╯) holding the step number
+    out.push(PAD + paint(color, '╭─────╮'));
+    out.push(PAD + paint(color, '│ ' + num + ' │') + '   ' + label);
+    out.push(PAD + paint(color, '╰─────╯'));
+    if (n < steps.length) out.push(PAD + '   ' + paint(RAW.dim, '│'));   // centred connector
+  }
+  return out;
 }
 
+// Single, in-place updating status line (collapses the install/remove progress
+// so the whole "done process" lives on one line instead of streaming many rows).
+const IS_TTY = !!process.stdout.isTTY;
+const live = (s) => { if (IS_TTY) process.stdout.write('\r\x1b[2K  ' + s); };
+const liveEnd = (s) => { if (IS_TTY) process.stdout.write('\r\x1b[2K  ' + s + '\n'); else console.log('  ' + s); };
+
 // --- Interactive full-width selector ---------------------------------------
-function interactiveSelect({ title, subtitle, items, multi = true, preselected = [], pageSize = 5 }) {
+function interactiveSelect({ title, subtitle, items, multi = true, preselected = [], pageSize = 5, step, steps }) {
   return new Promise((resolve) => {
     const stdin = process.stdin, stdout = process.stdout;
     if (!stdin.isTTY) { resolve(null); return; }
@@ -252,7 +270,8 @@ function interactiveSelect({ title, subtitle, items, multi = true, preselected =
       if (start > items.length - PAGE) start = items.length - PAGE;
       const end = start + PAGE;
 
-      const lines = ['', bar(title)];
+      const head = (step && steps) ? stepper(step, steps) : [bar(title)];
+      const lines = ['', ...head, ''];
       if (subtitle) lines.push(paint(RAW.dim, '  ' + subtitle));
       if (items.length > PAGE) {
         const above = start > 0 ? '▲ more' : '      ';
@@ -393,7 +412,7 @@ async function main() {
   const o = parseArgs(argv);
   const tty = process.stdin.isTTY;
   const verb = action === 'remove' ? 'remove' : 'install';
-  const Verb = action === 'remove' ? 'Remove' : 'Install';
+  const Ving = action === 'remove' ? 'Removing' : 'Installing';
   banner();
 
   // 1) SKILLS
@@ -406,7 +425,8 @@ async function main() {
     });
   } else if (tty) {
     skills = await interactiveSelect({
-      title: `Step 1/3 · Select skills to ${verb}`,
+      title: `Select skills to ${verb}`,
+      step: 1, steps: ['Select skills', 'Select agents', 'Select scope'],
       subtitle: action === 'remove' ? 'These will be deleted from the chosen agents' : 'Copy templates to install into your agents',
       items: available.map((s) => ({ value: s, label: s, hint: skillHint(s) })),
       multi: true, preselected: [],
@@ -421,7 +441,8 @@ async function main() {
     for (const k of agentKeys) if (!AGENTS[k]) die(`Unknown agent '${k}'. Run "spirewise agents".`);
   } else if (tty) {
     agentKeys = await interactiveSelect({
-      title: `Step 2/3 · Select agents`,
+      title: `Select agents`,
+      step: 2, steps: ['Select skills', 'Select agents', 'Select scope'],
       subtitle: action === 'remove' ? 'Skills are removed from each agent’s folder' : 'Each agent gets the skills in its own folder + format',
       items: Object.entries(AGENTS).map(([k, a]) => ({ value: k, label: a.label, hint: `(${k}) · ${a.format}` })),
       multi: true, preselected: [],
@@ -434,7 +455,8 @@ async function main() {
   let scope = o.scope;
   if (!scope && tty) {
     scope = await interactiveSelect({
-      title: 'Step 3/3 · Select scope',
+      title: 'Select scope',
+      step: 3, steps: ['Select skills', 'Select agents', 'Select scope'],
       subtitle: action === 'remove' ? 'Where to remove the skills from?' : 'Where should the skills live?',
       items: [
         { value: 'project', label: 'Workspace', hint: 'this folder only — the current project' },
@@ -450,27 +472,33 @@ async function main() {
 
   // ACTION
   console.log('');
-  info(`${Verb}ing ${paint(RAW.bold, String(skills.length))} skill(s) ${action === 'remove' ? 'from' : 'into'} ${paint(RAW.bold, String(agentKeys.length))} agent(s) · scope ${paint(RAW.bold, scope === 'project' ? 'workspace' : scope)}`);
+  info(`${Ving} ${paint(RAW.bold, String(skills.length))} skill(s) ${action === 'remove' ? 'from' : 'into'} ${paint(RAW.bold, String(agentKeys.length))} agent(s) · scope ${paint(RAW.bold, scope === 'project' ? 'workspace' : scope)}`);
 
   let count = 0;
+  const totalOps = scopes.length * agentKeys.length * skills.length;
+  let seen = 0;
+  const progress = (agent, skill, removed) => {
+    seen++;
+    const pct = totalOps ? Math.round((seen / totalOps) * 100) : 100;
+    live(`${paint(RAW.cyan, '⟳')} ${Ving}… ${paint(RAW.bold, String(seen))}/${totalOps} (${pct}%) ${c.dim}${agent.label} · ${skill}${c.reset}`);
+  };
   for (const sc of scopes) for (const k of agentKeys) {
-    if (action === 'remove') count += removeFromAgent(k, AGENTS[k], sc, skills);
-    else { installToAgent(k, AGENTS[k], sc, skills); count += skills.length; }
+    if (action === 'remove') count += removeFromAgent(k, AGENTS[k], sc, skills, progress);
+    else { installToAgent(k, AGENTS[k], sc, skills, progress); count += skills.length; }
+  }
+  // Collapse the whole done process into one final line.
+  const scopeLabel = scopes.map((s) => (s === 'project' ? 'workspace' : s)).join(' + ');
+  if (action === 'remove') {
+    liveEnd(`${count === 0 ? paint(RAW.yellow, '·') : paint(RAW.green, '✓')} Removed ${paint(RAW.bold, String(count))} item(s) from ${paint(RAW.bold, String(agentKeys.length))} agent(s) ${c.dim}· ${scopeLabel}${c.reset}`);
+  } else {
+    liveEnd(`${paint(RAW.green, '✓')} Installed ${paint(RAW.bold, String(skills.length))} skill(s) × ${paint(RAW.bold, String(agentKeys.length))} agent(s) ${c.dim}· ${count} file(s) · ${scopeLabel}${c.reset}`);
   }
 
-  console.log('');
   if (action === 'remove') {
-    box([
-      `Removed ${paint(RAW.bold, String(count))} item(s) from ${paint(RAW.bold, String(agentKeys.length))} agent(s)`,
-      `scope: ${scopes.map((s) => (s === 'project' ? 'workspace' : s)).join(' + ')}`,
-      count === 0 ? `nothing matched — already clean` : `done — skills removed`,
-    ]);
+    if (count === 0) liveEnd(paint(RAW.dim, '  nothing matched — already clean'));
   } else {
-    box([
-      `Installed ${paint(RAW.bold, String(skills.length))} skill(s) into ${paint(RAW.bold, String(agentKeys.length))} agent(s)`,
-      `scope: ${scopes.map((s) => (s === 'project' ? 'workspace' : s)).join(' + ')}   ·   ${count} item(s) written`,
-      `next: open your agent and say "write our F6S profile copy"`,
-    ]);
+    console.log('');
+    info(`next: open your agent and say ${paint(RAW.bold, '"write our F6S profile copy"')}`);
   }
   console.log('');
 }

package/install.sh

@@ -43,8 +43,8 @@ info()  { printf '%s %s\n' "$(color '1;34' '==>')" "$1"; }
 ok()    { printf '%s %s\n' "$(color '1;32' ' ok')" "$1"; }
 warn()  { printf '%s %s\n' "$(color '1;33' '  !')" "$1" >&2; }
 die()   { printf '%s %s\n' "$(color '1;31' 'err')" "$1" >&2; exit 1; }
-step()  { printf '%s %s  %s\n' "$(color '1;36' '  >')" "$(color '1' "Step $1/4")" "$2"; }
-substep() { printf '      %s %s\n' "$(color '1;32' 'v')" "$1"; }
+step()  { printf '%s %s  %s\n' "$(color '1;36' '  >')" "$(color '1;36' "[ #$(printf '%02d' "$1") ]")" "$2"; }
+substep() { :; }   # per-item output collapses into the single final summary line
 
 banner() {
   printf '\n'
@@ -119,7 +119,7 @@ available_skills() {
   fi
 }
 
-# Leaf base name a skill id installs as (e.g. website-design-skills/01-proof -> 01-proof).
+# Leaf base name a skill id installs as (e.g. group/sub-skill -> sub-skill).
 skill_base() { printf '%s' "${1##*/}"; }
 
 # Resolve a user token to a full id: exact id, else unique leaf-name match.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "spirewise",
-  "version": "1.7.1",
-  "description": "Installable Agent Skills for GitHub Copilot, Claude Code, and Cursor — copywriting (F6S & LinkedIn), NVIDIA Inception tooling, and 35 website design-system architect skills modeled on real SaaS sites.",
+  "version": "1.8.0",
+  "description": "Installable Agent Skills for GitHub Copilot, Claude Code, and Cursor — copywriting (F6S & LinkedIn) and NVIDIA Inception tooling.",
   "bin": {
     "spirewise": "bin/cli.js"
   },
@@ -20,8 +20,6 @@
     "f6s",
     "linkedin",
     "nvidia-inception",
-    "website-design",
-    "design-system",
     "github-copilot",
     "claude-code",
     "cursor",

package/skills/README.md

@@ -13,7 +13,6 @@ ready-to-paste copy for company profile pages, with strict character-limit safet
 | `nvidia-inception-idea-booster` | `nvidia-inception/elevated-idea.md` | Reads your idea files and elevates them to NVIDIA's preferences |
 | `nvidia-product-inventor` | `products_raw/<Product>/product.md` | Invents 3–6 GPU-essential products (4–10 letter names) from your idea |
 | `nvidia-startup-idea-founder` | `nvidia-inception/startup-ideas/<Idea>.md` | Crawls NVIDIA RFS + recently funded/accepted Inception startups and invents 10/10-acceptance startup ideas |
-| `website-design-skills/01-proof` … `35-jasper` | `websites/<NN-slug>/` | 35 design-system skills, each modeled on a real SaaS site (15+ pages, products + per-product pages) |
 
 Each skill writes one plain-text file and keeps **every field below** the
 platform's character limit (with ~10% headroom).

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

@@ -0,0 +1,105 @@
+# ai-agent-os-design-system
+
+A world-class, **AI agent operating-system design system** for building websites for **agentic-AI
+products** — where the page renders the product's core mechanics: **agent orchestration graphs,
+run/workflow timelines, tool-calling streams, multi-agent handoffs, reasoning traces, and command
+palettes**, in a precise, trustworthy **"OS for agents"** aesthetic. The control-room clarity of
+Cursor/Cognition/Sierra — built **accessibly in pure vanilla** (graphs/timelines as inline SVG/
+Canvas/semantic HTML, every visual paired with a text/list equivalent). Distilled from Cursor,
+Cognition/Devin, Sierra, Lindy, Manus, LangGraph, Replit, Linear, Vercel, and modern AI sites
+(OpenAI, Anthropic, Perplexity).
+
+It also ships a **production website-generation framework**: a multipage site (15+ pages, 10+
+sections/page, **no borders/dividers between sections**) in **pure HTML/CSS/vanilla JS** — graphs/
+timelines hand-built in inline SVG/Canvas (**no D3/Cytoscape/React Flow/any graph library**; no
+React/Vue/Tailwind/Bootstrap/jQuery) — 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`, `bento-grid-design-system`, `glassmorphism-design-system`,
+> `editorial-luxury-design-system`, `motion-storytelling-design-system`,
+> `enterprise-data-viz-design-system`, `brutalist-tech-design-system`.
+
+## Install
+
+```bash
+npx spirewise install -s ai-agent-os-design-system          # pick agents + scope
+npx spirewise install -s ai-agent-os-design-system -a claude,cursor -sc workspace
+```
+
+## Remove
+
+```bash
+npx spirewise remove -s ai-agent-os-design-system           # pick agents + scope
+npx spirewise remove -s ai-agent-os-design-system -a claude,cursor -sc both
+```
+
+(No Node? `./install.sh -s ai-agent-os-design-system` and `./install.sh remove -s ai-agent-os-design-system`.)
+
+## Use
+
+After installing, ask your agent:
+
+> "Build a website for our AI agent platform — show the orchestration"
+> "Agent graph + run timeline + command palette, like Cursor/Cognition/Sierra"
+
+It reads the companion files, locks the tokens (incl. the agent **status** system), storyboards a
+coherent example run, builds the agent visuals in vanilla SVG/Canvas with text equivalents,
+applies functional 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: agent-OS philosophy, mandates, workflow, output, checklist |
+| `design-principles.md` | "Show the agent thinking/acting", the **status language**, do/don'ts |
+| `color-system.md` | Control-room palette + **agent status** + node/edge tokens (CSS vars) |
+| `typography-system.md` | Mono + grotesk, fluid scale, log/trace/label/metric roles |
+| `spacing-system.md` | 4/8-pt scale, **two densities** (marketing + control-room), containers |
+| `layout-system.md` | Grid + agent-OS layouts (graph+inspector, run timeline, console, terminal) |
+| `component-library.md` | 17 components + Agent Graph, Run Timeline, Tool-Call Stream, Command Palette |
+| `motion-system.md` | Run progression, node activation, streaming, status pulse |
+| `accessibility-system.md` | Graph/timeline **text equivalents**, status not-color-only, palette a11y |
+| `website-generation-rules.md` | Pure-vanilla build (SVG/Canvas graphs), clean URLs, nav, SEO |
+| `example-page-structures.md` | Agent-product page blueprints per site type |
+
+## The look
+
+A calm **control-room dark** canvas with crisp panels, monospace accents, a clear **status color
+system** (running/success/error/waiting/needs-approval/blocked), an agent graph with one accent
+tracing the **active path**, run timelines with step states + durations, and streaming tool/log
+output. Technical and trustworthy — dense but legible, never an "AI magic" cliché. Default dark;
+light included.
+
+## Components (17 + agent toolkit)
+
+Navbar (+ Cmd-K) · Workspace/Run Hero · Feature Grid · Agent Bento · Testimonials · Logos ·
+Pricing · FAQ · CTA · Footer · Agent Console (Dashboard Preview) · Agent Workflow · Code Preview ·
+Terminal Preview · Trust (status/metrics) · Security (guardrails/HITL) · Enterprise (governance) —
+**plus** Agent Graph · Run Timeline · Tool-Call Stream · Reasoning Trace · Command Palette · Status
+Chip · Inspector.
+
+## Rules it enforces
+
+- **Render real mechanics, coherently** — graph/run-timeline/tool-stream/trace with **realistic
+  example runs** (no gibberish) and a consistent **status system** (color + icon + label).
+- **Agent-UI accessibility (critical)** — **every graph/timeline/trace has a text/list equivalent**
+  + `aria` summary; **status never color-only**; streaming logs `role="log" aria-live="polite"` +
+  pause; the **command palette** is Cmd-K **and** button, dialog/combobox/listbox, Esc.
+- **Multipage scale (mandatory)** — **15+ pages (≈20)**, **≥10 sections/page (≈12)**, and **no
+  borders/dividers between sections** (separation by whitespace + surface elevation + tone).
+- **Pure vanilla stack** — HTML5 + CSS3 + vanilla JS; **graphs/timelines are inline SVG/Canvas/
+  semantic HTML — no D3/Cytoscape/React Flow/any graph library**; no React/Vue/Tailwind/Bootstrap/
+  jQuery; no build step.
+- **Clean Vercel-ready URLs** — extensionless routes (`/pricing`), `vercel.json` (`cleanUrls`),
+  `sitemap.xml`, `robots.txt`; refresh + deep links work.
+- **Full navigation + SEO** — desktop dropdowns + Cmd-K, mobile overlay, breadcrumbs; per-page
+  title/description, Open Graph, Twitter card, canonical, JSON-LD (SoftwareApplication).
+- **Centralized tokens (incl. status), mono for the mechanics, mobile-first responsive** (workspace/
+  graph/console reflow), **functional motion** (run progression), reduced-motion fallback. **Zero
+  anti-patterns** — no AI-magic clichés, gibberish runs, color-only status, graph libraries, or template look.
+
+See `SKILL.md` for the full workflow and the companion files for every token and spec.

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

@@ -0,0 +1,195 @@
+---
+name: ai-agent-os-design-system
+description: >-
+  A world-class, AI AGENT OPERATING SYSTEM design system for building websites for
+  agentic-AI products — where the page renders the product's core mechanics: agent
+  orchestration graphs, run/workflow timelines, tool-calling, multi-agent handoffs,
+  reasoning traces, and command palettes, in an "OS for agents" aesthetic. Distilled
+  from agentic/dev-tool references (Cursor, Cognition/Devin, Sierra, Lindy, Manus,
+  LangChain/LangGraph, Replit, Linear, Vercel) and modern AI sites (OpenAI, Anthropic,
+  Perplexity) for structure. It gives coding/design/UI/branding/website-generation
+  agents a complete, reusable system: design philosophy, a control-room color system,
+  mono+grotesk typography, spacing, grid, a 17+ -component library (Agent Graph, Run
+  Timeline, Tool-Call Stream, Command Palette, Reasoning Trace), a motion system,
+  accessibility, 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 (graphs/timelines via inline SVG/Canvas — no libraries; no
+  React/Vue/Tailwind/Bootstrap/jQuery), with clean Vercel-ready URLs (no `.html`),
+  navigation, and full SEO. Use when the user asks for an "AI agent / agentic / agent OS
+  website", "agent orchestration UI", "workflow/run timeline", "make it like Cursor/
+  Cognition/Sierra", or "an agent design system / tokens". The full system is baked into
+  the companion files (live research optional). Outputs a generated site/system into a
+  `website/` folder.
+---
+
+# AI Agent Operating System Design System
+
+A complete, agent-ready design system for **agentic-AI product websites** — where the page
+itself renders the product's core mechanics: **agent orchestration graphs, run/workflow
+timelines, tool-calling streams, multi-agent handoffs, reasoning traces, and command
+palettes**, in a precise, trustworthy **"operating system for agents"** aesthetic. The
+control-room clarity of Cursor/Cognition/Sierra with a calm, technical polish — built
+**accessibly in pure vanilla** (graphs/timelines as inline SVG/Canvas, every visual paired
+with a text/list equivalent). Distilled from Cursor, Cognition/Devin, Sierra, Lindy, Manus,
+LangGraph, Replit, Linear, Vercel, and modern AI sites (OpenAI, Anthropic, Perplexity).
+
+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 — show the agent thinking and acting
+
+- **Render the mechanics.** Lead with the product's actual model: an **agent graph**
+  (nodes + edges, handoffs), a **run timeline** (steps with states), a **tool-call stream**
+  (the agent invoking tools), a **reasoning trace**, and a **command palette**.
+- **Status is the language.** Agents have states — queued, running, waiting, succeeded,
+  failed, blocked-on-human. A consistent **status system** (color + icon + label) runs
+  through every component.
+- **Trust through transparency.** Showing the plan, the steps, the tools, and the outcome
+  (with approvals/guardrails) is how an agent product earns enterprise trust.
+- **Calm control room.** Dark, precise, monospace-accented UI that feels like tooling, not a
+  toy — dense but legible, with one accent that traces the active path.
+
+## 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**,
+   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, surface elevation
+   (panels/cards), background tone, and type hierarchy** — never a section border. (A graph
+   node's border, a timeline's connector, or a card edge is *inside* a component, not a
+   divider between page sections.)
+4. **Pure HTML + CSS + vanilla JS — no frameworks/libraries.** The generated site uses
+   **only HTML5, CSS3, and vanilla JavaScript**. **Agent graphs, timelines, and traces are
+   hand-built with inline SVG / `<canvas>` / semantic HTML — no D3, Cytoscape, React Flow,
+   or any graph/charting/UI library.** No React/Vue/Angular/Svelte/Next, no Bootstrap/
+   Tailwind/any CSS framework, no jQuery, 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.
+
+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 a website for an **agentic-AI product** — agent platforms, AI
+coworkers/copilots, automation/orchestration, agent infra/frameworks, AI SDR/support agents,
+coding agents — Cursor/Cognition/Sierra/Lindy energy — or producing **design tokens / an
+agent design system** for other agents.
+
+## The companion files (read what you need)
+
+| File | What it gives you |
+|---|---|
+| `design-principles.md` | The agent-OS philosophy, status language, hierarchy, do/don'ts |
+| `color-system.md` | Control-room palette + **agent status** + node/edge tokens (CSS vars) |
+| `typography-system.md` | Mono + grotesk, fluid scale, log/trace/label roles |
+| `spacing-system.md` | 4/8-pt scale, dense control-room rhythm, container widths |
+| `layout-system.md` | Grid + agent-OS layouts (graph, timeline, console, split) |
+| `component-library.md` | 17 components + Agent Graph, Run Timeline, Tool-Call Stream, Command Palette |
+| `motion-system.md` | Run progression, node activation, streaming text, status pulses |
+| `accessibility-system.md` | Graph/timeline a11y (text equivalents), status not-color-only, focus |
+| `website-generation-rules.md` | Pure-vanilla build (SVG/Canvas graphs), clean URLs, nav, SEO |
+| `example-page-structures.md` | Ready agent-product 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 (incl. status), type, spacing, the agent 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 — expressed through agent orchestration UI.
+
+## Phase 2 — Generate (the workflow)
+
+1. **Clarify intent:** what the agent product does, the key mechanic to show (graph / run
+   timeline / tool stream / reasoning trace), theme (default control-room dark), accent, pages.
+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`), incl.
+   the **agent status** tokens.
+3. **Storyboard the agent:** define a concrete example run (goal → plan → steps → tools →
+   handoffs → outcome) and render it through the components with realistic data.
+4. **Compose layouts + components:** Agent Graph, Run Timeline, Tool-Call Stream, Reasoning
+   Trace, Command Palette, plus the standard marketing components.
+5. **Build in vanilla + pair with text equivalents:** graphs/timelines as SVG/Canvas/semantic
+   lists; every visual has an `<ol>`/`<table>`/`aria` equivalent; status never color-only.
+6. **Apply motion + a11y:** run progression / node activation / streaming per `motion-system.md`,
+   gated by `prefers-reduced-motion`; meet every rule in `accessibility-system.md`.
+7. **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`.
+8. **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, agent-mechanic-led,
+  no inter-section borders), linked with **extensionless URLs** (`/pricing`)
+- `website/css/tokens.css` + `website/css/styles.css`
+- `website/js/main.js` (vanilla nav + the agent engine: graph/timeline renderers, command palette)
+- `website/vercel.json`, `website/sitemap.xml`, `website/robots.txt`
+- `website/assets/` + optional `website/data/*.json` (sample runs/graphs)
+- `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)
+
+A calm, precise **control-room dark** canvas with crisp panels, monospace accents, a clear
+**status color system** (running/success/error/waiting/blocked), an agent graph with one
+accent tracing the **active path**, run timelines with step states, and streaming tool/log
+output. Technical and trustworthy — dense but legible, never a flashy "AI magic" cliché.
+(Default dark; light included. Siblings: the other `*-design-system` skills.)
+
+## Anti-patterns (never ship these)
+
+Outdated startup designs · Bootstrap/template look · generic SaaS layouts · poor typography ·
+weak visual hierarchy · overloaded gradients · excessive glassmorphism · poor accessibility ·
+inconsistent spacing · **"AI magic" clichés (glowing brains/orbs, sci-fi nonsense UI) · fake/
+nonsensical agent graphs or logs (gibberish steps) · status conveyed by color alone · graphs/
+timelines with no text equivalent · over-animated chaotic motion that obscures the run ·
+borders or dividers between sections · single-page sites or thin pages with fewer than 10
+sections · any framework/graph library in the shipped site · `.html` in URLs**. The result
+must feel like Cursor/Cognition/Sierra — a real, trustworthy agent OS — never a gimmick.
+
+## 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. **Agent-mechanic led met:** the product's real mechanics are shown (graph / run timeline /
+   tool stream / reasoning trace) with **realistic, coherent** example data (no gibberish);
+   a consistent **status system** runs throughout.
+0c. **Agent-UI a11y met:** every graph/timeline/trace has a **text/list equivalent** (`<ol>`/
+   `<table>`) + `aria` summary; status is **never color-only**; keyboard-navigable.
+0d. **Pure vanilla + clean URLs:** graphs/timelines are inline SVG/Canvas/semantic HTML (no
+   library); routes extensionless with `vercel.json` (`cleanUrls`), `sitemap.xml`, `robots.txt`.
+0e. **Nav + SEO:** desktop nav/dropdowns + mobile menu + breadcrumbs; per-page SEO + JSON-LD;
+   a working **command palette** (Cmd/Ctrl-K) that's also keyboard/screen-reader accessible.
+1. Tokens emitted once (`:root`/`tokens.css`) and reused (incl. status) — no scattered hex.
+2. Type uses the fluid scale (mono for logs/traces/labels); 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, large ≥ 3:1; status colors ≥ 3:1 + paired with icon/label; visible focus;
+   semantic landmarks + alt text.
+5. Fully responsive (360 → 1440+): graphs/timelines/consoles reflow or scroll gracefully; no
+   horizontal page scroll; tap targets ≥ 44px.
+6. Trips **zero** anti-patterns; no AI-magic clichés; example runs are coherent.
+7. Output feels like Cursor/Cognition/Sierra — a precise, trustworthy agent operating system.