spirewise 1.7.1 → 1.8.0

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

@@ -0,0 +1,61 @@
+# Accessibility System — Dark Futuristic
+
+Dark UIs fail accessibility most often on **contrast** and **focus visibility**. This
+system bakes WCAG 2.1 AA into the look. Accessible *is* the premium standard here.
+
+## Color & contrast
+- **Body text ≥ 4.5:1**, large text (≥24px or ≥19px bold) and UI text **≥ 3:1**,
+  against its actual background. The text ramp is tuned for this: use
+  `--text-secondary`+ for content on `--bg-900`; never `--text-faint` for real text.
+- **Non-text contrast ≥ 3:1** for interactive borders, icons, focus rings, and chart
+  strokes. `--border-default` is the minimum for meaningful boundaries.
+- **Don't encode meaning in color alone** — pair status color with an icon/label
+  (success ✓, error ✕). Links get an underline or clear non-color affordance in body.
+- **Gradient/low-contrast text is banned for body**; `--grad-text` only on large hero
+  display where it still clears 4.5:1 at its lightest stop.
+- Verify pairings with a contrast checker before shipping; re-check any custom accent.
+
+## Focus & keyboard
+- **Always-visible focus:** `:focus-visible { outline:2px solid var(--ring);
+  outline-offset:2px }` on every interactive element. Never `outline:none` without a
+  replacement.
+- **Full keyboard operability:** all actions reachable/triggerable by keyboard; logical
+  tab order matches visual order; no keyboard traps (except intended modal focus-trap
+  with ESC to exit).
+- **Skip link** first in the DOM: "Skip to content" jumping to `#main`.
+- **Visible focus order** for menus, accordions, tabs, carousels (arrow-key support
+  where appropriate, `aria-selected`/`aria-expanded`).
+
+## Semantics & structure
+- One `<h1>` per page; headings nest in order (no skipping levels for size — size with
+  CSS). Landmarks: `<header><nav><main id="main"><section><footer>`.
+- Buttons vs links: `<button>` for actions, `<a href>` for navigation.
+- Lists are `<ul>/<ol>`; quotes `<blockquote><cite>`; code `<pre><code>`.
+- Accordions/tabs/toggles use correct ARIA (`aria-expanded`, `aria-controls`,
+  `role="tab"`, `role="switch"`). Don't add ARIA where native elements suffice.
+
+## Media & motion
+- Every informative image has meaningful `alt`; decorative visuals (glows, mock
+  chrome) are `aria-hidden="true"` / `alt=""`.
+- Honor `prefers-reduced-motion` (see motion-system): no essential info conveyed only
+  through animation; provide text equivalents for animated workflows/terminals.
+- No autoplaying audio/video with sound; provide controls; avoid flashing > 3x/sec.
+
+## Forms
+- Every input has a programmatic `<label>` (or `aria-label`); placeholders are not
+  labels. Group related fields with `<fieldset><legend>`.
+- Errors are described in text and linked via `aria-describedby`; focus moves to the
+  first error. Required fields marked in text, not color alone.
+
+## Touch & responsive
+- **Tap targets ≥ 44×44px** with adequate spacing.
+- Content reflows to 320px width with no horizontal scroll; respects 200% zoom.
+- Don't disable pinch-zoom (`user-scalable=no` is banned).
+
+## Checklist (run before finishing)
+1. All text/icons meet AA contrast on their real background.
+2. Visible focus on every interactive element; keyboard-complete; skip link present.
+3. Correct landmarks, one H1, ordered headings, native elements + minimal ARIA.
+4. Alt text on informative media; decorative media hidden; reduced-motion honored.
+5. Labelled, error-accessible forms.
+6. 44px targets, reflow to 320px, 200% zoom OK, zoom not disabled.

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

