sheleg-design-skill 1.35.0 → 1.36.0

package/CHANGELOG.md

@@ -4,6 +4,45 @@ 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.36.0] - 2026-08-16
+
+**`awning` shipped as a specification and had never been rendered.** Asked whether the
+design itself had been done, the answer was no: a pack, a token layer and a nine-component
+kit that typechecks, and not one pixel looked at. A page was built in the kit and
+photographed, and it produced three findings the token layer could not — two of them
+defects in the reference that survived the 1.35.0 release precisely because that release
+was read rather than seen.
+
+### Fixed — in `awning`
+
+- **A secondary control's border misses the contrast floor for a control boundary.**
+  `--line-strong` `#d4d4d8` is **1.48:1** on white against WCAG's **3:1** for a UI component
+  boundary — short by half. It matters more here than it would anywhere else, because a
+  secondary button in this system is `transparent` at rest, hover, active *and* disabled: the
+  border is not decoration around the control, it **is** the control. `--shade-40` does not
+  reach the floor either (2.56:1). **New `--control-border`** `#71717a`, 4.83:1, the first
+  step on the ramp that clears it. Found by looking at a "Talk to sales" button beside a
+  black pill and seeing it nearly disappear.
+- **The second field is declared and a page built from the pack will not use it.**
+  `--bg-deep` existed from the first release and the first page rendered ran fifteen sections
+  on pure white without touching it, because nothing forces the alternation and white is the
+  default of everything. A front door in this register is long; a long page on one field
+  reads as one endless scroll. Recorded as a trap with the instruction to alternate by
+  section and to spend the change where the argument changes.
+- **A `Stat`'s label and its sub were the same grey**, so the number read as sandwiched
+  between two equal lines rather than as the thing the block is about. The sub drops to
+  `--ink-faint`; the constraint that comes with it — 4.40:1 on `--bg-deep`, so a Stat on the
+  second field moves its sub back to `--ink-soft` — is written beside it.
+- **A `FeatureRow`'s mono index was top-aligned** against a title set larger, and floated
+  free of the line it belongs to. It takes the title's leading now.
+
+### Note
+
+Gotchas went from six to eight, and the header now says which of them were found by
+rendering rather than by reading. That distinction is the point of this release: the pack
+passed three validators, both `--strict` runs and a typecheck at 1.35.0 with two
+accessibility defects in it, and neither was reachable without building a page.
+
 ## [1.35.0] - 2026-08-15
 
 **The twenty-first pack, and two counts that had been wrong for eight releases.**

package/kits/awning/src/styles.css

@@ -51,6 +51,14 @@
      the lighter one between rows and the heavier one around a control. */
   --line: var(--shade-20); /* 1.27:1 on --bg */
   --line-strong: var(--shade-30); /* 1.48:1 on --bg */
+  /* DERIVED, and it exists because rendering the pack found the reference short.
+     A secondary control here is transparent in every state, so its border IS the
+     control — and WCAG's floor for a UI component boundary is 3:1, which
+     --line-strong misses by half. --shade-40 does not reach it either (2.56:1).
+     --control-border is 4.83:1 on --bg, the first step on the ramp that clears
+     the floor. Use --line-strong for a decorative edge and this for anything a
+     reader is meant to press. See Gotcha 7. */
+  --control-border: var(--shade-50);
 
   /* ── THE accent, and it is black ─────────────────────────────────────────
      Not a stylistic absence — a resolved chain. `--color-component-button-
@@ -232,7 +240,7 @@ strong, b { font-weight: var(--weight-bold); }
 .aw-btn--primary:disabled { background: var(--accent-disabled); color: var(--accent-ink-disabled); cursor: default; }
 
 /* Transparent at every state — the border and the label carry the whole control. */
-.aw-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
+.aw-btn--secondary { background: transparent; color: var(--ink); border-color: var(--control-border); }
 .aw-btn--secondary:hover:not(:disabled) { border-color: var(--accent-hover); }
 .aw-btn--secondary:active:not(:disabled) { border-color: var(--accent-active); color: var(--accent-active); }
 .aw-btn--secondary:disabled { border-color: var(--accent-disabled); color: var(--accent-ink-disabled); cursor: default; }
@@ -303,7 +311,11 @@ strong, b { font-weight: var(--weight-bold); }
   font-weight: var(--weight-bold); color: var(--ink);
   font-variant-numeric: tabular-nums;
 }
