boost-skill-cli 1.0.12__tar.gz → 1.0.13__tar.gz

{boost_skill_cli-1.0.12 → boost_skill_cli-1.0.13}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: boost-skill-cli
-Version: 1.0.12
+Version: 1.0.13
 Summary: boost — Homebrew for AI coding skills
 Author: Jonathan Reyes
 License: GNU GENERAL PUBLIC LICENSE
@@ -823,6 +823,17 @@ available on your PATH (or `ANTHROPIC_API_KEY` is set), and fall back to
 plain heuristics when it isn't — so the tool still works without an API key,
 just less cleverly.
 
+## The boost style
+
+The visual identity behind the docs and demos ships as a small, dependency-free
+design system in [`style/`](style/) — the *Aurora living-glass* look: a
+cyan → violet → pink triad on a near-black ground, an ambient aurora that drifts
+behind the page, and glass cards that light up under the cursor. Drop
+[`style/boost.css`](style/boost.css) (and the optional
+[`style/boost.js`](style/boost.js)) into any static page; see
+[`style/demo.html`](style/demo.html) for the whole system on one page and
+[`style/README.md`](style/README.md) for the tokens and class reference.
+
 ## Working on boost
 
 ```bash

{boost_skill_cli-1.0.12 → boost_skill_cli-1.0.13}/README.md

@@ -119,6 +119,17 @@ available on your PATH (or `ANTHROPIC_API_KEY` is set), and fall back to
 plain heuristics when it isn't — so the tool still works without an API key,
 just less cleverly.
 
+## The boost style
+
+The visual identity behind the docs and demos ships as a small, dependency-free
+design system in [`style/`](style/) — the *Aurora living-glass* look: a
+cyan → violet → pink triad on a near-black ground, an ambient aurora that drifts
+behind the page, and glass cards that light up under the cursor. Drop
+[`style/boost.css`](style/boost.css) (and the optional
+[`style/boost.js`](style/boost.js)) into any static page; see
+[`style/demo.html`](style/demo.html) for the whole system on one page and
+[`style/README.md`](style/README.md) for the tokens and class reference.
+
 ## Working on boost
 
 ```bash

{boost_skill_cli-1.0.12 → boost_skill_cli-1.0.13}/boost_cli/_version.py

@@ -18,7 +18,7 @@ version_tuple: tuple[int | str, ...]
 commit_id: str | None
 __commit_id__: str | None
 
-__version__ = version = '1.0.12'
-__version_tuple__ = version_tuple = (1, 0, 12)
+__version__ = version = '1.0.13'
+__version_tuple__ = version_tuple = (1, 0, 13)
 
 __commit_id__ = commit_id = None

{boost_skill_cli-1.0.12 → boost_skill_cli-1.0.13}/boost_skill_cli.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: boost-skill-cli
-Version: 1.0.12
+Version: 1.0.13
 Summary: boost — Homebrew for AI coding skills
 Author: Jonathan Reyes
 License: GNU GENERAL PUBLIC LICENSE
@@ -823,6 +823,17 @@ available on your PATH (or `ANTHROPIC_API_KEY` is set), and fall back to
 plain heuristics when it isn't — so the tool still works without an API key,
 just less cleverly.
 
