@motion-proto/live-tokens 0.74.0 → 0.76.0

package/.claude/skills/live-tokens-set-geometry/SKILL.md

@@ -1,21 +1,26 @@
 ---
 name: live-tokens-set-geometry
-description: Adjust corner radius, padding, gap, and border width across live-tokens components by moving each token alias along the shipped scales. Use when the user asks for pill or capsule buttons; rounded, rounder, sharp, sharper, square, softer, or harder corners; thicker or thinner borders; or density: space it out, tighter, denser, more compact, airier, more breathing room. Also invoked by live-tokens-create-theme, which supplies the geometry intent for a whole look. Changes shape and space aliases per component, never color, fonts, or tokens.css. Not for editing a single token (use the editor) or for a whole look (see live-tokens-create-theme).
+description: Set a live-tokens theme's geometry: corner radius, padding, gap, and border width. Each moves per component along its shipped scale. Called with an anchor and a geometry intent by live-tokens-create-theme, or with the user's request directly. Use when the user asks for pill or capsule buttons. Use when the user asks for rounded, sharp, square, softer, or harder corners. Use when the user asks for thicker or thinner borders. Use when the user asks for density: space it out, tighter, denser, airier. Changes geometry only. For a request that also names color or type, read live-tokens-create-theme.
 ---
 
-# Adjusting geometry
+# Setting a theme's geometry
 
-You translate the request into a small ops file; the CLI resolves each matching alias on its token ladder, writes the result into each component's unsaved buffer, and prints a report card. Never hand-edit the data tree.
+Write the request as an ops file. The CLI moves each matching alias along its scale, writes the result to each component's buffer, and prints a report. Never hand-edit the data tree.
+
+The result is on screen as soon as the run finishes. The three set skills write the same buffer, so color, type, and geometry compose in any order. When the user accepts the result, run `save-theme` to keep it as a theme. Loading a theme in the editor discards it.
 
 ## Workflow
 
-1. Read the geometry intent. When it names an anchor (a feeling, an idiom, or a genre), read `references/geometry-anchors.md` for that entry; it overrides the Idioms table below. Write the ops file to `scratch/geometry-ops.json`.
-2. Run `npx live-tokens set-geometry scratch/geometry-ops.json`. It writes `component-configs/<id>/_working.json` for every component the ops change, which is the buffer the page already runs. `--dry-run` prints the report without writing.
-3. Read the report card: every changed alias old → new, plus skips (raw value, off the ladder, already at the ladder end, pill preserved). Exit 1 means the run was rejected; the message names the offending op or the missing input, so fix it and re-run. Read where the controls landed, not only that the run succeeded: a button, badge, input, or tab padding sitting at `--space-6` is on its floor, and one that also carries `--radius-full` wants a targeted lift.
-4. Report back in a line: every alias that moved, and any skip or clamp worth naming.
-5. Tell the user to reload the page before saving. The editor keeps the look in the browser and writes the buffers from that copy, so a Save in a tab that was open during the run puts the pre-run shape back and the report you just showed them becomes a lie. After the reload, offer the inverse op as the undo and say the edit is unsaved until they save the open theme.
+1. Read the geometry intent and the anchor, when live-tokens-create-theme passed one. When the intent or the anchor names a feeling, an idiom, or a genre, read its entry in `references/geometry-anchors.md`.
+2. Write the ops file to `scratch/geometry-ops.json`.
+3. Run `npx live-tokens set-geometry scratch/geometry-ops.json`. It writes `component-configs/<id>/_working.json` for every component the ops change.
+4. Read the report. It lists every changed alias, old and new, and every skip with its reason.
+5. When the CLI exits 1, fix the op or the input the message names, then re-run.
+6. Reply with every alias that moved and any skip worth naming.
+
+`--dry-run` prints the report without writing.
 
-Each run reads the LIVE config (buffer, else the open theme, else the shipped default), so "a bit more" and "back one" compound naturally.
+Each run reads the live config, so "a bit more" and "back one" compound. The live config is the buffer, else the open theme. With no theme loaded, the open theme is the shipped default.
 
 ## The ops file
 
