sheleg-design-skill 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -4,6 +4,44 @@ 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.16.0] - 2026-08-12
+
+The five findings T5 and T6 left on the board, actioned.
+
+### Fixed
+
+- **`instrument-console`'s palette table declared no base, so none of its ratios
+  were checked.** `validate_stated_ratios` reads the comparison base out of a
+  table header; with none, the library's default dark infrastructure pack was its
+  **least-covered**, and the one automated fact about it was `--ink` on `--bg`. The
+  table now declares `| On \`--base\` |` and every number in it is recomputed on
+  each run — the palette gate goes 596 → **603 checks**, which is the size of the
+  hole.
+- **`--accent-ink` was stated at 6.0:1 in two places and computes 6.17.** From the
+  unrounded colour rather than the shipped hex, the same way four `scoreboard`
+  ratios were wrong in 1.13.0. Conservative in direction, wrong in kind.
+- **`workbench`'s reference kit had no selected row.** The pack mandates
+  `--accent-weak` plus a 2px accent inset for selected; `Chip` implemented it and
+  `DataTable` did not — the one atom on an admin dashboard that most needs
+  selection was the one that lacked it. `DataTableRow` gains `selected`, with
+  `aria-selected` on the row.
+- **`workbench` stated its type scale and its 4px grid in prose and shipped
+  neither as tokens**, which made the craft bar's *"no ad-hoc font size anywhere
+  in the diff"* unachievable in this pack specifically — and its own kit wrote
+  **twenty** raw `font-size` declarations because there was nothing to reference.
+  `--t-chip` … `--t-page` and `--space-1` … `--space-6` now ship; every value was
+  lifted from the pack's own Type section, none was chosen. The kit is down to
+  zero raw sizes.
+
+### Changed
+
+- **`test/scenarios.md` says out loud that it cannot be blind.** Every scenario
+  states its pass condition a paragraph from its brief, so an agent with
+  repository access can find its own exam — T5's run reported exactly that, after
+  selecting the right pack anyway. Runs are now pointed at an **installed** bundle,
+  which carries no `test/` directory. A run against the checkout still yields
+  findings; its verdict is not blind and must not be recorded as if it were.
+
 ## [1.15.0] - 2026-08-12
 
 Two of the eight unrun scenarios were run. Both passed, and between them they

package/kits/instrument-console/src/styles.css

@@ -13,7 +13,7 @@
   --accent: #3392ff;
   --accent-dim: #1f5fb0;
   --accent-bright: #6bb3ff;
-  --accent-ink: #0a0e14; /* text ON the accent — 6.0:1. White on #3392ff fails AA. */
+  --accent-ink: #0a0e14; /* text ON the accent — 6.17:1. White on #3392ff is 3.14 and fails. */
   --accent-glow: rgba(51, 146, 255, 0.18);
   --ok: #46d39a;
   --warn: #e0a030;
@@ -46,6 +46,7 @@
      cross-pack document can name them truthfully. Alias, never a new colour. */
   --bg: var(--base); /* role alias -> --base, this pack's field */
 }