+## The boost style
+
+The visual identity behind the docs and demos ships as a small, dependency-free
+design system in [`style/`](style/) — the *Aurora living-glass* look: a
+cyan → violet → pink triad on a near-black ground, an ambient aurora that drifts
+behind the page, and glass cards that light up under the cursor. Drop
+[`style/boost.css`](style/boost.css) (and the optional
+[`style/boost.js`](style/boost.js)) into any static page; see
+[`style/demo.html`](style/demo.html) for the whole system on one page and
+[`style/README.md`](style/README.md) for the tokens and class reference.
+
 ## Working on boost
 
 ```bash

{boost_skill_cli-1.0.12 → boost_skill_cli-1.0.13}/boost_skill_cli.egg-info/SOURCES.txt

@@ -54,6 +54,10 @@ docs/rag-architecture.md
 docs/.claude/settings.local.json
 scripts/build_registries.py
 scripts/mutation_gate.py
+style/README.md
+style/boost.css
+style/boost.js
+style/demo.html
 tests/conftest.py
 tests/make_fixture.py
 tests/smoke.sh

boost_skill_cli-1.0.13/style/README.md

@@ -0,0 +1,92 @@
+# boost style — *Aurora living-glass*
+
+The visual identity of boost, packaged as a small, dependency-free design
+system you can drop into any static page.
+
+It's a **neon-tech, glassmorphic** look: a **cyan → violet → pink** triad on a
+near-black ground, an ambient **aurora** that drifts slowly behind the page, and
+**glass cards that light up under the cursor**. The goal is a page that feels
+*slightly alive but not distracting* — every motion is slow, low-contrast, and
+gated behind `prefers-reduced-motion`.
+
+Open [`demo.html`](demo.html) to see the whole system on one page.
+
+```
+style/
+├── boost.css     the design system — tokens, atmosphere, primitives, a11y
+├── boost.js      two progressive enhancements: cursor glow + reveal-on-scroll
+├── demo.html     self-contained showcase / living reference
+└── README.md     this file
+```
+
+## Use it
+
+```html
+<link rel="stylesheet" href="style/boost.css">
+<!-- optional: cursor spotlight + reveal-on-scroll -->
+<script src="style/boost.js" defer></script>
+```
+
+Everything is static — no build step, no dependencies, no webfont fetches. The
+JavaScript is pure enhancement: with it disabled, the page is still fully styled
+and legible (cards just don't glow, and reveal elements start visible).
+
+## The palette
+
+The entire identity lives in three custom properties. Recolor the system by
+changing their **values** — never the selectors.
+
+| Token       | Value     | Role                          |
+|-------------|-----------|-------------------------------|
+| `--cyan`    | `#22d3ee` | primary accent                |
+| `--violet`  | `#a855f7` | secondary accent              |
+| `--pink`    | `#f472d0` | tertiary accent               |
+| `--bg`      | `#07080f` | near-black page ground        |
+| `--text`    | `#e9ebf5` | primary ink                   |
+| `--grad`    | cyan → violet → pink | the signature gradient |
+
+Neutrals are intentionally cool (a slight blue bias), not pure grey, so they
+read as chosen rather than defaulted.
+
+## What's in the box
+
+| Class            | What it gives you                                                        |
+|------------------|--------------------------------------------------------------------------|
+| `.wrap`          | centered `max-width` container that sits above the aurora                |
+| `.glass`         | the reusable living-glass surface — blur, hover lift, cursor spotlight   |
+| `.cap`           | a padded glass **card** with icon slot (`--ic-bg`/`--ic-fg`), title, tags |
+| `.stat` / `.stats` | gradient stat figures in a responsive grid                             |
+| `.badge`         | a "live" pill with a breathing dot                                       |
+| `.btn` `.btn-grad` `.btn-ghost` | the two button treatments                                |
+| `.eyebrow` `.sec-title` `.sec-sub` | section chrome (eyebrow is gradient-clipped)          |
+| `.grad-text`     | gradient-clip any inline text                                            |
+| `.window`        | a macOS-style terminal frame + `.tp/.tv/.tc/.tok/.cm` syntax tokens      |
+| `.reveal`        | fades/slides in when scrolled into view (via `boost.js`)                 |
+
+### The atmosphere
+
+`body::before` (drifting aurora) and `body::after` (masked tech grid) are fixed
+layers at `z-index: 0`. Keep your content inside `.wrap` (which sets
+`z-index: 1`) so it sits above them.
+
+### The cursor spotlight
+
+`boost.js` writes the pointer's element-local position into `--mx` / `--my` on
+each `.glass`, `.cap`, `.stat`, and `.window`. The CSS reads those in a radial
+gradient. No JS → the variables stay unset → the spotlight simply never shows,
+and the hover lift still works.
+
+## Accessibility
+
+- **`prefers-reduced-motion`** disables the aurora drift, the breathing badge,
+  the reveal animation, and the hover lift — hover still recolors, just without
+  movement.
+- **Print** hides the atmosphere and flattens shadows/blur so pages print clean.
+- **Focus** states are visible (`:focus-visible` uses the cyan accent).
+- Contrast targets legible body text (`--text` on `--bg`) at the default sizes.
+
+## Provenance
+
+This is the aesthetic used across the boost documentation and
+[jonnyeclectic's portfolio](https://github.com/jonnyeclectic/portfolio),
+extracted here as a standalone, reusable system.

boost_skill_cli-1.0.13/style/boost.css

@@ -0,0 +1,352 @@
+/* ============================================================================
+   boost style — "Aurora living-glass"
+   ----------------------------------------------------------------------------
+   A neon-tech, glassmorphic design system: a cyan → violet → pink triad on a
+   near-black ground, an ambient aurora that drifts behind the page, and glass
+   cards that light up under the cursor. Slightly alive, never distracting.
+
+   Everything is driven by CSS custom properties (see :root below) — recolor the
+   whole system by changing token *values*, not selectors.
+
+   Usage:
+     <link rel="stylesheet" href="boost.css">
+     <script src="boost.js" defer></script>   <!-- cursor glow + scroll reveal -->
+
+   The interactions (cursor-follow spotlight, reveal-on-scroll) are progressive
+   enhancement — the page is fully styled and legible with JS disabled.
+   ========================================================================== */
+
+:root {
+  /* --- ground & ink --- */
+  --bg:          #07080f;   /* near-black page ground */
+  --panel:       rgba(255,255,255,.035);
+  --panel-solid: #0f1120;
+  --line:        rgba(255,255,255,.09);
+  --line-soft:   rgba(255,255,255,.05);
+  --line-hi:     rgba(255,255,255,.22);
+  --text:        #e9ebf5;
+  --text-2:      #9298b0;
+  --text-3:      #676d86;
+
+  /* --- the triad: the whole identity lives in these three --- */
+  --cyan:        #22d3ee;   /* primary accent */
+  --violet:      #a855f7;
+  --pink:        #f472d0;
+
+  /* --- extended accents --- */
+  --blue:        #38bdf8;
+  --sky:         #7dd3fc;
+  --green:       #4ade80;
+  --yellow:      #facc15;
+
+  /* --- signature gradient --- */
+  --grad: linear-gradient(96deg, var(--cyan) 0%, var(--violet) 52%, var(--pink) 100%);
+
+  /* --- terminal surfaces --- */
+  --term-bg:  #0d1024;
+  --term-bar: #171a33;
+
+  /* --- type --- */
+  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  /* --- rhythm --- */
+  --radius:    16px;
+  --radius-lg: 18px;
+  --maxw:      1120px;
+}
+
+/* ---------- reset ---------- */
+*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; padding: 0; }
+html { scroll-behavior: smooth; scroll-padding-top: 84px; }
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: 17px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+}
+a    { color: inherit; }
+code { font-family: var(--mono); }
+
+:focus-visible {
+  outline: 2px solid var(--cyan);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* ============================================================================
+   Atmosphere — the ambient aurora + faint tech grid
+   Two fixed, non-interactive layers behind everything (z-index 0). Give your
+   content a positioned wrapper (.wrap sets z-index:1) so it sits above them.
+   ========================================================================== */
+body::before {
+  content: "";
+  position: fixed; inset: -25vmax; z-index: 0; pointer-events: none;
+  background:
+    radial-gradient(38vmax 38vmax at 12% 6%,   rgba(34,211,238,.20), transparent 60%),
+    radial-gradient(34vmax 34vmax at 90% 16%,  rgba(168,85,247,.18), transparent 60%),
+    radial-gradient(30vmax 30vmax at 62% 104%, rgba(244,114,208,.14), transparent 62%);
+  filter: blur(34px) saturate(135%);
+  animation: aurora-drift 42s ease-in-out infinite;
+  will-change: transform;
+}
+body::after {
+  content: "";
+  position: fixed; inset: 0; z-index: 0; pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
+  background-size: 46px 46px;
+  -webkit-mask-image: radial-gradient(1200px 800px at 30% 0%, #000 0%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.1) 100%);
+          mask-image: radial-gradient(1200px 800px at 30% 0%, #000 0%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.1) 100%);
+}
+@keyframes aurora-drift {
+  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+  50%      { transform: translate3d(2.5vmax, -2vmax, 0) scale(1.08); }
+}
+
+/* ---------- layout container ---------- */
+.wrap {
+  max-width: var(--maxw);
+  margin: 0 auto;
+  padding: 0 24px;
+  position: relative;
+  z-index: 1;               /* lift content above the atmosphere */
+}
+
+/* ============================================================================
+   Typographic chrome — eyebrows, section titles, ledes
+   ========================================================================== */
+.eyebrow {
+  display: block; text-align: center; margin-bottom: 18px;
+  font-family: var(--mono); font-size: 12px; font-weight: 700;
+  letter-spacing: .24em; text-transform: uppercase;
+  background: var(--grad);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.sec-title {
+  font-size: clamp(30px, 4.5vw, 50px); font-weight: 800;
+  letter-spacing: -.025em; line-height: 1.1;
+  text-align: center; text-wrap: balance;
+}
+.sec-sub {
+  max-width: 640px; margin: 18px auto 0; text-align: center;
+  color: var(--text-2); font-size: 17.5px; text-wrap: balance;
+}
+.sec-sub code {
+  color: var(--cyan); background: rgba(34,211,238,.1);
+  padding: 1px 7px; border-radius: 6px; font-size: .88em;
+}
+
+/* Gradient-clipped text — apply to any inline span or heading part. */
+.grad-text {
+  background: var(--grad);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+
+/* ============================================================================
+   Badge — a "live" pill with a breathing dot
+   ========================================================================== */
+.badge {
+  display: inline-flex; align-items: center; gap: 8px;
+  font-family: var(--mono); font-size: 12.5px; color: #c9e9f5;
+  border: 1px solid rgba(34,211,238,.4); border-radius: 999px;
+  padding: 7px 16px;
+  background: rgba(34,211,238,.07);
+  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+}
+.badge::before {
+  content: ""; width: 7px; height: 7px; border-radius: 50%;
+  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
+  animation: badge-breathe 3.4s ease-in-out infinite;
+}
+@keyframes badge-breathe {
+  0%, 100% { opacity: .45; transform: scale(.82); }
+  50%      { opacity: 1;   transform: scale(1.15); }
+}
+
+/* ============================================================================
+   Buttons
+   ========================================================================== */
+.btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  font-size: 15.5px; font-weight: 650; text-decoration: none;
+  padding: 14px 26px; border-radius: 12px; border: 1px solid transparent;
+  cursor: pointer;
+  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
+}
+.btn:hover { transform: translateY(-1px); }
+.btn-grad {
+  color: #05141a;
+  background: linear-gradient(96deg, var(--cyan), var(--violet));
+  box-shadow: 0 8px 30px rgba(34,211,238,.32);
+}
+.btn-grad:hover { box-shadow: 0 12px 40px rgba(168,85,247,.5); }
+.btn-ghost { color: var(--text); border-color: var(--line); background: var(--panel); }
+.btn-ghost:hover { border-color: rgba(255,255,255,.2); }
+
+/* ============================================================================
+   Stat cards
+   ========================================================================== */
+.stats {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
+}
+.stat {
+  background: var(--panel); border: 1px solid var(--line);
+  border-radius: var(--radius); padding: 26px 22px; text-align: center;
+}
+.stat b {
+  display: block; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800;
+  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
+  background: var(--grad);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.stat span {
+  display: block; margin-top: 8px; font-size: 11px; font-weight: 650;
+  letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
+}
+
+/* ============================================================================
+   Glass cards — the primary content surface
+   .glass is the reusable primitive; .cap adds card padding + a header slot.
+   ========================================================================== */
+.glass, .cap {
+  background: var(--panel); border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+}
+.cap {
+  padding: 30px 26px; display: flex; flex-direction: column;
+}
+a.cap, a.glass { text-decoration: none; }
+
+.cap .ic {
+  width: 46px; height: 46px; border-radius: 13px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 21px; margin-bottom: 20px;
+  background: var(--ic-bg, rgba(255,255,255,.06)); color: var(--ic-fg, var(--text));
+  border: 1px solid var(--line-soft);
+}
+.cap h3 { font-size: 19.5px; font-weight: 750; letter-spacing: -.01em; }
+.cap p  { font-size: 14.5px; color: var(--text-2); margin-top: 10px; }
+.cap .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
+.cap .tags code, .chip {
+  font-size: 12px; color: #d5d5e2; background: rgba(255,255,255,.06);
+  border: 1px solid var(--line-soft); border-radius: 7px; padding: 3px 9px;
+}
+.cap .more { margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 650; color: var(--cyan); }
+
+/* ============================================================================
+   Terminal window — for showing off commands / code
+   ========================================================================== */
+.window {
+  background: var(--term-bg); border: 1px solid rgba(255,255,255,.12);
+  border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.5); overflow: hidden;
+}
+.window .bar {
+  display: flex; align-items: center; height: 38px; padding: 0 14px;
+  background: var(--term-bar); border-bottom: 1px solid rgba(0,0,0,.25);
+}
+.window .dots { display: flex; gap: 7px; }
+.window .dots i { width: 12px; height: 12px; border-radius: 50%; }
+.window .dots i:nth-child(1) { background: #ff5f57; }
+.window .dots i:nth-child(2) { background: #febc2e; }
+.window .dots i:nth-child(3) { background: #28c840; }
+.window .bar-title {
+  flex: 1; text-align: center; font-family: var(--mono);
+  font-size: 12.5px; color: #b8b8d0; margin-right: 47px;
+}
+.window pre {
+  padding: 22px 24px; overflow-x: auto;
+  font-family: var(--mono); font-size: 13.5px; line-height: 1.75; color: #dcdcf0;
+}
+/* syntax token colors for use inside .window pre */
+.tp   { color: #8888aa; }               /* prompt $ */
+.tv   { color: #7ee787; font-weight: 700; }  /* command name */
+.tc   { color: var(--yellow); font-weight: 700; }  /* subcommand */
+.tok  { color: var(--green); }          /* success check */
+.tdim { color: #9d9dbd; }
+.cm   { color: #9d9dbd; font-style: italic; }  /* comment */
+
+/* ============================================================================
+   Living glass — cursor-following spotlight + lift on hover
+   Applies to .glass and the built-in surfaces. boost.js writes --mx / --my
+   (pointer position within the element); with no JS the spotlight simply
+   never appears and the hover lift still works.
+   ========================================================================== */
+.glass, .cap, .stat {
+  position: relative; overflow: hidden;
+  backdrop-filter: blur(14px) saturate(130%);
+  -webkit-backdrop-filter: blur(14px) saturate(130%);
+  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease,
+              background .3s ease, box-shadow .35s ease;
+}
+.glass > *, .cap > *, .stat > * { position: relative; z-index: 1; }
+.glass::before, .cap::before, .stat::before {
+  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
+  pointer-events: none; opacity: 0; transition: opacity .35s ease;
+  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
+              rgba(34,211,238,.16), rgba(168,85,247,.10) 42%, transparent 70%);
+}
+.glass:hover, .cap:hover, .stat:hover {
+  transform: translateY(-4px);
+  border-color: var(--line-hi);
+  background: rgba(255,255,255,.06);
+  box-shadow: 0 22px 60px -22px rgba(168,85,247,.5),
+              inset 0 0 0 1px rgba(34,211,238,.12);
+}
+.glass:hover::before, .cap:hover::before, .stat:hover::before { opacity: 1; }
+
+/* terminal window gets a gentler accent bloom */
+.window { transition: box-shadow .35s ease, transform .3s ease; }
+.window:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 30px 80px -24px rgba(34,211,238,.4), 0 24px 70px rgba(0,0,0,.5);
+}
+
+/* ============================================================================
+   Reveal on scroll — add class="reveal"; boost.js flips .in when it enters view
+   ========================================================================== */
+.reveal { opacity: 1; }               /* visible by default (no-JS safe) */
+.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
+.js .reveal.in { opacity: 1; transform: none; }
+
+/* ============================================================================
+   Responsive
+   ========================================================================== */
+@media (max-width: 960px) {
+  .stats { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 620px) {
+  .stats { gap: 10px; }
+  .stat  { padding: 18px 10px; }
+}
+
+/* ============================================================================
+   Accessibility — honor reduced-motion, and print cleanly
+   ========================================================================== */
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  body::before { animation: none !important; }
+  .badge::before { animation: none !important; }
+  .glass, .cap, .stat, .window {
+    transition: border-color .3s ease, box-shadow .3s ease;
+  }
+  .glass:hover, .cap:hover, .stat:hover, .window:hover { transform: none; }
+  .reveal, .js .reveal {
+    transition: none !important; transform: none !important; opacity: 1 !important;
+  }
+}
+
+@media print {
+  body::before, body::after { display: none !important; }
+  .glass, .cap, .stat, .window {
+    box-shadow: none !important; backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+  }
+  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
+}

boost_skill_cli-1.0.13/style/boost.js

@@ -0,0 +1,55 @@
+/* ============================================================================
+   boost style — interactions
+   ----------------------------------------------------------------------------
+   Two progressive enhancements, both safe to omit:
+     1. cursor-following spotlight on glass surfaces (writes --mx / --my)
+     2. reveal-on-scroll for elements marked class="reveal"
+
+   Load with `defer` (or at the end of <body>). Nothing here is required for
+   the page to be styled and legible — it only adds motion.
+   ========================================================================== */
+(function () {
+  "use strict";
+
+  // Signal to CSS that JS is on, so .reveal can start hidden (and not trap
+  // no-JS visitors with permanently-invisible content).
+  document.documentElement.classList.add("js");
+
+  var reduce = window.matchMedia &&
+               window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  function ready(fn) {
+    if (document.readyState !== "loading") { fn(); }
+    else { document.addEventListener("DOMContentLoaded", fn); }
+  }
+
+  ready(function () {
+    // ---- reveal on scroll ----
+    var revealables = document.querySelectorAll(".reveal");
+    if (reduce || !("IntersectionObserver" in window)) {
+      revealables.forEach(function (el) { el.classList.add("in"); });
+    } else {
+      var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (en) {
+          if (en.isIntersecting) {
+            en.target.classList.add("in");
+            io.unobserve(en.target);
+          }
+        });
+      }, { rootMargin: "0px 0px -8% 0px", threshold: 0.05 });
+      revealables.forEach(function (el) { io.observe(el); });
+    }
+
+    // ---- cursor-following spotlight ----
+    // Pointer position is written as element-local pixels into --mx / --my,
+    // which the radial-gradient in boost.css reads.
+    var glassy = document.querySelectorAll(".glass, .cap, .stat, .window");
+    glassy.forEach(function (el) {
+      el.addEventListener("pointermove", function (e) {
+        var r = el.getBoundingClientRect();
+        el.style.setProperty("--mx", (e.clientX - r.left) + "px");
+        el.style.setProperty("--my", (e.clientY - r.top) + "px");
+      });
+    });
+  });
+})();

boost_skill_cli-1.0.13/style/demo.html

@@ -0,0 +1,140 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>boost style — Aurora living-glass</title>
+<meta name="description" content="A showcase of the boost design system: tokens, glass cards, cursor glow, and the ambient aurora.">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%2307080f'/%3E%3Ctext x='50' y='70' font-size='58' font-family='monospace' font-weight='bold' fill='%2322d3ee' text-anchor='middle'%3E%E2%9C%A6%3C/text%3E%3C/svg%3E">
+<link rel="stylesheet" href="boost.css">
+<style>
+  /* demo-only layout niceties (not part of the design system) */
+  section { padding: 96px 0 20px; }
+  .hero { padding: 88px 0 20px; }
+  .hero h1 {
+    font-size: clamp(40px, 6.4vw, 76px); font-weight: 800;
+    letter-spacing: -.035em; line-height: 1.04; max-width: 880px; text-wrap: balance;
+    margin-top: 26px;
+  }
+  .hero p.lede { max-width: 660px; margin-top: 26px; font-size: 19px; color: var(--text-2); }
+  .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
+  .stats { margin-top: 64px; }
+  .caps  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
+  .demo-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; margin-top: 56px; }
+  .swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
+  .swatch { border-radius: 14px; padding: 18px; border: 1px solid var(--line);
+            font-family: var(--mono); font-size: 12px; color: #04121a; min-height: 92px;
+            display: flex; flex-direction: column; justify-content: flex-end; font-weight: 700; }
+  footer { margin-top: 120px; border-top: 1px solid var(--line-soft); padding: 40px 0 60px; text-align: center; }
+  footer p { color: var(--text-3); font-size: 13.5px; }
+  footer b { font-family: var(--mono); color: var(--cyan); }
+  @media (max-width: 960px) {
+    .caps { grid-template-columns: repeat(2, 1fr); }
+    .demo-grid { grid-template-columns: 1fr; gap: 36px; }
+    .swatches { grid-template-columns: repeat(3, 1fr); }
+  }
+  @media (max-width: 620px) { .caps { grid-template-columns: 1fr; } }
+</style>
+</head>
+<body>
+
+<main>
+  <!-- ===== hero ===== -->
+  <div class="wrap hero">
+    <span class="badge">boost style · Aurora living-glass</span>
+    <h1>A design system that feels <span class="grad-text">slightly alive.</span></h1>
+    <p class="lede">A neon-tech, glassmorphic identity — a cyan → violet → pink triad on
+      a near-black ground, an aurora that drifts behind the page, and glass that lights up
+      under your cursor. Move your pointer across the cards below.</p>
+    <div class="cta-row">
+      <a class="btn btn-grad" href="README.md">Read the docs →</a>
+      <a class="btn btn-ghost" href="https://github.com/jonnyeclectic/boost">View on GitHub</a>
+    </div>
+
+    <div class="stats">
+      <div class="stat reveal"><b>3</b><span>Core accent hues</span></div>
+      <div class="stat reveal"><b>1</b><span>CSS + one JS file</span></div>
+      <div class="stat reveal"><b>0</b><span>Build steps</span></div>
+      <div class="stat reveal"><b>A11y</b><span>Reduced-motion aware</span></div>
+    </div>
+  </div>
+
+  <!-- ===== glass cards ===== -->
+  <section>
+    <div class="wrap">
+      <span class="eyebrow">Primitives</span>
+      <h2 class="sec-title">Glass cards that glow</h2>
+      <p class="sec-sub">Add <code>class="glass"</code> — or use the <code>.cap</code> card —
+        to get the cursor-following spotlight, hover lift, and accent bloom.</p>
+
+      <div class="caps">
+        <div class="cap reveal" style="--ic-bg: rgba(34,211,238,.12); --ic-fg: #7dd3fc;">
+          <div class="ic">✦</div>
+          <h3>Living glass</h3>
+          <p>A radial spotlight tracks the cursor across each surface, blended from the
+            cyan-to-violet triad. Purely a hover enhancement.</p>
+          <div class="tags"><code>.glass</code><code>--mx / --my</code></div>
+        </div>
+        <div class="cap reveal" style="--ic-bg: rgba(168,85,247,.14); --ic-fg: #c4b5fd;">
+          <div class="ic">◈</div>
+          <h3>Token-driven</h3>
+          <p>Recolor the entire system by changing three custom properties. Selectors never
+            need to move.</p>
+          <div class="tags"><code>--cyan</code><code>--violet</code><code>--pink</code></div>
+        </div>
+        <div class="cap reveal" style="--ic-bg: rgba(244,114,208,.13); --ic-fg: #f9a8d4;">
+          <div class="ic">◐</div>
+          <h3>Accessible by default</h3>
+          <p>Honors <code>prefers-reduced-motion</code>, prints clean, and stays fully
+            legible with JavaScript disabled.</p>
+          <div class="tags"><code>reduced-motion</code><code>print</code></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ===== terminal + swatches ===== -->
+  <section>
+    <div class="wrap">
+      <span class="eyebrow">Surfaces</span>
+      <h2 class="sec-title">Terminal window &amp; the palette</h2>
+      <p class="sec-sub">The <code>.window</code> surface for showing off commands, and the
+        triad that names the whole system.</p>
+
+      <div class="demo-grid">
+        <div class="window reveal">
+          <div class="bar"><div class="dots"><i></i><i></i><i></i></div>
+            <div class="bar-title">zsh — boost</div></div>
+          <pre><span class="tp">$</span> <span class="tv">boost</span> <span class="tc">search</span> brainstorming
+  <span class="tok">✓</span> 12 skills across 5 tapped registries
+  <span class="tok">✓</span> AI-ranked by relevance
+
+<span class="tp">$</span> <span class="tv">boost</span> <span class="tc">install</span> brainstorming
+  <span class="tok">✓</span> linked → claude-code · windsurf · cursor
+  <span class="tok">✓</span> lock updated (.skill-lock.json)
+
+<span class="cm"># the boost style — Aurora living-glass</span></pre>
+        </div>
+
+        <div class="swatches">
+          <div class="swatch reveal" style="background: var(--cyan);">--cyan<br>#22d3ee</div>
+          <div class="swatch reveal" style="background: var(--violet); color:#0a0210;">--violet<br>#a855f7</div>
+          <div class="swatch reveal" style="background: var(--pink); color:#25041c;">--pink<br>#f472d0</div>
+          <div class="swatch reveal" style="background: var(--grad);">--grad<br>triad</div>
+          <div class="swatch reveal" style="background: var(--panel-solid); color: var(--text); border-color: var(--line-hi);">--panel<br>glass</div>
+          <div class="swatch reveal" style="background: var(--bg); color: var(--text); border-color: var(--line-hi);">--bg<br>#07080f</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="wrap">
+      <p><b>boost</b> style — Aurora living-glass · self-contained, stdlib-of-CSS only</p>
+    </div>
+  </footer>
+</main>
+
+<script src="boost.js" defer></script>
+</body>
+</html>