sheleg-design-skill 1.54.0 → 1.55.0

package/CHANGELOG.md

@@ -6,6 +6,135 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.55.0] - 2026-08-30
+
+### The thirty-ninth pack — somebody else's question, on a sheet that never stops being ruled
+
+`chorus`, extracted from `crowdreply.io`. Warm off-white paper under a construction
+grid that never switches off — two 1px verticals at `x=162` and `x=1278` of 1440,
+crossed by horizontals carrying a small plus at each intersection, 63 rule elements in
+the census, and the same grid continued across the dark band. The set piece is a
+**cut-corner bubble**: 24px on three corners and 0 on the top right, measured on all 24
+instances of one object, holding a stranger's question in the display face.
+
+Named for the register per ADR-0001, with `switchboard`, `soapbox`, `quorum` and
+`earshot` weighed and rejected — the record is in the ADR.
+
+**Measured, not restated.** The site is Framer, and the token dump and the render
+disagree: of its 52 declared `--token-<uuid>` properties, 15 are referenced once and
+reach no painted surface, so an area-weighted census over all 2,439 elements of an
+11,750px page decided every value. Read through CDP at 1440×900, an emulated
+768×1024×2 and an emulated 390×844×2. Ratios computed by importing this repository's
+own palette gate.
+
+**Six corrections, each a number the reference produces and the pack refuses.**
+
+- The primary CTA fails AA and no size saves it — `#ffffff` on `#f96f4b` is **2.84:1**,
+  under the 3:1 large floor too. The fix keeps the brand hue exactly and changes the
+  label: `#1b181c` on `#f96f4b` is **6.20:1**. Darkening the coral was rejected.
+- The coral cannot be a word: `#f96f4b` on `#fbfaf9` is **2.72:1**, the link token
+  `#ff5d30` is **2.94:1**. `--coral-ink` at 4.59:1 is derived at hue 35.7°.
+- A card is separated from the field by **1.04:1** and nothing else — no border and no
+  shadow on any card over 250×150px in the census. Every card gains a 1px `--line`.
+- **Zero `:focus` rules and zero `:focus-visible` rules** across 274,355 bytes, plus two
+  `outline: none` declarations. The whole mechanism is the pack's, including the
+  dark-surface re-declaration: the ink ring is 1.00:1 against `--slab`.
+- The muted step does not read: `#8a8692` on `#fbfaf9` is **3.41:1** at 14px/400, 38
+  instances.
+- **Zero reduced-motion rules against 383 script-set inline transforms** and 1,057
+  script-set opacities. The media query the pack adds cannot reach them, so the JS half
+  of the contract is stated in the pack rather than implied.
+
+Two more facts recorded because they will surprise an implementer: the controls are
+36px and miss the 44px tap floor, so the kit pads the hit area rather than resizing the
+button; and the declared amber `#ffc300` paints nothing at any of the three widths,
+which is why this pack has three status roles rather than four and says so.
+
+**The mint is dark-only, and that is a constraint rather than an omission.** `#36ff94`
+is 13.31:1 in a well and reaches AA on paper only at near-black, which is a different
+colour rather than a step — so the light ladder is a separate answer, not a
+translation.
+
+### Also in this release
+
+- Reciprocal forks: `chorus` ↔ `surveyor` (the AI-visibility collision — a reading
+  against a conversation) and `chorus` ↔ `deskmate` (the speech-bubble collision —
+  whose bubble it is).
+- `kits/chorus`: the six-name spine plus `Bubble`, `GridFrame`, `Slab`, `Well`,
+  `Delta`, `NavPill`, `Sweep`, `Field`, `Empty`, `Skeleton`, `Capsule`. Rendered at
+  1440 / 768 / 390 and its computed values read back against the pack's claims before
+  the tag; the log is in `docs/evidence/plans/2026-08-30-chorus-pack-acceptance.md`.
+- The kit's button carries no border on any variant: the reference's control is 36px
+  with 8px/16px padding and no edge, and a 1px border measured 38px. The ghost
+  variant's line is an inset ring instead, so no variant shifts when it swaps.
+- Counted claims moved 38 → 39 across eleven files, and the widened-contract remainder
+  moved 32 → 33 — the number that had been stale in two consecutive releases.
+- `SURFACE_COMPOSITION.md`: `chorus` joins the status map, and the accent-role
+  paragraph gains the fourth pack that names its accent itself (`--coral`).
+
+### Shipped with a stated debt
+
+Scenario **T37** (`chorus` against `surveyor`, with its negative branch) is **written,
+not yet run** — the filing session was instructed not to spawn subagents, so the two
+blind branches could not execute before the tag. Per standing instruction 3 the debt
+ships in the same commit as the artifact and is on the board. The render check behind
+REQ-8 is *not* part of that debt: it ran in full.
+
+## [1.54.1] - 2026-08-29
+
+### The installer refuses the shadow it documents
+
+Both installers write a plain skill copy on request, and on a machine where
+`sheleg-design` is installed as a Claude Code plugin, a write to that home's
+`~/.claude/skills/sheleg-design` is a copy that shadows the plugin and serves
+this frozen version forever. Neither installer checked the plugin channel at
+all, and CI tested a fresh HOME only, so the plugin-present case had never run
+anywhere. Canon: make-skill v0.25.0, `references/distribution.md` §"The
+installer must refuse the shadow it documents"; family audit SHD-07/UM-03.
+
+### Added
+
+- `bin/cli.js` and `install.sh` now consult the **target home's**
+  `~/.claude/plugins/installed_plugins.json` before any write to that home's
+  `~/.claude/skills/sheleg-design`, and refuse with **exit 3** when the plugin
+  channel owns the skill. The refusal names the real spec read from the JSON
+  (`sheleg-design@<marketplace>` — the marketplace name differs from the
+  plugin name here, and a remedy that guesses it sends the operator to a
+  marketplace that does not exist), prints the plugin-channel remedy
+  (`claude plugin marketplace update` + `claude plugin update <spec>`, plus
+  the family launcher line), and offers `--force` as the deliberate override.
+  The `plugins/marketplaces/` directory is read only as the fallback signal —
+  it under-reports (a `directory`-sourced marketplace has no dir there), which
+  is the fail-open class the canon names. A missing or unparsable JSON reads
+  as "no plugin": fail open, never crash. Only the Claude Code channel is
+  gated — `.cursor/` and every other agent's install are untouched, and a
+  project-level `.claude/` falls open naturally because a project holds no
+  plugin registry.
+- `install.sh` accepts `--force` (the override for the gate above) and refuses
+  unknown flags with exit 2 instead of treating them as a target directory.
+- `test/installer_test.js` — thirteen cases against throwaway HOMEs, wired
+  into `npm test` and CI: plugin-present (exit 3 + remedy + nothing written,
+  all three asserted), the differently-named marketplace spec carried into the
+  remedy, `--force` installing, corrupt JSON installing, a prefix-collider
+  (`sheleg-design-extra@x`) not falsely refused, marketplaces-dir-only still
+  refusing, fresh HOME still installing, the `.cursor` channel untouched by
+  the gate, and the install.sh mirrors of the same. Watched failing first: run
+  against the pre-fix installers, 7 cases red.
+
+### Changed
+
+- Both installers now end a successful install by saying how the next version
+  arrives (`npx sheleg-design-skill@latest --force`, or the family launcher) —
+  an installer that never mentions updates has still chosen an update model:
+  never.
+- `bin/cli.js --help` documents the exit-code contract, including the new
+  exit 3.
+- CONTRIBUTING: release tags must be **annotated** (`git tag -a`) — v1.53.0
+  and v1.54.0 were lightweight, and `git submodule status` describes a pinned
+  commit with `git describe`, which ignores lightweight tags, so the family
+  umbrella misreported the member's version (SHD-07/UM-03). Applies from this
+  release forward; the old tags are not re-cut.
+
 ## [1.54.0] - 2026-08-29
 
 ### The thirty-eighth pack — the terrain is mapped

