spirewise 1.7.0 → 1.8.0

package/skills/glassmorphism-design-system/README.md

@@ -0,0 +1,98 @@
+# glassmorphism-design-system
+
+A world-class, **glassmorphism design system** for building modern websites around
+**tasteful frosted-glass surfaces** — translucent, blurred, layered panels floating over a
+vivid mesh-gradient background, with depth, light, and **legibility-first restraint**.
+Distilled from glass-leaning references (**Apple/visionOS, Stripe, Linear, Family, Arc,
+Vercel**) and modern AI sites (**OpenAI, Anthropic, Perplexity, Cursor**). It gives coding/
+design/UI/branding/website-generation agents a complete, reusable system so they can ship
+premium glass sites that stay accessible and fast.
+
+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**
+(glass is `backdrop-filter` + CSS, with fallbacks; no React/Vue/Tailwind/Bootstrap/jQuery/
+any library), with **clean Vercel-ready URLs** (no `.html`), navigation, and full SEO.
+
+> The full design intelligence is **baked into the companion files** (live research
+> optional, to save tokens). Outputs a generated site/system into a `website/` folder.
+> Sibling skills: `ai-dark-futuristic-design-system`, `apple-premium-minimal-design-system`,
+> `product-demo-first-design-system`, `bento-grid-design-system`.
+
+## Install
+
+```bash
+npx spirewise install -s glassmorphism-design-system          # pick agents + scope
+npx spirewise install -s glassmorphism-design-system -a claude,cursor -sc workspace
+```
+
+## Remove
+
+```bash
+npx spirewise remove -s glassmorphism-design-system           # pick agents + scope
+npx spirewise remove -s glassmorphism-design-system -a claude,cursor -sc both
+```
+
+(No Node? `./install.sh -s glassmorphism-design-system` and `./install.sh remove -s glassmorphism-design-system`.)
+
+## Use
+
+After installing, ask your agent:
+
+> "Build a glassmorphism website for our product"
+> "Frosted-glass UI over a vivid gradient — like Apple/visionOS, but legible"
+
+It reads the companion files, locks the tokens, sets one living mesh background, places a
+few tasteful glass panels over it, applies motion + accessibility (with fallbacks), 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: glass philosophy, mandates, workflow, output, checklist |
+| `design-principles.md` | Glass-with-discipline philosophy, restraint rules, do/don'ts |
+| `color-system.md` | Mesh background + **glass-surface** tokens + the glass utility & fallback |
+| `typography-system.md` | Fonts, fluid type scale, **on-glass legibility** rules |
+| `spacing-system.md` | 4/8-pt scale, container widths, glass-panel padding/lift |
+| `layout-system.md` | Page shell (one backdrop) + canonical glass section layouts |
+| `component-library.md` | 17 components as glass + the glass utilities |
+| `motion-system.md` | Mesh drift, hover sheen, parallax, pointer glow, micro-interactions |
+| `accessibility-system.md` | Contrast on glass, reduced transparency/motion, focus, fallbacks |
+| `website-generation-rules.md` | Pure-vanilla build: pages, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Glass page blueprints per site type |
+
+## The look
+
+A deep, vivid **mesh-gradient background** (aurora violet/blue/teal, faint grain) with
+**frosted glass panels** floating above — blurred, lightly tinted, edged with a thin top
+highlight and a soft shadow. High-contrast text on tuned glass, **solid accent CTAs**,
+gentle light/parallax motion. Premium and futuristic — never a blurry, low-contrast mess.
+Default deep-aurora dark; a light "frost" theme included.
+
+## Components (17, as glass)
+
+Glass Navbar · Glass Hero · Glass Feature Grid · Glass Bento · Testimonials · Logos ·
+Pricing · FAQ · CTA (solid action) · Footer · Dashboard Preview · Agent Workflow · Code
+Preview · Terminal Preview · Trust · Security · Enterprise — plus the **glass-surface
+utility** (`.glass` / `.glass--strong` / `.glass--nav`) with built-in fallback.
+
+## Rules it enforces
+
+- **Tasteful, accessible glass** — one living background per page; glass on a *few*
+  deliberate surfaces (not everything); **every glass panel passes AA**; **solid fallback**
+  for unsupported `backdrop-filter` and `prefers-reduced-transparency`; primary CTAs solid.
+- **Multipage scale (mandatory)** — **15+ pages (≈20)**, **≥10 sections/page (≈12)**, and
+  **no borders/dividers between sections** (separation by whitespace + backdrop + elevation).
+- **Pure vanilla stack** — HTML5 + CSS3 + vanilla JS only (glass = `backdrop-filter` + CSS);
+  **no React/Vue/Angular/Svelte/Bootstrap/Tailwind/jQuery/any library**; no build step.
+- **Clean Vercel-ready URLs** — extensionless routes (`/pricing`), with `vercel.json`
+  (`cleanUrls`), `sitemap.xml`, `robots.txt`; refresh + deep links work.
+- **Full navigation + SEO** — glass desktop dropdowns, mobile overlay, breadcrumbs; per-page
+  title/description, Open Graph, Twitter card, canonical, JSON-LD.
+- **Centralized tokens**, **mobile-first responsive**, **performance-aware** (few blurs, one
+  fixed backdrop), reduced motion/transparency honored. **Zero anti-patterns** — no excessive
+  glass, low-contrast text, busy backgrounds behind text, blur without fallback, template
+  look, or frameworks in the shipped site.
+
+See `SKILL.md` for the full workflow and the companion files for every token and spec.

