sheleg-design-skill 1.2.0 → 1.3.2

package/CHANGELOG.md

@@ -4,6 +4,59 @@ All notable changes to this project are documented in this file. The format
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.2] - 2026-07-30
+
+### Changed
+
+- **The licence is declared in both manifests** — SPDX `license: MIT` in the
+  `marketplace.json` plugin entry and in the skill's front matter (mirrored into
+  the `.cursor` copy, which the validator holds byte-identical). The `LICENSE`
+  file was always present and visible on neither surface a user actually reads.
+
+## [1.3.1] - 2026-07-30
+
+### Changed
+
+- **README** — the family list gained `agent-sync`, and the install block now
+  carries all three family commands (`install`, `update`, `list`) with the
+  restart note; skills and hooks load at session start, so the session that
+  updates is not the session that gets the new ones. The registry copy of the
+  README is what most people read, and it only moves on a release.
+- `CONTRIBUTING.md` — how to run `test/validate.py` and what a PR is checked
+  against.
+
+## [1.3.0] - 2026-07-29
+
+### Added
+
+- **Fourth style pack: `briefing-room`** — a register the skill had no answer
+  for. Decks are among the most-requested things people ask an agent to build,
+  and the default output is bullet lists on a gradient. Extracted from a
+  production investor-deck site (2026) by reading its live token layer; the
+  source is **anonymized at the owner's request**, so the `Origin:` line says
+  what it is without naming it — the values are still extracted rather than
+  invented, which is the point of the rule.
+
+  What it encodes: a fixed **1280×720 canvas with `overflow: hidden`** (content
+  that does not fit becomes a second slide — never a smaller type ramp); the
+  first **OKLCH** token layer in the skill, where every neutral is the accent
+  hue `254` starved of chroma, so the palette cannot drift into two designs;
+  Inter at tight optical tracking against JetBrains Mono furniture at `+0.14em`
+  to `+0.18em`; a two-part veil that protects text over artwork **without**
+  fading the artwork; 1-bit dithered art as the only imagery; mono numbered
+  section headers; **the slide title is a claim, not a label**; one bespoke
+  diagram per slide instead of bullets; exactly one highlighted phrase per
+  deck; and every number carrying its source.
+
+  Its motion position is a deliberate inversion of the rest of the skill:
+  **slides never animate**, because the presenter's voice is the timeline.
+  `prefers-reduced-motion` is a no-op by construction rather than by neglect.
+
+  Two honest notes carried as Gotchas: a fixed canvas fails *silently* (clipped
+  content is invisible in review and obvious in the room), and the reference
+  shipped no print or reduced-motion branch — the pack requires both.
+- `scenarios.md` gains T10 for the deck register. Gate: 194 → 220 checks.
+
 ## [1.2.0] - 2026-07-29
 
 Worked through Figma's *State of the Designer 2026* (NewtonX, 906 digital

package/README.md

@@ -34,15 +34,18 @@ and collectively cinematic. One scroll "clock" feeds a WebGL particle field, a
 rail — each an independent, degrade-to-calm layer. Nothing crossfades; things
 *redeploy*.
 
-**Style packs** — the visual identity, pluggable per project. The `workbench`
-pack is meant to be used **standalone**, with none of the motion layer: quiet
-light/dark product UI for dashboards, admin panels, internal and dev tools.
+**Style packs** — the visual identity, pluggable per project. Two of them are
+meant to be used **standalone**, with none of the motion layer: `workbench`
+(quiet light/dark product UI for dashboards, admin panels, internal and dev
+tools) and `briefing-room` (a dark 16:9 presentation deck, where the presenter's
+voice is the timeline and slides therefore never animate).
 
 | Pack | Look | Choose for |
 |---|---|---|
 | `instrument-console` | near-black aerospace console, one electric-blue signal, mono telemetry | technical / systems / infra |
 | `editorial-luxury` | warm cream + espresso ink, sage accent, Fraunces/Newsreader, dossier motifs | editorial / research / premium B2B |
 | `workbench` | neutral grays, borders as elevation, one blue accent, mono data, light + dark twins | dashboards, admin, internal & dev tools |
