sheleg-design-skill 1.33.0 → 1.34.0

package/CHANGELOG.md

@@ -4,6 +4,48 @@ 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.34.0] - 2026-08-15
+
+**The pack was applied correctly and the result still read as somebody else's typography.**
+Everything measured green — zero radius, zero shadow, two hues, AA on every pair — and the
+dashboard was flat. This release is what the flatness turned out to be, and most of it is a
+correction to the `### On a product surface` section shipped two versions ago.
+
+### Fixed — in `tenor`
+
+- **"A dashboard has no display type" threw away the rule that makes this pack legible.** The
+  section rhythm is a page value and stays out; the *tracking rule* is not, and it only acts on
+  type large enough to show it. A screen title at 30px tracked `-0.02em` is the rule acting on
+  nothing. The section now separates the **ramp** (out) from the **rule** (in) and gives the three
+  steps a dashboard actually has — screen title, section head, metric — with sizes, tracking and
+  line-height for each. All three at weight **400**: ranking by size is this pack's device and
+  ranking by weight is the one it replaced. Measured against a ramp of 30 / 16 / 13, where the
+  jump from title to section head was **3:1 with nothing between** — two sizes that far apart stop
+  reading as a hierarchy.
+- **A stat row built as four bordered boxes breaks the inversion.** `## Components` already said
+  three equal blocks share one lattice and never read as three cards; what it did not say is that
+  the construction is load-bearing on a product surface. Container draws top and left, each cell
+  draws right and bottom, **gap zero**. Build it with boxes 12px apart and the hover inversion
+  leaves a seam down every border it touches.
+- **A colour earns its place where the column varies, and the chip rule only covered half of it.**
+  1.32.0 dropped the box from a chip repeated down a table; the hue stayed. Measured across twenty
+  routes: on the agent-connections screen, **82 rows all reading `ACTIVE` and 421 green marks**,
+  none of which told the reader anything, because a value that never changes is not a status. Two
+  screens away the audit log spends the same green across 200 rows against the warn value and it
+  carries the whole distinction. Set the severity value only on rows that differ from the column's
+  norm; leave the norm in `--ink`.
+
+### Added — in `tenor`
+
+- **The motion budget of a product surface, stated.** Every motion token in this pack is a page
+  value — a 640ms fade, an 820ms travel, a 110ms stagger four steps deep — spent on a block a
+  reader scrolls to once. `MOTION_DOCTRINE.md` §1 puts a dashboard's screens in the row where
+  animation is cut to the floor, so **the entrance budget on a product surface is zero**: nothing
+  plays on load, on client navigation or on a keystroke. What remains is the whole budget and it is
+  enough — the cell inversion, the nav underline, the focus ring, the fill on a hovered control.
+  Each is caused by the reader's own pointer, which is what makes it read as a response rather
+  than as a delay.
+
 ## [1.33.0] - 2026-08-15
 
 **Three things the pack asserts that a running page disproved.** Same dashboard as 1.32.0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "description": "Design taste as an installable agent skill. Cinematic scroll-driven landing pages built on one scroll clock and layered degrade-to-calm motion, a motion doctrine that decides whether to animate before it decides how, three calibration dials, and twenty locked style packs with ready-made design tokens — instrument-console, editorial-luxury, workbench, briefing-room, atrium, orchard, field-notes, cyclorama, showroom, blueprint, prism, maquette, scoreboard, datasheet, manpage, pigeonhole, roster, ora, tenor and paperclip. Colour, slop and fork-reciprocity gates run as scripts, not opinions. 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