@@ -31,39 +36,55 @@ Targeted, absolute:
 { "ops": [{ "target": "button", "kind": "radius", "set": "--radius-full" }] }
 ```
 
-- `name`: ignored. Buffers are fixed slots, so a name names no file, and the CLI says it dropped one. Leave it out.
-- `target` (optional): a component id (the folder names under `src/live-tokens/data/component-configs/`, which the Catalogue in **live-tokens-pick-component** also names in full). A named component targets its id: "windows" or "modals" is `dialog`, "cards" is `card`, "tabs" is `tabbar`; an unknown target is a hard error. "The UI", "everything", or no noun at all means global, so omit it.
-- `kind`: `radius | padding | gap | border-width`.
-- `set` or `shift`, exactly one of the two. `set` takes an existing token on that kind's ladder. `shift` is a whole number of steps, clamped at the ladder ends.
-- `full` (radius shifts only): admits `--radius-full` as the ladder's top rung. `set` plus `full` is an error, so a pill request is `set: "--radius-full"` with no `full` flag.
+- `target` (optional): a component id, one of the folder names under `src/live-tokens/data/component-configs/`. "Windows" or "modals" is `dialog`, "cards" is `card`, "tabs" is `tabbar`. "The UI", "everything", or no noun means global, so omit `target`.
+- `kind`: `radius | padding | gap | border-width | divider-width | accent-width`. `border-width` moves `-border-width` aliases. `divider-width` moves dividers, hairline rules, and `-thickness` aliases. `accent-width` moves accent bars and indicators.
+- `set` or `shift`, one of the two. `set` takes a token on that kind's scale. `shift` is a whole number of steps and stops at the ends of the scale.
+- `full` (radius shifts only): admits `--radius-full` as the top of the scale. A pill request is `set: "--radius-full"` with no `full` flag.
 
 ## Idioms
 
-This table covers an intent that names no anchor. When the intent names one, `references/geometry-anchors.md` has the row and it wins.
+The table covers an intent that names no anchor. An anchor's entry in `references/geometry-anchors.md` overrides the table.
 
 | The intent says | Ops |
 |---|---|
-| pill, capsule | radius `set: "--radius-full"`, plus the padding the pill needs (see below) |
+| pill, capsule | radius `set: "--radius-full"`, plus the padding the pill needs (see Compact containers before controls) |
 | sharp, square corners | radius `set: "--radius-none"`, or `--radius-sm` for "mostly sharp" |
 | rounded (a named component) | radius `shift: 2` |
 | softer, rounder (global) | radius `shift: 1` to `2`, no `full` |
 | harder, sharper | radius `shift: -1` to `-2` |
-| increase the radius, less round, more round | radius `shift: 1` or `-1` with `"full": true`, so repeated pushes reach pill and a pill can come back down |
+| increase the radius, less round, more round | radius `shift: 1` or `-1` with `"full": true` |
 | space it out, airier, breathing room | padding and gap `shift: 1` |
 | tighter, denser, more compact | padding and gap `shift: -1` |
 | thicker, thinner borders | border-width `shift: 1` or `-1` |
 
-A whole-look intent often arrives as a direction rather than an op. Playful, friendly, or soft is rounder and a step airier, with pill buttons when the direction is warm. Luxurious, elegant, or editorial is sharper corners, airier padding, thin borders. Technical, dense, or systematic is tighter spacing, a small radius, and square corners on containers. Calm or minimal leaves geometry alone.
+A theme intent names a direction.
+
+| The direction is | Geometry |
+|---|---|
+| playful, friendly, soft | rounder and a step airier. Warm adds pill buttons. |
+| luxurious, elegant, editorial | sharper corners, airier padding, thin borders |
+| technical, dense, systematic | tighter spacing, a small radius, square corners on containers |
+| calm, minimal | unchanged |
 
-Magnitude words: "slightly" or "a bit" is 1 step, unqualified is 1 to 2, "much", "way", or "really" is 2 to 3. Mood words often mean both axes: "softer" is rounder plus airier, "compact" is tighter padding plus smaller gaps.
+Magnitude follows the qualifier. "Slightly" or "a bit" is 1 step. No qualifier is 1 to 2 steps. "Much", "way", or "really" is 2 to 3 steps. A mood word often means both axes: "softer" is rounder plus airier, "compact" is tighter padding plus smaller gaps.
 
-## Controls squeeze before containers
+## Compact containers before controls
 
-A global op spends the same number of steps everywhere, but a step costs a control far more than a container. `padding shift: -2` takes a card from a 16px inset to 10px and it is still a card. It takes a button from 8 to 4, doubled to 8px at each end, around an 18px line. The button stops reading as a button.
+A global op spends the same number of steps everywhere, but a step costs a control more than a container. `padding shift: -2` takes a card from a 16px inset to 10px and it is still a card. The same op takes a button from 8px to its 6px floor, 12px at each end around an 18px line, and the floor stops it there. Below the floor the button stops reading as a button.
 
-So a global compaction is `shift: -1`. When the request wants more, spend the extra steps on the containers by name (`card`, `dialog`, `panel`, `collapsiblesection`, `sidenavigation`, `table`, `codesnippet`) and leave the controls alone. Loosening is not symmetric: airier is safe globally, because nothing breaks by growing.
+So a global compaction is `shift: -1`. When the request wants more, spend the extra steps on the containers by name and leave the controls alone. The containers are:
 
-A pill needs the room most. `--radius-full` bends the corner in over the first and last glyph, so a capsule wants more horizontal inset than a square-cornered control, never less. `--space-8` is the floor for a large-text pill, which is where compact Midnight Study sits; the roomier pill presets (Ocean, Sunset, Royal Velvet) run `--space-10` to `--space-12`. Pair the radius op with a padding `set` on the same target, placed after any global compaction so it wins outright:
+- `card`
+- `dialog`
+- `panel`
+- `collapsiblesection`
+- `sidenavigation`
+- `table`
+- `codesnippet`
+
+Airier is safe globally, because nothing breaks by growing.
+
+A pill needs the most room. `--radius-full` bends the corner in over the first and last glyph, so a capsule wants more horizontal inset than a square-cornered control. `--space-8` is the floor for a large-text pill. Compact Midnight Study sits there. The roomier pill presets, Ocean, Sunset, and Royal Velvet, run `--space-10` to `--space-12`. Pair the radius op with a padding `set` on the same target. In the ops list, place the padding `set` after any global padding shift. The later op wins:
 
 ```json
 { "ops": [
@@ -73,26 +94,28 @@ A pill needs the room most. `--radius-full` bends the corner in over the first a
 ] }
 ```
 
-## Ladders
+## Scales
+
+Radius runs `none, sm, md, lg, xl, 2xl, 3xl, 4xl`, with `full` as the gated ninth step. Space (padding and gap) is the editor picker's subset, `0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48`, so the editor can select every value the CLI writes. Border width is the `--border-width-*` scale from `1` to `24`. A shift never reaches `--border-width-0`, and an alias at 0 is skipped. "No borders" is `set: "--border-width-0"`.
 
-Radius runs `none, sm, md, lg, xl, 2xl, 3xl, 4xl`, with `full` as the gated ninth rung. Space (padding and gap) is the editor picker's subset: `0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48`, so every written value stays re-editable by hand. Border width is the full `--border-width-*` scale. `set` values must be on the ladder (`--space-64` is rejected).
+An alias off the subset spends its first step reaching the subset, so `--space-2` with `shift: 1` lands on `--space-4`.
 
-Content insets stop at `--space-4`. Below it the text sits against its own edge, so `--space-0` and `--space-2` are destinations a person picks on purpose, not ones a relative "tighter" hands you. Both stay available through the editor picker and through `set`. An alias already below the floor still moves up, and a shift that would push one under `--space-4` reports as clamped and writes nothing.
+## Floors
 
-Padding that wraps a line of type stops a rung higher, at `--space-6`. The engine spots it in the config itself: a variant that also declares a `-text-font-size` is holding text, and the components that hold text double their padding horizontally, so `--space-4` there is 4px over an 18px line and 8px at each end. No shipped default puts text below `--space-6`.
+Content insets stop at `--space-4`. Below `--space-4` the text sits against its own edge, so `--space-0` and `--space-2` are values a person picks on purpose, through the editor picker or `set`. An alias below the floor still moves up. A shift that would push one under `--space-4` lands on `--space-4`. An alias already at `--space-4` is skipped, and the report says so.
 
-The floor guards `-padding` only. Outer space is exempt, because a 2px gap between an icon and its label, or a 2px margin under a bar, is ordinary design rather than a mistake. Note that `-margin` rides the `padding` kind, so a padding op moves margins too; it just does not floor them.
+Padding around a line of type stops at `--space-6`. A variant that declares a `-text-font-size` holds text. A component that holds text doubles its padding horizontally, so `--space-4` there is 4px over an 18px line and 8px at each end. No shipped default puts text below `--space-6`.
 
-An alias sitting off the subset spends its first step reaching the rung the shift points at, so `--space-2` with `shift: 1` lands on `--space-4` rather than jumping past it.
+The floor guards `-padding` only. A 2px gap between an icon and its label, or a 2px margin under a bar, is ordinary design. `-margin` belongs to the `padding` kind, so a padding op moves margins too, without the floor.
 
 ## Scope
 
-Every value written is an existing token; nothing new is minted. `tokens.css`, saved themes, colors, and fonts are never touched, so any theme composes with any shape state. An adjustment is an unsaved edit: Save the open theme in the editor to keep it, and Adopt to ship it. Both stay human actions.
+Geometry only. Color, type, saved themes, and `tokens.css` are untouched: `set-geometry` writes existing tokens into each component's buffer and creates no new ones. `save-theme` keeps the result; Adopt ships it.
 
 ## Verify
 
-- The CLI exits 0 and the report card lists the changes you expected, with no surprising skips.
-- The app (dev server running) shows the new shape on each changed component after a reload.
-- Buttons still read as buttons: the label has room at both ends, and a pill has more of it than a square-cornered control had.
-- `component-configs/<id>/_working.json` exists for every component the report listed. That buffer is the whole change: it stays until the open theme is saved or another theme is loaded.
-- To revert, run the inverse ops, or load a theme in the Theme panel to discard every unsaved edit.
+- The CLI exits 0 and the report lists the expected changes, with no unexpected skips.
+- The app shows the new shape on each changed component.
+- Buttons still read as buttons: the label has room at both ends, and a pill has more than a square-cornered control. A control whose padding sits at `--space-6` is on its floor. A control that also carries `--radius-full` needs a targeted lift.
+- `component-configs/<id>/_working.json` exists for every component the report listed.
+- To revert, run the inverse ops, or load the open theme to discard the buffer.

package/.claude/skills/live-tokens-set-geometry/references/geometry-anchors.md

@@ -4,9 +4,11 @@ Read this when the geometry intent names one of these. An anchor overrides the
 Idioms table in SKILL.md, because it is tuned to the same direction the color
 came from, and a style's geometry is often targeted rather than global.
 
-Entries are written in the ops vocabulary: "radius +2" is a radius shift of 2,
-"borders +1" a border-width shift of 1, "padding +1" a padding and gap shift of
-1. A named component means a targeted op. Controls squeeze before containers,
+Entries are written in the ops vocabulary. "radius +2" is a radius shift of 2.
+"borders +1" is a border-width shift of 1. "padding +1" is a padding and gap
+shift of 1. "hairline borders" is border-width `set: "--border-width-1"`, and
+"no borders" is `set: "--border-width-0"`. "hairline rules" is divider-width
+`set: "--border-width-1"`. A named component means a targeted op. Controls squeeze before containers,
 so a compaction of more than one step still spends its extra steps on
 containers by name.
 

package/.claude/skills/live-tokens-set-type/SKILL.md

@@ -1,23 +1,23 @@
 ---
 name: live-tokens-set-type
-description: Choose and apply a Google Fonts pairing for a live-tokens theme, binding families to the shipped --font-* stacks. Use whenever the user asks to pair fonts, pick a typeface, change or set the fonts, or describes type by voice: what font should the headings use, make the type more editorial, friendlier, more technical, more elegant, a serif for headings, a display font for this theme, less generic type, match the fonts to the theme. Also invoked by live-tokens-create-theme, which supplies the type intent for a whole look. Changes type only, never color. Not for a single token (use the editor) or for a whole look (see live-tokens-create-theme).
+description: Set a live-tokens theme's type: a Google Fonts pairing for the shipped --font-* stacks. The CLI verifies each family for the weights it ships. Called with an anchor and a type intent by live-tokens-create-theme, or with the user's request directly. Use when the user asks to pair fonts, pick a typeface, or set the fonts. Use when the user describes type by voice: editorial, friendlier, technical, elegant, less generic. Use when the user names a face for a role: a serif for headings, a display font. Changes type only. For a request that also names color or geometry, read live-tokens-create-theme.
 ---
 
-# Setting a theme's fonts
+# Setting a theme's type
 
-You choose the families; the CLI verifies each against Google Fonts, builds the URL from the weights the family actually has, and writes the result into the unsaved buffer. Never hand-author font JSON and never edit the data tree directly. Google Fonts is the pool because it is freely licensable and loads by URL; other sources go in by hand through the editor's Project fonts section.
+Choose the families. The CLI verifies each against Google Fonts, builds the URL from the weights the family has, and writes the result to the buffer. Never hand-author font JSON or edit the data tree. Google Fonts is the pool because it is freely licensable and loads by URL. Other sources go in through the editor's Project fonts section.
 
-## Workflow
+The result is on screen as soon as the run finishes. The three set skills write the same buffer, so color, type, and geometry compose in any order. When the user accepts the result, run `save-theme` to keep it as a theme. Loading a theme in the editor discards it.
 
-1. Read the type intent. When it names an anchor (a feeling, an idiom, or a genre), read `references/type-anchors.md` for that entry; it overrides the Voice table below. Choose the pairing with the framework here and write the pairing file to `scratch/font-pairing.json`.
-2. Run `npx live-tokens set-type scratch/font-pairing.json`. It prints each stack that moved, each family's real weights and URL, and the weights your typography tokens ask for that the family lacks.
-3. Read the report. A weight gap is a quality note: name it and offer an alternative only if it matters (a body face without 400, 700, or italic matters; a display face without 300 does not). A family not on Google Fonts fails the run; fix the spelling and re-run.
-4. Report back in a line: the two families, the form model behind each, and any weight gap worth naming.
-5. Tell the user to reload the editor page before saving. A running editor holds its own copy of the buffer this CLI just wrote and never re-reads it, so a Save without a reload writes the stale copy back and the pairing vanishes with a success report still on screen. After the reload the type is on the page, and unsaved until they save the open theme.
+## Workflow
 
-State your reasoning when you propose the pairing: each face's form model and the matrix verdict, in one sentence, so the user can argue with the argument rather than only the result.
+1. Read the type intent and any anchor live-tokens-create-theme passed. When either names an anchor (a feeling, an idiom, or a genre), read its entry in `references/type-anchors.md`; it overrides the Voice table below.
+2. Choose the pairing and write it to `scratch/font-pairing.json`.
+3. Run `npx live-tokens set-type scratch/font-pairing.json`. It prints each stack that moved, each family's weights and URL, and, under Weight coverage, the weights the typography tokens ask for that the family lacks.
+4. Read the report. Name a missing weight and offer an alternative only when it matters: a body face without 400, 700, or italic matters, and a display face without 300 does not. A family not on Google Fonts fails the run. Fix the spelling and re-run. A pairing the stacks already hold prints "Nothing to change" and writes nothing. A pairing equal to the open theme's discards the buffer, and the report says so.
+5. Reply with the two families, the form model behind each, the matrix verdict, and any missing weight worth naming.
 
-Flags: `--dry-run` reports without writing. `--no-verify` skips the network and requires an explicit URL per family; use it only offline with a URL in hand.
+Flags: `--dry-run` reports without writing. `--no-verify` skips the network and requires a URL per family; use it only offline.
 
 ## The pairing file
 
@@ -25,17 +25,17 @@ Flags: `--dry-run` reports without writing. `--no-verify` skips the network and
 { "display": "Fraunces", "body": "Nunito Sans" }
 ```
 