package/README.md

@@ -31,7 +31,7 @@ problem — invented colors, six accent hues, dark mode retrofitted later.
 
 This skill is the taste layer. It gives a coding agent **one motion
 methodology** for cinematic, scroll-driven pages, **a motion doctrine** that
-decides whether to animate before it decides how, and **thirty-eight locked style
+decides whether to animate before it decides how, and **thirty-nine locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -78,6 +78,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `deskmate` | a warm beige working day lit from **one source above the top edge** — every gradient origin in the reference sits at or above `y=0` — where a single four-stop ramp (peach, lilac, violet, deep navy) washes the field, fills a panel and fills one word of a heading, and everything a hand touches is a 56px pill against 32px slabs | **products sold as a colleague rather than a tool** — AI employees and chat-native agents, assistants living in Slack or Teams, delegation and approval surfaces (standalone) |
 | `test-drive` | warm paper and white cards where **the live product runs inside drawn browser chrome** — traffic-light dots, a real address, the engine on — one coral in two tokens (the brand hue lights, fills and blinks; a darker step carries every body-size word), every control lit by a four-layer shadow in its own hue, a handwritten face and a yellow marker annotating from the margin | **self-serve SaaS sold by handing over the running product** — analytics, dashboards, developer tools with a visible console, indie SaaS (standalone) |
 | `surveyor` | peach paper where **an unseen terrain is mapped** — fine contour lines as the one texture, flat white and tinted cards with no shadow anywhere, a teal whose text-bearing steps are the reference's own hover ladder, a pink that answers but may not speak, and the product appearing only as flat portraits | **visibility, monitoring and benchmark tools** — AI-search and SEO trackers, share-of-voice and brand-listening platforms sold to marketing teams (standalone) |
