sheleg-design-skill 0.4.0 → 0.6.0

package/README.md

@@ -84,7 +84,7 @@ curl -fsSL https://raw.githubusercontent.com/ssheleg/sheleg-design-skill/main/in
 |---|---|
 | `SKILL.md` | Agent-facing skill: discovery trigger, the principles, how to apply them, quick-reference rules, common mistakes |
 | `SHELEG_DESIGN.md` | The full reference: architecture, layer-by-layer mechanics with code, the exact morph math, the DOM↔WebGL projection bridge, a build-from-scratch recipe, and the "why it works" |
-| `styles/*.md` | Style packs — the visual identity layer: `instrument-console` (near-black console, electric-blue signal) and `editorial-luxury` (warm cream/espresso/sage, dossier motifs). Each locks palette, type, texture, motion tokens, motifs, and bans; the pack contract lets you author new styles |
+| `styles/*.md` | Style packs — the visual identity layer: `instrument-console` (near-black console, electric-blue signal), `editorial-luxury` (warm cream/espresso/sage, dossier motifs), and `workbench` (quiet light/dark product UI for dashboards & tools, standalone). Each locks palette, type, texture, motion tokens, motifs, and bans; the pack contract lets you author new styles |
 
 After installing, a Cursor or Claude agent in that project can discover the
 skill and use it when you ask it to build or upgrade a cinematic,

package/bin/cli.js

@@ -23,12 +23,22 @@ const SKILL_DIR = path.join(
   "sheleg-design",
 );
 const SKILL_SLUG = "sheleg-design";
-const FILES = [
-  "SKILL.md",
-  "SHELEG_DESIGN.md",
-  "styles/instrument-console.md",
-  "styles/editorial-luxury.md",
-];
+const CORE_FILES = ["SKILL.md", "SHELEG_DESIGN.md"];
+
+// The bundle is everything under skill/ — walked at runtime so adding a
+// style pack or token file never requires touching the installer.
+function listBundleFiles() {
+  const out = [];
+  const walk = (dir, prefix) => {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
+      if (entry.isDirectory()) walk(path.join(dir, entry.name), rel);
+      else out.push(rel);
+    }
+  };
+  walk(SKILL_DIR, "");
+  return out.sort();
+}
 
 const pkg = require(path.join(__dirname, "..", "package.json"));
 