@@ -0,0 +1,99 @@
+# Color System — Dark Futuristic
+
+Accessible, enterprise-grade dark palette with a single AI accent (default
+**violet → cyan**). All values are CSS custom properties; override only `--accent-*`
+to rebrand. Contrast targets: body text ≥ 4.5:1, large/secondary ≥ 3:1.
+
+## Tokens (`:root`)
+
+```css
+:root {
+  /* ---- Background ramp (page → deepest) ---- */
+  --bg-base:      #06070A;  /* page background, near-black blue-violet */
+  --bg-900:       #0A0C12;  /* default section background */
+  --bg-800:       #0F121A;  /* alt section background */
+
+  /* ---- Surface ramp (raised UI on top of bg) ---- */
+  --surface-1:    #12151F;  /* cards, panels */
+  --surface-2:    #181C28;  /* raised card / hover */
+  --surface-3:    #1F2433;  /* popovers, inputs, overlay */
+  --surface-glass: rgba(20, 24, 36, 0.55); /* glassmorphism (use sparingly) */
+
+  /* ---- Text ramp ---- */
+  --text-primary:   #F4F6FB;  /* headings + key text (~16:1 on --bg-900) */
+  --text-secondary: #B6BDCC;  /* body (~8:1) */
+  --text-muted:     #8A92A6;  /* captions, meta (~5:1) */
+  --text-faint:     #5A6273;  /* disabled/decorative — non-essential only */
+  --text-on-accent: #0A0612;  /* text on accent fills */
+
+  /* ---- Borders / dividers (low-alpha whites) ---- */
+  --border-subtle:  rgba(255,255,255,0.06);
+  --border-default: rgba(255,255,255,0.10);
+  --border-strong:  rgba(255,255,255,0.16);
+  --ring:           #7C6BFF;  /* focus ring, ≥3:1 on dark */
+
+  /* ---- Accent (AI) — the only brand color, used sparingly ---- */
+  --accent:         #7C6BFF;  /* violet — primary actions */
+  --accent-hover:   #8E80FF;
+  --accent-press:   #6A57F0;
+  --accent-2:       #22D3EE;  /* cyan — secondary highlight */
+  --accent-soft:    rgba(124,107,255,0.14); /* tinted backgrounds */
+  --accent-glow:    rgba(124,107,255,0.40); /* shadows/glow */
+
+  /* ---- Semantic ---- */
+  --success:   #34D399;  --success-soft: rgba(52,211,153,0.14);
+  --warning:   #FBBF24;  --warning-soft: rgba(251,191,36,0.14);
+  --error:     #F87171;  --error-soft:   rgba(248,113,113,0.14);
+  --info:      #38BDF8;  --info-soft:    rgba(56,189,248,0.14);
+
+  /* ---- Gradients (subtle; one per section max) ---- */
+  --grad-accent:  linear-gradient(135deg, #7C6BFF 0%, #22D3EE 100%);
+  --grad-aurora:  radial-gradient(60% 80% at 50% 0%, rgba(124,107,255,0.22) 0%, rgba(34,211,238,0.08) 40%, transparent 70%);
+  --grad-surface: linear-gradient(180deg, #12151F 0%, #0A0C12 100%);
+  --grad-text:    linear-gradient(90deg, #F4F6FB 0%, #B7AEFF 60%, #7CE7F5 100%);
+
+  /* ---- Elevation (soft, dark-friendly) ---- */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
+  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
+  --shadow-lg: 0 24px 64px rgba(0,0,0,0.55);
+  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 12px 40px var(--accent-glow);
+}
+```
+
+## Palette roles
+
+- **Background palette** (`--bg-*`): full-bleed page/section fills. Use **one single
+  background (`--bg-900`) for every section on a page** — do **not** alternate or vary
+  section backgrounds, and never put borders/dividers between sections. Reserve
+  `--bg-base`/`--bg-800` for the page root/footer or app chrome, not for separating
+  marketing sections.
+- **Surface palette** (`--surface-*`): anything raised (cards, navbars, inputs).
+  Step up one level on hover. `--surface-glass` only for 1–2 hero/nav elements.
+- **Text palette** (`--text-*`): keep the ramp — primary for headings, secondary for
+  body, muted for meta. Never use `--text-faint` for content that must be read.
+- **Border palette** (`--border-*`): low-alpha whites for definition; prefer subtle.
+- **Accent palette** (`--accent*`): primary CTA, active states, key highlights, links.
+  One accent per section as the "look here" signal.
+- **Gradient palette** (`--grad-*`): `--grad-aurora` behind heroes; `--grad-accent`
+  on the primary CTA or a single feature; `--grad-text` for one hero word — not whole
+  paragraphs.
+- **Success / Warning / Error / Info**: status, toasts, validation, badges only.
+
+## Usage rules
+
+1. **90/8/2:** ~90% neutral dark, ~8% surfaces/borders, ~2% accent. The accent is a
+   spice, not a sauce.
+2. **Gradients are rare and soft.** Max one prominent gradient per section; keep
+   opacity low. No rainbow or hard-stop gradients (anti-pattern).
+3. **Glassmorphism is a garnish.** Use `--surface-glass` with `backdrop-filter:
+   blur(12px)` on at most a couple of elements (sticky nav, hero card).
+4. **Glow is a hint.** `--shadow-glow` for the single primary CTA or a featured card,
+   never every card.
+5. **Always check contrast.** Body on `--bg-900` must be ≥ 4.5:1 (use
+   `--text-secondary`+ for content). Accent fills pair with `--text-on-accent`.
+
+## Light-mode note (optional)
+
+If a light theme is needed, invert the ramp via a `[data-theme="light"]` block: keep
+the same accent, raise backgrounds to `#FBFCFF / #F2F4F9`, drop text to
+`#0A0C12 / #3A4151`, and re-verify contrast. Dark is the default identity.

