spirewise 1.7.1 → 1.8.0

package/skills/enterprise-data-viz-design-system/README.md

@@ -0,0 +1,98 @@
+# enterprise-data-viz-design-system
+
+A world-class, **enterprise data-visualization design system** for building precise, data-dense
+product and marketing sites — **dashboards, charts, KPI tiles, metrics, and tables** rendered
+with clarity and trust. The polish of Stripe/Linear with the data fluency of Datadog/Grafana/
+Vercel Analytics — built **accessibly in pure vanilla** (charts as inline SVG/Canvas, every
+visualization paired with a real data table). Distilled from Stripe, Linear, Vercel, Datadog,
+Grafana, Retool, Mixpanel, Notion, and modern AI sites (OpenAI, Anthropic, Perplexity, Cursor,
+Scale AI).
+
+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** — charts
+hand-built in inline SVG/Canvas (**no Chart.js/D3/any charting 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`.
+
+## Install
+
+```bash
+npx spirewise install -s enterprise-data-viz-design-system          # pick agents + scope
+npx spirewise install -s enterprise-data-viz-design-system -a claude,cursor -sc workspace
+```
+
+## Remove
+
+```bash
+npx spirewise remove -s enterprise-data-viz-design-system           # pick agents + scope
+npx spirewise remove -s enterprise-data-viz-design-system -a claude,cursor -sc both
+```
+
+(No Node? `./install.sh -s enterprise-data-viz-design-system` and `./install.sh remove -s enterprise-data-viz-design-system`.)
+
+## Use
+
+After installing, ask your agent:
+
+> "Build a data/analytics product site with dashboards and charts"
+> "Make it like Datadog/Stripe — KPIs, trends, tables, all honest and accessible"
+
+It reads the companion files, locks the tokens (incl. categorical/sequential/diverging data
+scales), designs the data story, builds charts in vanilla SVG/Canvas with data-table equivalents,
+applies restrained 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: data-viz philosophy, mandates, workflow, output, checklist |
+| `design-principles.md` | Clarity/honesty/data-ink philosophy, chart-craft, do/don'ts |
+| `color-system.md` | UI palette + **categorical/sequential/diverging** data scales + deltas |
+| `typography-system.md` | Fonts, **tabular numerals**, fluid scale, metric/table roles |
+| `spacing-system.md` | 4/8-pt scale, **two densities** (marketing + dashboard), containers |
+| `layout-system.md` | Grid + dashboard layouts (KPI rows, chart grids, tables) + marketing |
+| `component-library.md` | 17 components + Charts, KPI Tile, Data Table, Dashboard Preview |
+| `motion-system.md` | Chart draw-in, value count-up, tooltips, sort/filter transitions |
+| `accessibility-system.md` | **Chart a11y (data-table equivalents)**, color-blind-safe, focus |
+| `website-generation-rules.md` | Pure-vanilla build (SVG/Canvas charts), clean URLs, nav, SEO |
+| `example-page-structures.md` | Data-led page blueprints per site type |
+
+## The look
+
+A precise, calm enterprise canvas (default dark slate; light included) with crisp cards, thin
+gridlines, restrained color **reserved for data** (neutral UI so charts pop), tabular numerals,
+clean sortable tables, and KPI tiles with sparklines + deltas. Trustworthy and dense-but-legible
+— Datadog/Stripe precision, never chart-junky.
+
+## Components (17 + data toolkit)
+
+Navbar · Dashboard/Metric Hero · Feature Grid · Data Bento · Testimonials · Logos · Pricing ·
+FAQ · CTA · Footer · Dashboard Preview · Agent Workflow · Code Preview · Terminal Preview · Trust
+(KPI row) · Security · Enterprise — **plus** Charts (SVG/Canvas) · KPI Tile · Data Table ·
+Sparkline · Legend · Filter Bar.
+
+## Rules it enforces
+
+- **Data-led + honest** — lead with dashboards/KPIs/charts; right chart for the message; sensible
+  baselines (no truncated/misleading axes); maximize data-ink; **no chart-junk**.
+- **Chart accessibility (critical)** — **every chart ships a data-table equivalent** + `aria`
+  summary, is **color-blind-safe** (never color-only), keyboard-reachable, with tooltips on focus.
+- **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; **charts are inline SVG/Canvas — no Chart.js/
+  D3/any charting 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, mobile overlay, breadcrumbs; per-page title/
+  description, Open Graph, Twitter card, canonical, JSON-LD (Dataset for data pages).
+- **Tabular numerals, centralized tokens (incl. data scales), mobile-first responsive** (dashboards/
+  tables reflow), **restrained functional motion**, reduced-motion fallback. **Zero anti-patterns**
+  — no chart-junk, misleading charts, color-only encoding, charting libraries, or template look.
+
+See `SKILL.md` for the full workflow and the companion files for every token and spec.

package/skills/enterprise-data-viz-design-system/SKILL.md

@@ -0,0 +1,195 @@
+---
+name: enterprise-data-viz-design-system
+description: >-
+  A world-class, ENTERPRISE DATA VISUALIZATION design system for building precise,
+  data-dense product and marketing sites — dashboards, charts, KPI tiles, metrics,
+  tables, and observability UI rendered with clarity and trust. Distilled from
+  data-led references (Stripe, Linear, Vercel/Analytics, Datadog, Grafana, Retool,
+  Mixpanel, Notion) and modern AI sites (OpenAI, Anthropic, Perplexity, Cursor,
+  Scale AI) for structure. It gives coding/design/UI/branding/website-generation
+  agents a complete, reusable system: design philosophy, a data-aware color system
+  (categorical/sequential/diverging palettes + semantic deltas), typography (tabular
+  numerals), spacing, grid, a 17+ -component library (charts, KPI tiles, data tables,
+  dashboard previews), a motion system, accessibility (every chart has a data-table
+  equivalent), 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 (charts via inline SVG/Canvas — no Chart.js/D3/any
+  library; no React/Vue/Tailwind/Bootstrap/jQuery), with clean Vercel-ready URLs (no
+  `.html`), navigation, and full SEO. Use when the user asks for an "analytics /
+  dashboard / data-viz website", "charts and metrics", "observability product site",
+  "make it like Datadog/Stripe/Linear", or "a data design system / tokens". The full
+  system is baked into the companion files (live research optional). Outputs a
+  generated site/system into a `website/` folder.
+---
+
+# Enterprise Data Visualization Design System
+
+A complete, agent-ready design system for **data-dense, enterprise-grade websites** —
+where dashboards, charts, KPI tiles, metrics, and tables are first-class citizens,
+rendered with **precision, clarity, and trust**. The polish of Stripe/Linear with the
+data fluency of Datadog/Grafana/Vercel Analytics — built **accessibly in pure vanilla**
+(charts as inline SVG/Canvas, every visualization paired with a real data table).
+Distilled from Stripe, Linear, Vercel, Datadog, Grafana, Retool, Mixpanel, Notion, and
+modern AI sites (OpenAI, Anthropic, Perplexity, Cursor, Scale AI).
+
+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 — data as the hero, rendered honestly
+
+- **Show the numbers.** Heroes and feature sections lead with **real-looking dashboards,
+  KPI tiles, charts, and metrics**, not abstract illustration.
+- **Clarity over chart-junk.** Maximize data-ink: thin gridlines, direct labels, no 3D, no
+  gratuitous gradients, honest axes (don't truncate to exaggerate).
+- **A disciplined data palette.** Distinct **categorical** hues, ordered **sequential** and
+  **diverging** scales, and **semantic deltas** (up/good, down/bad — never color-only).
+- **Tabular everything.** Numerals are tabular and aligned; tables are crisp, scannable,
+  and sortable; deltas show direction + value.
+- **Every chart is accessible.** Each visualization ships a **data-table equivalent** (or
+  `<table>` source), `aria` summary, and works without color alone.
+
+## 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
+   (cards/panels), background tone, and type hierarchy** — never a section border. (A
+   chart's gridlines, a card's edge, or a table's row rules are *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**. **Charts are hand-built with inline SVG or
+   `<canvas>` — no Chart.js, D3, ECharts, Highcharts, Plotly, or any 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 any landing page, marketing site, or product site that should feel
+**data-rich and enterprise-grade** (analytics, observability, BI, fintech, infra, AI
+platforms with dashboards) — Datadog/Stripe/Linear/Vercel energy — or producing **design
+tokens / a data design system** for other agents.
+
+## The companion files (read what you need)
+
+| File | What it gives you |
+|---|---|
+| `design-principles.md` | The data-viz philosophy (clarity, honesty, data-ink), do/don'ts |
+| `color-system.md` | UI palette + **categorical/sequential/diverging** data scales + deltas |
+| `typography-system.md` | Fonts, **tabular numerals**, fluid scale, metric/table roles |
+| `spacing-system.md` | 4/8-pt scale, dashboard density, container widths, grid gaps |
+| `layout-system.md` | Grid + dashboard/marketing layouts (KPI rows, chart grids) |
+| `component-library.md` | 17 components + charts, KPI tiles, data tables, dashboard preview |
+| `motion-system.md` | Chart draw-in, value transitions, tooltip/hover, reveals |
+| `accessibility-system.md` | Chart a11y (data-table equivalents), color-blind-safe, focus |
+| `website-generation-rules.md` | Pure-vanilla build (SVG/Canvas charts), clean URLs, nav, SEO |
+| `example-page-structures.md` | Ready data-led 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. data scales), type, spacing, the chart/table
+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 dashboards, charts, and metrics.
+
+## Phase 2 — Generate (the workflow)
+
+1. **Clarify intent:** site type (analytics / observability / BI / fintech / infra / AI),
+   the key **metrics & charts** to show, theme (default dark, or light), accent, 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`),
+   including the categorical/sequential/diverging data scales.
+3. **Design the data story:** choose chart types that fit each message (trend → line/area;
+   comparison → bar; composition → stacked/donut; distribution → histogram; relationship →
+   scatter). Use real-looking, plausible data.
+4. **Compose layouts + components:** KPI rows, chart grids, dashboard previews, data tables,
+   plus the standard marketing components.
+5. **Build charts in vanilla + pair with data tables:** inline SVG/Canvas; every chart has a
+   `<table>`/`aria` equivalent; color-blind-safe; honest axes.
+6. **Apply motion + a11y:** chart draw-in / value transitions 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, data-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 chart/table engine: SVG/Canvas renderers)
+- `website/vercel.json`, `website/sitemap.xml`, `website/robots.txt`
+- `website/assets/` + optional `website/data/*.json` (sample datasets for charts)
+- `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 precise, calm enterprise canvas (default dark slate; light included) with crisp cards,
+thin gridlines, restrained color reserved for **data** (the UI is mostly neutral so the
+charts pop), tabular numerals, clean tables, and KPI tiles with sparklines and deltas.
+Trustworthy and dense-but-legible — Datadog/Stripe precision, never cluttered or chart-junky.
+(Siblings: `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`.)
+
+## 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 · **chart-junk (3D, heavy gradients, drop shadows on data, gratuitous
+animation) · misleading charts (truncated/inverted axes, cherry-picked scales) · rainbow/
+non-ordered scales for ordered data · color-only encoding (no labels/patterns) · charts with
+no data-table equivalent · unreadable dense tables · borders or dividers between sections ·
+single-page sites or thin pages with fewer than 10 sections · any framework/charting library
+in the shipped site · `.html` in URLs**. The result must feel like Datadog/Stripe/Linear —
+precise, honest, enterprise — never cluttered or template-like.
+
+## 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. **Data-led + honest met:** heroes/features lead with dashboards/charts/KPIs; chart types
+   fit the message; axes are honest (no truncation to exaggerate); data-ink maximized.
+0c. **Chart a11y met:** every chart has a **data-table equivalent** + `aria` summary, is
+   **color-blind-safe** (not color-only), and is keyboard-reachable.
+0d. **Pure vanilla + clean URLs:** charts are inline SVG/Canvas (no charting/UI library);
+   routes extensionless with a working `vercel.json` (`cleanUrls`), `sitemap.xml`, `robots.txt`.
+0e. **Nav + SEO:** desktop nav/dropdowns + mobile menu + breadcrumbs; per-page SEO + JSON-LD.
+1. Tokens emitted once (`:root`/`tokens.css`) and reused (incl. data scales) — no scattered hex.
+2. Type uses the fluid scale + **tabular numerals** for all metrics/tables; 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 chart/component matches `component-library.md`.
+4. Body text ≥ 4.5:1, large text ≥ 3:1; chart elements ≥ 3:1 from background and adjacent
+   series distinguishable for color-blind users; visible focus; semantic landmarks + alt text.
+5. Fully responsive (360 → 1440+): dashboards/charts reflow; tables scroll/stack gracefully;
+   no horizontal page scroll; tap targets ≥ 44px.
+6. Trips **zero** anti-patterns; charts are honest and clutter-free; tables legible.
+7. Output feels like Datadog/Stripe/Linear — precise, data-rich, enterprise, and trustworthy.

package/skills/enterprise-data-viz-design-system/accessibility-system.md

@@ -0,0 +1,68 @@
+# Accessibility System — Enterprise Data Visualization
+
+Data visualization is **uniquely demanding** for accessibility: charts can hide data behind
+color and pixels, tables can become unreadable, and numbers must be perceivable by screen
+readers. This system bakes WCAG 2.1 AA into the data craft.
+
+## Charts (the critical area)
+- **Every chart has a data-table equivalent.** Pair each visualization with a real `<table>`
+  of its data (visually hidden or behind a "View data" toggle), linked via `aria-describedby`,
+  plus a concise `aria-label`/`<figcaption>` summarizing the takeaway (e.g., "Revenue up 18%
+  YoY, peaking in Q4"). Screen-reader users get the numbers, not "chart".
+- **Never encode by color alone.** Distinguish series additionally by **direct labels,
+  markers, dash patterns, or position**. A grayscale/printed version must still be readable.
+- **Color-blind-safe palettes.** Use the provided categorical ordering and verify under
+  deuteranopia/protanopia/tritanopia; avoid red/green as the *only* distinction (pair with
+  shape/label). Sequential/diverging scales keep perceptual order.
+- **Contrast:** data marks, lines, and text ≥ 3:1 against the background and adjacent marks;
+  axis/value text ≥ 4.5:1 where it's essential reading.
+- **Honest + labeled:** axes labeled with units and ranges; sensible baselines (no truncation
+  to exaggerate); annotate notable points in text too.
+- **Interactive charts keyboard-accessible:** data points/series reachable by keyboard; tooltip
+  content available on **focus** (not hover only); legend toggles are buttons with `aria-pressed`.
+
+## Data tables
+- Semantic `<table>` with `<caption>`, `<thead>`, `<th scope="col|row">`; **sortable headers**
+  use `aria-sort` and are keyboard-operable (Enter/Space). Numeric columns right-aligned with
+  tabular figures. Provide a way to read large tables (pagination/scroll with a labelled region).
+- Don't rely on zebra color alone for row association; keep `<th>` scope correct.
+
+## Numbers & content
+- Metrics/deltas are **real text** (not images); deltas convey direction with an arrow/sign +
+  word/value, not color alone (e.g., `<span>▲ +12.4% increase</span>`).
+- Format consistently; include units; avoid conveying meaning only via sparkline shape.
+
+## Color & contrast (UI)
+- Body ≥ 4.5:1, large/UI ≥ 3:1 on the neutral surfaces. Status colors (good/bad/warn) pair with
+  icon + text. The brand accent is for actions, not data, reducing ambiguity.
+
+## Focus & keyboard
+- **Always-visible focus:** `:focus-visible { outline:2px solid var(--ring); outline-offset:2px }`
+  on every control (sort headers, legend toggles, range picker, tabs, pagination). No bare
+  `outline:none`. Logical tab order; no traps (except modal focus-trap, ESC). **Skip link** to `#main`.
+
+## Semantics & structure
+- One `<h1>` per page; ordered headings. Landmarks `<header><nav><main id="main"><section><footer>`.
+  Charts in `<figure>/<figcaption>`; pipelines `<ol>`; code `<pre><code>`. Native over ARIA.
+
+## Motion
+- Honor `prefers-reduced-motion`: charts render final-drawn, KPIs at final value, sort instant.
+  No essential data conveyed only by animation.
+
+## Forms & controls
+- Range pickers, filters, and search have programmatic `<label>`s; errors in text +
+  `aria-describedby`; results announced (`aria-live="polite"`) when filters update the data.
+
+## Touch & responsive
+- **Tap targets ≥ 44×44px** (incl. legend/sort/range controls); dashboards reflow; tables get a
+  labelled horizontal-scroll region or stack into key/value cards; 200% zoom OK; pinch-zoom not disabled.
+
+## Checklist (run before finishing)
+1. Every chart: data-table equivalent + `aria` summary; not color-only; color-blind-safe;
+   keyboard-reachable; tooltip on focus; honest labeled axes.
+2. Tables: semantic, captioned, scoped headers, `aria-sort`, keyboard-sortable, readable density.
+3. Metrics/deltas are text with direction/sign (not color-only); units + consistent formatting.
+4. AA contrast for text; ≥3:1 for chart marks vs background and neighbors.
+5. Visible focus on all controls; skip link; logical order; live-region for filter updates.
+6. Reduced motion → final-state charts/values; semantics correct (figure/table/ol/landmarks).
+7. 44px targets; dashboards/tables reflow; 200% zoom; zoom not disabled.