-Every slot is optional and an omitted slot is left exactly as it is. `display` is `--font-display`, `body` is `--font-sans`; `serif`, `mono` and `editorial` exist when a theme needs them. `editorial` is `--font-editorial`, the long-reading face behind the `--editorial-*` text styles: it tracks the body face until a theme repoints it, so set it only when essays and articles should not carry the body face. A slot may be `{ "name": "...", "url": "..." }` to pin an exact URL. Spell families as Google does; the CLI reports the canonical spelling back.
+Every slot is optional; an omitted slot keeps its family. `display` is `--font-display` and `body` is `--font-sans`. `serif`, `mono`, and `editorial` exist when a theme needs them. `editorial` is `--font-editorial`, the long-reading face behind the `--editorial-*` text styles. An omitted `editorial` keeps its family, so set it only when essays and articles need a face of their own. Weight coverage is reported for `display`, `body`, `serif`, and `mono`. A family bound to `editorial` gets no coverage line. A slot may be `{ "name": "...", "url": "..." }` to pin a URL. A pinned URL is not probed, so the report shows no weights for it and coverage skips it. Spell families as Google does; the CLI reports the canonical spelling.
 
 ## Choose the body face first
 
-The body face is the anchor. It carries most of the words, and text faces survive small sizes where display faces do not. Pick it against the type intent, then pick the display face against it. A body face must have regular, bold, and italic; low to moderate stroke contrast; open apertures; and a large x-height. A face failing any of these is a display face whatever its name says. Single-weight families are fine for `display` and disqualifying for `body`.
+The body face is the anchor. It carries most of the words, and text faces survive small sizes where display faces do not. Pick it against the type intent, then pick the display face against it. A body face has regular, bold, and italic; low to moderate stroke contrast; open apertures; and a large x-height. A face missing any of these is a display face, whatever its name says.
 
