sheleg-design-skill 1.32.0 → 1.33.0

package/CHANGELOG.md

@@ -4,6 +4,55 @@ 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.33.0] - 2026-08-15
+
+**Three things the pack asserts that a running page disproved.** Same dashboard as 1.32.0,
+audited a second time — but by walking the **computed styles of every element** rather
+than by re-reading the source. That is the difference this entry is about: all three
+findings are invisible to a grep over the stylesheets, and two of them are invisible to
+the stylesheets entirely.
+
+### Fixed — in `tenor`
+
+- **The second-hue ban was being broken by the pack's own token, on every render.** Bans
+  said "the orange is the entire chromatic budget", flatly, while the Palette section
+  three hundred lines above derived `--good` and explained why a product surface needs it.
+  Measured on a live screen, hue 150 appeared **36 times on one page** — checklist marks
+  and success chips. The ban now names its exception and states the real rule: no hue you
+  did not find in this file, and the only two in it are the orange and `--good`.
+- **Two bans the browser breaks for you, with no stylesheet involved.** `<strong>` renders
+  at **700** against "no weight above 500" and `<em>` renders italic against "no italics".
+  Neither appears in any CSS, so neither is greppable and neither surfaces in review;
+  both were found by reading computed styles. `tokens/tenor.css` now ships the three-line
+  base layer, and emphasis resolves the pack's own way — by **value**, not by weight or
+  slant. **Every pack in this library that bans a weight or a slant owes the same block**,
+  and none of the twenty ships one; filed as `B-044`.
+- **The 25px orange rule conflated a measurement with a limit.** It is the size of the
+  reference's investor lockup, not a threshold derived from anything, and a product's own
+  lockup will not be 25px. The rule it stands for is *one small resting orange object per
+  screen*; the entry now says which half is which.
+
+### Added — in `tenor`
+
+- **`--data-rest`**, a role over the value ramp the staircase already spends — `--stair-3`
+  on the paper (3.37:1 on `--bg`, over the non-text floor) and `--ink-faint` on the band.
+  It exists because this pack has **one border weight**: a design system carrying
+  `--border` and `--border-strong` as two steps collapses both onto `--line` here, and a
+  chart that reached for the stronger of the two paints its resting bars in the exact
+  colour of the rule between its own rows. Measured on a dashboard's account table — the
+  two resolved identically and the bars matched the row separator to the byte. Nothing
+  errors, because both names resolve; that is the failure mode.
+- The `### On a product surface` section gains the chart rule, and repeats the standing
+  instruction that charts in any pack go through `dataviz` first.
+
+### Note
+
+Two contrast claims in this diff named `--line`, which is declared with alpha and is
+therefore dropped from the validator's solids — so no claim naming it can ever be checked.
+`validate_stated_ratios` caught the one that sat on a checkable line and stayed silent on
+the one that did not, which is the hole `B-003` already describes. Both are now written as
+arguments with their resolved hex rather than as measurements.
+
 ## [1.32.0] - 2026-08-15
 
 **The pack met a product surface, and three of its own measurements did not survive

package/kits/tenor/src/styles.css

@@ -108,6 +108,20 @@
   --stair-2: oklch(89% 0 0);
   --stair-3: oklch(62% 0 0);
 
+  /* A resting data mark — a sparkline bar, an unemphasised column, a track.
+     A role name over the value ramp above rather than a new value, on the same
+     pattern as --sev-*. It exists because this pack has ONE border weight, so a
+     system carrying `--border` and `--border-strong` as two steps collapses both
+     onto --line here, and a chart that reached for the stronger of the two ends
+     up painting a quantity in the colour of the rule between its own rows.
+     --stair-3 resolves to #868686, and
+     --data-rest is 3.37:1 on --bg — over the 3:1 non-text floor for a mark.
+     Against the hairline it is 2.38, computed on the resolved #d2d1ce and NOT
+     checkable from here: --line is declared with alpha, so the validator drops
+     it from the solids and no claim naming it can be verified. Stated as an
+     argument rather than as a measurement, deliberately. */
+  --data-rest: var(--stair-3);
+
   /* ── geometry: there is no radius and there are no shadows ───────────────
      Zero occurrences of border-radius and zero of box-shadow in the whole
      stylesheet. Separation is the hairline; emphasis is a filled rectangle. */