package/skills/ai-dark-futuristic-design-system/component-library.md

@@ -0,0 +1,140 @@
+# Component Library — Dark Futuristic
+
+Specs for the 17 required components. Each: purpose, anatomy, tokens, states,
+responsive + a11y notes. Build with semantic HTML; style with the shared tokens.
+
+Shared button + card primitives used throughout:
+
+```css
+.btn { display:inline-flex; align-items:center; gap: var(--space-2);
+  font-weight:600; font-size:.9375rem; padding: var(--space-3) var(--space-6);
+  border-radius: var(--radius-pill); border:1px solid transparent; cursor:pointer;
+  transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
+.btn:active { transform: translateY(1px); }
+.btn-primary { background: var(--accent); color: var(--text-on-accent);
+  box-shadow: var(--shadow-glow); }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-ghost { background: transparent; color: var(--text-primary);
+  border-color: var(--border-default); }
+.btn-ghost:hover { border-color: var(--border-strong); background: rgba(255,255,255,.03); }
+.card { background: var(--surface-1); border:1px solid var(--border-subtle);
+  border-radius: var(--radius-xl); padding: var(--space-8); }
+.card:hover { background: var(--surface-2); border-color: var(--border-default); }
+:where(a,button,input,[tabindex]):focus-visible { outline:2px solid var(--ring);
+  outline-offset:2px; border-radius: var(--radius-sm); }
+```
+
+---
+
+## 1. Navbar (+ mega-menu + breadcrumb)
+Sticky top bar. Anatomy: logo (left) · nav links (center/left) · primary CTA + ghost
+"Sign in" (right) · mobile hamburger. Glass surface (`--surface-glass` +
+`backdrop-filter: blur(12px)`) with `--border-subtle` bottom. Shrinks/raises shadow
+on scroll. Links use **extensionless hrefs** (`/platform`, `/pricing`).
+**Mega-menu:** top items (Platform, Solutions, Products, Developers) open a
+multi-column dropdown panel of grouped links + short descriptions (same tokens, glass
+surface), built in **vanilla JS** — hover on desktop, click/tap to toggle, ESC + click
+-outside to close. ARIA: `aria-haspopup`, `aria-expanded`, roving focus, arrow-key nav.
+States: link hover lifts color muted→primary; active link accent underline +
+`aria-current="page"`. Mobile: collapse to a full-screen overlay with accordion
+sub-menus, focus-trap, ESC to close. **Breadcrumb** (deep pages — docs/blog/case
+studies): `<nav aria-label="Breadcrumb"><ol>` of extensionless links, muted text,
+current page not linked. a11y: `<nav>`, native semantics, keyboard-complete.
+
+## 2. Hero
+Layout H-A/H-B (see layout-system). Anatomy: eyebrow · display H1 (optional
+`--grad-text` on one word) · `.lead` subhead · CTA pair (primary + ghost) · trust
+strip or product preview. `--grad-aurora` glow behind, `pointer-events:none`. Keep
+one H1, one primary CTA. a11y: real `<h1>`; decorative glow `aria-hidden`.
+
+## 3. Feature Grid
+`.grid.cols-3` (→2→1) of `.card`s: icon chip (accent-soft bg, `--radius-md`) · H3 ·
+body. Optional link "Learn more →". Hover: surface step-up + subtle lift. Keep icons
+consistent weight; avoid AI clichés.
+
+## 4. Bento Grid
+Signature asymmetric grid. `display:grid; grid-auto-rows: minmax(180px,auto)` with
+tiles spanning 1–2 cols/rows (`grid-column: span 2`). Mix: one large "hero tile" with
+media/preview + several small stat/feature tiles. Each tile is a `.card` with varied
+content (metric, mini-chart, code snippet, image). Collapse to single column on
+mobile. Restrained gradients on at most one tile.
+
+## 5. Testimonials
+Either a 3-up `.card` quote grid or a single large featured quote + author. Anatomy:
+quote (H4 size, `--text-primary`) · avatar · name · role/company · optional logo.
+Optional carousel (see motion). a11y: use `<blockquote>` + `<cite>`; carousel has
+prev/next buttons + `aria-roledescription`.
+
+## 6. Logos Section (social proof)
+"Trusted by" eyebrow + a row/grid of customer logos, rendered as monochrome
+(`opacity:.6; filter:grayscale(1)`) brightening on hover. Optional slow auto-scroll
+marquee (pausable, reduced-motion safe). a11y: each logo `<img alt="Company">`.
+
+## 7. Pricing
+Layout P-A/P-B. Tier `.card`: name · price (tabular-nums, large) · billing period ·
+feature list (check icons) · CTA. Highlighted tier: `--accent` border + soft glow +
+"Most popular" pill. Monthly/annual toggle updates amounts. Enterprise = "Contact
+sales". a11y: toggle is a real `role="switch"`/radio; lists are `<ul>`.
+
+## 8. FAQ
+Layout Q-A accordion. Each item: `<button>` question (full-width, chevron) controlling
+a collapsible `<div>` answer. One or many open. Animate height/opacity. a11y:
+`aria-expanded`, `aria-controls`, button-driven, keyboard operable.
+
+## 9. CTA
+Layout C-A band: surface or `--grad-aurora` bg, big H2, supporting line, primary +
+ghost CTA. Use `--section-y-lg`. One clear primary action.
+
+## 10. Footer
+Layout FT-A: brand + tagline + social · 4–5 link columns (Product, Developers,
+Company, Resources, Legal) · newsletter input + button · bottom row: copyright + lang
++ status link. `--bg-base`, `--border-subtle` top. a11y: `<footer>`, labelled input,
+link lists in `<nav>`.
+
+## 11. Dashboard Preview
+A framed product screenshot/mock in a browser/app chrome (Layout D-A shell):
+top bar (traffic-light dots) + sidebar + content. Slight perspective/tilt + `--shadow-lg`
++ accent glow. Often inside Hero or a feature section. Use real-looking data, not
+lorem. Decorative → `aria-hidden` if purely illustrative; provide alt if informative.
+
+## 12. Agent Workflow Section
+Visualizes an agentic pipeline: nodes (steps) connected by lines/arrows, each node a
+small `.card` with icon + label (e.g. Plan → Retrieve → Act → Verify). Animate flow
+on scroll (sequential reveal + traveling accent dot). Great for agentic-AI startups.
+a11y: provide an ordered `<ol>` text equivalent of the steps.
+
+## 13. Code Preview
+Mono code block in a `.card` with a window header (filename tab, copy button).
+Syntax-tinted tokens using accent/semantic colors at low saturation. Optional tabbed
+languages. `--font-mono`, `--fs-small`, line-height 1.6, horizontal scroll on mobile.
+a11y: `<pre><code>`, copy button has `aria-label`, not the only source of info.
+
+## 14. Terminal Preview
+Dark terminal `.card`: header with dots + title, body with prompt lines; optional
+typewriter animation of a command + response. Monospace, green/accent prompt glyph.
+Reduced-motion: show final state instantly. a11y: text content is real text, not an image.
+
+## 15. Trust Section
+Metrics/credibility band: 3–4 big numbers (tabular-nums, `--fs` large) + labels
+(uptime, requests/day, customers, latency), optional source. Quiet surface, accent on
+the numbers only. a11y: numbers + labels as text; animate count-up but render final
+value in DOM.
+
+## 16. Security Section
+Enterprise security/compliance: badges (SOC 2, ISO 27001, GDPR, HIPAA) + short
+assurances (encryption, SSO/SAML, data residency, audit logs) in an icon list +
+"Read our security docs" link. Calm, factual tone. a11y: badges have alt text.
+
+## 17. Enterprise Section
+"Built for enterprise" band: value props (SSO, RBAC, SLAs, dedicated support,
+on-prem/VPC) in 2–3 columns + a "Talk to sales" CTA and optional enterprise logo wall.
+Pairs with Security + Trust sections to close enterprise buyers.
+
+---
+
+## Component rules
+- Compose from shared `.btn`/`.card`/tokens — no bespoke colors or radii per component.
+- Every interactive element has hover **and** `:focus-visible` states.
+- Every component is responsive to single-column by `md`/`sm`.
+- Decorative visuals are `aria-hidden`; informative ones have text equivalents.
+- Restrained effects: at most one gradient/glow accent per component instance.

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