package/skills/enterprise-data-viz-design-system/color-system.md

@@ -0,0 +1,112 @@
+# Color System — Enterprise Data Visualization
+
+Two layers: a **neutral, precise UI palette** (so data pops) and a disciplined **data-viz
+palette** — color-blind-safe **categorical** hues, ordered **sequential** and **diverging**
+scales, and **semantic deltas**. Ships **dark slate by default**; a light theme is included.
+Sections separate via surface elevation + whitespace — **never borders**. Override `--accent-*`
+to rebrand. Contrast: text ≥ 4.5:1, chart marks ≥ 3:1 from background.
+
+## UI tokens (`:root`) — dark slate (default)
+
+```css
+:root {
+  /* ---- Background / surfaces (neutral so data pops) ---- */
+  --bg-base:    #0b0e14;   /* page */
+  --bg-900:     #0f131b;   /* section */
+  --bg-800:     #141923;   /* alt section */
+  --surface-1:  #161c27;   /* card / panel */
+  --surface-2:  #1c2330;   /* raised / hover / table header */
+  --surface-3:  #232b3a;   /* popover / input */
+
+  /* ---- Text ---- */
+  --text-primary:   #eef1f6;
+  --text-secondary: #b3bccb;
+  --text-muted:     #8893a5;   /* labels, axis ticks */
+  --text-faint:     #5e6779;   /* gridline labels — non-essential */
+  --text-on-accent: #06121f;
+
+  /* ---- Borders / gridlines (component edges + chart grid — NOT between sections) ---- */
+  --border-subtle:  rgba(255,255,255,0.06);
+  --border-default: rgba(255,255,255,0.10);   /* card/table edges */
+  --grid-line:      rgba(255,255,255,0.07);   /* chart gridlines (thin, few) */
+  --axis-line:      rgba(255,255,255,0.18);   /* chart axes */
+  --ring:           #5b9dff;   /* focus ring */
+
+  /* ---- Accent (ACTIONS/links only — kept OUT of the data series) ---- */
+  --accent:        #3b82f6;  /* blue */
+  --accent-hover:  #4f8ef7;
+  --accent-press:  #2f6fe0;
+  --accent-soft:   rgba(59,130,246,0.14);
+
+  /* ---- Semantic / status (KPIs, deltas, alerts) ---- */
+  --good:    #22c55e; --good-soft:   rgba(34,197,94,0.14);   /* up & positive */
+  --bad:     #ef4444; --bad-soft:    rgba(239,68,68,0.14);   /* down & negative */
+  --warn:    #f59e0b; --warn-soft:   rgba(245,158,11,0.14);
+  --info:    #38bdf8; --info-soft:   rgba(56,189,248,0.14);
+  --neutral: #94a3b8; --neutral-soft:rgba(148,163,184,0.14); /* no-change */
+}
+```
+
+## Data-viz palettes (`:root`)
+
+```css
+:root {
+  /* ---- Categorical (distinct series; color-blind-aware ordering) ---- */
+  --cat-1: #5b9dff;  /* blue   */   --cat-2: #f59e0b;  /* amber  */
+  --cat-3: #22c55e;  /* green  */   --cat-4: #c084fc;  /* purple */
+  --cat-5: #f472b6;  /* pink   */   --cat-6: #2dd4bf;  /* teal   */
+  --cat-7: #fb923c;  /* orange */   --cat-8: #94a3b8;  /* slate  */
+  /* Order by hue+lightness so adjacent series stay distinguishable for color-blind users;
+     always ALSO differentiate by direct label / dash / marker — never color alone. */
+
+  /* ---- Sequential (single hue, low→high for ordered magnitude, e.g. heatmaps) ---- */
+  --seq-1:#0b2545; --seq-2:#13386b; --seq-3:#1d4f93; --seq-4:#2f6fbd;
+  --seq-5:#4f8ee0; --seq-6:#7db0f0; --seq-7:#b6d4f7;
+
+  /* ---- Diverging (below ↔ midpoint ↔ above; e.g. variance vs target) ---- */
+  --div-neg-2:#ef4444; --div-neg-1:#f59e0b; --div-mid:#94a3b8;
+  --div-pos-1:#34d399;  --div-pos-2:#22c55e;
+
+  /* ---- Series fills (faint area under lines) ---- */
+  --fill-1: rgba(91,157,255,0.14);
+  --fill-grid: var(--grid-line);
+}
+```
+
+## Palette roles
+
+- **Background / surfaces** (`--bg-*`, `--surface-*`): neutral, layered. Cards/panels are the
+  primary "container"; alternate `--bg-900`/`--bg-800` between sections to separate by tone —
+  **never a border**. The neutral UI lets data color stand out.
+- **Text** (`--text-*`): primary metrics/headings, secondary body, muted axis/labels, faint
+  gridline labels. Never `--text-faint` for essential content.
+- **Borders / gridlines** (`--border-*`, `--grid-line`, `--axis-line`): component edges + chart
+  grid/axes only — these are *inside* components, **not** dividers between page sections.
+- **Accent** (`--accent*`): actions, links, focus — **kept out of the categorical series** so
+  brand color is never confused with a data series.
+- **Semantic** (`--good/bad/warn/info/neutral`): KPI states and **deltas** (up=good green,
+  down=bad red) — always paired with an arrow/sign/label, never color alone.
+- **Categorical** (`--cat-1..8`): distinct chart series; cap at ~6–8; differentiate also by
+  label/marker/dash for accessibility.
+- **Sequential** (`--seq-*`): ordered magnitude (heatmaps, choropleths, intensity).
+- **Diverging** (`--div-*`): values relative to a midpoint/target (variance, sentiment).
+- **Fills** (`--fill-*`): faint area fills under line charts (keep subtle — data-ink).
+
+## Usage rules
+
+1. **Neutral UI, colorful data.** Reserve saturated color for charts/KPIs; keep chrome neutral.
+2. **Right scale for the data type:** categorical for groups, sequential for ordered magnitude,
+   diverging around a midpoint. Never a rainbow for ordered data.
+3. **Never color-only.** Pair every color encoding with a label, marker, pattern, or value.
+4. **Deltas are semantic + signed:** `--good` ▲ for up, `--bad` ▼ for down, `--neutral` for flat.
+5. **Separate sections with surface/tone + space, not lines.** Mandatory.
+6. **Verify contrast:** text AA; chart marks ≥ 3:1 from background and distinguishable for the
+   common color-vision deficiencies (test deuteranopia/protanopia).
+
+## Optional light theme
+
+`[data-theme="light"]`: `--bg-base:#f7f9fc; --bg-900:#ffffff; --bg-800:#f1f4f9;
+--surface-1:#ffffff; --surface-2:#f4f6fb; --text-primary:#0b0e14; --text-secondary:#3a4356;
+--text-muted:#5d6678; --grid-line:rgba(11,14,20,0.08); --axis-line:rgba(11,14,20,0.22);
+--accent:#2563eb;` plus light-tuned categorical hues; re-verify contrast. **Dark slate is the
+default identity.**

