sheleg-design-skill 1.40.0 → 1.41.0

package/CHANGELOG.md

@@ -4,6 +4,39 @@ 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.41.0] - 2026-08-17
+
+**A style pack is a token layer and a set of rules. It does not ship a button** — and until
+now nothing in this pack said what draws the controls. Twenty-seven packs, no component-layer
+doctrine at all: no `shadcn`, no Radix, no headless kit named anywhere in the bundle.
+
+**The default is `shadcn/ui`, asked once per project.** Same discipline as
+`ux-foundation`'s Figma question — once, when design work starts, never per screen — and the
+answer is recorded beside the style pack. Default **yes**; a project that already has a
+component layer has already answered, and migrating one on taste is not a design decision.
+
+### Why it composes rather than competes, and the trap in the seam
+
+`shadcn/ui` is not a theme. It is unstyled primitives plus Tailwind, themed through CSS custom
+properties, so it **consumes** a token layer instead of bringing its own look. The pack decides
+what `--bg` means; the kit decides what a `DropdownMenu` is.
+
+**The two vocabularies are different, and that is the part worth writing down.** The packs
+resolve `--bg` and `--ink` and little else by those names; `shadcn/ui` expects `--background`,
+`--foreground`, `--primary`, `--muted`. Map them explicitly in the pack's token file — an
+undefined custom property does not error, it silently falls back, which is the same failure
+the chart rule already exists for. A kit mounted without the mapping renders in its starter
+palette and looks like nobody chose anything.
+
+**The boundary is the pack's own split.** Product UI — dashboards, admin panels, internal
+tools, chat and agent interfaces — yes, by default. A scroll-driven landing page — no: there
+are no controls to reuse, the work is bespoke scroll and WebGL, and reaching for a component
+kit is how a hero ends up looking like a settings screen.
+
+The section decides *whether* and *against which tokens*; the `shadcn` and
+`migrate-radix-to-base` skills do the work and trigger on their own words, so their component
+docs are not restated here.
+
 ## [1.40.0] - 2026-08-17
 
 **A reference sweep has been in this pack since the Lazyweb bridge and could never be asked

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.40.0",
+  "version": "1.41.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-seven 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, ledger, router, daylight, notation, almanac and vitrine. 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-seven 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), router (a near-white field with a trace of blue and white cards standing on it, hairline seams instead of shadows anywhere, body at 14px and weight 450, and a status triplet in which the colour you paint with is not the colour you write with, for product consoles and the landing pages that have to look like them), daylight (a cool near-white portal field with generous radii and one very large soft shadow spent on a single object per screen, for client portals), notation (a near-white page drawn entirely in hairlines with a light serif over a monospace, no bold anywhere and an ink primary, for developer products sold on restraint), almanac (oatmeal paper with 2px seams and no 1px anywhere, a display set below a line-height of one, and mono tags notched through drawn boxes, for pages that assert a category), vitrine (a white hairline field with a serif display, an ink primary and one framed record carrying the evidence, for the front door of a product sold on trust). 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.40.0",
+  "version": "1.41.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 deciding how something LOOKS or MOVES. Cinematic scroll-driven landing pages and heroes — particle/WebGL backgrounds, scroll-linked animation, parallax — or when one feels busy or its motion drifts. Product UI through its style packs — dashboards, admin panels, internal tools, mobile screens, chat and agent interfaces. Design tokens, light/dark themes, palettes and colours, typography and fonts. Triggers - "design a landing" / "дизайн лендинга", "build a landing page" / "сделай лендинг", "scroll animation" / "скролл-анимация", "dashboard style" / "стиль дашборда", "design tokens" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables" / "переменные фигмы, фигма в код", "mobile screen" / "мобильный экран", "palette" / "палитра", "colors" / "цвета", "typography" / "типографика", "font" / "шрифт", "how it looks" / "выглядит", "make it prettier" / "красиво, красивее", "visual reference" / "визуальные референсы".
 license: MIT
 metadata:
-  version: 1.40.0
+  version: 1.41.0
 ---
 
 # SHELEG Design
@@ -233,6 +233,45 @@ confidence, citation, correction and the shape of a refusal are in
 [`AI_PRODUCT_PATTERNS.md`](./AI_PRODUCT_PATTERNS.md), which is their single home.
 Load it when the product has a model in it.
 
+## The component layer — the pack decides the tokens, the kit renders them
+
+A style pack is a **token layer and a set of rules**. It does not ship a button.
+Every product UI therefore needs a second decision the packs deliberately do not
+make: which component kit draws the controls.
+
+**The default is `shadcn/ui`, and the question is asked once per project.** Ask it
+the way `ux-foundation` asks the Figma question — once, at the point design work
+starts, never per screen — and record the answer wherever the style pack is
+recorded: with `super-ux` installed that is the screens record's *Design system*
+line, and without it, whatever file names the pack. Default **yes**; a project
+that already has a component layer has already answered, and migrating one on
+taste is not a design decision.
+
+**Why it composes rather than competes.** `shadcn/ui` is not a theme. It is
+unstyled primitives plus Tailwind, themed through CSS custom properties — so it
+*consumes* a token layer instead of bringing its own look. That is exactly the
+seam a pack is: the pack decides what `--bg` means, the kit decides what a
+`DropdownMenu` is.
+
+**The two vocabularies are different, and this is the trap.** The packs resolve
+`--bg` and `--ink` everywhere and little else by that name; `shadcn/ui` expects
+`--background`, `--foreground`, `--primary`, `--muted` and the rest of its own
+contract. **Map them explicitly in the pack's token file** — an undefined custom
+property does not error, it silently falls back, which is the same failure the
+chart rule above exists for. A kit mounted without that mapping renders in its
+starter palette and looks like nobody chose anything.
+
+**The boundary — product UI, not the cinematic surface.** Dashboards, admin
+panels, internal tools, chat and agent interfaces: yes, and the answer is yes by
+default. A scroll-driven landing page: **no** — there are no controls to reuse
+there, the work is bespoke scroll and WebGL, and reaching for a component kit is
+how a hero ends up looking like a settings screen.
+
+**Who does the work.** This section decides *whether* and *against which tokens*.
+The `shadcn` skill does the adding, searching and composing, and
+`migrate-radix-to-base` handles the Radix→Base move; both are installed and
+trigger on their own words. Do not restate their component docs here.
+
 ## Optional — Figma (design ↔ code)
 
 Touching a Figma file — publishing the pack as variables, or building from a