-The shipped text styles ask the display face for 600, across all four heading levels, and the body face for 400; prose markup adds 700 and italic for `strong` and `em`. Screen candidates against those four before running, so the report confirms a decision instead of reporting a surprise.
+The shipped text styles ask the display face for 600 and the body face for 400; `strong` and `em` add 700 and italic. Screen candidates against those four weights before running.
 
-## The font matrix: the decision rule
+## The font matrix
 
-Classify each candidate on two layers. The **skeleton** is its form model; the **flesh** is its stroke contrast and serif treatment.
+Classify each candidate by form model and by stroke contrast and serifs.
 
 | Form model | Construction | Reads as |
 |---|---|---|
@@ -43,11 +43,11 @@ Classify each candidate on two layers. The **skeleton** is its form model; the *
 | **Rational** | vertical stress, closed apertures, drawn not written | orderly, reserved, elegant, authoritative |
 | **Geometric** | monolinear, circle-and-line | technical, modern, systematic, sober |
 
-- **Same skeleton, different flesh: reliable.** Helvetica and Bodoni are both rational, one a linear sans and one a contrasting serif.
-- **Same flesh, different skeleton: the failure case.** The two look alike on the surface and fight underneath. This is why two arbitrary sans-serifs so often clash.
-- **Far apart on both: works, deliberately.** An unmistakable difference reads as a decision.
+- One form model with different stroke contrast or serifs pairs reliably. Helvetica and Bodoni are both rational, one a linear sans and one a high-contrast serif.
+- Different form models with the same stroke contrast and serifs fail. The two look alike and fight underneath. Two arbitrary sans serifs clash for this reason.
+- Different on both counts works. An unmistakable difference reads as a decision.
 