+| `chorus` | warm off-white paper under **a construction grid that never switches off** — two 1px verticals crossed by horizontals with a small plus at every intersection, continued across the dark band — where the set piece is **somebody else's question** in a cut-corner bubble, 24px on three corners and 0 on the top right, set in the display face; white cards with a hairline and no shadow, near-black slabs cut 30px into the sheet, one coral that fills but may never be a word | **AI-search visibility, brand monitoring and community marketing** — answer-engine and share-of-voice trackers, social listening, review and reputation tools whose proof is other people's conversations (standalone) |
 | `outrank` | white field with one violet that carries text in both directions, a 5px light ring standing in for a button shadow, and two type families split by how long a thing is read | SEO and growth SaaS, agent-run back-office — the pack for a product that ships a landing and a dashboard at once |
 | `orchard` | warm oat field of rounded slabs, sage brand + one candy-orange action, rounded geometric display, soft-3D pills built from inset light | friendly consumer biotech, DTC wellness, testing kits & supplements |
 | `field-notes` | warm green-cast paper ruled by hairlines, one rust accent, a hero that dissolves into the page instead of ending, numbered mono eyebrows, crop marks, colour that encodes how a claim is known | open-source & developer tools sold on auditability — code intelligence, provenance, evals, agent memory |
@@ -178,7 +179,7 @@ skills.
 | `DESIGN_SYNC_BRIDGE.md` | The Claude Design contract: what a pack sends to claude.ai/design and in what shape, the rule for each of the four reference types, and the border motion does not cross |
 | `FIGMA_BRIDGE.md` | The design↔code contract: how a pack's tokens map onto Figma variable collections and modes, how to implement a design without importing raw values, and what cannot cross the border |
 | `AI_PRODUCT_PATTERNS.md` | The surfaces a model drives: the five states of a call, streaming instead of spinners, latency, provenance and uncertainty, agent confirmations, and the bans that keep it honest |
-| `styles/*.md` | The thirty-eight style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The thirty-nine style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
 | `styles/tokens/*.css` | The ready-made token layer per pack, copied verbatim instead of transcribed (`workbench` and `field-notes` each ship a light `:root` plus a `data-theme="dark"` twin) |
 | `styles/STYLE_PACK_TEMPLATE.md` | The pack contract as a skeleton, so a new style is authored against the same headings rather than improvised |
 