-.aw-stat__sub { font-size: var(--fs-b5); line-height: var(--lh-b5); color: var(--ink-soft); }
+/* --ink-faint, not --ink-soft: rendered, the label above and the sub below were
+   the same grey and the number read as sandwiched between two equal lines. This
+   is 4.83:1 on --bg. A Stat placed on --bg-deep must move its sub to --ink-soft,
+   where --ink-faint drops to 4.40:1 (Gotcha 1). */
+.aw-stat__sub { font-size: var(--fs-b5); line-height: var(--lh-b5); color: var(--ink-faint); }
 
 /* ---- ProductFrame: colourless chrome around full-colour content --------- */
 .aw-frame {
@@ -348,6 +360,9 @@ strong, b { font-weight: var(--weight-bold); }
 .aw-feature__index {
   flex: none; min-width: 2.5rem;
   font-family: var(--mono); font-size: var(--fs-b5);
+  /* The title's cap-height, not the row's top — rendered, a top-aligned index
+     floats above a line set at a larger size and reads as unattached. */
+  line-height: var(--lh-t6);
   color: var(--ink-faint);
 }
 .aw-feature__body { display: flex; flex-direction: column; gap: var(--space-xs); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.35.0",
+  "version": "1.36.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-two 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, paperclip and ledger. 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-two 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), ledger (warm cream paper ruled by a hairline at 12% ink and no shadow on any card, radius 15 nested concentrically, an ink primary button and a terracotta accent that never fills a control — it labels, as a 10px monospace uppercase kicker — with a seal on every card stating how its number is known, for the console of a product that answers questions about data: AI analysts, BI surfaces, query workspaces). 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, and awning (a white forecourt where the accent is black and no hue reaches the chrome at all, a pill whose radius is a declared component token, one variable grotesque at 420/550 with no 700, and a single three-layer shadow, for commerce and platform front doors).",
-  "version": "1.35.0",
+  "version": "1.36.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.35.0
+  version: 1.36.0
 ---
 
 # SHELEG Design

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

@@ -68,7 +68,8 @@ file verbatim instead of transcribing this table.
 | `--ink-soft` | `#52525b` | **prose** — the value that holds on both fields | 7.73:1 |
 | `--ink-faint` | `#71717a` | meta and non-text marks — **not prose**, see Gotcha 1 | 4.83:1 |
 | `--line` | `#e4e4e7` | between rows | 1.27:1 |
-| `--line-strong` | `#d4d4d8` | around a control | 1.48:1 |
+| `--line-strong` | `#d4d4d8` | a decorative edge | 1.48:1 |
+| `--control-border` | `#71717a` | **derived** — the boundary of a pressable control | 4.83:1 |
 | `--accent` | `#000000` | every primary action | 21.00:1 |
 | `--accent-ink` | `#ffffff` | text ON the accent | — |
 | `--good` | `#0b6b3a` | **derived** — success on a product surface | 6.61:1 |
@@ -257,19 +258,37 @@ why a copy inherits them.
    lands in the exact moment after a click when the reader is watching hardest.
    The reference ships it as a token, which makes reaching for it easy; keep it
    for something leaving the screen entirely, and prefer `ease-in-out` even then.
-4. **The shade ramp is Tailwind's `zinc`, renamed.** `#f4f4f5`, `#e4e4e7`,
+4. **A secondary control's border misses the floor for a control boundary.**
+   `--line-strong` `#d4d4d8` is **1.48:1** on white, and WCAG's floor for a UI
+   component boundary is **3:1** — so it fails by half. This matters more here
+   than it would in most packs, because a secondary button in this system is
+   `transparent` at rest, hover, active *and* disabled: the border is not
+   decoration around the control, it **is** the control. `--shade-40` does not
+   reach the floor either (2.56:1). `--control-border` `#71717a` is the first
+   step on the ramp that clears it, at 4.83:1. Found by rendering a page in the
+   pack and looking at a "Talk to sales" button beside a black pill, where it
+   nearly disappeared — not by reading the token layer, which is why it survived
+   the first release.
+5. **The second field exists and a page built from this pack will not use it.**
+   `--bg-deep` is declared, and the first page rendered in this pack ran fifteen
+   sections on pure white without touching it — because nothing in the token
+   layer forces the alternation and white is the default of everything. A front
+   door in this register is long and sectioned, and a long page on one field
+   reads as one endless scroll. **Alternate the field by section**, and use the
+   change to mark where the argument changes, not decoratively.
+6. **The shade ramp is Tailwind's `zinc`, renamed.** `#f4f4f5`, `#e4e4e7`,
    `#d4d4d8`, `#a1a1aa`, `#71717a`, `#52525b`, `#3f3f46`, `#18181b` are that
    palette exactly. This is not a criticism — a bought ramp used deliberately,
    with semantic roles layered over it, is a different thing from a bought theme
    used by default. But it matters when someone asks whether the greys are
    "yours": they are chosen, not authored, and a second product on the same ramp
    will look related whether or not you meant it.
-5. **The token layer is three tiers deep and a copy usually flattens it.**
+7. **The token layer is three tiers deep and a copy usually flattens it.**
    `--color-component-button-primary-bg` → `--color-theme-bg-cta` → `#000` is
    three lookups to reach one colour, and it is worth every one of them: the theme
    tier is where a co-brand or a locale swaps in. Flatten the chain when copying
    and the system still renders, having lost the only seam it was built around.
-6. **The delivered CSS is 542 KB and most of it is a utility bundle.** Counting
+8. **The delivered CSS is 542 KB and most of it is a utility bundle.** Counting
    `border-radius` across the whole payload returns nineteen values and counting
    transitions returns twenty-five, which reads as sprawl. It is not: the *system*
    is `--radius-*` (four values plus full), one shadow and three weights, and the

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

@@ -51,6 +51,14 @@
      the lighter one between rows and the heavier one around a control. */
   --line: var(--shade-20); /* 1.27:1 on --bg */
   --line-strong: var(--shade-30); /* 1.48:1 on --bg */
+  /* DERIVED, and it exists because rendering the pack found the reference short.
+     A secondary control here is transparent in every state, so its border IS the
+     control — and WCAG's floor for a UI component boundary is 3:1, which
+     --line-strong misses by half. --shade-40 does not reach it either (2.56:1).
+     --control-border is 4.83:1 on --bg, the first step on the ramp that clears
+     the floor. Use --line-strong for a decorative edge and this for anything a
+     reader is meant to press. See Gotcha 7. */
+  --control-border: var(--shade-50);
 
   /* ── THE accent, and it is black ─────────────────────────────────────────
      Not a stylistic absence — a resolved chain. `--color-component-button-