@@ -231,6 +245,12 @@
   /* --accent-ink is deliberately NOT overridden: the orange is the same orange
      on both fields, so the one label that can be read on it is the same coal. */
   --sev-limit: #4a4a48;
+  /* The value ramp is a paper-page device and inverts to nothing useful here, so
+     the resting mark takes the band's own faint ink instead, where
+     --data-rest is 4.69:1 on --bg. Against the hairline it is 2.64 on the
+     resolved #3e3e3c — same caveat as the light block: --line carries alpha and
+     cannot be checked from here. */
+  --data-rest: var(--ink-faint);
   /* DERIVED, same reasoning as the light block and re-measured on this field:
      8.45:1 on --bg, and 10.7 from the accent under deuteranopia. A surface
      block that remaps eleven tokens and forgets the status set is a defect this
@@ -239,6 +259,25 @@
   --danger: #f7f6f2;
 }
 
+/* The base layer, and it is three lines because the browser breaks two of this
+   pack's bans on its own. `<strong>` renders at 700 against "no weight above
+   500", and `<em>` renders italic against "no italics" — with no stylesheet
+   involved either time, so neither violation is greppable and neither appears in
+   review. Found by walking the computed styles of a running page rather than the
+   source.
+
+   Emphasis resolves the pack's own way, by VALUE: both take the full ink against
+   prose set in --ink-soft-aa, and `<strong>` stops at the pack's ceiling weight.
+   Any pack in this library that bans a weight or a slant owes the same block. */
+strong, b {
+  font-weight: var(--weight-mono);
+  color: var(--ink);
+}
+em, i {
+  font-style: normal;
+  color: var(--ink);
+}
+
 /* Reduced motion. The reference collapses every duration to 0.01ms with
    iteration-count clamped to 1, which lands an animation on its final frame
    rather than strobing it, and then names its one infinite loop separately to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.32.0",
+  "version": "1.33.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.32.0",
+  "version": "1.33.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.32.0
+  version: 1.33.0
 ---
 
 # SHELEG Design

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

@@ -299,6 +299,21 @@ mounting the pack on a populated twenty-route dashboard rather than reasoned abo
   across a dashboard's stat row reads exactly as it does on the page.
 - **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.**
+  Tenor has one border weight and no strong variant, so a design system that
+  carries `--border` and `--border-strong` as two steps collapses them onto one
+  value here. A sparkline whose resting bars were painted with the *stronger* of
+  those two is then painted in the exact colour of the rule between the rows it
+  sits in — a quantity rendered in the token reserved for chrome, and nothing
+  errors, because both names resolve. Measured on a dashboard's account table:
+  the two resolved identically and the bars matched the row separator to the
+  byte. **Use `--data-rest`**, which the token layer maps onto the value ramp the
+  staircase already spends: `--stair-3` on the paper (3.37:1 on `--bg`, and 2.38
+  against `--line`, so it separates from the rule) and `--ink-faint` on the band.
+  The emphasised mark stays `--accent-ink`-on-`--ink` or whatever the chart's own
+  emphasis rule says; only the resting one changes. Charts in any pack go through
+  `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
@@ -457,11 +472,35 @@ hierarchy is spent.
   drawing.
 - **No shadows, and no elevation model at all.** Something is either filled or it
   is not. A card with a shadow is a different pack.
-- **No second hue.** The orange is the entire chromatic budget, and it is spent on
-  hover and focus. A resting orange fill larger than 25px is out of register.
+- **No second hue — with one named exception, and it is `--good`.** The orange is
+  the chromatic budget of the *page*, spent on hover and focus. The pack also
+  ships a derived success value at hue 150 for the product surfaces it dresses,
+  because a marketing site paints no success state and a dashboard has to. So the
+  ban as it stands is: **no hue you did not find in this file**, and the only two
+  in it are the orange and `--good`. A screen may carry both; nothing else.
+
+  *This used to read "the orange is the entire chromatic budget", flatly, while
+  the Palette section three hundred lines above derived `--good` and said why.
+  Measured on a dashboard running this pack, hue 150 appeared **36 times on one
+  screen** — checklist marks and success chips — so the ban was being broken by
+  the pack's own token on every render.*
+
+  A resting orange fill larger than 25px is out of register. **That number is a
+  measurement of the reference's investor lockup, not a limit derived from
+  anything** — a product's own lockup will not be 25px, and the rule it stands
+  for is *one small resting orange object per screen*. Treat the size as the
+  reference's and the count as the rule.
 - **No weight above 500, and no weight above 400 in the sans.** Emphasis comes
   from size, measure and fill.
 - **No italics.** The reference contains none.
+- **Both of the two above need a base layer, because the browser breaks them for
+  you.** `<strong>` renders at **700** and `<em>` renders italic with no
+  stylesheet involved, so neither violation appears in any CSS a grep can read
+  and neither shows up in review. `tokens/tenor.css` ships the reset; emphasis
+  resolves the pack's own way, by **value** — `<strong>` takes weight 500 and the
+  full `--ink` against prose set in `--ink-soft-aa`, and `<em>` drops the slant
+  and takes the ink too. Any pack in this library that bans a weight or a slant
+  owes the same three lines.
 - **No gradient with a hue in it.** The one gradient in the system is an
   achromatic greyscale wash behind a single feature cell.
 - **No centred display type**, except the hero below 620px and the closing panel.

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

@@ -108,6 +108,20 @@
   --stair-2: oklch(89% 0 0);
   --stair-3: oklch(62% 0 0);
 
+  /* A resting data mark — a sparkline bar, an unemphasised column, a track.
+     A role name over the value ramp above rather than a new value, on the same
+     pattern as --sev-*. It exists because this pack has ONE border weight, so a
+     system carrying `--border` and `--border-strong` as two steps collapses both
+     onto --line here, and a chart that reached for the stronger of the two ends
+     up painting a quantity in the colour of the rule between its own rows.
+     --stair-3 resolves to #868686, and
+     --data-rest is 3.37:1 on --bg — over the 3:1 non-text floor for a mark.
+     Against the hairline it is 2.38, computed on the resolved #d2d1ce and NOT
+     checkable from here: --line is declared with alpha, so the validator drops
+     it from the solids and no claim naming it can be verified. Stated as an
+     argument rather than as a measurement, deliberately. */
+  --data-rest: var(--stair-3);
+
   /* ── geometry: there is no radius and there are no shadows ───────────────
      Zero occurrences of border-radius and zero of box-shadow in the whole
      stylesheet. Separation is the hairline; emphasis is a filled rectangle. */