@@ -0,0 +1,66 @@
+# Design Principles — AI Dark Futuristic
+
+The philosophy distilled from OpenAI, Anthropic, Perplexity, Cursor, Lovable,
+Replit, Runway, ElevenLabs, Midjourney, xAI, Scale AI, Cognition, Sierra, and Harvey.
+
+## The one-sentence philosophy
+
+**Quiet confidence in the dark:** a near-black canvas, one disciplined accent, huge
+calm typography, and generous space — so the product (not the decoration) is the hero.
+
+## Core principles
+
+1. **Dark, not black-on-black.** Use a layered dark surface ramp (base → raised →
+   overlay) to create depth without borders everywhere. Black is reserved; most
+   surfaces are very dark blue-grey.
+2. **One accent, used sparingly.** A single AI accent (default violet→cyan) marks
+   the *primary* action and a few key highlights. If everything glows, nothing does.
+3. **Typography is the design.** Large, tight display headings + a clean body ramp
+   carry the page. Most "visual interest" is type scale and whitespace, not graphics.
+4. **Space is a feature.** Big section padding, roomy line-height, and clear grouping.
+   Crowding reads as cheap; air reads as premium.
+5. **Restraint with effects.** Gradients are subtle and few; glassmorphism is a
+   garnish (one or two surfaces), never the whole UI; glow is a hint, not a halo.
+6. **Motion is quiet and fast.** Short, eased transitions and gentle scroll reveals.
+   Nothing bounces, spins, or distracts. Always honor `prefers-reduced-motion`.
+7. **Evidence builds trust.** Logos, metrics, security/compliance, and real product
+   shots do the persuading — enterprise buyers scan for proof, not adjectives.
+8. **Developer-credible.** Code/terminal previews, real API snippets, and precise
+   copy signal technical depth (Cursor, Replit, ElevenLabs, Scale).
+9. **Accessible by default.** Contrast, focus, semantics, and keyboard support are
+   part of "looks good," not an afterthought.
+10. **Consistency over novelty.** Reuse tokens and components everywhere; a coherent
+    system beats a pile of clever one-offs.
+
+## Visual-hierarchy laws
+
+- **One H1 per page**, the largest thing on screen; everything else steps down.
+- **3 weights max** of emphasis at once (e.g., display heading, body, muted caption).
+- **Contrast ladder:** primary text brightest, secondary muted, tertiary dimmer —
+  never three near-equal greys competing.
+- **One primary CTA per viewport.** Secondary actions are ghost/quiet buttons.
+- **Group by proximity + a shared surface**, not by drawing boxes around everything.
+- **Accent = importance.** Reserve the accent color/gradient for the single most
+  important element in a section.
+
+## Reference cues (what each does well)
+
+- **OpenAI / Anthropic:** restraint, generous space, calm type, minimal color, trust
+  through clarity.
+- **Perplexity:** crisp product-first hero, answer-style UI, tasteful accent.
+- **Cursor / Replit / Cognition:** code & terminal previews, dev-experience proof,
+  dark IDE aesthetics.
+- **Lovable / Runway / Midjourney:** richer gradients and visuals — borrow sparingly
+  for creative brands; keep enterprise builds quieter.
+- **Scale / Sierra / Harvey / xAI:** enterprise trust, security/compliance, logo
+  walls, measured tone.
+
+## Do / Don't
+
+**Do:** layered dark surfaces · big fluid headings · one accent · subtle gradient
+glow · real proof (logos/metrics/security) · generous spacing · fast quiet motion ·
+visible focus states.
+
+**Don't:** pure-black flat pages · rainbow gradients · glass everywhere · tiny
+low-contrast grey text · five competing CTAs · drop-shadow Bootstrap cards · stock
+"AI brain" clichés · motion that bounces or autoplays loudly.