package/skills/enterprise-data-viz-design-system/component-library.md

@@ -0,0 +1,142 @@
+# Component Library — Enterprise Data Visualization
+
+Specs for the 17 required components **plus the data components** (Charts, KPI Tile, Data
+Table, Dashboard Preview, Sparkline, Legend, Filter Bar). Charts are **hand-built inline SVG/
+Canvas — no charting library** — and **every chart ships a data-table equivalent**. Each:
+purpose, anatomy, tokens, states, responsive + a11y. **No borders between sections.**
+
+Shared primitives:
+
+```css
+.btn { display:inline-flex; align-items:center; gap: var(--space-2); font-weight:600;
+  font-size:.9375rem; padding: var(--space-2) var(--space-5); border-radius: var(--radius-md);
+  border:1px solid transparent; cursor:pointer; transition: background .15s ease, border-color .15s ease; }
+.btn-primary { background: var(--accent); color: var(--text-on-accent); }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-secondary { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-default); }
+.card { background: var(--surface-1); border:1px solid var(--border-default);
+  border-radius: var(--radius-lg); padding: var(--card-pad); }
+:where(a,button,input,[tabindex]):focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
+```
+
+## ★ Charts (inline SVG/Canvas — no library) + REQUIRED data-table equivalent
+Build line, area, bar/stacked-bar, sparkline, donut (sparingly), scatter, and heatmap charts
+in **inline SVG** (preferred — crisp, stylable, accessible) or `<canvas>` (for thousands of
+points). Anatomy: title + unit · plot area (thin `--grid-line` gridlines, `--axis-line` axes)
+· series (categorical/sequential/diverging tokens, **direct-labeled** or via Legend) · faint
+`--fill-*` area · ticks (tabular `--font-num`) · optional tooltip on hover/focus. **Honest
+axes** (sensible baseline, no truncation). **Every chart includes a `<table>` source** (the
+data), visually hidden or in a "View data" toggle, referenced with `aria-describedby`, plus an
+`aria-label`/summary describing the trend. Color-blind-safe: also distinguish series by
+marker/dash/label.
+
+```html
+<figure class="chart" aria-label="Revenue by month, 2025 — up 18% YoY">
+  <svg viewBox="0 0 640 240" role="img" aria-describedby="rev-tbl"><!-- gridlines, path, labels --></svg>
+  <figcaption>Monthly revenue (USD), 2025</figcaption>
+  <table id="rev-tbl" class="visually-hidden"><!-- month/value rows --></table>
+  <button class="btn-secondary" data-toggle="rev-tbl">View data</button>
+</figure>
+```
+
+## ★ KPI Tile
+`.card` with: label (small caps) · **value** (`--fs-kpi`, `--font-num`, tabular) · **delta**
+(▲/▼ + signed %, `--good`/`--bad`/`--neutral`) · a **Sparkline** (tiny inline SVG trend) ·
+optional comparison ("vs last 30d"). Keep it scannable; one metric per tile.
+
+## ★ Data Table
+Semantic `<table>`: `<thead>` sticky on scroll; numeric columns `.num` right-aligned with
+tabular figures; text left-aligned; zebra/hover via background (not borders between every row);
+sortable headers (`aria-sort`, click + keyboard); optional pagination/density toggle; inline
+mini-bars or deltas in cells. Horizontal scroll container on mobile (or stack to key/value
+cards). a11y: `<caption>`, `<th scope>`, `aria-sort`, keyboard-sortable.
+
+## ★ Dashboard Preview
+A realistic in-product **dashboard** (Layout APP shell or a framed card): range picker, a KPI
+row, a primary chart, a breakdown + a small table — with **plausible real data**. Used in the
+hero and feature sections. Decorative chrome `aria-hidden`; informative charts keep their
+data-table equivalents.
+
+## ★ Filter Bar / Legend
+- **Filter bar:** date-range picker, segment dropdowns, search — real controls (vanilla),
+  labelled, keyboard-operable.
+- **Legend:** swatch + label per series; clickable to toggle a series (with `aria-pressed`);
+  prefer **direct labels** on the chart where possible to reduce legend round-trips.
+
+---
+
+## 1. Navbar
+Sticky, neutral bar; gains a subtle background on scroll. Logo · nav links · primary CTA +
+"Sign in" · mobile hamburger. **Extensionless hrefs**. Optional product mega-menu. Mobile:
+overlay, focus-trap, ESC. a11y: `aria-current`, `aria-expanded`.
+
+## 2. Hero
+Layout DH-A/DH-B/DH-C — copy + CTAs + a **Dashboard Preview** / giant **KPI** / primary chart.
+One H1, one primary CTA (distinct from data color). Lead with real-looking data.
+
+## 3. Feature Grid
+`.grid.cols-3` of `.card`s (icon · H3 · body), or **F-C** feature + a live mini chart per
+feature. Hover lift. Keep icons consistent.
+
+## 4. Bento Grid
+A data bento (BN): chart tile + KPI tiles + small table tile, varied spans, one anchor.
+
+## 5. Testimonials
+Quote cards, optionally paired with a customer's **result KPI/chart** (e.g., "−42% latency").
+`<blockquote>` + `<cite>`.
+
+## 6. Logos Section
+"Trusted by" + logo row (monochrome), generous spacing. `<img alt>`.
+
+## 7. Pricing
+Layout P-A/P-B. Tier cards (price `--font-num` tabular, feature list, CTA); usage/seat tiers
+may show a small usage chart; highlighted tier + "Most popular"; monthly/annual + usage toggle.
+a11y: real switch/radio.
+
+## 8. FAQ
+Accordion; `<button>` + collapsible answer. a11y: `aria-expanded`/`aria-controls`.
+
+## 9. CTA
+Centered band, big H2, primary CTA (accent, not data color) + secondary. `--section-y-lg`, no border.
+
+## 10. Footer
+Mega footer: brand · columns · status link · legal · social. `<footer>`, `<nav>` lists.
+
+## 11. Dashboard Preview
+(See ★ above) — the centerpiece product visual.
+
+## 12. Agent Workflow Section
+Pipeline (Plan → Retrieve → Act → Verify) as connected cards, optionally with a metrics tile
+per step (latency, success rate). a11y: `<ol>` text equivalent.
+
+## 13. Code Preview
+Mono code (e.g., the analytics SDK / query) in a window-framed card with copy. `<pre><code>`;
+copy `aria-label`. Pair with the chart it produces where apt.
+
+## 14. Terminal Preview
+CLI querying metrics; mono prompt lines; optional typewriter (reduced motion → final). Real text.
+
+## 15. Trust Section
+A **KPI row** of headline platform metrics (uptime, events/day, p99 latency, customers) with
+deltas + sparklines; count-up on reveal (final value in DOM). The quintessential data trust beat.
+
+## 16. Security Section
+Compliance badges (SOC 2/ISO 27001/GDPR/HIPAA) + assurances (encryption, SSO/SAML, audit logs,
+data residency) as a clean list + "Security docs" link. Badges alt text.
+
+## 17. Enterprise Section
+"Built for enterprise" panel: SSO/RBAC/SLAs/VPC/usage-based + "Talk to sales" CTA + a small SLA/
+usage chart. No border.
+
+---
+
+## Component rules
+- **Charts are inline SVG/Canvas, library-free, honest, and each has a data-table equivalent**
+  + `aria` summary; color-blind-safe (not color-only); tabular axes.
+- Compose from shared `.btn`/`.card`/tokens + the data scales — no chart libraries, no bespoke hex.
+- Every interactive element (sort headers, legend toggles, range picker, tabs) has hover **and**
+  `:focus-visible` and is keyboard-operable.
+- Every component reflows: dashboards collapse columns; tables scroll/stack by `md`/`sm`.
+- Decorative chrome `aria-hidden`; informative charts/images keep alt/table equivalents.
+- Restraint: data carries the color; UI stays neutral; gridlines thin; **no chart-junk**;
+  hairlines belong inside components — **never between page sections**.