sheleg-design-skill 0.3.0 → 0.6.0

package/README.md

@@ -84,11 +84,19 @@ 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), `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,
 scroll-driven, particle-backed page.
 
+## Style-agnostic motion, pluggable identity
+
+The motion methodology (one clock, layered responses, degrade-to-calm) is
+independent of the visual style. The look comes from a **style pack** the
+agent picks per project — dark instrument console or warm editorial luxury
+out of the box, or a new pack authored against the same contract.
+
 ## Stack-agnostic
 
 The skill teaches **principles and architecture**, not a fixed dependency set.
@@ -109,19 +117,6 @@ test on every push and PR. Versioning is semver; bump `marketplace.json` +
 `plugin.json` + `package.json` + `CHANGELOG.md` together — the validator
 enforces the sync.
 
-## По-русски (коротко)
-
-SHELEG Design — методология кинематографичных скролл-лендингов: один
-scroll-«клок» питает много дешёвых независимых слоёв (WebGL-частицы,
-2D-фоллбек, параллакс, scrub-инструменты, прогресс-рейл), каждый деградирует
-до спокойной статики. Ничего не кроссфейдится — формации «передислоцируются».
-Установка: `npx sheleg-design-skill` (авто-детект `.cursor`/`.claude`), либо
-плагин Claude Code — `/plugin marketplace add ssheleg/sheleg-design-skill`,
-затем `/plugin install sheleg-design@sheleg-design-skill` (даст команду
-`/sheleg-design`). Агент получает SKILL.md (принципы и порядок работы) и
-SHELEG_DESIGN.md (полный референс: архитектура, точная математика морфа,
-DOM↔WebGL-мост, рецепт сборки с нуля).
-
 ## License
 
 MIT © ssheleg

package/bin/cli.js

@@ -23,7 +23,22 @@ const SKILL_DIR = path.join(
   "sheleg-design",
 );
 const SKILL_SLUG = "sheleg-design";
-const FILES = ["SKILL.md", "SHELEG_DESIGN.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"));
 
@@ -86,6 +101,7 @@ ${c("bold", "Default")}
 ${c("bold", "What it installs")}
   SKILL.md           the agent-facing skill (discovery + principles)
   SHELEG_DESIGN.md   the full reference (architecture, recipes, why it works)
+  styles/*.md        style packs (instrument-console, editorial-luxury)
 `);
 }
 
@@ -119,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.`),
@@ -128,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) {
@@ -141,15 +158,18 @@ function main() {
   }
 
   fs.mkdirSync(targetDir, { recursive: true });
-  for (const f of FILES) {
-    fs.copyFileSync(path.join(SKILL_DIR, f), path.join(targetDir, f));
+  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);
   }
 
   const rel = path.relative(cwd, targetDir) || ".";
   console.log(
     `\n${c("green", "✓")} ${c("bold", "SHELEG Design")} installed to ${c("blue", rel + "/")}\n` +
       `  ${c("dim", "SKILL.md")}          the agent skill\n` +
-      `  ${c("dim", "SHELEG_DESIGN.md")}  the full reference\n\n` +
+      `  ${c("dim", "SHELEG_DESIGN.md")}  the full reference\n` +
+      `  ${c("dim", "styles/")}           style packs (console / editorial)\n\n` +
       `Your Cursor / Claude agent can now discover the skill and build\n` +
       `cinematic, scroll-driven, particle-backed pages on its principles.\n\n` +
       `${c("dim", "Docs: " + pkg.homepage)}\n`,

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
 ---
 
@@ -8,8 +8,12 @@ alwaysApply: false
 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` and `SHELEG_DESIGN.md`
-first; otherwise follow the contract below (self-contained on purpose).
+(`.cursor/skills/sheleg-design/`), read its `SKILL.md`, `SHELEG_DESIGN.md`,
+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.3.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.3.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
 
@@ -41,9 +44,30 @@ system or copy isn't finished yet. Fix those first; motion amplifies weakness.
 5. **Degrade to calm.** Reduced-motion / coarse pointer / no-WebGL collapse to
    a static, fully-legible page. The effect is a bonus, never a dependency.
 