@@ -2,7 +2,7 @@
   "name": "sheleg-design",
   "displayName": "SHELEG Design",
   "description": "SHELEG Design methodology: cinematic scroll-driven landing pages (single scroll clock, layered degrade-to-calm motion, WebGL particle formations), a motion doctrine that decides whether to animate before it decides how, and twenty pluggable visual style packs — instrument-console (dark console), editorial-luxury (warm editorial), workbench (light/dark product UI for dashboards and tools), briefing-room (dark 16:9 deck), atrium (warm consumer health), orchard (friendly consumer biotech), field-notes (warm paper for dev tools sold on auditability), cyclorama (a pastel field on a 32s cycle), showroom (the product as the exhibit), blueprint (a drawing sheet, zero radius), prism (one iridescent wash over mono body), maquette (cream axonometric models on a dark table), scoreboard (warm paper, pixel numerals, a dark ledger of results), datasheet (an off-white spec sheet whose live instrument goes dark when it detects the reader is hiding), manpage (a developer landing page set in the reader's own system monospace on cream paper, with coral label chips that are real headings and a dark code frame as the argument), pigeonhole (a white sorting wall whose nine pastel categories are a filing scheme rather than a mood, each a two-layer chip whose label word is mandatory), roster (a white field in a faint grid of squares whose argument is other people's marks — client logotypes in pill-labelled industry columns, an engine's wordmark inside the headline — where the proof is a name rather than a number), ora (a warm coal field with cream ink and no third hue — the accent is the inverted field — a serif carrying every human sentence over a monospace carrying every machine fact, a terminal surface cut below the page, and a six-step verdict ramp, for products whose output is a machine's verdict about the reader), tenor (warm paper with zero radius and zero shadow, one hairline weight, an orange that exists only on hover and on focus, a sans tracked negative against a mono tracked positive, display at a line-height below one in an eight-to-twelve-character measure, and product proof delivered as silent looping video, for products arguing that a new kind of thing must be managed like an existing organisation), paperclip (neutral coal with no functional colour at all — every control monochrome and elevation made of hairlines, with the whole chromatic budget spent on a curtain of gradient capsules and twelve gradient section badges that cannot be clicked — for products that ask a person to run something that runs itself: agent teams, autonomous back-office, schedulers and budget-governed compute). Ships the sheleg-design skill, the architecture reference, the motion doctrine, the Figma and Claude Design bridges, AI-surface patterns, style packs with ready-made token CSS, and the /sheleg-design command.",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "author": {
     "name": "ssheleg",
     "url": "https://x.com/sshlg93"

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

@@ -3,7 +3,7 @@ name: sheleg-design
 description: Use when building or upgrading a cinematic scroll-driven landing page, marketing site or hero (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, mobile app screens, 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" / "скролл-анимация", "dashboard style" / "стиль дашборда", "design tokens" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables / figma to code" / "переменные фигмы, фигма в код", "chat/agent UI" / "интерфейс чата или агента", "streaming output" / "стриминг ответа", "mobile screen" / "мобильный экран".
 license: MIT
 metadata:
-  version: 1.33.0
+  version: 1.34.0
 ---
 
 # SHELEG Design

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

@@ -297,6 +297,16 @@ mounting the pack on a populated twenty-route dashboard rather than reasoned abo
   the status as the word alone in its severity value, with `--warn` kept for the
   mark beside it. Panels and tiles are unaffected: the same lattice at four cells
   across a dashboard's stat row reads exactly as it does on the page.
+
+  **And dropping the box is only half of it: a colour earns its place where the
+  column varies.** Measured across twenty routes of one dashboard — on the screen
+  listing agent connections, **82 rows all reading `ACTIVE`, 421 green marks, and
+  not one of them told the reader anything**, because a value that never changes
+  is not a status. Two screens away the audit log spends the same green across 200
+  rows against the warn value, and there it carries the whole distinction. The
+  rule: **set the severity value only on the rows that differ from the column's
+  own norm**, and leave the norm in `--ink`. A constant column is prose, and prose
+  is not coloured here.
 - **Prose sits on two fields at once and `--ink-soft` fails on the second.** This
   is what produced `--ink-soft-aa`; see Gotcha 1.
 - **A data mark must not borrow the hairline, and in this pack it silently will.**
@@ -315,12 +325,59 @@ mounting the pack on a populated twenty-route dashboard rather than reasoned abo
   `dataviz` first — token names are not uniform across the twenty, and an aliased
   one fails exactly this quietly.
 
-What does **not** change on a product surface: the spacing scale and the type
-ramp. Tenor's section rhythm is `clamp(40px, 4.5vw, 64px)` and its display slope
-runs to 8rem in an 8–12ch measure — both are page values, and a dashboard has
-neither a section rhythm nor display type. Keep the product's own scale and take
-the pack's *surface*: the field, the zero radius, the single hairline, the hue
-that only appears under the cursor, and the two tracking ramps.
+**The type ramp is where this section was wrong, and the correction matters more
+than the error.** It used to say a dashboard has "neither a section rhythm nor
+display type" and to keep the product's own scale outright. The first half holds
+— the section rhythm is a page value. The second half threw away the thing that
+makes this pack legible: **the tracking rule only acts on type large enough to
+show it.** A screen title at 30px tracked `-0.02em` is the rule acting on
+nothing, and a product mounted that way reads as the pack's palette with somebody
+else's typography inside it.
+
+So the distinction is between the *ramp* and the *rule*. The marketing ramp stays
+out: no `clamp(3rem, 6.5vw, 6.6rem)`, no 8–12ch measures, no section head at
+6.6rem. The tracking rule comes in, and a dashboard has exactly **three steps**
+for it to act on:
+
+| Step | Size | Tracking | Weight |
+|---|---|---|---|
+| The screen title — one per screen | `clamp(2.35rem, 3vw, 3.15rem)` | `-0.04em` | 400 |
+| A section head | `clamp(1.2rem, 1.4vw, 1.45rem)` | `-0.03em` | 400 |
+| A metric — the argument of the screen | `clamp(2.1rem, 2.4vw, 2.75rem)` | `-0.045em` | 500, mono |
+
+Line-height goes to `0.98` on the title and `1` on the metric — below the prose
+leading, which is what makes a title read as a drawn object rather than as a
+large sentence. **All three drop to weight 400 in the sans**, because ranking by
+size is the pack's device and ranking by weight is the one it replaced; a heading
+distinguished by being semibold at body size is a heading with no step under it.
+Measured on a dashboard whose ramp was 30 / 16 / 13: the jump from title to
+section head was 3:1 with nothing between, and two sizes that far apart stop
+reading as a hierarchy and start reading as two unrelated decisions.
+
+**A stat row is a lattice, and it is built per cell or the inversion breaks.**
+The `## Components` entry says three equal blocks share one lattice and never read
+as three cards; on a product surface that is the row of metric tiles, and the
+construction is load-bearing rather than stylistic. The container draws its top
+and left edge, each cell draws its right and bottom, and **the gap is zero** — a
+lattice has no gap. Build it with four bordered boxes 12px apart and the hover
+inversion leaves a seam down every border it touches, which is the exact failure
+`border-collapse` and a background line also produce.
+
+**Motion on a product surface is pointer-driven and nothing else.** Tenor's motion
+tokens are page values — a 640ms fade, an 820ms travel, a 110ms stagger four steps
+deep — and every one of them is spent on a block a reader scrolls to once.
+`MOTION_DOCTRINE.md` §1 puts a dashboard's screens in the row where animation is
+cut to the floor, because the same screen is opened tens of times a day, so **the
+entrance budget on a product surface is zero**: nothing plays on load, on client
+navigation, or on a keystroke. What is left is the whole budget and it is enough —
+the cell inversion at `--dur-panel`, the nav underline at `--dur-nav`, the focus
+ring, and the fill on a hovered control. Each is caused by the reader's own
+pointer, which is what makes it feel like a response rather than like a delay.
+
+What still does **not** change: the spacing scale and the section rhythm. Keep the
+product's own spacing and take the pack's *surface* — the field, the zero radius,
+the single hairline, the hue that only appears under the cursor, and the two
+tracking ramps.
 
 ## Hero