+| `briefing-room` | dark 16:9 deck: one blue hue top to bottom (OKLCH), mono slide furniture, 1-bit dithered art, claims as titles | investor & board decks, technical briefings, talks published as a page |
 
 Each pack locks palette, type, texture, motion tokens, signature motifs and
 bans — and ships a `tokens/<pack>.css` to copy verbatim, so the agent never
@@ -212,13 +215,19 @@ Built by ssheleg — [sshlg.me](https://sshlg.me)
 - Telegram — [@sshlg](https://t.me/sshlg)
 
 Part of the [ssheleg skill family](https://github.com/ssheleg/sshlg-skills):
-`super-ux`, `task-pipeline`, `make-skill`, `sheleg-design`, `seo-aeo-audit`.
-One command installs all five for every agent you use:
+`super-ux`, `task-pipeline`, `agent-sync`, `make-skill`, `sheleg-design`, `seo-aeo-audit`.
+**The family installs and updates as one package**, for every agent you use — a bundle with one
+member current and the rest stale is a combination nobody tested:
 
 ```bash
-npx sshlg-skills install
+npx sshlg-skills install              # nothing installed yet — the whole family, any agent
+npx sshlg-skills update               # installed but behind — updates everything
+npx --yes sshlg-skills@latest list    # what the current release of each member is
 ```
 
+Restart your agent afterwards: skills and hooks load at session start, so the session that
+updates is not the session that gets the new ones.
+
 ## License
 
 MIT © ssheleg

package/bin/cli.js

@@ -115,10 +115,11 @@ ${c("bold", "What it installs")}
   SHELEG_DESIGN.md     the full reference (architecture, recipes, why it works)
   FIGMA_BRIDGE.md      the design↔code contract (tokens ⇄ Figma variables)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              three style packs — instrument-console (dark console),
+  styles/              four style packs — instrument-console (dark console),
                        editorial-luxury (warm editorial), workbench (light/dark
-                       product UI, standalone) — plus a ready-made token CSS
-                       per pack and STYLE_PACK_TEMPLATE.md for authoring more
+                       product UI), briefing-room (dark 16:9 presentation deck)
+                       — plus a ready-made token CSS per pack and
+                       STYLE_PACK_TEMPLATE.md for authoring more
 `);
 }
 
@@ -191,7 +192,7 @@ function main() {
     `\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` +
-      `  ${c("dim", "styles/")}           style packs + token CSS (instrument-console / editorial-luxury / workbench)\n\n` +
+      `  ${c("dim", "styles/")}           style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room)\n\n` +
       `Your Cursor / Claude agent can now discover the skill and build\n` +
       `cinematic, scroll-driven pages — or style product UI (dashboards,\n` +
       `admin, internal tools) from the workbench pack — on its principles.\n\n` +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.2.0",
+  "version": "1.3.2",
   "description": "Design taste as an installable agent skill. Cinematic scroll-driven landing pages built on one scroll clock and layered degrade-to-calm motion, plus three locked style packs with ready-made design tokens — instrument-console (dark), editorial-luxury (warm), workbench (light/dark product UI for dashboards, admin and dev tools). Works with Cursor, Claude Code and any agent that reads a SKILL.md.",
   "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: 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": "1.2.0",
+  "version": "1.3.2",
   "author": {
     "name": "ssheleg"
   },

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

@@ -1,6 +1,7 @@
 ---
 name: sheleg-design
 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 - or when carrying a visual system across the Figma border (publishing tokens as variables, implementing a design without importing raw values). Triggers - "cinematic landing" / "кинематографичный лендинг", "scroll animation" / "скролл-анимация", "particle landing" / "лендинг с частицами", "dashboard style" / "стиль дашборда", "design tokens" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables" / "переменные фигмы", "figma to code" / "фигма в код", "chat/agent UI" / "интерфейс чата или агента", "streaming output" / "стриминг ответа".
+license: MIT
 ---
 
 # SHELEG Design
@@ -62,6 +63,7 @@ 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) |
+| [`briefing-room`](./styles/briefing-room.md) | dark presentation deck on a fixed 16:9 canvas: one blue hue top to bottom (OKLCH), mono slide furniture, 1-bit dithered art | investor & board decks, technical briefings, talks published as a page (standalone — slides never animate) |
 
 Read the chosen pack in full before styling anything — it supplies the
 palette, type, texture, motion-token values, signature motifs, and bans.

package/plugins/sheleg-design/skills/sheleg-design/styles/briefing-room.md

@@ -0,0 +1,156 @@
+# Style pack — Briefing Room
+
+Origin: a production investor-deck site (2026); every value below was read off
+its live token layer, not eyeballed. The source is **anonymized at the owner's
+request** — the values are extracted from a real system, the name simply isn't
+public. Near-black field tinted with a single blue hue, one electric accent,
+mono slide furniture, 1-bit dithered artwork. It reads like a technical
+briefing: the room is dark, one thing is lit.
+
+## Register
+
+Choose this pack for **presentations rendered as a product**: investor and
+board decks, technical briefings, launch memos, architecture walkthroughs,
+conference talks published as a page. Used **standalone** — the SHELEG
+cinematic motion layer does not apply, because a deck is *read at the
+presenter's pace*, not scrolled. Single dark register; the accent carries all
+emphasis.
+
+The defining constraint is the canvas: a fixed **1280×720 (16:9) frame with
+`overflow: hidden`**, not a flowing page. Everything below follows from that —
+if content cannot fit the frame, the answer is a second slide, never a smaller
+type ramp.
+
+## Palette
+
+Ready-made token layer: [`tokens/briefing-room.css`](./tokens/briefing-room.css)
+— copy it verbatim instead of transcribing this table.
+
+| Token | Value | Role |
+|---|---|---|
+| `--bg` | `oklch(0.045 0.008 254)` | the room (near-black, blue-tinted) |
+| `--panel` / `-2` | `oklch(0.145 0.008 254)` / `oklch(0.178 0.008 254)` | card / raised card |
+| `--line` / `-2` | `oklch(0.231 0.006 254)` / `oklch(0.269 0.006 254)` | hairline / stronger edge |
+| `--ink` | `oklch(0.985 0.004 254)` | display and primary text |
+| `--ink-2` / `-3` / `-dim` | `oklch(0.80 …)` / `oklch(0.62 …)` / `oklch(0.56 0.006 254)` | body / muted / furniture |
+| `--accent` | `oklch(0.643 0.195 254)` | THE signal — one per slide |
+| `--accent-soft` / `-line` | `accent / 0.18` / `accent / 0.45` | chip fill / chip border |
+| `--accent-ink` | `= --bg` | text **on** the accent (never white) |
+| `--good` (`-soft`) | `oklch(0.824 0.151 148)` (`/0.30`) | the one positive semantic |
+
+Two things make this palette cohere, and both are easy to lose:
+
+- **One hue, top to bottom.** Every neutral carries hue `254` at chroma
+  0.004–0.008. They are not gray — they are the accent, starved of chroma. Swap
+  in true neutrals and the deck immediately looks like two designs.
+- **OKLCH, not hex.** Lightness is perceptual, so a ramp built by moving `L`
+  alone stays even; tints are the same color with an alpha, never a new swatch.
+  Ship a hex fallback layer only if you must support pre-2023 browsers.
+
+Contrast: `--ink-dim` is for slide furniture (numbers, footers) at ≥10.5px mono
+only — never body copy.
+
+## Type
+
+- Display + body: **Inter** — weight 600 for display, 500 for slide titles,
+  400 body. Tight optical tracking: `-0.04em` at display, `-0.03em` at title,
+  `-0.005em` at body.
+- Furniture: **JetBrains Mono** at 10.5–13px, uppercase, tracked **`+0.14em`
+  to `+0.18em`** — section headers, footers, source lines, chip labels. The
+  wide tracking is doing the work here; mono at normal tracking reads as code,
+  not as instrumentation.
+- Scale (fixed canvas, so fixed px): `128 / 96 / 64 / 36 / 24 / 17 / 14 / 13 /
+  10.5`. Line height `1.02` display, `1.05` head, `1.5` lede, `1.55` body.
+- `text-wrap: balance` on every display and title — on a fixed canvas a
+  one-word orphan is a visible defect, not a nuance.
+
+## Texture & surface
+
+- Elevation is **surface step + hairline**, never a glow. One card shadow
+  exists (`0 28px 70px -28px rgba(0,0,0,0.85)`) and it is for lifted cards on
+  the dark field; a second, tighter one for popovers.
+- Radii `4 / 6 / 12 / 18 / 24 / 999`. Chips and pills take 999; cards take
+  12–18; the frame itself is square.
+- 4px spacing grid **with deliberate half-steps** (18, 22, 36) — dense
+  information layouts need the in-between values, and inventing them per slide
+  is how a deck loses its rhythm.
+- **Artwork is 1-bit dithered/halftone, never a photo or a 3D render.** A
+  single large dithered form per cover, in the accent, sitting under the text.
+- Text over artwork is protected by a **two-part veil**: a directional
+  `linear-gradient(95deg, …)` from 0.85 to near-transparent, plus a radial
+  darkening in the corner where the text sits. Never lower the artwork's
+  opacity to fix legibility — veil the art, keep the art crisp.
+- One radial accent glow per slide at most: `radial-gradient(58% 46% at 50%
+  26%, var(--accent-soft), transparent 70%)`.
+
+## Motion tokens
+
+- Durations `0.15s` / `0.2s`; ease `cubic-bezier(0.22, 1, 0.36, 1)`. That is
+  the whole set — this pack overrides the SHELEG default ease, same as
+  `editorial-luxury`.
+- **Slides do not animate.** No transitions between slides, no build-in
+  sequences, no scroll-linked anything: the presenter's voice is the timeline,
+  and motion competes with it. Transitions exist only on interactive
+  affordances (links, focus).
+- `prefers-reduced-motion` is a no-op here by construction — which is the
+  correct end state, not an excuse to skip the branch.
+
+## Signature motifs
+
+- **The slide frame as furniture:** mono uppercase header (`[04] MARKET · WHY
+  NOW`), body, mono footer. Numbered sections make a 40-minute deck navigable
+  by voice ("go back to four").
+- **The title is a claim, not a label.** Every slide's headline is a full
+  sentence asserting something ("Financial access is already global; the gap is
+  guidance") — never a noun like "Market". The claim is the argument; the
+  diagram below is its evidence.
+- **One bespoke diagram per slide, never a bullet list.** The recurring set:
+  opposing poles with the gap named between them; a staged flow with hairline
+  connectors; a positioning map with two labeled axes and dot nodes; lanes or a
+  funnel for a money path; a comparison table with one column marked as *us*;
+  an allocation bar with a legend.
+- **Highlight exactly one phrase per deck** — an accent-filled marker behind
+  the single sentence fragment the whole story hangs on, with `--accent-ink`
+  text on it. A second highlight halves the first.
+- **Every number carries its source** in mono, directly beneath it. An
+  unsourced figure on an investor slide is a liability, and the source line is
+  also what makes the layout read as instrumentation.
+- Chips (`999` radius, panel-2 fill, hairline border) for enumerations that
+  would otherwise become bullets.
+
+## Micro-interactions
+
+- The deck is presented, so interaction is deliberately thin: hover only on
+  genuine links, focus-visible ring in `--accent`, no hover state on static
+  cards (a card that lifts under a cursor during a live presentation is noise).
+- Keyboard navigation between slides is the one interaction worth building
+  well; the slide number in the footer is the position indicator.
+
+## Bans
+
+- Bullet lists as the default slide layout; stock photography; illustrations
+  with a mascot; icon grids where a diagram belongs.
+- Gradients as decoration (the veil and the one accent glow are the exceptions,
+  and they are functional).
+- A second accent hue; true-neutral grays alongside the tinted ones; white text
+  on the accent fill.
+- Animated slide transitions, build-ins, scroll-jacking, particle backgrounds —
+  wrong register entirely; that is what `instrument-console` is for.
+- Numbers without sources; more than one highlighted phrase per deck; shrinking
+  the type ramp to fit content into a frame.
+
+## Gotchas
+
+- **A fixed canvas fails silently.** `overflow: hidden` means overflowing
+  content is simply invisible — nobody sees it in review, everybody sees the
+  gap in the room. Check every slide at exactly 1280×720 before shipping, not
+  at whatever the browser window happens to be.
+- **The reference shipped no print or reduced-motion branch.** A deck gets
+  exported to PDF and read on a phone; add a print stylesheet (one slide per
+  page, veil intact) and a narrow-viewport branch that reflows the frame rather
+  than scaling it into illegibility.
+- OKLCH renders differently on wide-gamut displays than the sRGB hex you may be
+  comparing against — verify on the screen the deck will actually be presented
+  on, which is usually a projector with a narrower gamut than your laptop.
+- Dithered artwork must be exported at 2× and left unscaled in CSS; resampling
+  a 1-bit image destroys the dither pattern and turns it into mud.

package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/briefing-room.css

@@ -0,0 +1,118 @@
+/* SHELEG Design — Briefing Room token layer (dark presentation deck).
+   Copy verbatim; consume only var(--…) in components.
+   Neutrals are the accent hue (254) starved of chroma — keep the hue when
+   editing, or the deck reads as two designs. */
+:root {
+  --bg: oklch(0.045 0.008 254);
+  --panel: oklch(0.145 0.008 254);
+  --panel-2: oklch(0.178 0.008 254);
+  --line: oklch(0.231 0.006 254);
+  --line-2: oklch(0.269 0.006 254);
+
+  --ink: oklch(0.985 0.004 254);
+  --ink-2: oklch(0.8 0.006 254);
+  --ink-3: oklch(0.62 0.006 254);
+  --ink-dim: oklch(0.56 0.006 254); /* furniture only, ≥10.5px mono */
+
+  --accent: oklch(0.643 0.195 254);
+  --accent-soft: oklch(0.643 0.195 254 / 0.18); /* chip fill, glow */
+  --accent-line: oklch(0.643 0.195 254 / 0.45); /* chip border */
+  --accent-ink: var(--bg); /* text ON the accent — never white */
+  --good: oklch(0.824 0.151 148);
+  --good-soft: oklch(0.824 0.151 148 / 0.3);
+
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-pill: 999px;
+
+  /* 4px grid with deliberate half-steps for dense slide layouts */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-4-5: 18px;
+  --space-5: 20px;
+  --space-5-5: 22px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-9: 36px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-14: 56px;
+  --space-16: 64px;
+  --space-20: 80px;
+
+  /* Fixed 16:9 canvas — content that does not fit becomes a second slide */
+  --slide-w: 1280px;
+  --slide-h: 720px;
+  --frame-pad-x: var(--space-20);
+  --frame-pad-y: var(--space-16);
+
+  --shadow-card: 0 28px 70px -28px rgba(0, 0, 0, 0.85);
+  --shadow-pop: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
+  --glow-accent: radial-gradient(
+    58% 46% at 50% 26%,
+    var(--accent-soft),
+    transparent 70%
+  );
+  /* Veil the artwork, never fade it: keeps the dither crisp under text */
+  --veil-left: linear-gradient(
+    95deg,
+    oklch(0 0 0 / 0.85) 0%,
+    oklch(0 0 0 / 0.55) 38%,
+    oklch(0 0 0 / 0.2) 70%,
+    oklch(0 0 0 / 0.05) 100%
+  );
+
+  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
+
+  --t-display: 128px;
+  --t-h1: 96px;
+  --t-h2: 64px;
+  --t-h3: 36px;
+  --t-lede: 24px;
+  --t-body: 17px;
+  --t-meta: 14px;
+  --t-mono: 13px;
+  --t-mono-sm: 10.5px;
+
+  --track-display: -0.04em;
+  --track-h1: -0.035em;
+  --track-h2: -0.03em;
+  --track-h3: -0.02em;
+  --track-body: -0.005em;
+  --track-mono: 0.14em; /* mono without tracking reads as code, not telemetry */
+  --track-mono-wide: 0.18em;
+
+  --lh-display: 1.02;
+  --lh-head: 1.05;
+  --lh-tight: 1.1;
+  --lh-lede: 1.5;
+  --lh-body: 1.55;
+
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --dur-fast: 0.15s;
+  --dur-base: 0.2s;
+
+  background-color: var(--bg);
+  color: var(--ink);
+  color-scheme: dark;
+}
+
+/* Slides never animate — the presenter is the timeline. This block should
+   have nothing to disable; if it does, the deck has motion it should not. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur-fast: 0s;
+    --dur-base: 0s;
+  }
+}