sheleg-design-skill 1.22.0 → 1.23.0

package/CHANGELOG.md

@@ -4,6 +4,64 @@ 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.23.0] - 2026-08-13
+
+A component library that sized itself by the screen, and a contract bullet nobody had
+answered since it was written.
+
+### Added
+
+- **`validate_pack_container_answer()`** — a widened pack's `## Responsive` section has
+  to say which of its components size against their container. The skeleton has carried
+  that bullet since the contract was widened in **1.5.0**, and **seven of the ten
+  widened packs left it blank**: the contract asked and nothing checked, which is the
+  same dead zone the all-or-nothing heading rule closed. "None, and here is why" is a
+  valid answer — `field-notes` and `cyclorama` were already giving it.
+- **`validate_kit_breakpoints()`** — every width media query in the sixteen kits must
+  either target `:root` alone or carry a declared reason, because a kit ships components
+  a consumer drops into an arbitrary box. It found **seven queries across six kits, and
+  zero `container-type` anywhere**.
+- **Three kinds of breakpoint, in the skeleton**, because only one of them has a
+  container answer: **CONTAINER** (a property on a descendant of a component root),
+  **PAGE** (a value the page owns — a hero's padding, a root token switch), and **SELF**
+  — a property on the element that *establishes* the container, which cannot query
+  itself and has no container answer at all. Five of the seven queries turned out to be
+  SELF or PAGE, which is why "0 of 16 kits use container queries" was a worse
+  description of the problem than it looked.
+- **The distinction the library was missing:** the pack documents a page measured off a
+  reference, so its breakpoints are viewport-shaped; the kit ships components this
+  project authors, so theirs are container-shaped. `field-notes` was right that
+  container queries are "not for the page" and incomplete about the component library
+  shipped beside it.
+- **All seven silent packs now answer**, each from its own component list — the
+  instrument's cell grid, the code frame and the endpoint row, the CLI line and the
+  agent prompt, the labelled row and the FAQ's columns, the install line and the
+  benchmark row, the data row and the column header, the panel and the figure well.
+
+### Fixed
+
+- **`scoreboard`'s ledger now does what its own pack has always specified.** The pack
+  says *"Container queries for the report surface and the ledger: `container-type:
+  inline-size`, because both appear inside columns of different widths on the same page
+  and neither should size against the viewport"* — and the kit was switching on the
+  viewport, so a ledger in a 320px sidebar on a 1440px screen kept its wide columns and
+  crushed its leader. This was not a missing modern feature; it was a kit ignoring its
+  pack.
+- **The breakpoint is derived rather than carried over.** 767px was a statement about
+  phones. The row's own geometry: label 95 + gap 12 + numeral column 80 + gap 12 = 199px
+  of fixed content, plus a minimum leader of `--space-8` so the dotted line still reads
+  as a leader — **231px**, with the 32px named as the one decision it contains.
+
+### Notes
+
+- **Two conversions are held, with the reason at the block.** `blueprint`'s tick and
+  column rule and `datasheet`'s cell grid are genuine CONTAINER cases marked
+  `TODO-CONTAINER B-032`; each needs its breakpoint derived from its own geometry, and
+  carrying 768 or 640 into `@container` would be the same mistake in a newer syntax.
+- The new check's own first draft looked back a fixed 400 characters for its marker and
+  missed a five-line reason whose marker sat at 425 — a check that fails on a longer
+  explanation teaches authors to write shorter ones. It reads the whole comment now.
+
 ## [1.22.0] - 2026-08-13
 
 The palette gate learns two colour forms it had been refusing, and the refusal turns

package/kits/blueprint/src/styles.css

@@ -226,8 +226,20 @@
 .bp-code__copy:hover { color: var(--accent); }
 
 /* Registration marks are a desktop flourish and must not become touch targets. */
+/* SELF — .bp-grid's background-size is a property of the element that would
+   establish the container, and a container cannot query itself. Halving the grid
+   step needs a wrapper this kit has no business adding to a consumer's markup, so
+   it stays a viewport query by limitation rather than by preference. */
 @media (max-width: 768px) {
-  .bp-reg__tick { display: none; }
   .bp-grid { background-size: calc(var(--grid-step) / 2) calc(var(--grid-step) / 2); }
+}
+
+/* TODO-CONTAINER B-032 — the tick and the column rule are descendants of the panel
+   and the column, so both have a real container answer: container-type on those two
+   roots and @container here. Held out of 1.23.0 because each needs its breakpoint
+   derived from the component's own geometry the way the scoreboard ledger's was, and
+   a number carried over from the viewport would be the same mistake in a new syntax. */
+@media (max-width: 768px) {
+  .bp-reg__tick { display: none; }
   .bp-column__rule { display: none; }
 }

package/kits/datasheet/src/styles.css

@@ -566,12 +566,24 @@
   border-bottom: 1px dashed var(--rule-dash);
 }
 
+/* SELF for the guides, PAGE for the heading. .ds-guides--ruled sets a border on the
+   element that would establish its own container. The --1 step is the page title's
+   type, and the pack states it per viewport in its Responsive table, so it answers to
+   the page rather than to a box. */
 @media (max-width: 640px) {
   .ds-guides--ruled { border-bottom-style: none; }
-  .ds-instrument__grid { grid-template-columns: 1fr; }
   .ds-heading--1 {
     font-size: 32px;
     line-height: 1.25;
     letter-spacing: -0.021em;
   }
 }
+
+/* TODO-CONTAINER B-032 — the instrument's cell grid is a descendant of .ds-instrument,
+   and the pack's own Responsive section now says it must collapse when its own box is
+   narrow rather than when the phone is: the instrument is the component a reader
+   embeds. Held for the same reason as blueprint's: the breakpoint has to come from the
+   cell grid's minimum comfortable column, not from 640. */
+@media (max-width: 640px) {
+  .ds-instrument__grid { grid-template-columns: 1fr; }
+}

package/kits/field-notes/src/styles.css

@@ -702,6 +702,8 @@
   opacity: var(--grain-opacity);
   pointer-events: none;
 }
+/* PAGE — a hero's padding is the page's opening viewport, which is the one measure
+   that is genuinely about the screen. */
 @media (min-width: 64rem) {
   .fn-hero {
     padding: var(--s7);
@@ -813,6 +815,8 @@
   background-position: left top, left top, right top, right top, left bottom,
     left bottom, right bottom, right bottom;
 }
+/* SELF — .fn-crop is the crop mark itself, so the property is on the element that
+   would establish the container. A crop mark cannot query its own presence. */
 @media (min-width: 48rem) {
   .fn-crop {
     display: block;

package/kits/maquette/src/styles.css

@@ -245,6 +245,9 @@
 
 /* The offset shortens on small screens: 24px of displacement on a 320px drawing
    reads as a printing error. Labels never scale. */
+/* SELF — the drop-shadow is a property of .mq-block, which is the element that would
+   establish the container. Wrapping every model block to let it query itself would
+   change a consumer's markup, which is not the kit's business. */
 @media (max-width: 768px) {
   .mq-block { filter: drop-shadow(var(--shadow-block-sm)); }
 }

package/kits/scoreboard/src/styles.css

@@ -307,7 +307,7 @@
 .sb-tick-heading__tick { flex: 0 0 auto; width: 3px; height: 18px; border-radius: var(--radius-pill); background-color: var(--accent); }
 
 /* The ledger. One per page, and every row is a record rather than a control. */
-.sb-ledger { display: block; background-color: var(--bg); color: var(--ink);
+.sb-ledger { container-type: inline-size; display: block; background-color: var(--bg); color: var(--ink);
   border-radius: var(--radius-md); padding: var(--space-8) var(--space-6); }
 .sb-ledger__label { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4);
   font-size: var(--t-label); font-weight: var(--weight-label); text-transform: uppercase;
@@ -342,7 +342,23 @@
 .sb-status--on-panel.sb-status--danger { color: var(--danger-on-dark); }
 .sb-status--on-panel.sb-status--info { color: var(--info-on-dark); }
 
-@media (max-width: 767px) {
+/* The pack has specified this since it shipped -- "Container queries for the report
+   surface and the ledger: container-type: inline-size, because both appear inside
+   columns of different widths on the same page and neither should size against the
+   viewport" -- and the kit was still switching on the VIEWPORT, so a ledger in a
+   320px sidebar on a 1440px screen kept its wide columns and crushed its leader.
+
+   The breakpoint is derived from the row's own geometry rather than carried over
+   from the old 767px, which was a statement about phones and not about this box:
+   label 95px + gap 12px + numeral column 80px + gap 12px = 199px of fixed content,
+   plus a minimum leader of --space-8 (32px) so the dotted line still reads as a
+   leader rather than a dash. 231px. The 32px is this kit's one decision here; the
+   199px is arithmetic on the pack's own tokens.
+
+   Below it the columns take the narrow pair, which the pack describes as a glyph
+   budget rather than a width: 70px holds four glyphs of Press Start 2P at
+   --t-numeral where 80px holds five. */
+@container (max-width: 231px) {
   .sb-row__label { width: 75px; }
   .sb-row__value { width: 70px; }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.22.0",
+  "version": "1.23.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 sixteen 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 and pigeonhole. 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 sixteen 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). 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.22.0",
+  "version": "1.23.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.22.0
+  version: 1.23.0
 ---
 
 # SHELEG Design

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

@@ -143,7 +143,23 @@ How the pack collapses. Not "it is responsive" — the actual rules.
 
 - **Fluid type** — the `clamp()` values, with the slope shown, not guessed.
 - **Container queries** — which components size against their container
-  (`container-type: inline-size`) rather than the viewport.
+  (`container-type: inline-size`) rather than the viewport. **This bullet is not
+  optional and "none" is a valid answer**: it was added with the widened contract
+  and seven of the ten widened packs left it blank until 1.23.0, which is why
+  `validate_pack_container_answer()` now asks for it. Sort every breakpoint the
+  pack owns into three kinds, because only the first has a container answer:
+
+  | Kind | What it is | Where it goes |
+  |---|---|---|
+  | **CONTAINER** | a property on a *descendant* of a component root — a row's column widths, a grid's track count, a decorative tick | `container-type: inline-size` on the root, `@container` on the descendant |
+  | **PAGE** | a value the page owns — a hero's padding, a nav's shape, a root token switch | a viewport `@media`, and it stays there |
+  | **SELF** | a property on the element that *establishes* the container — a block's own shadow, a background-size on the grid element itself | **no container answer exists.** A container cannot query itself, and adding a wrapper to a consumer's markup is not the kit's business. Keep the viewport query and mark it `SELF` with the reason |
+
+  The distinction the library was missing: **the pack documents a page measured off
+  a reference, so its breakpoints are viewport-shaped; the kit ships components this
+  project authors, so theirs are container-shaped.** `field-notes` was right that
+  container queries are "not for the page" and incomplete about the component
+  library shipped beside it.
 - **Collapse** — what happens to asymmetry, overlap, rotation and negative
   margins below the pack's breakpoint. Overlapping elements that survive to
   mobile become touch-target conflicts.

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

@@ -242,6 +242,14 @@ Measured off the reference unless a row says **pack decision**.
   — at 8px they become touch-target confetti — and stay only on framed figures.
 - Buttons go full-width and stack below 480px. Full-height sections use `dvh`.
 
+- **Container queries.** The **panel** and the **figure well** are what a consumer
+  drops into an arbitrary column, so both take `container-type: inline-size`, and the
+  registration ticks and the column rule inside them answer to that box rather than to
+  the screen — a drawing sheet in a 400px sidebar has no room for ticks whatever the
+  viewport says. The 32px grid's own `background-size` is **SELF**: it sits on the
+  element that establishes the container, so it cannot query its own width, and it
+  keeps a viewport query.
+
 ## Motion tokens
 
 - **One curve, `cubic-bezier(0.4, 0, 0.2, 1)`**, and three durations:

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

@@ -337,6 +337,12 @@ Measured breakpoints, ordered by how much of the stylesheet each carries:
   guides on a 390px screen is noise.
 - **Viewport** — use `100dvh` for any full-height section, never the static unit.
 
+- **Container queries.** The **instrument's cell grid** is the one that must: it
+  collapses to a single column when *its own* box is narrow, not when the phone is,
+  because the instrument is exactly the component a reader embeds in a sidebar. Cards
+  follow the same rule. The **navigation** spans the page and stays viewport, and the
+  `--1` heading step is page type rather than a component's — **PAGE**, both of them.
+
 ## Motion tokens
 
 One ease, one measured base duration, one measured stagger.

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

@@ -422,6 +422,12 @@ Measured at the reference's own breakpoints (Tailwind v4: `sm` 40rem, `lg` 64rem
   reflows and never shrinks its type — a wrapped code sample is a wrong code
   sample.
 
+- **Container queries.** Two components own their own width: the **code frame**,
+  which scrolls rather than reflows and must decide that from its box, and the
+  **endpoint row**, whose method chip and path share a line only while there is room
+  for both. Both take `container-type: inline-size`. The 576px argument column is a
+  page measure — **PAGE** — and so is the label chip's position in the flow.
+
 ## Signature element
 
 **The coral label chip that is a real `<h2>`.**

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

@@ -203,6 +203,12 @@ Measured off the reference unless a row says **pack decision**.
   24px displacement on a 320px-wide drawing reads as a printing error.
 - Full-height sections use `dvh`; bare `100vh` is banned.
 
+- **Container queries.** The **CLI line** and the **agent prompt** wrap by their own
+  width, so they answer to their container. The **model block's** drop-shadow is
+  **SELF**: the shadow is a property of the block that would establish the container,
+  and a container cannot query itself — so that one breakpoint stays a viewport query,
+  by limitation rather than by preference.
+
 ## Motion tokens
 
 - **One curve, `cubic-bezier(0.4, 0, 0.2, 1)`.** Durations `--dur-fast .15s`,

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

@@ -328,6 +328,15 @@ What stacks below 768px: the two-column card grids collapse to one, the FAQ's tw
 columns to one, the three step cards to a vertical run, and the hero's two buttons
 to full width. The marquee keeps running at the same 100s.
 
+- **Container queries.** The **labelled row** is the container case, and it is the
+  reason the category chip sits above the subject rather than beside it: a row in a
+  320px sidebar needs that stacking whatever the viewport is. The FAQ's two columns are
+  the same kind of decision — its `≥1024px` rule is really about the list's own width.
+  Both take `container-type: inline-size` on their wrapper. The **nav** and the **logo
+  marquee** are **PAGE**. And the display's line-height switch is a **root token**, so
+  it has no container answer at all — `:root` is not inside anyone's container, which
+  is why that single `@media` in the token layer is correct as it stands.
+
 ## Motion tokens
 
 | Token | Value | Where it was measured |

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

@@ -193,6 +193,12 @@ Measured off the reference unless a row says **pack decision**.
   thing to be compromised.
 - Full-height sections use `dvh`; bare `100vh` is banned.
 
+- **Container queries.** The **install line** is the container case that matters — a
+  command must not wrap mid-flag, and whether it fits is a fact about its box, not about
+  the screen — with the **benchmark row** beside it for the same reason. Both take
+  `container-type: inline-size`. The iridescent wash and its hard edge are **PAGE**: the
+  field is the page, and a wash that recalculated per component would band.
+
 ## Motion tokens
 
 - **One curve, `cubic-bezier(0.4, 0, 0.2, 1)`**, two durations: `--dur-fast .2s`

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

@@ -219,6 +219,13 @@ on iOS.
   `480px`.
 - Full-height sections use `dvh`; bare `100vh` is banned.
 
+- **Container queries.** The **data row** and the **column header** are the container
+  cases: the specimen's own table is laid out at whatever width the specimen frame
+  gives it, which is not the viewport minus gutters. Both take
+  `container-type: inline-size` on the table wrapper. The specimen frame's seven-layer
+  shadow is **SELF** — it is a property of the frame itself — and the centred hero is
+  **PAGE**.
+
 ## Motion tokens
 
 - **One curve, `cubic-bezier(0.2, 0, 0, 1)`**, for every state change and reveal;