-Many faces sit between columns. When one straddles, say so and lean on the voice table and the x-height check instead.
+Many faces sit between columns. When one straddles, say so and lean on the Voice table and the x-height check.
 
 ## Voice
 
@@ -61,33 +61,33 @@ Many faces sit between columns. When one straddles, say so and lean on the voice
 | serious, institutional, trustworthy | rational sans body, rational serif display |
 | quiet, minimal, unbranded | one superfamily across both slots |
 
-This table covers an intent that names no anchor. When the intent names one, `references/type-anchors.md` has the row and it wins.
+The table covers an intent that names no anchor. An anchor's row in `references/type-anchors.md` wins.
 
-Match the type to the same design direction the color came from. A warm autumn palette under a cold geometric sans reads as two projects.
+Match the type to the design direction the color came from. A warm autumn palette under a cold geometric sans reads as two projects.
 
 ## Shortcuts
 
-These find an adequate pairing fast and skip the reasoning; use them when the request is vague or the type should stay quiet.
+Use these when the request is vague or the type should stay quiet.
 
-- **A superfamily.** Google Fonts families with both sans and serif siblings, among them Alegreya, Ancizar, IBM Plex, Inria, Merriweather, Noto, PT, Roboto, Source. The catalogue moves and this list does not, so treat it as a starting set: `set-type` verifies every family against the API and fails loudly on one that is gone.
+- **A superfamily.** A Google Fonts family with sans and serif siblings: Alegreya, Ancizar, IBM Plex, Inria, Merriweather, Noto, PT, Roboto, Source. The catalogue moves and this list does not; `set-type` fails on a family that is gone.
 - **One family across weights.**
 - **Same designer or foundry.**
 - **Serif display over sans body** when nothing else decides it.
 
 ## Watch for
 