@@ -125,7 +135,7 @@ function main() {
   const targetDir = resolveTargetDir(opts, cwd);
 
   // Verify the bundle is intact before touching the filesystem.
-  for (const f of FILES) {
+  for (const f of CORE_FILES) {
     if (!fs.existsSync(path.join(SKILL_DIR, f))) {
       console.error(
         c("yellow", `Bundle is missing ${f}. This is a packaging bug.`),
@@ -134,7 +144,8 @@ function main() {
     }
   }
 
-  const existing = FILES.filter((f) =>
+  const files = listBundleFiles();
+  const existing = files.filter((f) =>
     fs.existsSync(path.join(targetDir, f)),
   );
   if (existing.length && !opts.force) {
@@ -147,7 +158,7 @@ function main() {
   }
 
   fs.mkdirSync(targetDir, { recursive: true });
-  for (const f of FILES) {
+  for (const f of files) {
     const dest = path.join(targetDir, f);
     fs.mkdirSync(path.dirname(dest), { recursive: true });
     fs.copyFileSync(path.join(SKILL_DIR, f), dest);

package/cursor/rules/sheleg-design.mdc

@@ -1,5 +1,5 @@
 ---
-description: Apply SHELEG Design when building or upgrading a cinematic scroll-driven landing page, hero, or particle/WebGL scroll experience — or when scroll motion feels busy, janky, or out of sync
+description: Apply SHELEG Design when building a cinematic scroll-driven landing page, hero, or particle/WebGL scroll experience — or when styling product UI (dashboards, admin, internal tools) with its style packs
 alwaysApply: false
 ---
 
@@ -9,9 +9,11 @@ A page feels cinematic from a **single source of truth** (measured scroll
 position) driving **many cheap, layered, independently-degradable responses** —
 not from many animations. If the project has the full skill installed
 (`.cursor/skills/sheleg-design/`), read its `SKILL.md`, `SHELEG_DESIGN.md`,
-and the chosen style pack in `styles/` (instrument-console — dark console;
-editorial-luxury — warm editorial) first; otherwise follow the contract
-below (self-contained on purpose).
+and the chosen style pack in `styles/` first (instrument-console — dark
+console; editorial-luxury — warm editorial; workbench — quiet light/dark
+product UI for dashboards and tools, used standalone without the cinematic
+motion layer); otherwise follow the contract below (self-contained on
+purpose).
 
 ## Five principles, in order
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sheleg-design-skill",
-  "version": "0.4.0",
-  "description": "SHELEG Design — an agent skill for building cinematic, scroll-driven, particle-backed landing pages. Installs a SKILL.md + reference doc into your project so Cursor/Claude agents can build sites with a single-clock motion system, a scene-formation particle engine, and degrade-to-calm fallbacks.",
+  "version": "0.6.0",
+  "description": "SHELEG Design — an agent skill for cinematic scroll-driven landing pages AND product UI. Installs a SKILL.md + architecture reference + style packs (instrument-console dark, editorial-luxury warm, workbench light/dark for dashboards & tools) so Cursor/Claude agents build with a single-clock motion system and locked design tokens.",
   "bin": {
     "sheleg-design-skill": "bin/cli.js"
   },

package/plugins/sheleg-design/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "sheleg-design",
-  "description": "SHELEG Design methodology for cinematic scroll-driven landing pages: a single scroll clock driving layered, degrade-to-calm motion (WebGL particle formations, 2D fallback, parallax, scrubbed instruments, progress rail). Ships the sheleg-design skill, the full architecture reference, and the /sheleg-design command.",
-  "version": "0.4.0",
+  "description": "SHELEG Design methodology: cinematic scroll-driven landing pages (single scroll clock, layered degrade-to-calm motion, WebGL particle formations) plus pluggable visual style packs — instrument-console (dark console), editorial-luxury (warm editorial), workbench (light/dark product UI for dashboards and tools). Ships the sheleg-design skill, the architecture reference, style packs with ready-made token CSS, and the /sheleg-design command.",
+  "version": "0.6.0",
   "author": {
     "name": "ssheleg"
   },

package/plugins/sheleg-design/commands/sheleg-design.md

@@ -8,6 +8,8 @@ Invoke the `sheleg-design` skill and apply it to the current request.
 - Read the skill's SKILL.md, then its full reference `SHELEG_DESIGN.md`
   (same directory) before designing anything.
 - Task: $ARGUMENTS — if empty, ask what page or section to build/upgrade,
-  then proceed per the skill's "How to Apply" order.
+  then proceed per the skill's "How to Apply" order. If the arguments name
+  a style pack (instrument-console | editorial-luxury | workbench), use
+  that pack without re-asking; otherwise pick per the SKILL.md table.
 - Follow the skill's non-negotiables (Quick Reference table) and ship every
   layer's reduced-motion/fallback branch in the same commit.

package/plugins/sheleg-design/skills/sheleg-design/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: sheleg-design
-description: Use when building or upgrading a cinematic scroll-driven landing page, marketing site, or hero experience — a particle/WebGL background, scroll-linked animation, parallax, pinned or scrubbed sections, formation-morphing scenes — or when such a page feels busy or janky, or its motion layers drift out of sync. RU triggers - кинематографичный лендинг, скролл-анимация, лендинг с частицами. Pairs with an existing visual system, does not replace one.
+description: Use when building or upgrading a cinematic scroll-driven landing page, marketing site, or hero experience (particle/WebGL background, scroll-linked animation, parallax, scrubbed sections) — when such a page feels busy or janky or its motion layers drift out of sync — or when styling product UI with its style packs - dashboards, admin panels, internal/dev tools, design tokens, light/dark themes. RU triggers - кинематографичный лендинг, скролл-анимация, лендинг с частицами, стиль дашборда, дизайн-токены, светлая/тёмная тема.
 ---
 
 # SHELEG Design
@@ -24,8 +24,11 @@ the DOM↔WebGL bridge, the build recipe (§11), and the file map.
 - Scroll-linked charts, step flows, progress rails, parallax
 - Existing scroll site that feels nervous, janky, or out of phase
 
-**Not for:** docs, dashboards, static content sites — or any page whose visual
-system or copy isn't finished yet. Fix those first; motion amplifies weakness.
+**Not for (the motion layer):** docs, dashboards, static content sites — or
+any page whose visual system or copy isn't finished yet. For dashboards,
+tools, and product UI, use the [`workbench`](./styles/workbench.md) style
+pack standalone: its tokens and atoms apply without the cinematic motion
+layer.
 
 ## Core Pattern — five principles, in order
 
@@ -50,12 +53,16 @@ style pack in [`styles/`](./styles/):
 |---|---|---|
 | [`instrument-console`](./styles/instrument-console.md) | near-black aerospace console, one electric-blue signal, mono telemetry | technical / systems / infra products |
 | [`editorial-luxury`](./styles/editorial-luxury.md) | warm cream + espresso ink, sage accent, Fraunces/Newsreader, dossier motifs | editorial / research / premium B2B |
+| [`workbench`](./styles/workbench.md) | quiet light/dark product UI: neutral grays, borders as elevation, one blue accent, mono data | dashboards / admin / internal & dev tools (standalone — no cinematic motion) |
 
 Read the chosen pack in full before styling anything — it supplies the
 palette, type, texture, motion-token values, signature motifs, and bans.
-For a new style, author a new pack file with the same headings (Register /
-Palette / Type / Texture & surface / Motion tokens / Signature motifs /
-Micro-interactions / Bans); never invent token values ad hoc.
+Each pack ships a ready-made token layer in `styles/tokens/<pack>.css` —
+copy that file verbatim instead of transcribing tables. For a new style,
+author a new pack file with the same headings (Register / Palette / Type /
+Texture & surface / Motion tokens / Signature motifs / Micro-interactions /
+Bans; skeleton: `templates/style-pack-template.md` in the repo) plus its
+`tokens/<pack>.css`; never invent token values ad hoc.
 
 ## How to Apply
 

package/plugins/sheleg-design/skills/sheleg-design/styles/editorial-luxury.md

@@ -17,6 +17,9 @@ cinematic noise).
 
 ## Palette
 
+Ready-made token layer: [`tokens/editorial-luxury.css`](./tokens/editorial-luxury.css)
+— copy it verbatim instead of transcribing this table.
+
 | Token | Value | Role |
 |---|---|---|
 | `--paper` | `#fbf6ec` | primary cream field |
@@ -73,6 +76,20 @@ sage accent brightens to `#9fd9bc`.
   correct static final state under reduced-motion, **fail-open** if JS/CDN
   dies (content always visible).
 
+## Motion flavor
+
+How this pack rides the SHELEG motion layer (brand register only):
+
+- Reveals: 0.7s base with the pack ease; word-by-word title lighting and
+  `.reveal` sections; every reveal is fail-open (final state visible
+  without JS).
+- The sage "signal" motif is the scroll narrative: it travels raw inputs →
+  pipeline → deliverable; scrubbed instruments draw with it.
+- Particle field is optional here — if used, tint sage, low density, low
+  energy (≤0.6); artifact mock previews assembling on scroll are the
+  preferred spectacle.
+- Product register: SHELEG fast/base durations only, no cinematic motion.
+
 ## Micro-interactions
 
 - Buttons: tactile `translateY(-2px)` + spring; no glow.

package/plugins/sheleg-design/skills/sheleg-design/styles/instrument-console.md

@@ -14,6 +14,9 @@ does not.
 
 ## Palette
 
+Ready-made token layer: [`tokens/instrument-console.css`](./tokens/instrument-console.css)
+— copy it verbatim instead of transcribing this table.
+
 | Token | Value | Role |
 |---|---|---|
 | `--base` | `#05070a` | page field (near-black) |
@@ -65,6 +68,18 @@ The particle field, progress rail, and all instruments are tinted with
 - Scrubbed SVG instruments (charts, step flows) drawn hairline-thin with
   mono annotations.
 
+## Motion flavor
+
+How this pack rides the SHELEG motion layer:
+
+- Particle field: single-hue `--accent` tint; SCENES `energy` 0.45–0.7,
+  climax only reaching 1.0; formations lean geometric (frame, lattice,
+  orbit, constellation, glyph).
+- Reveal set: full act-themed range — Scatter (problem acts), Lock
+  (control/system acts), Clip (headlines/panels), Pulse (climax).
+- Instruments: hairline-thin scrubbed SVG with mono annotations; progress
+  rail and act badge are first-class chrome.
+
 ## Micro-interactions
 
 - Buttons: surface-step + accent fill on primary; press = 1 shade dimmer

package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/editorial-luxury.css

@@ -0,0 +1,53 @@
+/* SHELEG Design — Editorial Luxury token layer (origin: prowl.chat).
+   Copy verbatim; consume only var(--…) in components.
+   After any theme migration, sweep hardcoded hex/rgba literals. */
+:root {
+  --paper: #fbf6ec;
+  --paper-2: #f3ead9;
+  --paper-3: #ece0cb;
+  --espresso: #1b150e;
+  --espresso-2: #241c12;
+  --cream: #f4ecdc;
+  --ink: #241c14;
+  --ink-soft: #5b4f3d;
+  --ink-faint: #8a7c64;
+  --accent: #3f7d5f;
+  --accent-deep: #2f5e47;
+  --accent-dim: rgba(63, 125, 95, 0.12);
+  --accent-med: rgba(63, 125, 95, 0.34);
+  --accent-on-dark: #9fd9bc;
+  --terra: #b5623f;
+  --red: #a83a2b;
+  --hair: rgba(36, 28, 20, 0.13);
+  --hair-strong: rgba(36, 28, 20, 0.22);
+
+  --r: 14px;
+  --r-lg: 22px;
+  --r-xl: 30px;
+
+  --shadow-sm: 0 2px 10px -4px rgba(36, 28, 20, 0.16);
+  --shadow: 0 18px 50px -28px rgba(36, 28, 20, 0.3),
+    0 4px 14px -10px rgba(36, 28, 20, 0.18);
+  --shadow-lg: 0 36px 90px -44px rgba(36, 28, 20, 0.42),
+    0 8px 24px -16px rgba(36, 28, 20, 0.2);
+  --inset-hi: inset 0 1px 0 rgba(255, 251, 242, 0.7);
+
+  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --spring: cubic-bezier(0.32, 0.72, 0, 1);
+  --dur-brand: 0.7s;
+  --dur-fast: 0.18s;
+  --dur-base: 0.32s;
+  --dur-slow: 0.55s;
+  --dur-epic: 0.8s;
+  --stagger: 0.07s;
+
+  --font-display: "Fraunces", Georgia, serif;
+  --font-body: "Newsreader", Georgia, serif;
+  --font-data: "JetBrains Mono", ui-monospace, monospace;
+
+  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+
+  background-color: var(--paper);
+  color: var(--ink);
+  color-scheme: light;
+}

package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/instrument-console.css

@@ -0,0 +1,43 @@
+/* SHELEG Design — Instrument Console token layer.
+   Copy verbatim; consume only var(--…) in components. */
+:root {
+  --base: #05070a;
+  --surface-1: #0a0e14;
+  --surface-2: #10151d;
+  --surface-3: #161c26;
+  --hairline: #1e2630;
+  --hairline-strong: #2b3542;
+  --ink: #eef2f7;
+  --ink-muted: #9aa7b6;
+  --ink-faint: #5f6b7a;
+  --accent: #3392ff;
+  --accent-dim: #1f5fb0;
+  --accent-bright: #6bb3ff;
+  --accent-glow: rgba(51, 146, 255, 0.18);
+  --ok: #46d39a;
+  --warn: #e0a030;
+
+  --r-sm: 4px;
+  --r-md: 8px;
+  --r-lg: 14px;
+  --r-pill: 999px;
+
+  --signal-glow: 0 0 0 1px rgba(51, 146, 255, 0.4),
+    0 8px 30px rgba(51, 146, 255, 0.18);
+
+  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
+  --dur-fast: 0.18s;
+  --dur-base: 0.32s;
+  --dur-slow: 0.55s;
+  --dur-epic: 0.8s;
+  --stagger: 0.07s;
+
+  --section: clamp(9rem, 24vh, 20rem);
+
+  --font-ui: var(--font-geist-sans, "Geist"), system-ui, sans-serif;
+  --font-data: var(--font-geist-mono, "Geist Mono"), ui-monospace, monospace;
+
+  background-color: var(--base);
+  color: var(--ink);
+  color-scheme: dark;
+}

package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/workbench.css

@@ -0,0 +1,58 @@
+/* SHELEG Design — Workbench token layer (light default + dark twin).
+   Copy verbatim; consume only var(--…) in components.
+   Theme switch: set data-theme="dark" on :root. */
+:root {
+  --bg: #f7f8fa;
+  --panel: #ffffff;
+  --panel-2: #f7f8fa;
+  --ink: #1a1f2b;
+  --muted: #5b6472;
+  --border: #e6e9ef;
+  --border-strong: #d7dce4;
+  --accent: #2f6feb;
+  --accent-weak: #eaf0fe;
+  --ok: #1a7f37;
+  --ok-weak: #e6f4ea;
+  --warn: #9a6700;
+  --warn-weak: #fff3d6;
+  --danger: #d1242f;
+  --danger-weak: #fde8e9;
+  --info: #2f6feb;
+  --info-weak: #eaf0fe;
+
+  --r-control: 6px;
+  --r-card: 10px;
+  --r-pill: 999px;
+
+  --shadow-1: 0 4px 16px -8px rgba(26, 31, 43, 0.18); /* overlays only */
+
+  --dur-state: 0.18s; /* meaningful state transitions, ease-out */
+  --dur-hover: 0.12s; /* background/border/color only */
+
+  --font-ui: -apple-system, "SF Pro", "Segoe UI", sans-serif;
+  --font-data: ui-monospace, "SF Mono", Menlo, monospace;
+
+  background-color: var(--bg);
+  color: var(--ink);
+  color-scheme: light dark;
+}
+
+:root[data-theme="dark"] {
+  --bg: #0f1218;
+  --panel: #161b24;
+  --panel-2: #1b212c;
+  --ink: #e8ecf3;
+  --muted: #8a93a6;
+  --border: #232a36;
+  --border-strong: #2c3441;
+  --accent: #4b8bff;
+  --accent-weak: #1b2740;
+  --ok: #3fb960;
+  --ok-weak: #12281a;
+  --warn: #d9a93f;
+  --warn-weak: #2b2210;
+  --danger: #e5534b;
+  --danger-weak: #2d1517;
+  --info: #4b8bff;
+  --info-weak: #1b2740;
+}

package/plugins/sheleg-design/skills/sheleg-design/styles/workbench.md

@@ -0,0 +1,122 @@
+# Style pack — Workbench
+
+Origin: the Builder Pro AI production design system (light+dark token
+layer) blended with GitHub-style border discipline and quiet stat-tile
+surfaces. A calm, dense, utilitarian product UI: neutral grays, borders as
+elevation, one functional blue accent, mono for data. Design serves the
+product — never performs.
+
+## Register
+
+Choose this pack for **product surfaces**: dashboards, admin panels,
+internal tools, dev tools, analytics, settings. This is the one pack meant
+to be used **standalone** — the SHELEG cinematic motion layer is out of
+scope here; motion is limited to meaningful 150–200ms state transitions.
+Light is the default register; dark is a first-class twin, both from the
+same tokens.
+
+## Palette
+
+Ready-made token layer: [`tokens/workbench.css`](./tokens/workbench.css)
+(light `:root` + `data-theme="dark"` twin) — copy it verbatim instead of
+transcribing this table.
+
+| Token | Light | Dark | Role |
+|---|---|---|---|
+| `--bg` | `#f7f8fa` | `#0f1218` | app ground |
+| `--panel` | `#ffffff` | `#161b24` | cards, bars, dialogs, inputs |
+| `--panel-2` | `#f7f8fa` | `#1b212c` | inset / table headers / quiet stat tiles |
+| `--ink` | `#1a1f2b` | `#e8ecf3` | primary text |
+| `--muted` | `#5b6472` | `#8a93a6` | secondary text, labels, metadata |
+| `--border` / `-strong` | `#e6e9ef` / `#d7dce4` | `#232a36` / `#2c3441` | 1px lines / stronger edges |
+| `--accent` (`-weak`) | `#2f6feb` (`#eaf0fe`) | `#4b8bff` (`#1b2740`) | THE one accent + its tint |
+| `--ok` | `#1a7f37`-family green | brightened | done / healthy / success |
+| `--warn` | amber | brightened | needs a human / waiting (reserved) |
+| `--danger` | red | brightened | failed / error / incident |
+| `--info` | blue | brightened | running / working |
+
+Semantic colors are STATE ONLY, never decoration; each has a `-weak` tint
+for badge/banner fills. Amber is reserved for "a human is needed". A second
+accent hue is a design defect. Sequential data scales (heatmaps, charts)
+are tints of `--accent`, not a new hue.
+
+## Type
+
+- UI face: system stack (`-apple-system, "SF Pro", "Segoe UI", sans-serif`)
+  — zero load cost. Weights 400 body / 600 emphasis / 700 headings only.
+- Data face: `ui-monospace / SF Mono` for ALL data — ids, metrics,
+  timestamps, counters, chips, logs; `font-variant-numeric: tabular-nums`
+  wherever digits align.
+- Compact scale: 11px chips/meta · 12px labels (uppercase, tracked .1em) ·
+  13px body/dense UI · 15px card titles · 20px sections · 28px page title.
+- Running text ≤65ch; headings `text-wrap: balance`.
+
+## Texture & surface
+
+- **Elevation = border, not shadow**: layers separate via 1px `--border` +
+  `--panel`/`--panel-2` steps. One soft shadow token exists, for true
+  overlays (dialogs, popovers, menus) only.
+- Radii: 6px controls · 8–10px cards · 999px chips/pills. Nothing else.
+- 4px base grid; spacing steps 4/8/12/16/24/32; chips 2×8, dense rows
+  8×12, cards 12–16. Compact by default.
+- Stat tiles: label 12px `--muted` + value 20–28px semibold tabular-nums
+  on a quiet `--panel-2` fill or 1px-border card — no gradients, no fills
+  with meaning-free color.
+- No decorative containers, no icon noise: if an element doesn't inform
+  or act, it doesn't exist.
+
+## Motion tokens
+
+- 150–200ms, ease-out, and only where it carries meaning (state
+  transition, attention pull); nothing looping, nothing scroll-driven.
+- Hover/press transitions 120ms on background/border/color only — no
+  translate/bounce on controls.
+- `prefers-reduced-motion` → transitions off; the UI is fully static-safe.
+
+## Signature motifs
+
+- **Glanceability**: every surface answers its question in one glance —
+  state → status dot/chip, trend → axis-less sparkline, change → one
+  delta line («+4 done · fix deployed»). Detail is one drill-down away.
+- **Honest state**: no fake "connected", no optimistic spinners; degraded
+  renders visibly degraded (dimmed pane, banner, chip).
+- Canonical atoms, built once: status dot (7–8px), mono chip (11px, 1px
+  border, radius 999), card (panel + border + title row + right chip),
+  progress bar (4–5px, border track, accent fill), segmented pill
+  controls, empty state = one dim sentence + one action (no
+  illustrations).
+- Data tables: 32–36px rows, `--panel-2` sticky header, hairline row
+  dividers, right-aligned numeric columns.
+
+## Micro-interactions
+
+- Hover on rows/nav: `--panel-2` fill; selected/active: `--accent-weak`
+  fill + 2px accent inset indicator.
+- Buttons: primary = accent fill (max one per view); secondary =
+  1px-border ghost; destructive = red-border ghost + confirm. Toggles,
+  not checkboxes, for enable/disable.
+- Focus-visible on everything: 2px accent outline, offset 2px; contrast
+  ≥ WCAG AA on both themes.
+- Keyboard-first: every primary action reachable via keyboard; ⌘K
+  palette as the front door where the product has one.
+
+## Bans
+
+- No gradients, no shadows-as-decoration, no glassmorphism, no
+  illustrations/mascots, no icon noise, no emojis in product UI.
+- No second accent hue; no semantic color used decoratively; no amber
+  outside "needs a human".
+- No display/serif fonts — this is a workbench, not a brand page.
+- No spinners where live state exists; no badge without an action.
+- No cinematic/scroll-driven motion — that belongs to the other packs'
+  register.
+
+## Gotchas
+
+- Ship light AND dark from day one via the token layer — retrofitting a
+  theme later leaves inverted hardcodes (sweep raw hex; consume only
+  `var(--…)`).
+- Guard contrast with a test: muted-on-panel-2 combinations silently
+  fail AA when tokens drift.
+- One shared Chip/Badge/Button primitive — three inline copies of an
+  atom is how a token layer rots.