package/skills/glassmorphism-design-system/SKILL.md

@@ -0,0 +1,190 @@
+---
+name: glassmorphism-design-system
+description: >-
+  A world-class, GLASSMORPHISM design system for building modern websites around
+  tasteful frosted-glass surfaces — translucent, blurred, layered panels floating over
+  vivid gradient/mesh backgrounds, with depth, light, and legibility-first restraint.
+  Distilled from glass-leaning references (Apple/visionOS, Stripe, Linear, Family,
+  Arc, Vercel) and modern AI sites (OpenAI, Anthropic, Perplexity, Cursor). It gives
+  coding/design/UI/branding/website-generation agents a complete, reusable system:
+  design philosophy, color/typography/spacing/grid/layout tokens (with a first-class
+  glass-surface engine + accessible fallbacks), a 17+ -component library (glass Navbar,
+  glass cards, Hero over mesh…), a motion system, accessibility + responsive rules, and
+  a production website-generation framework. The framework builds a multipage site (15+
+  pages, 10+ sections/page, NO borders/dividers between sections) in PURE HTML/CSS/
+  vanilla JS (no React/Vue/Tailwind/Bootstrap/jQuery/any library), with clean Vercel-
+  ready URLs (no `.html`), navigation, and full SEO. Use when the user asks for a
+  "glassmorphism / frosted glass website", "glass UI", "blurred translucent cards",
+  "make it like Apple/visionOS glass", or "a glass design system / tokens". The full
+  system is baked into the companion files (live research optional). Outputs a generated
+  site/system into a `website/` folder.
+---
+
+# Glassmorphism Design System
+
+A complete, agent-ready design system for **glassmorphism websites** — frosted, blurred,
+translucent surfaces that float over vivid gradient/mesh backgrounds with real depth and
+light, applied with **legibility-first restraint** so it looks premium, not gimmicky.
+Distilled from Apple/visionOS, Stripe, Linear, Family, Arc, Vercel, and modern AI sites
+(OpenAI, Anthropic, Perplexity, Cursor).
+
+This skill is the **single source of truth**. The detailed system lives in the companion
+files in this folder — read the ones relevant to the task, then generate.
+
+## The core idea — glass with discipline
+
+- **Glass surfaces float over a living background.** A soft, animated **mesh/gradient
+  backdrop** provides the color and light that the frosted panels refract.
+- **Frosted panels carry the UI.** Nav, cards, modals, and key tiles use translucency +
+  `backdrop-filter: blur()` + a thin highlight edge + soft shadow to read as glass.
+- **Legibility first, always.** Glass never costs contrast. Text sits on a tuned glass
+  tint (and an optional scrim) that guarantees AA. Background motion stays gentle and
+  low-contrast behind any text.
+- **Restraint is the craft.** Not everything is glass. A page has **one living
+  background** and a *few* deliberate glass layers — the shared anti-pattern is
+  **excessive glassmorphism**, and this skill exists to do it *tastefully*.
+- **Robust fallbacks.** Where `backdrop-filter` is unsupported (or for reduced
+  transparency), glass degrades to a solid tinted surface that keeps the same contrast.
+
+## 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, the living background's
+   shifts, glass-panel elevation, and type hierarchy — never a section border. (A glass
+   panel's own thin highlight edge is part of the panel, not a section divider.)
+4. **Pure HTML + CSS + vanilla JS — no frameworks/libraries.** The generated site uses
+   **only HTML5, CSS3, and vanilla JavaScript** (glass is `backdrop-filter` + CSS; the
+   mesh is CSS/canvas). No React/Vue/Angular/Svelte/Next, no Bootstrap/Tailwind/any CSS
+   framework, no jQuery/any UI or JS library, no build step. (Exporting `tokens.json`
+   for other agents is fine — that's data, not a framework.)
+5. **Clean, Vercel-ready URLs.** All routes are **extensionless** (`/pricing`, not
+   `/pricing.html`); ship a `vercel.json` (`cleanUrls: true`) plus `sitemap.xml` /
+   `robots.txt` so production refresh and deep links work.
+6. **Full navigation + SEO.** Desktop nav (a **glass** dropdown/mega-menu) + mobile menu
+   + breadcrumbs; per-page SEO (unique title/description, Open Graph, Twitter card,
+   canonical, JSON-LD). Every component: responsive, accessible, reusable,
+   production-ready, animation-ready.
+
+See `website-generation-rules.md` for the required page list, required sections, the
+`vercel.json`, navigation, and SEO specifics. Enforce in code: `.section { border: 0 }`
+and never place `<hr>`/divider elements between sections.
+
+## When to use
+
+Building or designing any landing page, marketing site, or product site that should use a
+**glassmorphism / frosted-glass** aesthetic (Apple/visionOS, Stripe, Linear energy) — for
+a product, AI startup, developer platform, or enterprise SaaS — or producing **design
+tokens / a design system** for other agents.
+
+## The companion files (read what you need)
+
+| File | What it gives you |
+|---|---|
+| `design-principles.md` | The glass philosophy, hierarchy laws, restraint rules, do/don'ts |
+| `color-system.md` | Mesh-background + **glass-surface** tokens (with fallbacks) as CSS vars |
+| `typography-system.md` | Fonts, fluid type scale, weights, on-glass text legibility rules |
+| `spacing-system.md` | 4/8-pt scale, container widths, glass-panel padding/rhythm |
+| `layout-system.md` | Grid + canonical glass section layouts (over the living background) |
+| `component-library.md` | 17 components as glass + the glass-surface utilities |
+| `motion-system.md` | Animated mesh, parallax light, hover sheen, micro-interactions |
+| `accessibility-system.md` | Contrast on glass, reduced transparency/motion, focus, fallbacks |
+| `website-generation-rules.md` | Pure-vanilla build: pages, clean URLs + `vercel.json`, nav, SEO |
+| `example-page-structures.md` | Ready glass page blueprints |
+
+All tokens use the same names across files, so they compose into one stylesheet.
+
+## Phase 1 — Research is baked in (live analysis OPTIONAL)
+
+The design intelligence extracted from the reference sites is **already encoded in the
+companion files** — patterns, palettes, type scales, spacing, the glass engine,
+components, motion. **Do NOT re-scrape the references for the basics; use the baked-in
+system** (saves tokens). Only browse live when the user wants a *current* look from a
+specific site, a brand-new pattern not covered here, or to verify a font/feature.
+
+What the baked-in system already captures (the Phase-1 extraction): design patterns,
+visual hierarchy, typography/spacing/grid/layout systems, color + gradient systems,
+animation/motion, navigation, CTA + hero patterns, trust/enterprise/social-proof
+components, footer/pricing/feature structures, interactive + micro-interactions,
+glassmorphism usage (and how to keep it tasteful + accessible), accessibility, mobile
+responsiveness, developer-experience patterns, and AI-startup conversion patterns.
+
+## Phase 2 — Generate (the workflow)
+
+1. **Clarify intent:** site type (product / SaaS / dev platform / AI / enterprise), theme
+   (default deep-aurora dark, or light frost), brand accent, and page set.
+2. **Lock the tokens:** start from `color-system.md` + `typography-system.md` +
+   `spacing-system.md`. Emit them once as `:root` CSS variables (and `tokens.json`).
+3. **Set the living background:** one mesh/gradient backdrop (gentle motion) that the
+   glass refracts; keep it low-contrast behind text.
+4. **Compose layouts + components:** place a *few* deliberate glass surfaces (nav, hero
+   card, feature/pricing cards) over the background; everything else is calm.
+5. **Apply motion + a11y:** mesh drift + hover sheen per `motion-system.md`, gated by
+   `prefers-reduced-motion`; meet every rule in `accessibility-system.md` (incl. fallbacks).
+6. **Emit code:** follow `website-generation-rules.md` to produce clean, semantic,
+   responsive **pure HTML + CSS + vanilla JS** plus tokens, `vercel.json`, `sitemap.xml`,
+   `robots.txt`.
+7. **Self-check** against the anti-patterns and the verification checklist below.
+
+## Output
+
+Unless the user specifies otherwise, write the generated **multipage site (15+ pages,
+~20)** into a `website/` folder in the project root:
+- `website/index.html` **plus 15+ additional pages** (≥10 sections each, glass over one
+  living background, no inter-section borders), linked with **extensionless URLs**
+- `website/css/tokens.css` + `website/css/styles.css`
+- `website/js/main.js` (vanilla nav, mesh/parallax, hover sheen — progressively enhanced)
+- `website/vercel.json`, `website/sitemap.xml`, `website/robots.txt`
+- `website/assets/` (icons, og images, optional noise/grain texture)
+- `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 deep, vivid **mesh-gradient background** (aurora violet/blue/teal on near-black) with a
+subtle grain, over which **frosted glass panels** float — blurred, lightly tinted, edged
+with a thin top highlight and a soft shadow. High-contrast text on tuned glass, one
+restrained accent, gentle light/parallax motion. Premium and futuristic — never a blurry,
+low-contrast mess. (Default deep-aurora dark; a light "frost" theme is included. Siblings:
+`ai-dark-futuristic-design-system`, `apple-premium-minimal-design-system`,
+`product-demo-first-design-system`, `bento-grid-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
+(glass on everything) · low-contrast text on glass · busy backgrounds behind text ·
+blur with no fallback** · poor accessibility · inconsistent spacing · **borders or
+dividers between sections · single-page sites or thin pages with fewer than 10 sections ·
+any framework/library in the shipped site · `.html` in URLs**. The result must feel like
+Apple/visionOS/Stripe glass — tasteful and legible, never gimmicky.
+
+## 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. **Tasteful glass met:** one living background per page; glass used on a *few*
+   deliberate surfaces (not everything); **every glass panel passes AA text contrast**;
+   backgrounds behind text are low-contrast.
+0c. **Fallbacks met:** glass degrades to a solid tinted surface where `backdrop-filter`
+   is unsupported and under `prefers-reduced-transparency`/`prefers-reduced-motion`.
+0d. **Pure vanilla + clean URLs:** zero frameworks/libraries; routes extensionless with a
+   working `vercel.json` (`cleanUrls`), `sitemap.xml`, `robots.txt`.
+0e. **Nav + SEO:** glass desktop nav/dropdowns + mobile menu + breadcrumbs; per-page
+   title/description, Open Graph + Twitter card, canonical, JSON-LD.
+1. Tokens emitted once (`:root`/`tokens.css`) and reused — no scattered one-off hex.
+2. Type uses the fluid scale; spacing uses the 4/8-pt scale; 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/on-glass text ≥ 4.5:1, large text ≥ 3:1; visible focus; motion + transparency
+   respect user prefs; semantic landmarks + alt text present.
+5. Fully responsive (360 → 1440+), no horizontal scroll, tap targets ≥ 44px; blur is
+   reduced/disabled on low-power where needed.
+6. Trips **zero** anti-patterns; glass is restrained and legible; performance is good.
+7. Output looks like it belongs next to Apple/visionOS/Stripe — premium glass, legible.

package/skills/glassmorphism-design-system/accessibility-system.md

@@ -0,0 +1,62 @@
+# Accessibility System — Glassmorphism
+
+Glassmorphism is the **highest-risk** style for accessibility — translucency and busy
+backgrounds threaten contrast, blur can disorient, and `backdrop-filter` isn't universal.
+This system bakes WCAG 2.1 AA into the look so the glass stays beautiful **and** usable.
+
+## Color & contrast (the critical area)
+- **On-glass body text ≥ 4.5:1**, large/UI text **≥ 3:1**, measured over the **brightest
+  region of the background** the panel can overlap (not the average). If it fails: switch
+  to `--glass-bg-strong`, add a `--scrim`, increase text weight/size, or make the panel
+  more opaque. **Never trade contrast for the effect.**
+- **Keep backgrounds calm behind text.** The mesh must be low-contrast where words sit;
+  don't place text over the busiest/brightest mesh area or over imagery without a scrim.
+- **Non-text contrast ≥ 3:1** for the panel edge/controls/focus ring against their backdrop.
+- **Don't encode meaning in color alone**; the highlighted pricing tier says "Most popular"
+  in text. **Primary CTAs are solid** (not glass) so actions are unmistakable.
+- **No gradient/low-contrast text for body**; `--grad-text` only on one large hero phrase.
+
+## Transparency & motion preferences
+- **`prefers-reduced-transparency`:** glass → solid tinted surface (handled in
+  color-system); the layout/contrast must still hold.
+- **`prefers-reduced-motion`:** freeze the mesh drift; disable parallax/sheen/pointer-glow/
+  marquee; reveal panels in final state. No essential info conveyed by motion alone.
+- No flashing > 3×/sec; no autoplaying audio.
+
+## Fallbacks & robustness
+- Wrap blur in `@supports (backdrop-filter: blur(1px))`; **always define the solid
+  fallback first** so unsupported browsers (and reduced transparency) get a legible surface.
+- Consider reducing/disabling blur on low-power/mobile (performance) without losing contrast.
+- Text legibility must never depend on `backdrop-filter` rendering.
+
+## Focus & keyboard
+- **Always-visible focus:** `:focus-visible { outline:2px solid var(--ring);
+  outline-offset:2px }` — the ring (`--ring`) is tuned to contrast with glass. Never bare
+  `outline:none`.
+- **Full keyboard operability**; logical tab order; no traps (except modal focus-trap with
+  ESC). **Skip link** to `#main` first in DOM. Glass dropdowns/menus: arrow-key nav, ESC.
+
+## Semantics & structure
+- One `<h1>` per page; ordered headings (size with CSS). Landmarks:
+  `<header><nav><main id="main"><section><footer>`. Native elements over ARIA; minimal correct ARIA.
+- Buttons vs links: `<button>` actions, `<a href>` navigation. Lists `<ul>/<ol>`; quotes
+  `<blockquote><cite>`; code `<pre><code>`.
+
+## Media & forms
+- Informative images have meaningful `alt`; decorative glows/mesh/panel edges are
+  `aria-hidden`/`alt=""`.
+- Every input has a programmatic `<label>`; `<fieldset><legend>` for groups; errors in text
+  + `aria-describedby`, focus to first error. Inputs on glass use a more opaque surface for legibility.
+
+## Touch & responsive
+- **Tap targets ≥ 44×44px**; reflow to 320px, no horizontal scroll; 200% zoom OK; pinch-zoom
+  not disabled.
+
+## Checklist (run before finishing)
+1. Every glass panel's text meets AA over the brightest backdrop it can overlap.
+2. Backgrounds behind text are calm; scrim/`--glass--strong` used where needed.
+3. Solid fallback present (`@supports` + `prefers-reduced-transparency`); legible without blur.
+4. Reduced motion freezes mesh + disables parallax/sheen; primary CTAs are solid.
+5. Visible (glass-contrasting) focus everywhere; keyboard-complete; skip link; correct landmarks + one H1.
+6. Informative media has alt; decorative hidden; labelled forms; inputs legible on glass.
+7. 44px targets; reflow to 320px; 200% zoom; zoom not disabled; blur reduced on low-power if needed.

package/skills/glassmorphism-design-system/color-system.md

@@ -0,0 +1,128 @@
+# Color System — Glassmorphism
+
+Two layers of color: a **living mesh-gradient background** that provides light, and
+**frosted-glass surfaces** (translucent tint + blur + highlight edge + shadow) that float
+over it — with **accessible fallbacks**. Ships **deep-aurora dark by default**; a light
+"frost" theme is included. Sections separate via the background + glass elevation —
+**never borders**. Override `--accent-*` to rebrand. Contrast: on-glass body ≥ 4.5:1.
+
+## Tokens (`:root`) — deep-aurora dark (default)
+
+```css
+:root {
+  /* ---- Living background (the light glass refracts) ---- */
+  --bg-base:   #07070d;   /* deepest backdrop / page base */
+  --mesh-1:    #6d28d9;   /* violet */
+  --mesh-2:    #2563eb;   /* blue */
+  --mesh-3:    #0891b2;   /* teal */
+  --mesh-4:    #db2777;   /* magenta (use faintly) */
+  --bg-mesh:   radial-gradient(40% 50% at 18% 12%, rgba(109,40,217,0.45) 0%, transparent 60%),
+               radial-gradient(45% 55% at 85% 18%, rgba(37,99,235,0.40) 0%, transparent 60%),
+               radial-gradient(50% 60% at 70% 88%, rgba(8,145,178,0.38) 0%, transparent 62%),
+               radial-gradient(40% 50% at 25% 85%, rgba(219,39,119,0.22) 0%, transparent 60%),
+               #07070d;
+  --grain:     url("/assets/noise.png"); /* faint tiled grain over the mesh (optional) */
+
+  /* ---- GLASS SURFACES (tint + blur + edge + shadow) ---- */
+  --glass-bg:        rgba(255,255,255,0.08);  /* default frosted tint (dark theme) */
+  --glass-bg-strong: rgba(255,255,255,0.14);  /* more opaque — use behind text-heavy panels */
+  --glass-bg-solid:  #14141d;                 /* FALLBACK solid (no backdrop-filter / reduced transparency) */
+  --glass-blur:      18px;                     /* backdrop blur radius */
+  --glass-edge:      rgba(255,255,255,0.22);   /* thin top highlight (1px inner border) */
+  --glass-border:    rgba(255,255,255,0.12);   /* panel hairline */
+  --glass-shadow:    0 20px 60px rgba(0,0,0,0.45);
+  --glass-nav:       rgba(12,12,20,0.55);      /* nav glass (a bit darker for legibility) */
+  --scrim:           rgba(7,7,13,0.45);        /* optional darkening behind text on busy bg */
+
+  /* ---- Text ramp (on glass / on backdrop) ---- */
+  --text-primary:   #f4f5fb;
+  --text-secondary: #c7cbd9;
+  --text-muted:     #9aa0b4;   /* still AA on the tuned glass tints */
+  --text-faint:     #6b7184;   /* decorative/disabled — non-essential only */
+  --text-on-accent: #0a0612;
+
+  /* ---- Borders / hairlines (panels/inputs — NOT between sections) ---- */
+  --border-subtle:  rgba(255,255,255,0.08);
+  --border-default: rgba(255,255,255,0.14);
+  --ring:           #a78bfa;   /* focus ring (high-contrast on glass) */
+
+  /* ---- Accent (one, restrained — solid for CTAs) ---- */
+  --accent:        #8b5cf6;  /* violet */
+  --accent-hover:  #9d75f7;
+  --accent-press:  #7c46ec;
+  --accent-2:      #22d3ee;  /* cyan — sparing highlights */
+  --accent-soft:   rgba(139,92,246,0.16);
+
+  /* ---- Semantic ---- */
+  --success: #34d399; --success-soft: rgba(52,211,153,0.16);
+  --warning: #fbbf24; --warning-soft: rgba(251,191,36,0.16);
+  --error:   #fb7185; --error-soft:   rgba(251,113,133,0.16);
+  --info:    #38bdf8; --info-soft:    rgba(56,189,248,0.16);
+
+  /* ---- Accent gradient (CTAs / one highlight) ---- */
+  --grad-accent:  linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
+  --grad-text:    linear-gradient(90deg, #ffffff 0%, #c4b5fd 60%, #67e8f9 100%);
+}
+```
+
+## The glass utility (with fallback)
+
+```css
+.glass {
+  background: var(--glass-bg-solid);                 /* fallback first */
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--glass-shadow);
+  position: relative;
+}
+.glass::before {                                     /* thin top highlight edge */
+  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
+  box-shadow: inset 0 1px 0 var(--glass-edge);
+}
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .glass {
+    background: var(--glass-bg);
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
+    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
+  }
+}
+.glass--strong { background: var(--glass-bg-strong); }  /* behind text-heavy content */
+.glass--nav    { background: var(--glass-nav); }
+@media (prefers-reduced-transparency: reduce) {
+  .glass, .glass--strong, .glass--nav { background: var(--glass-bg-solid) !important;
+    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
+}
+```
+
+## Palette roles
+
+- **Background palette** (`--bg-*`, `--mesh-*`, `--bg-mesh`): the one living backdrop per
+  page. Keep it **low-contrast where text sits**; add `--scrim` behind text over a busy area.
+- **Glass surfaces** (`--glass-*`): nav, hero card, feature/pricing cards, modals. Use
+  `--glass-bg` normally and `--glass-bg-strong` behind reading text. Always include the
+  **solid fallback** + the highlight edge + shadow.
+- **Text** (`--text-*`): primary near-white, secondary, muted — all tuned to clear AA on
+  the glass tints. Never `--text-faint` for real content.
+- **Borders** (`--border-*`, `--glass-border`/`--glass-edge`): panel edges/hairlines only —
+  not section dividers.
+- **Accent** (`--accent*`, `--grad-accent`): **solid** primary CTAs + a few highlights —
+  CTAs are NOT glass (actions must be unmistakable). `--accent-2` sparingly.
+- **Success / Warning / Error / Info**: status, badges, validation only.
+
+## Usage rules
+
+1. **One background, few glass panels.** Don't make every element glass (anti-pattern).
+2. **Separate sections with the backdrop + glass elevation + space, not borders.** Mandatory.
+3. **Guarantee contrast.** Test on-glass text over the *brightest* region of the mesh it
+   could sit on; bump to `--glass-bg-strong` or add `--scrim` until ≥ 4.5:1.
+4. **Always ship the fallback** (`@supports` + `prefers-reduced-transparency`).
+5. **Watch performance.** Few large blurred surfaces per viewport; reduce `--glass-blur`
+   on mobile/low-power if needed.
+
+## Optional light "frost" theme
+
+`[data-theme="light"]`: lighten the mesh (pastel aurora on `#f4f6fc`), set
+`--glass-bg: rgba(255,255,255,0.55); --glass-bg-strong: rgba(255,255,255,0.72);
+--glass-bg-solid:#ffffff; --glass-edge: rgba(255,255,255,0.9); --glass-border:
+rgba(13,16,30,0.08); --text-primary:#0c0e16; --text-secondary:#39405a;
+--text-muted:#5d6480;` and re-verify contrast. **Deep-aurora dark is the default.**

package/skills/glassmorphism-design-system/component-library.md

@@ -0,0 +1,120 @@
+# Component Library — Glassmorphism
+
+Specs for the 17 required components rendered as **tasteful glass** + the glass utilities.
+Each: purpose, anatomy, tokens, states, responsive + a11y. Semantic HTML; shared tokens;
+**no borders between sections** (glass panel edges are part of the panel, not dividers).
+
+Shared primitives (see `color-system.md` for the full `.glass` utility + fallback):
+
+```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); }   /* SOLID, not glass */
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-ghost { background: var(--glass-bg); color: var(--text-primary);
+  border-color: var(--glass-border); }                                      /* a glass ghost button */
+:where(a,button,input,[tabindex]):focus-visible { outline:2px solid var(--ring);
+  outline-offset:2px; border-radius: var(--radius-sm); }
+```
+**Rule: primary CTAs are SOLID accent buttons** (actions must be unmistakable); glass is
+for surfaces, not the main action.
+
+## ★ Glass surface (the signature) — use for nav/cards/modals, not everything
+`.glass` (default), `.glass--strong` (behind reading text), `.glass--nav` (nav). Each =
+translucent tint + `backdrop-filter: blur` + thin top highlight edge (`::before`) + soft
+shadow, **with a solid fallback** (`@supports` + `prefers-reduced-transparency`). Optional
+hover **sheen** (see motion). Keep ≤ ~2–3 large glass surfaces per viewport.
+
+---
+
+## 1. Navbar (+ glass dropdown/mega-menu + breadcrumb)
+Sticky **`.glass--nav`** bar over the backdrop. Logo · nav links · primary CTA (solid) +
+"Sign in" ghost · mobile hamburger. **Extensionless hrefs** (`/platform`). **Dropdown/
+mega-menu** is a floating `.glass` panel (vanilla JS): hover/click toggle, ESC + click-
+outside, `aria-haspopup/expanded`, arrow-key nav. Mobile: full-screen `.glass--strong`
+overlay, accordion, focus-trap, ESC. **Breadcrumb** on deep pages. a11y: `aria-current`.
+
+## 2. Hero
+Layout GH-A/GH-B/GH-C. Eyebrow · H1 (optional `--grad-text` on one word) · lead · CTA pair
+(solid primary + ghost) inside a centered **`.glass--strong` hero panel** over a calm mesh
+region. Optional product preview in a second glass panel. One H1, one solid primary CTA.
+Decorative mesh/glow `aria-hidden`.
+
+## 3. Feature Grid
+`.grid.cols-3` of **`.glass` feature cards**: icon chip · H3 · body · optional link. Hover:
+lift + faint sheen. Keep body weight ~460 on glass for legibility.
+
+## 4. Bento Grid
+A few varied **glass tiles** (one anchor) floating on the mesh — mixed content (feature,
+metric, mini preview). Don't over-tile; leave background visible between tiles.
+
+## 5. Testimonials
+Featured quote in a large `.glass` panel + small glass quote cards, or a 3-up grid.
+`<blockquote>` + `<cite>`; carousel optional. Ensure quote text clears AA on the tint.
+
+## 6. Logos Section
+"Trusted by" eyebrow + logos in a slim `.glass` strip or directly on the backdrop
+(monochrome, `opacity:.7`). Pausable marquee optional. `<img alt="Company">`.
+
+## 7. Pricing
+Layout P-A/P-B. Tier **`.glass` cards** (price tabular-nums, feature list, CTA);
+highlighted tier = accent edge + `.glass--strong` (more opaque) + "Most popular" pill;
+monthly/annual toggle. Primary CTA solid. a11y: real `role="switch"`/radio.
+
+## 8. FAQ
+Accordion inside a `.glass--strong` panel (reading legibility). `<button>` + collapsible
+answer; height/opacity animation. a11y: `aria-expanded`/`aria-controls`.
+
+## 9. CTA
+Layout C-A: a centered **`.glass--strong` band**, big H2, supporting line, **solid accent
+CTA** + ghost. `--section-y-lg`, no border.
+
+## 10. Footer
+FT-A on a `.glass--nav`/near-solid panel: brand · 4–6 link columns · legal · locale/social.
+Muted-but-AA text. `<footer>`, `<nav>` link lists.
+
+## 11. Dashboard Preview
+Product app shell inside a **glass frame** (or a solid app frame on a glass mount), floated
+with `--glass-shadow` + subtle parallax. Real-looking data. Decorative → `aria-hidden`;
+informative → alt text. Keep in-app text on solid surfaces (don't blur the product UI).
+
+## 12. Agent Workflow Section
+Steps as connected **glass cards** (Plan → Retrieve → Act → Verify), or a glass panel
+showing the agent running. Sequential reveal. a11y: `<ol>` text equivalent.
+
+## 13. Code Preview
+Mono code in a **glass-framed** card with a window header (filename, copy). Put the code on
+a slightly more opaque inner surface so syntax stays legible. `<pre><code>`; copy `aria-label`.
+
+## 14. Terminal Preview
+Glass-framed terminal: header + prompt lines on a near-solid inner surface; optional
+typewriter (reduced-motion → final state). Real text, not an image.
+
+## 15. Trust Section
+Metric **glass tiles**: big tabular-nums numbers + muted labels (count-up on reveal, final
+value in DOM). Accent on numbers only. Ensure contrast on the tint.
+
+## 16. Security Section
+Compliance badges (SOC 2/ISO/GDPR/HIPAA) + assurances in a `.glass` panel with an icon
+list + "Read security docs". Calm, factual. Badges have alt text.
+
+## 17. Enterprise Section
+"Built for enterprise" glass panel: SSO/RBAC/SLAs/VPC props + "Talk to sales" (solid CTA)
++ optional logo strip. No border.
+
+---
+
+## Component rules
+- **Glass for surfaces, solid for actions.** Primary CTAs are solid accent buttons, never glass.
+- **Every glass component ships the fallback** (`@supports` + `prefers-reduced-transparency`
+  → solid tinted surface) and the highlight edge + shadow.
+- **Guarantee AA** on every glass panel's text (use `.glass--strong`/scrim behind reading text).
+- Compose from shared `.btn`/`.glass`/tokens — no bespoke effects per component.
+- Every interactive element has hover **and** `:focus-visible`; components reflow to single
+  column by `md`/`sm`.
+- Decorative visuals `aria-hidden`; informative media has meaningful `alt`.
+- Restraint: ≤ ~2–3 large glass surfaces per viewport; hairlines/edges belong to panels —
+  **never between page sections**; keep blurred-surface count performant.