-- **x-height parity.** Both faces are set from one size scale, so a small-x-height display face over a large-x-height body face gives a heading that looks weaker than its own body text. This is the one visual check that matters on screen; make it on the rendered page.
+- **x-height parity.** Both faces share one size scale, so a small-x-height display face over a large-x-height body face gives a heading weaker than its own body text. Check it on the rendered page.
 - **Print faces at small sizes.** Delicate serifs and high stroke contrast turn to mud below 16px.
 - **Every family is a download.** Two is the target; three needs a reason.
-- **Sets of themes:** no two share a display face or a body face.
+- **Sets of themes.** No two share a display face or a body face.
 
 ## Scope
 
-Type only. Color, component aliases, shape, and the type scale are untouched: `set-type` moves families between stacks and nothing else, writing only the font entries in the unsaved buffer. Save the theme to keep it, Adopt to ship it. Adopt is also what rewrites `fonts.css`, which is how a build with no editor in it loads the family at all.
+Type only. Color, component aliases, shape, and the type scale are untouched: `set-type` writes the font entries in the buffer and carries every other value forward. `save-theme` keeps the result; Adopt ships it and rewrites `fonts.css`, which is how a build without the editor loads the family.
 
 ## Verify
 
 - The CLI exits 0 and names each stack that moved, before and after.
-- Each URL reflects the family's real weights: a range for a variable family, an enumeration for a static one, a bare URL for a single-weight face.
-- The app shows the new type after a reload, and the editor's Fonts section lists both families with their fallbacks intact.
-- To revert, run the inverse pairing file, or load the open theme again to discard the buffer.
+- Each URL matches the family's weights: a range for a variable family, an enumeration for a static one, a bare URL for a single-weight face. A pinned URL is written as given.
+- The app shows the new type, and the editor's Fonts section lists both families with their fallbacks.
+- To revert, run the previous pairing file, or load the open theme to discard the buffer.

package/CHANGELOG.md

@@ -1,5 +1,143 @@
 # Changelog
 