+## Style packs
+
+The motion methodology is style-agnostic; the visual identity comes from a
+style pack in [`styles/`](./styles/):
+
+| Pack | Look | Choose for |
+|---|---|---|
+| [`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.
+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
 
-1. Visual system first (color, type, spacing, components).
+1. Visual system first: pick (or author) a style pack, apply its tokens as
+   the site-wide design tokens (color, type, spacing, components).
 2. Build bottom-up in the §11 layer order: scroll clock → smooth scroll →
    particle field → 2D fallback → DOM choreography → reveals → scrubbed
    instruments → optional DOM↔WebGL bridge. One small file per layer.

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

@@ -0,0 +1,116 @@
+# Style pack — Editorial Luxury
+
+Origin: prowl.chat (production). Warm cream field, espresso ink, one
+functional sage-green accent, terracotta as a rare editorial highlight,
+classified-red reserved for negatives only. "Design *is* the product" on
+public pages; quiet and fast inside the app. Dossier/editorial DNA:
+hairline rules, eyebrow labels, stamp/seal motifs, mono data, authored
+artifact previews instead of icon cards.
+
+## Register
+
+Choose this pack for warm, editorial, print-inspired products: research /
+intelligence tools, content products, premium B2B. Two registers:
+**brand** (landing, use-case, legal, shared pages — cinematic, editorial)
+and **product** (authenticated app — quiet micro-interactions only, never
+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 |
+| `--paper-2` | `#f3ead9` | raised card on cream |
+| `--paper-3` | `#ece0cb` | deeper inset |
+| `--espresso` | `#1b150e` | dark section field |
+| `--espresso-2` | `#241c12` | raised card on espresso |
+| `--cream` | `#f4ecdc` | ink on espresso |
+| `--ink` / `-soft` / `-faint` | `#241c14` / `#5b4f3d` / `#8a7c64` | text ramp on cream |
+| `--accent` (sage) / `-deep` | `#3f7d5f` / `#2f5e47` | THE single functional accent (links, CTA, "signal") |
+| `--terra` | `#b5623f` | rare editorial highlight only |
+| `--red` | `#a83a2b` | negatives ONLY (comparison "without") |
+| `--hair` / `-strong` | `rgba(36,28,20,0.13)` / `rgba(36,28,20,0.22)` | hairline rules |
+
+Contrast: body on cream must clear 4.5:1 — `--ink` / `--ink-soft`, never
+`--ink-faint` for sustained reading. On espresso, text is `--cream` and the
+sage accent brightens to `#9fd9bc`.
+
+## Type
+
+- Display: **Fraunces** — oversized, optical, tracked `-0.02…-0.03em`, hero
+  ceiling ~7rem via clamp.
+- Body: **Newsreader** — relaxed, measure ≤66ch.
+- Mono: **JetBrains Mono** — eyebrows, labels, numbers, code, "signal" tags.
+- Three families, no more; hierarchy through scale + weight.
+
+## Texture & surface
+
+- Fixed warm radial field + ~4% film-grain multiply overlay (cheap, no blur).
+- Squircle radii 14 / 22 / 30px; double-bezel cards
+  (`inset 0 1px 0 rgba(255,251,242,0.7)` highlight).
+- Soft ambient elevation only (`0 18px 50px -28px rgba(36,28,20,0.30)`
+  scale); no harsh dark drops, no outer glows on buttons.
+
+## Motion tokens
+
+- Ease `cubic-bezier(0.22, 1, 0.36, 1)` (ease-out-expo feel) — the one
+  site-wide curve for the SHELEG token set.
+- Spring `cubic-bezier(0.32, 0.72, 0, 1)` — press/magnetic feedback only.
+- Base duration `0.7s` for brand-register reveals; product register stays in
+  the SHELEG fast/base range (≤0.32s).
+
+## Signature motifs
+
+- A recurring sage **"signal"** motif travels the narrative: raw inputs →
+  pipeline → synthesized deliverable. One story, one color.
+- **Authored artifact previews** instead of flat icon cards: composed mock
+  report/infographic/PDF/PPTX/video frames that assemble on scroll.
+- Dossier primitives: `.dossier-card`, hairline `.rule`, `.eyebrow`,
+  `.stamp`, `.data-table`, tabular-nums data, footnote captions.
+- Visualization rule (key contract): all data-viz animation is **CSS-driven
+  off a `.revealed` ancestor** (bars `scaleX/Y`, sparklines/donuts via
+  `stroke-dashoffset`) — identical in plain and cinematic reveal paths,
+  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.
+- Magnetic primary CTAs and a small sage cursor-ring accent — desktop +
+  fine pointer only, gated with the SHELEG degrade rules.
+- Focus-visible: 2px sage outline, offset 3px (brightened on espresso).
+- Cards lift + border warms on hover; never nested-card-in-card.
+
+## Bans
+
+- No gradient text, no side-stripe accent borders, no glassmorphism, no
+  neon/outer-glow shadows, no purple.
+- No emojis in product UI; no Inter/system display fonts (Fraunces owns
+  display).
+- Never flatten the cream identity into generic white; never let motion
+  gate content visibility.
+
+## Gotchas
+
+- Token-first re-skin: override the token layer in `:root`, map legacy
+  token names onto it — do NOT restyle components one by one.
+- After any theme/token migration, **sweep hardcoded literals** (hex/rgba
+  left in CSS/JS keep the old palette and read as inverted on the new
+  theme).

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

@@ -0,0 +1,104 @@
+# Style pack — Instrument Console
+
+Origin: Nicegram Business OS landing (the SHELEG reference implementation).
+A near-black aerospace console: deep layered surfaces, hairline seams, one
+electric-blue signal accent, mono telemetry labels. The particle field and
+every instrument read as one precision device responding to the hand.
+
+## Register
+
+Choose this pack for technical, systems, infra, or "operating system"
+products where the aesthetic is calm precision hardware. Single dark
+register across landing and app; brightness (energy) varies per scene, hue
+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) |
+| `--surface-1/2/3` | `#0a0e14` / `#10151d` / `#161c26` | ascending raised panels |
+| `--hairline` / `-strong` | `#1e2630` / `#2b3542` | panel seams, rules |
+| `--ink` | `#eef2f7` | primary text |
+| `--ink-muted` / `-faint` | `#9aa7b6` / `#5f6b7a` | secondary / captions |
+| `--accent` | `#3392ff` | THE electric-blue signal (CTA, links, particles) |
+| `--accent-dim` / `-bright` | `#1f5fb0` / `#6bb3ff` | pressed / highlighted signal |
+| `--accent-glow` | `rgba(51,146,255,0.18)` | the only permitted glow |
+| `--ok` / `--warn` | `#46d39a` / `#e0a030` | status semantics only |
+
+The particle field, progress rail, and all instruments are tinted with
+`--accent` only — energy per scene changes brightness, never hue.
+
+## Type
+
+- Display + body: **Geist Sans** (or an equivalent neutral grotesk) —
+  weight 600 headlines, clamp-scaled (hero ~5.25rem ceiling), tight but
+  not tracked-negative.
+- Data: **Geist Mono** (or ui-monospace) — telemetry eyebrows, numeric
+  readouts, section indices ("02 / CONTROL"), code.
+- Two families; mono is a signature, not a garnish — every label that
+  narrates system state is mono.
+
+## Texture & surface
+
+- Flat panels separated by 1px hairlines; radii 4 / 8 / 14px (+ pill) —
+  machined, not squircle.
+- Elevation via surface steps (`--surface-1..3`), not shadows; the single
+  glow `0 0 0 1px rgba(51,146,255,0.4), 0 8px 30px rgba(51,146,255,0.18)`
+  is reserved for the active signal element.
+- No grain, no blur; darkness itself is the texture.
+
+## Motion tokens
+
+- Ease `cubic-bezier(0.16, 1, 0.3, 1)` — the one site-wide curve
+  (the SHELEG default token set: 0.18 / 0.32 / 0.55 / 0.8s, stagger 0.07).
+- Section rhythm `clamp(9rem, 24vh, 20rem)` vertical padding.
+
+## Signature motifs
+
+- WebGL particle formations as the narrative backdrop (SCENES registry),
+  electric-blue, hold-then-redeploy per the SHELEG core.
+- Right-edge progress rail with act markers; nav act badge ("02 /
+  CONTROL") driven by the coarse store subscription.
+- Frame/HUD chrome: thin viewport frame, corner ticks, scan/dim of
+  off-band sections (attention spotlight).
+- 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
+  (`--accent-dim`), no bounce.
+- Reveal primitives themed per act: Scatter (drift+blur resolve), Lock
+  (snap into slot), Clip (mechanical wipe), Pulse (lock acquired).
+- Focus-visible: 1px `--accent` ring + `--accent-glow` halo.
+
+## Bans
+
+- One accent hue — no second color except `--ok`/`--warn` status semantics.
+- No gradient text, no glassmorphism/backdrop blur, no purple/neon
+  rainbow, no colored shadows besides `--accent-glow`.
+- No light sections — contrast comes from surface steps, not inversion.
+- No decorative serif/display fonts; the console voice is grotesk + mono.
+
+## Gotchas
+
+- Glow discipline: `--accent-glow` on more than one element per viewport
+  destroys the "single signal" read — the page becomes a christmas tree.
+- Dark UIs hide low-contrast text: `--ink-faint` is for captions only,
+  never sustained reading (fails 4.5:1 on `--surface-1`).

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.