@@ -249,7 +250,7 @@ cd ./ds-workbench && npm install && npm run build
 then `/design-sync` in that directory, from Claude Code. Three layers cross: the
 pack's **bans** as the design system's own README, `styles.css` built from
 `tokens/<pack>.css` verbatim, and the components — a six-name spine that is
-identical in all thirty-eight kits, so switching packs swaps identity rather than API,
+identical in all thirty-nine kits, so switching packs swaps identity rather than API,
 plus each pack's signature parts. **Motion does not cross**, exactly as it does
 not cross into Figma: a kit is the static half of a pack, and saying so is what
 stops an agent inventing motion to fill the silence.
@@ -299,7 +300,7 @@ a pack's four widened sections used to make two gates *quieter* and still green.
 One honest limit: the npx installer is checked by asserting its runtime bundle
 walker exists, not by reading a file list — it has none by design. What proves
 it ships the right files is CI, which installs the bundle through **both**
-installers and `diff -r`s the result against the source, then builds all thirty-eight
+installers and `diff -r`s the result against the source, then builds all thirty-nine
 kits.
 
 `test/scenarios.md` (T1–T34) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -225,6 +225,13 @@ ${c("bold", "Default")}
   Auto-detects: uses .cursor/ if present, else .claude/ if present,
   otherwise creates .cursor/skills/${SKILL_SLUG}/.
 
+${c("bold", "Exit codes")}
+  0 installed or skipped    2 usage error
+  1 packaging bug, or       3 refused: the sheleg-design PLUGIN is installed
+    overwrite refused         in the target home — a plain copy in
+                              ~/.claude/skills would shadow it and serve this
+                              frozen version forever (--force overrides)
+
 ${c("bold", "What it installs")}
   SKILL.md             the agent-facing skill (discovery + principles)
   SHELEG_DESIGN.md     the full reference (architecture, recipes, why it works)
@@ -234,7 +241,7 @@ ${c("bold", "What it installs")}
   DESIGN_SYNC_BRIDGE.md   the Claude Design contract (what a pack sends, and
                        what does not cross)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              thirty-eight style packs — instrument-console (dark console),
+  styles/              thirty-nine style packs — instrument-console (dark console),
                        editorial-luxury (warm editorial), workbench (light/dark
                        product UI), briefing-room (dark 16:9 presentation deck),
                        atrium (warm cream consumer health), patchbay (dark live
@@ -258,6 +265,10 @@ ${c("bold", "What it installs")}
                        contour lines, flat shadowless cards, a teal that
                        states and a pink that answers, and the product
                        shown only as portraits),