+## 0.76.0 — The skills directory matches the release
+
+### Changed (breaking)
+
+- **`setup-claude --force` now makes `.claude/skills/` match the release.** It
+  replaced each bundled skill by merging over it, which left two kinds of stale
+  text behind: a skill a release renamed kept its old directory, where it
+  shadowed the replacement, and a reference file a release dropped survived
+  inside a skill that was otherwise current. Both are invisible until a model
+  reads them. A forced run now replaces each bundled directory outright and
+  removes any `live-tokens-` skill the release no longer ships, naming each one
+  it removed. A skill under any other name is the project's own and is never
+  touched, and an unforced run still deletes nothing. 0.75.0's rename of
+  `live-tokens-build-page` to `live-tokens-create-page` is the case that
+  prompted this; the changelog then told a reader to delete the directory by
+  hand.
+
+  Before a forced run, copy any bundled skill you edited in place to a name of
+  your own. A `live-tokens-` directory this release does not ship is deleted
+  without a prompt, and one it does ship is replaced rather than merged.
+
+  `setup-claude` moves out of `bin/cli.mjs` into `bin/setup-claude.mjs` as
+  `runSetupClaude` and `formatSetupResult`, matching `create.mjs`, and gains
+  `bin/setup-claude.test.ts`.
+
+### Changed
+
+- **The `create` template installs the skills from `postinstall` and gitignores
+  them.** A scaffolded project no longer commits nine skill directories the
+  package owns, so a version bump stops showing twenty changed files that
+  nobody wrote. The skills instead refresh on every `npm install`. The
+  postinstall ends in `|| exit 0`: `setup-claude` refuses to run on Windows,
+  and a skills copy must never fail an install. A project created before this
+  release adds the two lines itself; the README carries them.
+
+## 0.75.0 — A component passes when the tests pass
+
+### Added
+
+- **`check-component` gains `--tests`.** Beyond the static lint, it runs the
+  registry contract under vitest and the component contract suites under
+  Playwright, for one component or every authored one, and reports coverage
+  by rule: listed, persisted and reset, themed, previewed, and drawn in
+  Sketch mode. `@playwright/test`, `vitest`, and `happy-dom` are new optional
+  peer dependencies; a missing one is a `tests-not-installed` finding naming
+  the install command. The suites ship at
+  `@motion-proto/live-tokens/testing` and `/testing/vitest`, and run here
+  against the library's own demo app and in a consumer against the
+  consumer's own app.
+
+  **live-tokens-create-component now runs `--tests` as its Verification
+  step**, in place of the manual pass through `/live-tokens/components`.
+  Every line that step asked a reader to confirm by eye is now a contract
+  assertion: the component's listing, its controls and preview, persistence
+  and reset, theme projection, linked properties, and Sketch mode.
+  live-tokens-fix-findings maps the new rule ids to the create-component
+  section that fixes each one, and the `create` template's new
+  `test:design` script runs the checks once the three peers are installed.
+
+### Changed
+
+- **Breaking: `tokens --scale` replaces `tokens --family`, and there is no
+  alias.** A token scale is the progression of one token across its range,
+  such as `space` or `radius`, and it is the one term for that grouping in the
+  CLI, the skills, and the skill atlas. "Family" now means a typeface only.
+  The `--json` output names the grouping `scales`, each with a `scale` and its
+  `tokens`. `bin/cliStrings.test.ts` bans "token family" and `--family`.
+- **Dividers and accents name their stroke role.** Three stroke roles share
+  the `--border-width-*` scale: a border encloses, a divider separates, an
+  accent emphasises. `set-geometry` moves each role on its own and reads the
+  role off the suffix, so a divider named `-border` moved with the borders.
+  TabBar's indicator is `--tabbar-<state>-indicator-width`, CollapsibleSection's
+  divider is `--collapsiblesection-divider-<state>-hairline-color` and
+  `-hairline-thickness`, Dialog's header and footer rules are
+  `--dialog-<part>-divider` and `-divider-width`, and Table's header rule is
+  `--table-default-header-divider` and `-divider-width`. Component migration 27
+  renames the keys in a saved theme; values are unchanged.
+- **CLI output uses the skills' vocabulary.** Every verb's help and report
+  lines say "the buffer" for edits a theme file does not hold yet, "load" for
+  making a theme the open one, "design token" and "semantic property" for the
+  two token classes, "shipped default", and "scale" and "step". The three set
+  verbs close with "The buffer holds this edit. Run save-theme to keep it as a
+  theme." Report lines print "old to new" in place of an arrow, and
+  `set-geometry` labels a skip "raw value", "off the scale", or "at the end of
+  the scale". `bin/cliStrings.test.ts` holds the line. The skills are corrected
+  where they described the CLI wrongly; the audit is
+  `docs/plans/cli-skill-alignment.md`.
+- **`live-tokens-build-page` is renamed `live-tokens-create-page`.** The verb
+  now matches `create-theme` and `create-component`. A project that copied the
+  skill keeps the old directory until it deletes it.
+- **The `create` template matches the skill.** `Home.svelte` drops the `h1`
+  and `p` rules `site.css` already types, the `0.9em` code size, and a `1.6`
+  line-height; its two Buttons take `--space-8`. `site.css` sets all five
+  axes from one text style on `p`, list items, `code`, and `pre`, and `ol li`
+  reads `--body-md-line-height` in place of `1.6`. A project created before
+  this release keeps its copied `site.css`.
+
+- **A page's type comes from a text style, and the checker fails a page that
+  names a raw axis.** `raw-text-axis` is an error, and it now reads a `var()`
+  as well as a literal. A `--font-size-*`, `--line-height-*`,
+  `--letter-spacing-*`, or a family stack such as `--font-sans` on a text
+  property is a finding. A text style token such as `--body-md-font-size` is
+  not. A `--font-weight-*` alone is not either, because a weight cannot move
+  the scale or the fonts. Two warnings join it. `control-size` reports a
+  `size` prop on a shipped component in a page file. `multiple-primary`
+  reports a second `variant="primary"` Button in one page file. A project
+  retunes a component's default size once, in the components editor. The
+  package's own pages, the template, and the `create` starter are all clean
+  under `--strict`. The starter's bulleted lists now take the `--body-md-*`
+  bundle.
+
+  **Every shipped component carries a usage comment.** `npx live-tokens
+  components` prints it as the description. `report` checks the shipped
+  set as it checks a custom component. The comment
+  names what the component is, what it is for, and what to reach for instead.
+  It never mentions size.
+
+- **Callout owns its box; the page owns the space around it.** `.callout` no
+  longer sets `margin: var(--space-24) 0`. A stack of callouts now takes its
+  spacing from the page's own gap, and a page that wants the old rhythm sets
+  `margin-block` on the container. The four `--callout-*-accent-width` defaults
+  point at `--border-width-1`, so the left edge matches the other three sides,
+  and the default theme follows. The token stays, so a theme can set the thick
+  left rule back, and the seven other presets keep the accents they were
+  authored with.
+
+- **A CLI run shows up in the open editor, and a Save afterwards keeps it.**
+  The dev server now watches the unsaved buffers and the active-theme pointer
+  and streams every outside change to the page as one frame over
+  `GET /api/live-tokens/events`. The editor hydrates from that frame the way
+  it does from an Apply, so `set-colors`, `set-type`, `set-geometry`, and
+  `save-theme` land on screen as they finish, and a Save afterwards writes
+  what is on screen rather than the tab's stale copy. The four verbs no longer
+  ask for a reload, and neither do the skills that run them. The server leaves
+  its own writes out of the stream, so an editor Save does not hydrate itself.
+  A branch switch that moves a buffer or the pointer reaches the page the same
+  way; any other JSON changed from outside still needs a reload.
+
 ## 0.74.0 — A theme is three decisions and one document
 
 ### Changed