@@ -231,6 +245,12 @@
   /* --accent-ink is deliberately NOT overridden: the orange is the same orange
      on both fields, so the one label that can be read on it is the same coal. */
   --sev-limit: #4a4a48;
+  /* The value ramp is a paper-page device and inverts to nothing useful here, so
+     the resting mark takes the band's own faint ink instead, where
+     --data-rest is 4.69:1 on --bg. Against the hairline it is 2.64 on the
+     resolved #3e3e3c — same caveat as the light block: --line carries alpha and
+     cannot be checked from here. */
+  --data-rest: var(--ink-faint);
   /* DERIVED, same reasoning as the light block and re-measured on this field:
      8.45:1 on --bg, and 10.7 from the accent under deuteranopia. A surface
      block that remaps eleven tokens and forgets the status set is a defect this
@@ -239,6 +259,25 @@
   --danger: #f7f6f2;
 }
 
+/* The base layer, and it is three lines because the browser breaks two of this
+   pack's bans on its own. `<strong>` renders at 700 against "no weight above
+   500", and `<em>` renders italic against "no italics" — with no stylesheet
+   involved either time, so neither violation is greppable and neither appears in
+   review. Found by walking the computed styles of a running page rather than the
+   source.
+
+   Emphasis resolves the pack's own way, by VALUE: both take the full ink against
+   prose set in --ink-soft-aa, and `<strong>` stops at the pack's ceiling weight.
+   Any pack in this library that bans a weight or a slant owes the same block. */
+strong, b {
+  font-weight: var(--weight-mono);
+  color: var(--ink);
+}
+em, i {
+  font-style: normal;
+  color: var(--ink);
+}
+
 /* Reduced motion. The reference collapses every duration to 0.01ms with
    iteration-count clamped to 1, which lands an animation on its final frame
    rather than strobing it, and then names its one infinite loop separately to