+                       chorus (warm paper under a crosshair grid, a
+                       cut-corner bubble carrying somebody else's
+                       question, near-black slabs cut into the sheet, one
+                       coral that fills but never writes),
                        babylove (white +
                           one orange, seven tokens over Tailwind defaults),
                           outrank (white +
@@ -328,6 +339,112 @@ function resolveTargetDir(opts, cwd) {
   return path.join(cwd, ".cursor", "skills", SKILL_SLUG);
 }
 
+// Exit codes are the contract: 0 installed or skipped, 1 packaging bug or
+// overwrite refusal, 2 usage error, 3 refused — the plugin channel owns the
+// target home's Claude Code install (--force overrides).
+const EXIT_PLUGIN_PRESENT = 3;
+
+/**
+ * The home whose Claude Code channel this write would land in, or null.
+ *
+ * Only the Claude Code channel is gated: a write to `<H>/.claude/skills/
+ * sheleg-design` is the shape that can shadow a plugin installed in `<H>`.
+ * `.cursor/` and every other agent's skill directory have no plugin channel,
+ * so installs there are untouched by the check. A project-level `.claude/`
+ * matches this shape too, and falls open naturally: a project holds no
+ * `plugins/installed_plugins.json`, so the gate reads "no plugin" and the
+ * install proceeds.
+ */
+function claudeHomeOf(targetDir) {
+  const parts = path.resolve(targetDir).split(path.sep);
+  const tail = parts.slice(-3).join("/");
+  if (tail !== `.claude/skills/${SKILL_SLUG}`) return null;
+  return parts.slice(0, -3).join(path.sep) || path.sep;
+}
+
+/**
+ * The plugin spec (`<name>@<marketplace>`) installed for sheleg-design in
+ * this home, or null.
+ *
+ * `installed_plugins.json` is the record of what is actually installed. The
+ * `plugins/marketplaces/<name>` directory under-reports: a marketplace added
+ * from a local `directory` source has no dir there at all, and plugin names
+ * differ from marketplace names — this very plugin is `sheleg-design` shipped
+ * from the `sheleg-design-skill` marketplace — so a check keyed on the dir
+ * alone stays green while the shadow lands. Absence and corruption both read
+ * as "no plugin": the fresh HOME is the common case, and an installer that
+ * crashes on a parse error refuses the machines that need it most.
+ */
+function installedPluginSpec(home) {
+  try {
+    const raw = fs.readFileSync(
+      path.join(home, ".claude", "plugins", "installed_plugins.json"),
+      "utf8",
+    );
+    const parsed = JSON.parse(raw);
+    const plugins =
+      parsed &&
+      typeof parsed === "object" &&
+      parsed.plugins &&
+      typeof parsed.plugins === "object"
+        ? parsed.plugins
+        : parsed;
+    if (!plugins || typeof plugins !== "object") return null;
+    for (const spec of Object.keys(plugins)) {
+      if (spec === SKILL_SLUG) return `${SKILL_SLUG}@${SKILL_SLUG}`;
+      if (spec.startsWith(SKILL_SLUG + "@")) return spec;
+    }
+  } catch {
+    // missing or corrupt = no plugin — fail open on absence, never crash
+  }
+  return null;
+}
+
+/**
+ * One channel per agent. A plain `<H>/.claude/skills/sheleg-design` beside an
+ * installed plugin is two listings of the same skill, and the stale copy wins
+ * — the exact shadow the family canon forbids (make-skill
+ * references/distribution.md §"The installer must refuse the shadow it
+ * documents"). Refuse rather than create it, and refuse LOUDLY: a refusal
+ * that exits 0 reads as success to every script above it. Reproduced live
+ * 2026-08-29: a bare `npx @ssheleg/telegram-dev` shipped three shadows past a
+ * marketplace-dir-only check while the plugin was enabled.
+ */
+function refuseIfPluginOwnsChannel(targetDir, force) {
+  const home = claudeHomeOf(targetDir);
+  if (!home || force) return;
+  const spec = installedPluginSpec(home);
+  const marketplaces = path.join(home, ".claude", "plugins", "marketplaces");
+  const mktDir = [SKILL_SLUG, "sheleg-design-skill"]
+    .map((n) => path.join(marketplaces, n))
+    .find((p) => fs.existsSync(p));
+  if (!spec && !mktDir) return;
+
+  const remedySpec = spec || "sheleg-design@sheleg-design-skill";
+  const remedyMarketplace = remedySpec.split("@")[1];
+  const found = spec
+    ? `installed as the Claude Code plugin ${spec}\n` +
+      `         (declared in ${path.join(home, ".claude", "plugins", "installed_plugins.json")})`
+    : `registered as a Claude Code marketplace\n         (${mktDir})`;
+  console.error(
+    c("yellow", `refused: ${SKILL_SLUG} is already ${found}.`) +
+      `\n         A plain copy in ${path.join(home, ".claude", "skills", SKILL_SLUG)}\n` +
+      `         would shadow the plugin and serve this frozen version forever.\n` +
+      `         Update the plugin channel instead:\n` +
+      `           ${c("bold", `claude plugin marketplace update ${remedyMarketplace}`)}\n` +
+      `           ${c("bold", `claude plugin update ${remedySpec}`)}\n` +
+      `         Family launcher (updates every member, prunes shadow copies):\n` +
+      `           ${c("bold", "npx --yes sshlg-skills@latest update")}\n` +
+      `         Pass --force to write the plain copy anyway — a deliberate choice\n` +
+      `         to run two channels, where the stale one wins.`,
+  );
+  // Offered on the refusal path too: the skill IS present on this machine —
+  // as the plugin — so the routing block is exactly as wanted as on the
+  // install path.
+  offerRouters();
+  process.exit(EXIT_PLUGIN_PRESENT);
+}
+
 function main() {
   const opts = parseArgs(process.argv.slice(2));
 
@@ -354,6 +471,10 @@ function main() {
 
   const targetDir = resolveTargetDir(opts, cwd);
 
+  // Before any write to a home's ~/.claude/skills/sheleg-design: if that
+  // home's plugin channel already owns this skill, refuse (exit 3).
+  refuseIfPluginOwnsChannel(targetDir, opts.force);
+
   // Verify the bundle is intact before touching the filesystem.
   for (const f of CORE_FILES) {
     if (!fs.existsSync(path.join(SKILL_DIR, f))) {
@@ -398,6 +519,16 @@ function main() {
   );
 
   offerRouters();
+
+  // The last line says how the next version arrives — "installed" is not a
+  // complete sentence. Auto-update is off on purpose: this member composes
+  // with its family, and per-marketplace autoUpdate moves each member on its
+  // own clock, into combinations nobody tested together.
+  console.log(
+    `Updates: rerun ${c("bold", "npx sheleg-design-skill@latest --force")}, or refresh the\n` +
+      `whole family with ${c("bold", "npx --yes sshlg-skills@latest update")} (every channel,\n` +
+      `and it prunes plain copies that would shadow a plugin).\n`,
+  );
 }
 
 /**

package/cursor/rules/sheleg-design.mdc

@@ -138,6 +138,14 @@ detached nav, one teal whose text-bearing steps climb the reference's own hover
 ladder, a pink that answers but may not speak, TT Fors at a 600 ceiling with tabular
 numerals, and the product shown only as flat portraits, for visibility, monitoring
 and benchmark tools sold to marketing teams;
+chorus — warm off-white paper under a construction grid that never switches off, two
+1px verticals crossed by horizontals with a small plus at every intersection and
+continued across the dark band; the set piece is somebody else's question in a
+cut-corner bubble (24px on three corners, 0 on the top right) set in the display face,
+white cards with no shadow and a hairline edge, near-black slabs cut 30px into the
+sheet, one coral that fills but may never be a word, and a periwinkle that only exists
+in a gradient or on the dark, for AI-search visibility, brand monitoring, social
+listening and community marketing whose proof is other people's conversations;
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

package/kits/chorus/.design-sync/config.json

@@ -0,0 +1,14 @@
+{
+  "pkg": "@sheleg-design/chorus",
+  "globalName": "ShelegChorus",
+  "shape": "package",
+  "buildCmd": "npm run build",
+  "srcDir": "src",
+  "tsconfig": "tsconfig.json",
+  "cssEntry": "src/styles.css",
+  "docsDir": "src",
+  "readmeHeader": ".design-sync/conventions.md",
+  "guidelinesGlob": [
+    "guidelines/*.md"
+  ]
+}

package/kits/chorus/.design-sync/conventions.md

@@ -0,0 +1,50 @@
+# Chorus — conventions for a design agent
+
+This kit is the built form of the Chorus style pack. Read these before generating
+anything with it; they are the pack's bans, stated where a design tool will see them.
+
+## Colour
+
+- **The coral fills and never writes.** `--coral` (#f96f4b) is a fill, a flat block, a
+  gradient stop and an icon beside a label that carries the meaning. As a word it is
+  2.72:1 on the field; under a white label it is 2.84:1. Both are below the 3:1
+  large-text floor, so no size rescues either. A coral word takes `--coral-ink`
+  (#cb441f, 4.59:1 on the field).
+- **The primary button's label is INK**, `--on-coral` at 6.20:1. This is the pack's
+  correction to the reference and it keeps the brand hue exactly rather than darkening
+  it.
+- **The mint lives only on the dark.** `--good-on-dark` (#36ff94) is 13.31:1 in a
+  well and does not exist on paper — held at its own hue it reaches AA on paper only
+  at near-black. A green figure on a card takes `--good` (#198400).
+- **Status is never by colour alone.** `--good` and `--danger` are 6.2 apart under
+  deuteranopia. Every delta ships its arrow and its number, both.
+- **There is no warn.** Three status roles. The reference declares an amber that paints
+  nothing; a fourth severity here would be invented.
+- The periwinkle is a gradient stop and a series line on the dark. It is not a second
+  button colour and never carries a word on paper.
+
+## Surface and edge
+
+- A card is `--surface` at `--r-card` with a 1px `--line` — **32px padding and 32px
+  gap at every width**, including 390. Do not tighten it on narrow screens.
+- Four objects carry a shadow and nothing else may: the bubble, the floating panel,
+  the hero deck, the nav. Everything else takes `--line` for its edge.
+- The construction grid never switches off, and it continues across the dark slab.
+  The plus at each intersection is part of it.
+- The dark slab is a **surface**, not a theme. The page never inverts.
+
+## Type
+
+- Outfit sets two things: the display, and the question inside a bubble. Nothing else.
+- Display tracking **relaxes** as the type shrinks. Do not tighten a small display.
+- Body line-height is 1.7. No italic anywhere; nothing above weight 700.
+
+## Geometry and motion
+
+- `--r-bubble` is 24px on three corners and 0 on the top right. It is the pack's whole
+  geometry, and it belongs to one object.
+- Nothing lifts, scales or parallaxes; there is no scroll clock; gradients do not move.
+- Loading is a static skeleton, never a spinner and never a shimmer.
+- The reduced-motion contract has a JavaScript half: a reveal observer must read
+  `matchMedia('(prefers-reduced-motion: reduce)')` and mount at the final transform.
+  The media query in the token layer cannot reach a transform a script sets.

package/kits/chorus/README.md

@@ -0,0 +1,36 @@
+# @sheleg-design/chorus
+
+The React reference kit for the **Chorus** style pack — warm off-white paper under a
+construction grid that never switches off, where the set piece is somebody else's
+question in a cut-corner bubble.
+
+The pack itself is the authority:
+[`styles/chorus.md`](../../plugins/sheleg-design/skills/sheleg-design/styles/chorus.md).
+This kit is one built reading of it, not a second source of truth. `src/styles.css`
+opens with the pack's token layer copied byte for byte from
+`styles/tokens/chorus.css`; everything below the `/* ── components ── */` marker
+consumes `var(--…)` and contains no colour literal.
+
+## Build
+
+```bash
+npm install
+npm run build        # tsc only — no bundler, no runtime dependency but React
+```
+
+## What is here
+
+The six-name spine every SHELEG kit shares — `Button`, `Card`, `Chip`, `Stat`,
+`Heading`, `Rule` — with identical props everywhere, so switching packs swaps identity
+rather than API. Then this pack's own: `Bubble` (the signature element), `GridFrame`,
+`Slab`, `Well`, `Delta`, `NavPill`, `Sweep`, `Field`, `Empty`, `Skeleton`, `Capsule`.
+
+Each component carries a `.md` beside it with its category and the numbers that
+license its colours.
+
+## The three rules that are easiest to break
+
+1. `--coral` may not be a word, at any size, and its button's label is ink.
+2. `--r-bubble`'s cut corner belongs to one object and may not be restyled.
+3. The reduced-motion contract has a JavaScript half — see
+   `.design-sync/conventions.md`.

package/kits/chorus/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@sheleg-design/chorus",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@types/react": "^18.3.0"
+  }
+}

package/kits/chorus/src/Bubble.md

@@ -0,0 +1,23 @@
+---
+category: Signature
+---
+
+**The pack's signature element, and the one component that may not be restyled.**
+
+`--r-bubble` is 24px on three corners and **0 on the top right** — a speech-bubble
+tail drawn by subtraction, measured on all 24 instances of this object in the
+reference. The question is 24px/600 in `--font-display` at 18.88:1 on `--surface`;
+`--shadow-bubble` is its own three-stop shadow and belongs to nothing else.
+
+`surface="slab"` is the same object on the dark side of a pair, `--on-slab` at
+16.54:1. `mirrored` swaps the cut to the top left for the answering side and for RTL
+— the reference ships only one direction, so the mirror is the pack's decision and is
+labelled as one.
+
+Change its corner, its face or its shadow and the pack is gone. If the page has no
+stranger's words to put in it, the page does not want this pack.
+
+```tsx
+<Bubble question="Best CRM for B2B companies?" source="r/sales · 18 Mar" />
+<Bubble question="Have you tried it?" surface="slab" mirrored />
+```

package/kits/chorus/src/Bubble.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+
+export interface BubbleProps {
+  /** The quoted question. Set in the display face — that is the point. */
+  question: string;
+  /** Where it was asked: a platform name, a subreddit, a date. */
+  source?: string;
+  /** `paper` is a stranger's card; `slab` is the answering side of a pair. */
+  surface?: 'paper' | 'slab';
+  /** Mirrors the cut corner for the answering side and for RTL. */
+  mirrored?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Bubble({
+  question,
+  source,
+  surface = 'paper',
+  mirrored = false,
+  children,
+  className,
+}: BubbleProps) {
+  return (
+    <div
+      className={[
+        'ch-bubble',
+        `ch-bubble--${surface}`,
+        mirrored ? 'ch-bubble--mirrored' : null,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <p className="ch-bubble__q">{question}</p>
+      {source && <p className="ch-bubble__src">{source}</p>}
+      {children}
+    </div>
+  );
+}

package/kits/chorus/src/Button.md

@@ -0,0 +1,23 @@
+---
+category: Actions
+---
+
+36px tall at `--r-control`, 8px/16px padding on a 14px/500 label, and a fill that
+only ever changes colour — nothing lifts, scales or travels.
+
+`primary` is the reference's own coral with the pack's correction: `--coral` fill and
+an `--on-coral` label at 6.20:1. **A white label here measures 2.84:1 and is banned at
+every size** — that is the whole reason this variant exists in this shape. `secondary`
+is `--ink-strong` with `--on-slab`. `ghost` is `--surface` with a 1px `--line`.
+
+Hover steps the fill one value; active repeats hover. Focus paints a 2px
+`--focus-color` ring **and** keeps the fill step. On a slab the ring resolves to
+`--focus-color-on-dark`, because the ink ring is 1.00:1 there.
+
+The 36px height is measured and misses the 44px tap floor: the hit area is padded to
+`--tap-min` on touch rather than the button being resized.
+
+```tsx
+<Button>Start free trial</Button>
+<Button variant="secondary">Book a demo</Button>
+```

package/kits/chorus/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the coral fill with an INK label — never a white one. */
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  onClick,
+  children,
+  className,
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={['ch-btn', `ch-btn--${variant}`, `ch-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/chorus/src/Capsule.md

@@ -0,0 +1,20 @@
+---
+category: Signature
+---
+
+The closing band's scatter: stadium-radius pills at `--r-pill`, some outlined in
+`--line-on-slab`, some filled `--coral`, `--periwinkle` or `--parchment`, jumbled at
+angles between platform marks. Many voices, one page — it is the pack's name made
+visible.
+
+The tilt is a static transform, not an animation: nothing in this pack moves on
+scroll. Keep it under about 12 degrees, which is the range the reference's own scatter
+occupies.
+
+Decorative by construction — a capsule carrying a word would be a coral or periwinkle
+label, and neither may be text.
+
+```tsx
+<Capsule tone="coral" tilt={-6} />
+<Capsule tone="outline" tilt={3} />
+```