package/skills/ai-dark-futuristic-design-system/example-page-structures.md

@@ -0,0 +1,124 @@
+# Example Page Structures — Dark Futuristic
+
+Ready-to-assemble, section-by-section blueprints per site type. Each section names a
+layout (see `layout-system.md`) and components (see `component-library.md`). Use them
+as skeletons; swap copy/data for the brand.
+
+Legend: layout codes `H-*, F-*, P-*, C-*, Q-*, FT-*` · components by name.
+
+## MANDATORY: 15+ page site map (≈20), 10+ sections/page, clean URLs
+
+Always ship a **full multipage website with 15+ pages (≈20)** — never a single
+landing page. Every page carries **at least 10 sections (≈12)**, all on the **same
+`--bg-900` background with no borders/dividers between sections** (spacing separates
+them). Pure HTML/CSS/vanilla JS, **extensionless URLs**. The required 20-page map:
+
+```
+/                Home              /customers      Customers
+/platform        Platform          /case-studies   Case Studies
+/solutions       Solutions         /developers     Developers
+/products        Products          /docs           Documentation  ← + DOC-A subpages
+/features        Features          /about          About
+/ai-agents       AI Agents         /careers        Careers
+/enterprise      Enterprise        /blog           Blog           ← + article pages
+/security        Security          /contact        Contact
+/pricing         Pricing           /partners       Partners
+                                   /resources      Resources   /faq  FAQ
+```
+
+Add product/solution/blog/doc subpages freely. Each blueprint below is a **10-section**
+skeleton — extend toward 12 (or more) per page, but never fewer than 10. Every page
+must include: **Hero · Feature Sections · Product Highlights · Trust Signals ·
+Testimonials · Use Cases · Statistics · Integrations · CTA · Footer.**
+
+---
+
+## 1. AI startup landing page / home (default)
+1. **Navbar** (glass, sticky) — logo · Product/Solutions/Pricing/Docs · "Sign in" ghost + "Get started" primary
+2. **Hero** `H-A` — eyebrow · display H1 (1 gradient word) · lead · primary+ghost CTA · **Dashboard Preview** below
+3. **Logos Section** — "Trusted by teams at…" monochrome logo row
+4. **Feature Grid** `F-A` — 3 core value props
+5. **Bento Grid** `F-C` — signature capabilities (hero tile + stat/code/image tiles)
+6. **Agent Workflow Section** *(if agentic)* — Plan→Retrieve→Act→Verify animated
+7. **Trust Section** — 3–4 big metrics (count-up)
+8. **Testimonials** — featured quote + 3-up grid
+9. **Pricing** `P-A` — 3 tiers, middle highlighted, monthly/annual toggle
+10. **FAQ** `Q-A` — accordion
+11. **CTA** `C-A` — "Start building today" band
+12. **Footer** `FT-A`
+
+## 2. Developer platform (Cursor / Replit / ElevenLabs feel)
+1. **Navbar** — + "Docs" and "GitHub" links
+2. **Hero** `H-B` split — copy left · **Code Preview**/**Terminal Preview** right
+3. **Logos Section** — companies building with it
+4. **Feature Grid** `F-A` — DX value props (speed, types, deploy)
+5. **Code Preview** (tabbed languages) — real API usage
+6. **Bento Grid** — SDKs, latency, models, integrations
+7. **Trust Section** — requests/day, latency, uptime
+8. **Testimonials** — developer quotes
+9. **Pricing** `P-A` — free/pro/enterprise (usage-based note)
+10. **FAQ** `Q-A`
+11. **CTA** `C-A` — "Read the docs" + "Get API key"
+12. **Footer** `FT-A` (Developers column prominent)
+
+## 3. Enterprise SaaS (Scale / Sierra / Harvey feel)
+1. **Navbar** — Solutions by industry · "Talk to sales" primary
+2. **Hero** `H-A/H-B` — outcome-led H1 · "Book a demo" primary · product preview
+3. **Logos Section** — enterprise customers
+4. **Feature Grid** `F-B` alternating — workflow value props
+5. **Enterprise Section** — SSO/RBAC/SLAs/VPC value props
+6. **Security Section** — SOC 2 / ISO / GDPR / HIPAA badges + assurances
+7. **Trust Section** — ROI/scale metrics + case-study link
+8. **Testimonials** — exec quotes with logos
+9. **Pricing** `P-B` — 2 tiers + enterprise "Contact sales" band
+10. **FAQ** `Q-A`
+11. **CTA** `C-B` — "Talk to sales" + contact form
+12. **Footer** `FT-A` (+ compliance/status links)
+
+## 4. Agentic-AI product
+1. **Navbar**
+2. **Hero** `H-A` — "Your AI agent for X" · demo CTA · **Dashboard/Agent Preview**
+3. **Logos Section**
+4. **Agent Workflow Section** — animated multi-step pipeline (primary explainer)
+5. **Bento Grid** — tools/integrations/memory/guardrails tiles
+6. **Code Preview** *(if dev-facing)* — invoke the agent
+7. **Trust Section** + **Security Section** — autonomy needs trust
+8. **Testimonials**
+9. **Pricing** `P-A`
+10. **FAQ** `Q-A`
+11. **CTA** `C-A`
+12. **Footer** `FT-A`
+
+## 5. AI infrastructure startup
+1. **Navbar**
+2. **Hero** `H-B` — perf claim H1 · benchmark stat · **Terminal/Code Preview**
+3. **Logos Section**
+4. **Trust Section** — throughput/latency/cost benchmarks (count-up)
+5. **Bento Grid** — architecture: GPUs, autoscaling, regions, observability
+6. **Feature Grid** `F-A` — reliability/scale/cost props
+7. **Code Preview** — deploy/config snippet
+8. **Security Section** + **Enterprise Section**
+9. **Pricing** `P-A/P-B` — usage-based
+10. **FAQ** `Q-A`
+11. **CTA** `C-A` — "Start free" + "Contact sales"
+12. **Footer** `FT-A`
+
+## 6. Documentation site (companion)
+- **Three-pane** `DOC-A`: left nav tree · center prose (`--container-md`) · right TOC.
+- Sticky glass top bar with search; mono **Code Preview** blocks with copy buttons;
+  callout cards (info/warning) using semantic tokens; prev/next pager; breadcrumb.
+
+---
+
+## Assembly notes
+- **Scale is mandatory:** 15+ pages, **≥10 sections each**. Don't collapse to a single
+  page or a thin page.
+- Keep the **rhythm**: hero → proof → features → product/dev proof → trust →
+  social proof → pricing → FAQ → CTA → footer. Reorder for emphasis, but always
+  open with a strong hero and close with one clear CTA.
+- **Same background for all sections** (`--bg-900`) and **no borders/dividers between
+  sections** — separate with spacing only. One layout + one idea per section.
+- Choose hero variant by content: media-rich → `H-A` center or `H-C`; product/code →
+  `H-B` split.
+- Prefer real content; if a page needs ≥10 sections, add genuinely useful ones (FAQ,
+  trust, security, integrations, resources) rather than filler — but never go under 10.

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

@@ -0,0 +1,85 @@
+# Layout & Grid System — Dark Futuristic
+
+A 12-column fluid grid + a set of canonical, reusable section layouts. Every section
+on a page should map to one of these.
+
+## Grid
+
+```css
+:root { --grid-cols: 12; --grid-gap: clamp(16px, 2vw, 24px); }
+
+.grid { display: grid; gap: var(--grid-gap);
+        grid-template-columns: repeat(var(--grid-cols), 1fr); }
+
+/* Responsive helpers (mobile-first) */
+.cols-1 { grid-template-columns: 1fr; }
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.cols-4 { grid-template-columns: repeat(4, 1fr); }
+@media (max-width: 900px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr); } }
+@media (max-width: 600px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }
+```
+
+Breakpoints: `sm 480` · `md 768` · `lg 1024` · `xl 1280` · `2xl 1440`. Design
+mobile-first; collapse multi-column layouts to a single column by `md`.
+
+## Canonical section layouts
+
+### Hero layouts
+- **H-A Center stage (default):** centered eyebrow → display H1 → lead → CTA pair →
+  product shot/preview below. `--grad-aurora` glow behind. (OpenAI/Anthropic feel.)
+- **H-B Split:** left = copy + CTAs (6 cols), right = product UI/terminal/preview
+  (6 cols). Collapses to stacked on `md`. (Cursor/Replit feel.)
+- **H-C Showcase:** short copy on top, full-bleed media/animation dominating below
+  (Runway/Midjourney) — use for creative brands only.
+
+### Feature layouts
+- **F-A 3-up cards:** `.grid.cols-3` of icon + title + text.
+- **F-B Alternating rows:** copy ↔ media, flipping sides each row (zig-zag).
+- **F-C Bento grid:** asymmetric tiles of varying span (see component-library Bento) —
+  the signature modern AI layout.
+- **F-D Tabbed/feature switcher:** left tabs control a right preview pane.
+
+### Pricing layouts
+- **P-A 3-tier:** `.grid.cols-3`, middle tier elevated + accent border ("Most
+  popular"). Toggle monthly/annual above.
+- **P-B 2-tier + enterprise:** two cards + a wide "Contact sales" enterprise band.
+
+### CTA layouts
+- **C-A Centered band:** full-width surface, big H2, one primary + one ghost CTA,
+  `--grad-aurora` behind. Use `--section-y-lg`.
+- **C-B Split CTA:** copy left, single action/form right.
+
+### FAQ layouts
+- **Q-A Accordion list** (single column, `--container-md`) — most common.
+- **Q-B Two-column** Q/A grid for many short items.
+
+### Footer layouts
+- **FT-A Mega footer:** brand + 4–5 link columns + newsletter + legal row + social.
+- **FT-B Minimal:** brand left, condensed links + legal right (for small sites).
+
+### Dashboard / app layouts (for product/preview pages)
+- **D-A Shell:** left sidebar nav + top bar + content grid (used inside Dashboard
+  Preview component and any in-product screenshots).
+
+### Documentation layouts
+- **DOC-A Three-pane:** left nav tree + center prose (`--container-md`) + right
+  on-this-page TOC; mono code blocks; sticky nav.
+
+## Composition rules
+
+1. **One background color for every section.** ALL sections on a page use the **same**
+   background (`--bg-900`) — never alternate or vary section fills. **No borders or
+   dividers between sections**: separation comes from `--section-y` spacing, type, and
+   surfaces (cards) only. The page is one continuous dark canvas.
+2. **Full-bleed background, contained content:** sections span edge-to-edge on the one
+   shared `--bg-900` canvas; inner `.container` constrains content to `--container-xl`.
+3. **One layout per section**, one idea per section. Don't nest two complex layouts.
+4. **At least 10 sections per page**, and the **site has 15+ pages** — compose pages
+   richly from these layouts; never ship a thin page or a single-page site.
+5. **Rhythm:** Hero → social proof (logos) → features (mix F-A/F-C) → product/dev
+   proof → testimonials/metrics → pricing → FAQ → final CTA → footer (extend to ≥10).
+5. **Vertical rhythm** comes from `--section-y`; horizontal from the 12-col grid +
+   `--gutter`. Never hand-tune one-off margins.
+6. **Asymmetry with intent:** bento and split layouts add energy; keep alignment to
+   the grid so it still reads orderly.

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

@@ -0,0 +1,76 @@
+# Motion System — Dark Futuristic
+
+Quiet, fast, eased. Motion guides attention and signals quality — it never bounces,
+spins, or distracts. Everything degrades gracefully under `prefers-reduced-motion`.
+
+Distilled from OpenAI/Anthropic (restraint, soft fades), Perplexity (snappy UI
+feedback), and Cursor (precise, IDE-like micro-interactions).
+
+## Tokens
+
+```css
+:root {
+  --dur-fast: 120ms;   --dur-base: 200ms;  --dur-slow: 320ms;  --dur-slower: 600ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* primary — decelerate */
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* subtle overshoot, use rarely */
+}
+```
+
+## Principles
+1. **Short + eased.** Most transitions 120–320ms with `--ease-out`. Reserve 600ms for
+   large scroll reveals only.
+2. **Move a little.** Translate 4–12px, scale 1.0→1.02 max. Big movement reads cheap.
+3. **Animate cheap properties:** `transform` + `opacity` only (GPU-friendly). Avoid
+   animating layout/box-shadow-heavy properties on scroll.
+4. **Purposeful, not decorative.** Motion confirms an action, reveals content, or
+   directs the eye — never loops for its own sake.
+5. **One focal animation per viewport.** Don't animate everything at once.
+
+## Patterns
+
+- **Hover (cards/links):** `transform: translateY(-2px)` + surface step-up +
+  border brighten over `--dur-base`. Buttons: bg shift + faint glow.
+- **Button press:** `translateY(1px)` over `--dur-fast`.
+- **Scroll reveal:** elements start `opacity:0; translateY(16px)`, animate to visible
+  via `IntersectionObserver` adding `.in`, `--dur-slow` `--ease-out`, **staggered**
+  ~60–80ms per item. Reveal once; don't re-hide.
+- **Nav on scroll:** raise shadow + tighten padding + glass blur after ~24px scroll.
+- **Page/section transitions:** soft cross-fade + small rise; no full-screen wipes.
+- **Micro-interactions:** copy-button check swap, toggle slide, accordion height +
+  chevron rotate (`--dur-base`), tab underline slide.
+- **Card interactions:** optional pointer-tracking spotlight/tilt (≤6deg) on hero or
+  bento hero tile only — subtle, and disabled for reduced motion/touch.
+- **Count-up / typewriter:** Trust metrics count up on reveal; terminal types a
+  command. Always render the final value/text in the DOM so it's correct without JS.
+- **Marquee (logos):** slow, linear, infinite, **pausable on hover**; duplicate track
+  for seamlessness.
+
+## Reduced motion (required)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration:.001ms !important;
+    animation-iteration-count:1 !important; transition-duration:.001ms !important;
+    scroll-behavior:auto !important; }
+}
+```
+Under reduced motion: reveal elements in their final state immediately, stop
+marquees/typewriters/count-ups at final values, and disable tilt/parallax.
+
+## Minimal reveal JS
+
+```js
+const io = new IntersectionObserver((entries) => {
+  entries.forEach((e,i) => { if(e.isIntersecting){
+    e.target.style.transitionDelay = `${Math.min(i*70, 300)}ms`;
+    e.target.classList.add('in'); io.unobserve(e.target);
+  }});
+}, { threshold: 0.15 });
+document.querySelectorAll('[data-reveal]').forEach(el => io.observe(el));
+```
+```css
+[data-reveal]{ opacity:0; transform: translateY(16px);
+  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
+[data-reveal].in{ opacity:1; transform:none; }
+```