package/README.md

@@ -322,12 +322,12 @@ npx @motion-proto/live-tokens <command>
 | Command | What it does |
 |---|---|
 | `create <dir> [--force]` | Scaffold a new Svelte + Vite app wired up with live-tokens. |
-| `setup-claude [--force]` | Install the bundled Claude Code skills into `./.claude/skills/`. |
+| `setup-claude [--force]` | Install the bundled Claude Code skills into `./.claude/skills/`; `--force` makes the directory match this release. |
 | `components [id] [--json]` | List every component the project has, shipped and its own, with the props each takes; with an id, its props, variants, tokens, and defaults. |
-| `tokens [--family <name>] [--json]` | List every theme token the project's `tokens.css` declares, by family, with its value. |
+| `tokens [--scale <name>] [--json]` | List every design token the project's `tokens.css` declares, by scale, with its value. |
 | `report [--json]` | The project as facts: pending migrations, tokens each component reads, which page renders which component, and both checkers' findings by rule. Always exits 0. |
 | `check-component [id]` | Validate a component's runtime, editor, and registration against the authoring contract; with no id, every component authored under `src/system/components`. |
-| `check-page [paths...]` | Validate pages against the build-page contract: catalogue components and their props, theme tokens over literals, route wiring. |
+| `check-page [paths...]` | Validate pages against the create-page contract: catalogue components and their props, theme tokens over literals, route wiring. |
 | `set-colors <base-colors.json> [--dry-run]` | Build the theme's whole color identity from 10 OKLCH base colors, enforce AA contrast on the derived text tokens, and write the result to the unsaved colors-and-type buffer. |
 | `set-type <pairing.json> [--dry-run] [--no-verify]` | Bind Google Fonts families to the theme's font stacks, verified against the API. |
 | `set-geometry <ops.json> [--dry-run]` | Move radius, padding, gap, and border-width aliases along their token scales. |
@@ -346,10 +346,20 @@ The package bundles nine Claude Code skills. They encode the conventions this RE
 npx @motion-proto/live-tokens setup-claude
 ```
 
-This copies every bundled skill into `./.claude/skills/` in the current directory. Re-run it after upgrading the package to pick up new and changed skills, adding `--force` to overwrite. macOS and Linux only. The equivalent by hand:
+This copies every bundled skill into `./.claude/skills/` in the current directory, leaving any that already exist. macOS and Linux only.
 
-```bash
-mkdir -p .claude/skills && cp -R node_modules/@motion-proto/live-tokens/.claude/skills/. .claude/skills/
+Re-run it with `--force` after upgrading. That makes the directory match the release: each bundled skill is replaced outright, so a reference file the release dropped goes with it, and a `live-tokens-` skill the release no longer ships is removed. A skill under any other name is the project's own and is never touched. Without `--force` nothing is deleted and an existing skill is left alone, so a renamed skill keeps shadowing its replacement until a forced run clears it.
+
+A project created with `create` runs the forced form from `postinstall` and gitignores the copy, so the skills track the installed version with nothing to commit. To do the same in an existing project:
+
+```jsonc
+// package.json
+"postinstall": "live-tokens setup-claude --force || exit 0"
+```
+
+```
+# .gitignore
+.claude/skills/live-tokens-*/
 ```
 
 ### `live-tokens-pick-component`
@@ -358,7 +368,7 @@ Ask "TabBar or SegmentedControl?", "how do I let someone pick one of four option
 
 The skill holds the catalogue grouped by job (action, input, selection, containers, messaging, display) and a decision table for each confusable family: `SegmentedControl` vs `TabBar` vs `RadioButton` vs `MenuSelect`, `Card` vs `CollapsibleSection` vs `Dialog`, `Callout` vs `Notification` vs `Tooltip` vs `Badge`, `Button` vs `IconButton`, and the on/off case. It answers the question and writes nothing. Read it before authoring anything new.
 
-### `live-tokens-build-page`
+### `live-tokens-create-page`
 
 Ask for a page, a route, or a screen: "build a pricing page", "add a /settings route", "put a hero at the top of Home".