+
 /* ── components ── */
 
 /* Everything below consumes var(--…) only. Colour never appears as a literal.

package/kits/workbench/src/DataTable.md

@@ -7,7 +7,7 @@ uppercase, hairline row dividers, and numeric columns right-aligned in the data
 face with tabular figures so digits line up down the column. Mark a column
 `numeric` whenever it holds a quantity — that flag is the whole reason the table
 reads at a glance. Cells take nodes, so a `StatusDot` or a `Chip` drops straight
-in. Rows hover to `--panel-2`; nothing else moves.
+in. Rows hover to `--panel-2` and a selected row takes `--accent-weak` with a 2px accent inset, as the pack mandates; nothing else moves.
 
 ```tsx
 <DataTable

package/kits/workbench/src/DataTable.tsx

@@ -11,6 +11,13 @@ export interface DataTableColumn {
 export interface DataTableRow {
   id: string;
   cells: Record<string, ReactNode>;
+  /**
+   * The pack mandates `--accent-weak` plus a 2px accent inset for the selected
+   * state, and this component shipped without one until 1.16.0 — the single
+   * atom on an admin dashboard that most needs selection was the one that
+   * lacked it, while `Chip` implemented the same state correctly.
+   */
+  selected?: boolean;
 }
 
 export interface DataTableProps {
@@ -46,7 +53,16 @@ export function DataTable({ columns, rows, caption, className }: DataTableProps)
         </thead>
         <tbody>
           {rows.map((row) => (
-            <tr key={row.id} className="wb-table__row">
+            <tr
+              key={row.id}
+              className={[
+                'wb-table__row',
+                row.selected === true ? 'wb-table__row--selected' : undefined,
+              ]
+                .filter(Boolean)
+                .join(' ')}
+              aria-selected={row.selected === true ? true : undefined}
+            >
               {columns.map((column) => (
                 <td
                   key={column.key}

package/kits/workbench/src/styles.css

@@ -34,6 +34,27 @@
   --font-ui: -apple-system, "SF Pro", "Segoe UI", sans-serif;
   --font-data: ui-monospace, "SF Mono", Menlo, monospace;
 
+  /* The scale the pack has always stated in prose, tokenised in 1.16.0. It was
+     prose-only for five releases, which made the craft bar's "no ad-hoc font
+     size anywhere in the diff" unachievable in this pack specifically — its own
+     reference kit wrote twenty raw font-size declarations because there was
+     nothing to reference. No value changed; they were lifted from the pack's
+     Type section, not chosen. */
+  --t-chip: 11px; /* chips, meta */
+  --t-label: 12px; /* uppercase labels, tracked .1em */
+  --t-body: 13px; /* body and dense UI — the workhorse */
+  --t-card: 15px; /* card titles */
+  --t-section: 20px; /* section headings */
+  --t-page: 28px; /* page title */
+
+  /* The 4px grid, likewise stated and not shipped. */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+
   background-color: var(--bg);
   color: var(--ink);
   color-scheme: light; /* the theme is explicit — never let the UA pick */
@@ -86,18 +107,18 @@
   text-wrap: balance;
 }
 .wb-heading--1 {
-  font-size: 28px;
+  font-size: var(--t-page);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.01em;
 }
 .wb-heading--2 {
-  font-size: 20px;
+  font-size: var(--t-section);
   font-weight: 700;
   line-height: 1.3;
 }
 .wb-heading--3 {
-  font-size: 15px;
+  font-size: var(--t-card);
   font-weight: 600;
   line-height: 1.4;
 }
@@ -142,17 +163,17 @@
 .wb-btn--sm {
   min-height: 26px;
   padding: 4px 10px;
-  font-size: 12px;
+  font-size: var(--t-label);
 }
 .wb-btn--md {
   min-height: 32px;
   padding: 6px 12px;
-  font-size: 13px;
+  font-size: var(--t-body);
 }
 .wb-btn--lg {
   min-height: 40px;
   padding: 8px 16px;
-  font-size: 15px;
+  font-size: var(--t-card);
 }
 .wb-btn--primary {
   background: var(--accent);
@@ -217,7 +238,7 @@
   border: 1px solid var(--border);
   border-radius: var(--r-card);
   font-family: var(--font-ui);
-  font-size: 13px;
+  font-size: var(--t-body);
   line-height: 1.5;
   color: var(--ink);
 }
@@ -230,13 +251,13 @@
 }
 .wb-card__title {
   margin: 0;
-  font-size: 15px;
+  font-size: var(--t-card);
   font-weight: 600;
   color: var(--ink);
 }
 .wb-card__meta {
   font-family: var(--font-data);
-  font-size: 11px;
+  font-size: var(--t-chip);
   color: var(--muted);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
@@ -253,7 +274,7 @@
   box-sizing: border-box;
   padding: 2px 8px;
   font-family: var(--font-data);
-  font-size: 11px;
+  font-size: var(--t-chip);
   line-height: 1.45;
   font-variant-numeric: tabular-nums;
   background: var(--panel);
@@ -290,7 +311,7 @@
 }
 .wb-stat__label {
   font-family: var(--font-ui);
-  font-size: 12px;
+  font-size: var(--t-label);
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -298,7 +319,7 @@
 }
 .wb-stat__value {
   font-family: var(--font-data);
-  font-size: 28px;
+  font-size: var(--t-page);
   font-weight: 600;
   line-height: 1.1;
   font-variant-numeric: tabular-nums;
@@ -306,7 +327,7 @@
 }
 .wb-stat__source {
   font-family: var(--font-ui);
-  font-size: 11px;
+  font-size: var(--t-chip);
   line-height: 1.4;
   color: var(--muted);
 }
@@ -317,7 +338,7 @@
   align-items: center;
   gap: 8px;
   font-family: var(--font-ui);
-  font-size: 12px;
+  font-size: var(--t-label);
   color: var(--ink);
 }
 .wb-status__dot {
@@ -361,14 +382,14 @@
   border-collapse: separate;
   border-spacing: 0;
   font-family: var(--font-ui);
-  font-size: 13px;
+  font-size: var(--t-body);
   color: var(--ink);
 }
 .wb-table__caption {
   caption-side: top;
   padding: 12px 12px 8px;
   text-align: left;
-  font-size: 12px;
+  font-size: var(--t-label);
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -381,7 +402,7 @@
   height: 34px;
   padding: 0 12px;
   text-align: left;
-  font-size: 12px;
+  font-size: var(--t-label);
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -400,6 +421,7 @@
 .wb-table__row:hover .wb-table__td {
   background: var(--panel-2);
 }
+.wb-table__row--selected { background-color: var(--accent-weak); box-shadow: inset 2px 0 0 0 var(--accent); }
 .wb-table__th--num,
 .wb-table__td--num {
   text-align: right;
@@ -414,7 +436,7 @@
   flex-direction: column;
   gap: 6px;
   font-family: var(--font-ui);
-  font-size: 12px;
+  font-size: var(--t-label);
   color: var(--muted);
 }
 .wb-progress__head {
@@ -472,7 +494,7 @@
 .wb-seg__opt {
   padding: 4px 12px;
   font-family: var(--font-ui);
-  font-size: 12px;
+  font-size: var(--t-label);
   font-weight: 600;
   background: transparent;
   border: 1px solid transparent;
@@ -510,7 +532,7 @@
   margin: 0;
   max-width: 65ch;
   font-family: var(--font-ui);
-  font-size: 13px;
+  font-size: var(--t-body);
   line-height: 1.5;
   color: var(--muted);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.15.0",
+  "version": "1.16.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 thirteen locked style packs with ready-made design tokens — instrument-console, editorial-luxury, workbench, briefing-room, atrium, orchard, field-notes, cyclorama, showroom, blueprint, prism, maquette and scoreboard. 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 thirteen 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). 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.15.0",
+  "version": "1.16.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.15.0
+  version: 1.16.0
 ---
 
 # SHELEG Design

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

@@ -39,18 +39,27 @@ answers *what is this made of*.**
 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-ink` | `#0a0e14` | text **on** the accent — 6.0:1; white on `#3392ff` fails AA |
-| `--accent-glow` | `rgba(51,146,255,0.18)` | the only permitted glow |
-| `--ok` / `--warn` | `#46d39a` / `#e0a030` | status semantics only |
+**This table declares its base**, which until 1.16.0 it did not — and the
+consequence was not cosmetic: `validate_stated_ratios` reads the base out of a
+table header, so with none declared, **not one of this pack's per-token ratios
+was gate-covered.** The library's default dark infrastructure pack was its least
+checked. Every number below is now recomputed from `tokens/instrument-console.css`
+on each run.
+
+| Token | Value | Role | On `--base` |
+|---|---|---|---|
+| `--base` | `#05070a` | page field (near-black) | — |
+| `--surface-1` / `-2` / `-3` | `#0a0e14` / `#10151d` / `#161c26` | ascending raised panels | 1.04 / 1.10 / 1.18 — steps, not contrast |
+| `--hairline` / `-strong` | `#1e2630` / `#2b3542` | panel seams, rules | 1.32 / 1.62 — rules, never text |
+| `--ink` | `#eef2f7` | primary text | **17.94:1** |
+| `--ink-muted` | `#9aa7b6` | secondary text | **8.24:1** |
+| `--ink-faint` | `#5f6b7a` | captions — see Gotchas | 3.72:1 |
+| `--accent` | `#3392ff` | THE electric-blue signal (CTA, links, particles) | **6.43:1** |
+| `--accent-dim` | `#1f5fb0` | pressed signal | 3.19:1 — a fill, not a label |
+| `--accent-bright` | `#6bb3ff` | highlighted signal | **9.14:1** |
+| `--accent-ink` | `#0a0e14` | text **on** the accent — 6.17:1 there; white on `#3392ff` is 3.14 and fails | 1.04 |
+| `--accent-glow` | `rgba(51,146,255,0.18)` | the only permitted glow | — |
+| `--ok` / `--warn` | `#46d39a` / `#e0a030` | status semantics only | **10.61:1** / **8.87:1** |
 
 The particle field, progress rail, and all instruments are tinted with
 `--accent` only — energy per scene changes brightness, never hue.

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

@@ -13,7 +13,7 @@
   --accent: #3392ff;
   --accent-dim: #1f5fb0;
   --accent-bright: #6bb3ff;
-  --accent-ink: #0a0e14; /* text ON the accent — 6.0:1. White on #3392ff fails AA. */
+  --accent-ink: #0a0e14; /* text ON the accent — 6.17:1. White on #3392ff is 3.14 and fails. */
   --accent-glow: rgba(51, 146, 255, 0.18);
   --ok: #46d39a;
   --warn: #e0a030;

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

@@ -34,6 +34,27 @@
   --font-ui: -apple-system, "SF Pro", "Segoe UI", sans-serif;
   --font-data: ui-monospace, "SF Mono", Menlo, monospace;
 
+  /* The scale the pack has always stated in prose, tokenised in 1.16.0. It was
+     prose-only for five releases, which made the craft bar's "no ad-hoc font
+     size anywhere in the diff" unachievable in this pack specifically — its own
+     reference kit wrote twenty raw font-size declarations because there was
+     nothing to reference. No value changed; they were lifted from the pack's
+     Type section, not chosen. */
+  --t-chip: 11px; /* chips, meta */
+  --t-label: 12px; /* uppercase labels, tracked .1em */
+  --t-body: 13px; /* body and dense UI — the workhorse */
+  --t-card: 15px; /* card titles */
+  --t-section: 20px; /* section headings */
+  --t-page: 28px; /* page title */
+
+  /* The 4px grid, likewise stated and not shipped. */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+
   background-color: var(--bg);
   color: var(--ink);
   color-scheme: light; /* the theme is explicit — never let the UA pick */

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

@@ -76,8 +76,14 @@ hue.
 - 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.
+- Compact scale, **and it ships as tokens** (`--t-chip` 11px chips/meta ·
+  `--t-label` 12px labels, uppercase, tracked .1em · `--t-body` 13px body and
+  dense UI · `--t-card` 15px card titles · `--t-section` 20px sections ·
+  `--t-page` 28px page title). It was prose-only until 1.16.0, which made the
+  craft bar's *"no ad-hoc font size anywhere in the diff"* unachievable in this
+  pack — there was nothing to reference, and this pack's own reference kit wrote
+  twenty raw declarations because of it. No value changed in the tokenising.
+- The 4px grid likewise: `--space-1` … `--space-6` = 4 / 8 / 12 / 16 / 24 / 32.
 - Running text ≤65ch; headings `text-wrap: balance`.
 
 ## Texture & surface