sheleg-design-skill 1.23.0 → 1.23.1

package/CHANGELOG.md

@@ -4,6 +4,33 @@ 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.1] - 2026-08-13
+
+Two of the seven answers 1.23.0 shipped told an implementer to do something the same
+release had just described as impossible.
+
+### Fixed
+
+- **`pigeonhole` contradicted the SELF category it shipped beside.** Its new Responsive
+  answer said the labelled row and the FAQ "take `container-type: inline-size` on their
+  wrapper" — but the row's axis and the list's columns are properties of the row and the
+  `<dl>` **themselves**, so neither can query its own width. That is exactly the SELF case
+  the skeleton now defines. The corrected answer is the useful one: both live inside a
+  list the consumer already owns, so **the consumer's list is the container** — a
+  component library may ask for `container-type` on it and may not wrap someone's markup
+  to get it. Descendants inside them (the preview's truncation, the date's visibility)
+  are ordinary CONTAINER cases and need nothing from the consumer.
+- **`showroom` named a wrapper its kit does not ship.** "container-type on the table
+  wrapper" became the **specimen frame**, which is the component that actually holds the
+  table (`Specimen`), so the data row and the column header query something that exists.
+
+### Notes
+
+Found by checking every component named in the seven new answers against the components
+its kit actually ships — a check worth running whenever pack prose starts naming parts.
+Five of the seven were already right; `maquette`'s "agent prompt" is named by the pack and
+absent from the kit, which is a pre-existing pack/kit gap rather than this release's.
+
 ## [1.23.0] - 2026-08-13
 
 A component library that sized itself by the screen, and a contract bullet nobody had

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.23.0",
+  "version": "1.23.1",
   "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.23.0",
+  "version": "1.23.1",
   "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.23.0
+  version: 1.23.1
 ---
 
 # SHELEG Design

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

@@ -328,14 +328,20 @@ 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.
+- **Container queries, and the honest version of the answer.** The rules that matter
+  here are the **labelled row's** axis (chip above the subject rather than beside it) and
+  the **FAQ's** two columns — and both are properties of the row and the list
+  *themselves*, so neither can query its own width: that is the **SELF** case. What
+  makes them container cases anyway is that both are placed inside a list the consumer
+  already owns, so **the consumer's list is the container**: set
+  `container-type: inline-size` on it, and the row and the `<dl>` answer to that box
+  rather than to the screen. A component library may ask for that; it may not wrap
+  someone's markup to get it. Descendants inside those two — the preview's truncation,
+  the date's visibility — are ordinary **CONTAINER** cases and need nothing from the
+  consumer. 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 inside nobody's container, which is why that single `@media` in the token layer is
+  correct as it stands.
 
 ## Motion tokens
 

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

@@ -220,9 +220,9 @@ on iOS.
 - 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
+  cases: the specimen's own table is laid out at whatever width the **specimen frame**
+  gives it, which is not the viewport minus gutters — so the frame is the container
+  (`container-type: inline-size` on it) and the row and header query it. The specimen frame's seven-layer
   shadow is **SELF** — it is a property of the frame itself — and the centred hero is
   **PAGE**.