npm - @motion-proto/live-tokens - Versions diffs - 0.75.0 → 0.77.0 - Mend

@motion-proto/live-tokens 0.75.0 → 0.77.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/.claude/skills/live-tokens-create-component/SKILL.md +3 -3
package/.claude/skills/live-tokens-create-component/references/contract-tests.md +99 -3
package/CHANGELOG.md +72 -0
package/README.md +14 -4
package/bin/check-component.mjs +2 -0
package/bin/cli.mjs +12 -58
package/bin/contractRunner.mjs +6 -1
package/bin/setup-claude.mjs +110 -0
package/package.json +1 -1
package/src/editor/skill-atlas/skillSources.generated.ts +2 -2
package/src/editor/skill-atlas/trees/create-component.ts +8 -3
package/src/testing-js/{chunk-LXR3MN6N.js → chunk-4JQX6WWL.js} +1 -1
package/src/testing-js/chunk-4JQX6WWL.js.map +1 -0
package/src/testing-js/{chunk-AO7EZHYV.js → chunk-7TI7Z6Y6.js} +2 -2
package/src/testing-js/component-editor.contract.js +19 -3
package/src/testing-js/component-editor.contract.js.map +1 -1
package/src/testing-js/component-render.contract.js +2 -2
package/src/testing-js/index.d.ts +1 -1
package/src/testing-js/index.js +1 -11
package/src/testing-js/index.js.map +1 -1
package/template/README.md +7 -2
package/template/_gitignore +4 -0
package/template/live-tokens.testing.ts +6 -0
package/template/package.json +6 -2
package/template/src/main.ts +1 -0
package/template/src/registerComponents.ts +4 -0
package/template/tests/contracts.ts +3 -0
package/template/tsconfig.json +1 -1
package/src/testing-js/chunk-LXR3MN6N.js.map +0 -1
/package/src/testing-js/{chunk-AO7EZHYV.js.map → chunk-7TI7Z6Y6.js.map} +0 -0

package/.claude/skills/live-tokens-create-component/SKILL.md CHANGED Viewed

@@ -13,7 +13,7 @@ Create a component whose structure and behavior serve the user's purpose. Give e
 2. Design the properties: separate the component's parts, variants, and states, then write one row per editable role with its token and the CSS it controls, named the way the shipped components name the same role.
 3. Write the runtime file: the usage comment and the `:global(:root)` block. A structural choice is an intrinsic. Every component joins the sketch layer, and a fixed overlay portals to `<body>`.
 4. Write the editor file: the schema, the preview props, and the markup. Variants that share a value are linked.
-5. Register the component in the module `src/main.ts` and `live-tokens.testing.ts` both name.
+5. Register the component in the module `src/main.ts` and `live-tokens.testing.ts` both name, and write its contract in the module `contractsModule` names.
 6. Run **live-tokens-check-compliance**, then `npx live-tokens check-component <id> --tests --strict --json` until exit 0 with complete applicable coverage, then the Svelte check and the build.
 7. Reply with the files, the id, the props, and each check's result. Then place the component on a page with **live-tokens-create-page**.
@@ -204,7 +204,7 @@ registerComponent({
 });
 ```
-Import the module from `src/main.ts`, before `bootLiveTokens` or `mount`, and name it as `registrySetup` in `live-tokens.testing.ts`. One module then serves the running app and `check-component --tests`, which imports it to see the registration without mounting the app: read `references/contract-tests.md`. A component that declares intrinsics adds `intrinsics` to the entry. `check-component` finds the registration by the id literal inside the call.
+Import the module from `src/main.ts`, before `bootLiveTokens` or `mount`, and name it as `registrySetup` in `live-tokens.testing.ts`. One module then serves the running app and `check-component --tests`, which imports it to see the registration without mounting the app. The component's contract, one `ComponentContract` in the module `contractsModule` names, is what the eight component suites run; without it `--tests` reports `contract-missing`. Read `references/contract-tests.md` for both. A component that declares intrinsics adds `intrinsics` to the entry. `check-component` finds the registration by the id literal inside the call.
 At boot the plugin reads the `:global(:root)` block and writes `component-configs/<id>/default.json`, one token per property. An edit in the editor writes `_working.json`; Save As writes a named config. The assignments stay token references through that flow.
@@ -218,7 +218,7 @@ A fixed overlay portals to `<body>`: read `references/fixed-overlays.md`. A cont
 ## Verification
-1. Run **live-tokens-check-compliance** and address its findings with **live-tokens-fix-findings**. Then run `npx live-tokens check-component <id> --tests --strict --json`. Inside the live-tokens repository, run `node bin/cli.mjs check-component <id> --tests --strict --json`. Each finding carries a rule id and a line; `--off=<rule>` silences a rule for one run. `--tests` runs the registry contract and the component contract suites, and its JSON reports coverage by rule. A `tests-not-installed` finding names the missing package; install `@playwright/test`, `vitest`, and `happy-dom` as devDependencies, then `npx playwright install chromium`. Fix every finding and rerun until exit 0 with complete applicable coverage and no disabled checks.
+1. Run **live-tokens-check-compliance** and address its findings with **live-tokens-fix-findings**. Then run `npx live-tokens check-component <id> --tests --strict --json`. Inside the live-tokens repository, run `node bin/cli.mjs check-component <id> --tests --strict --json`. Each finding carries a rule id and a line; `--off=<rule>` silences a rule for one run. `--tests` runs the registry contract and, for a component with a contract in the module `contractsModule` names, the component contract suites; its JSON reports coverage by rule. A `tests-not-installed` finding names the missing package; install `@playwright/test`, `vitest`, and `happy-dom` as devDependencies, then `npx playwright install chromium`. Fix every finding and rerun until exit 0 with complete applicable coverage and no disabled checks.
 2. Run the project's Svelte check and its build.
 3. Reply with the files, the component id, the props, and the results of steps 1 and 2, naming any check the environment prevented.

package/.claude/skills/live-tokens-create-component/references/contract-tests.md CHANGED Viewed

@@ -17,9 +17,11 @@ It resolves a shipped component's `sourceFile` against the package and yours
 against your project, and reports a component that exists as files and never
 reached a registration.
-Add `@playwright/test`, `vitest`, and `happy-dom` as devDependencies, then
-`npx playwright install chromium`. A missing one is a `tests-not-installed`
-finding naming the install command.
+A project scaffolded by `create` has `@playwright/test`, `vitest`, and
+`happy-dom` installed, with `live-tokens.testing.ts`, `src/registerComponents.ts`,
+and `tests/contracts.ts` in place. Any other project adds the three as
+devDependencies. Both run `npx playwright install chromium` once. A missing
+one is a `tests-not-installed` finding naming the install command.
 Name the module that registers your components, in `live-tokens.testing.ts` at
 the project root, as a plain quoted string:
@@ -60,6 +62,100 @@ of their own.
 you; it narrows the run to one component and fails when no component is
 registered under that id.
+## The component contract
+The eight Playwright suites drive one `ComponentContract` per component. The
+package ships one for each of its own components and none for yours. A run
+with `LIVE_TOKENS_COMPONENT=<id>` and no contract for `<id>` reports one
+`contract-missing` finding, which names the setting that unlocks the suites.
+Name the module that exports your contracts as `contractsModule`, next to
+`registrySetup`:
+```ts
+// live-tokens.testing.ts
+export default defineTestingConfig({
+  registrySetup: 'src/registerComponents.ts',
+  contractsModule: 'tests/contracts.ts',
+});
+```
+The module exports a `ComponentContract[]`, as the default export or a named
+`contracts` export. The type ships from `@motion-proto/live-tokens/testing`,
+and the doc comment on each field is the reference for it. A contract
+declares the component's parts as selectors inside the preview, then one
+expectation per obligation:
+```ts
+// tests/contracts.ts
+import type { ComponentContract } from '@motion-proto/live-tokens/testing';
+export const contracts: ComponentContract[] = [
+  {
+    id: 'statcard',
+    origin: 'custom',
+    root: 'root',
+    parts: { root: '.statcard', value: '.statcard-value' },
+    properties: [
+      {
+        paints: {
+          root: {
+            backgroundColor: '--statcard-surface',
+            borderTopColor: '--statcard-border',
+            borderTopWidth: '--statcard-border-width',
+            borderRadius: '--statcard-radius',
+            paddingTop: '--statcard-padding',
+          },
+          value: { color: '--statcard-value-text', fontSize: '--statcard-value-font-size' },
+        },
+      },
+    ],
+    states: { applicable: false, reason: 'a stat card renders one state' },
+    persistence: {
+      cases: [
+        { shape: 'token', variable: '--statcard-radius', observe: { part: 'root', css: 'borderRadius' } },
+      ],
+      resetVariable: '--statcard-radius',
+    },
+    theme: {
+      theme: 'brand',
+      changed: ['--statcard-radius'],
+      unchanged: ['--statcard-padding'],
+      aliasedTo: { '--statcard-radius': '--radius-none' },
+      observe: { part: 'root', css: 'borderRadius', variable: '--statcard-radius' },
+    },
+    interaction: { applicable: false, reason: 'a stat card carries no interactive role' },
+    sketch: {
+      style: 'pencil',
+      parts: [{ part: 'root', fill: '--statcard-surface', stroke: '--statcard-border' }],
+    },
+  },
+];
+```
+Each obligation and what it needs from the project:
+- `properties`: part key, then CSS property, then the semantic property that
+  drives it. One entry per variant tab and state tab the editor renders;
+  omit `variant` and `state` when the editor renders one view. The paint maps
+  and `uncovered` together name every property in `default.json`. A property
+  no computed style shows verbatim, one consumed inside `calc()` or a gradient
+  function, goes in `uncovered` with its reason.
+- `states`: one entry per state tab, with the class or attributes the preview
+  forces. `applicable: false` when the editor renders no state strip.
+- `persistence`: an edit the run makes through the editor, saves, reloads, and
+  reads back. `resetVariable` is a property one of the cases moves.
+- `theme`: a theme in the project's data tree whose block for the component
+  reassigns a property. Save one with the editor before the first run.
+  `changed` names the properties the theme moves, `unchanged` the ones it
+  leaves, and `aliasedTo` the design token each reassigned property resolves
+  to under it.
+- `interaction`: the interactive part's role and its cases. `applicable:
+  false` for a component with no interactive role.
+- `sketch`: a sketch style id and the fill and stroke each reserved-class part
+  resolves to under it. `applicable: false` only for a component
+  `references/sketch-mode.md` exempts.
 ## Running vitest yourself
 `check-component --tests` covers the shipped path. Run vitest directly only

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,77 @@
 # Changelog
+## 0.77.0 — A consumer component runs the same suites
+### Added
+- **A consumer component's contract reaches the Playwright suites.**
+  `live-tokens.testing.ts` has carried a `contractsModule` setting since
+  0.75.0, naming a module that exports the `ComponentContract[]` a project
+  adds to the shipped list, and nothing documented it. A consumer following
+  live-tokens-create-component reached the Verification step with the eight
+  component suites reported as incomplete and the skill giving no way to
+  complete them. The skill now names the contract as a deliverable beside the
+  registration, and `references/contract-tests.md` shows the setting, a
+  complete contract for the skill's own example, and what each obligation
+  needs from the project. `src/testing/contracts/contracts.test.ts` covers the
+  loader.
+- **`contract-missing` is its own finding.** A run narrowed to a component
+  with no contract used to throw from the Playwright config, so the runner
+  saw no report and surfaced a `tests-setup` finding holding a tail of
+  stderr. The editor suite now emits one failing test tagged
+  `contract-missing`, the JSON report carries it, and the runner maps it like
+  any other violation: one finding at `live-tokens.testing.ts` that names the
+  setting and lists the declared ids, with the `coverage` fix slug. The render
+  and alias suites still run for that component, and the failed rule explains
+  its seven unrun obligations, so reconciliation adds nothing on top.
+### Changed
+- **The `create` template installs the test tooling.** `@playwright/test`,
+  `vitest`, and `happy-dom` are devDependencies of a scaffolded project, and
+  the scaffold ships `live-tokens.testing.ts` naming `src/registerComponents.ts`
+  and `tests/contracts.ts`, both present and empty, with `main.ts` importing
+  the registration module before boot. `npm run test:design` therefore works
+  once `npx playwright install chromium` has run, and the create-component
+  skill lands its Registration and contract in files that already exist. The
+  three stay optional peers of the package. The create smoke test asserts the
+  tooling resolves in a scaffold from the packed tarball.
+## 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

package/README.md CHANGED Viewed

@@ -322,7 +322,7 @@ 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 [--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. |
@@ -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`

package/bin/check-component.mjs CHANGED Viewed

@@ -55,6 +55,7 @@ export const COMPONENT_RULES = {
   'contract-interaction': 'error',
   'contract-listed': 'error',
   'contract-sketch': 'error',
+  'contract-missing': 'error',
   'tests-not-installed': 'error',
   'tests-setup': 'error',
   'tests-incomplete': 'error',
@@ -94,6 +95,7 @@ export const COMPONENT_RULE_FIX = {
   'contract-registry': 'registration',
   'contract-listed': 'registration',
   'contract-sketch': 'sketch',
+  'contract-missing': 'coverage',
   'tests-not-installed': 'tooling',
   'tests-setup': 'tooling',
   'tests-incomplete': 'coverage',

package/bin/cli.mjs CHANGED Viewed

@@ -14,7 +14,7 @@
 //   save-theme <name>        Compose the live state into themes/<slug>.json and open it.
 //   migrate [...]            Reconcile tokens.css, the data tree, and route references.
-import { cpSync, existsSync, mkdirSync, readdirSync, statSync, writeSync } from 'node:fs';
+import { writeSync } from 'node:fs';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import process from 'node:process';
@@ -40,6 +40,7 @@ import {
 } from './migrate.mjs';
 import { runMigrateRoutes, formatRouteResult } from './migrate-routes.mjs';
 import { runCreate, formatCreateResult } from './create.mjs';
+import { runSetupClaude, formatSetupResult } from './setup-claude.mjs';
 import { runSetColors, formatSetColorsResult } from './set-colors.mjs';
 import { runSetGeometry, formatSetGeometryResult } from './set-geometry.mjs';
 import { runSetType, formatSetTypeResult } from './set-type.mjs';
@@ -407,61 +408,14 @@ if (process.platform === 'win32') {
   fail('setup-claude is macOS/Linux only.');
 }
-const force = rest.includes('--force');
-const srcSkills = join(pkgRoot, '.claude', 'skills');
-if (!existsSync(srcSkills)) {
-  fail(`No bundled skills found at ${srcSkills}. Is the package installed correctly?`);
-}
-const skills = readdirSync(srcSkills).filter((name) =>
-  statSync(join(srcSkills, name)).isDirectory(),
-);
-if (skills.length === 0) {
-  fail('No bundled skills to install.');
-}
-const destSkills = join(process.cwd(), '.claude', 'skills');
-mkdirSync(destSkills, { recursive: true });
-let installed = 0;
-let skipped = 0;
-for (const skill of skills) {
-  const src = join(srcSkills, skill);
-  const dest = join(destSkills, skill);
-  if (existsSync(dest) && !force) {
-    console.log(`  skip  ${skill}  (already exists; pass --force to overwrite)`);
-    skipped++;
-    continue;
-  }
-  cpSync(src, dest, { recursive: true });
-  console.log(`  ok    ${skill}`);
-  installed++;
-}
-console.log(`\n${installed} installed, ${skipped} skipped, in ${destSkills}`);
-const SAMPLE_PROMPTS = {
-  'live-tokens-create-page': 'build a pricing page using live-tokens components',
-  'live-tokens-pick-component': "what's the difference between TabBar and SegmentedControl?",
-  'live-tokens-create-component': 'author a new Toggle component for my live-tokens project',
-  'live-tokens-create-theme': 'make me a bright and cheerful theme',
-  'live-tokens-set-colors': 'give me a cooler palette, same fonts',
-  'live-tokens-set-type': 'pair some fonts for this theme',
-  'live-tokens-set-geometry': 'make the buttons pill shaped',
-  'live-tokens-fix-findings': 'make check:design pass',
-  'live-tokens-check-compliance': 'check this project against the design system',
-};
-const installedSamples = skills
-  .map((s) => SAMPLE_PROMPTS[s] && [s, SAMPLE_PROMPTS[s]])
-  .filter(Boolean);
-if (installedSamples.length > 0) {
-  console.log(`\nIn Claude Code, prompts like these auto-trigger the matching skill:`);
-  for (const [skill, prompt] of installedSamples) {
-    console.log(`  "${prompt}"\n    ${skill}`);
-  }
+try {
+  const result = runSetupClaude({
+    pkgRoot,
+    cwd: process.cwd(),
+    force: rest.includes('--force'),
+  });
+  console.log(formatSetupResult(result));
+  process.exit(0);
+} catch (err) {
+  fail(err instanceof Error ? err.message : String(err));
 }

package/bin/contractRunner.mjs CHANGED Viewed

@@ -552,10 +552,15 @@ export function readPlaywrightTests(report) {
  * the shipped `.contract.ts` suite (absent from the tarball, and Playwright
  * reports no assertion location for it once compiled — see the plan's Wave
  * 3b/4 notes). `contract-alias`/`persist`/`theme` name the shipped config;
- * `contract-listed` names the editor; render/preview/sketch name the runtime.
+ * `contract-listed` names the editor; render/preview/sketch name the runtime;
+ * `contract-missing` names the settings file the contract module is declared in.
  */
 export function artifactForContractRule(root, sourceDataDir, rule, componentId, token) {
   if (!componentId) return { file: 'package.json', line: 1 };
+  if (rule === 'contract-missing') {
+    const settings = settingsFilePath(root);
+    return { file: settings ? relative(root, settings) : 'package.json', line: 1 };
+  }
   const paths = resolveComponentPaths(componentId, root);
   if (rule === 'contract-alias' || rule === 'contract-persist' || rule === 'contract-theme') {
     const target = componentConfigPath(sourceDataDir, componentId);

package/bin/setup-claude.mjs ADDED Viewed

@@ -0,0 +1,110 @@
+// Installs the bundled Claude Code skills into a project's ./.claude/skills/.
+//
+// Claude Code discovers skills only under .claude/skills/, never inside
+// node_modules, so the package's own copy has to be duplicated into each
+// project that wants them. That makes this command the only thing keeping the
+// two trees in step, and `--force` has to mean "make the destination match this
+// release" rather than "write over the files I happen to ship today":
+//
+//   - a skill this release renamed leaves its old directory behind, where it
+//     shadows the new one with stale instructions;
+//   - a reference file this release dropped survives inside a skill that is
+//     otherwise current, because cpSync merges into an existing directory.
+//
+// Both are invisible until a model reads the stale text, so --force replaces
+// each directory outright and prunes the ones this release no longer ships.
+import { cpSync, existsSync, mkdirSync, readdirSync, rmSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+// The package owns this prefix in a project's skills directory. A skill without
+// it is the project's own and is never touched, whatever the flags say.
+const SKILL_PREFIX = 'live-tokens-';
+const SAMPLE_PROMPTS = {
+  'live-tokens-create-page': 'build a pricing page using live-tokens components',
+  'live-tokens-pick-component': "what's the difference between TabBar and SegmentedControl?",
+  'live-tokens-create-component': 'author a new Toggle component for my live-tokens project',
+  'live-tokens-create-theme': 'make me a bright and cheerful theme',
+  'live-tokens-set-colors': 'give me a cooler palette, same fonts',
+  'live-tokens-set-type': 'pair some fonts for this theme',
+  'live-tokens-set-geometry': 'make the buttons pill shaped',
+  'live-tokens-fix-findings': 'make check:design pass',
+  'live-tokens-check-compliance': 'check this project against the design system',
+};
+function directoriesIn(dir) {
+  if (!existsSync(dir)) return [];
+  return readdirSync(dir).filter((name) => statSync(join(dir, name)).isDirectory());
+}
+export function runSetupClaude({ pkgRoot, cwd, force = false }) {
+  const srcSkills = join(pkgRoot, '.claude', 'skills');
+  if (!existsSync(srcSkills)) {
+    throw new Error(`No bundled skills found at ${srcSkills}. Is the package installed correctly?`);
+  }
+  const shipped = directoriesIn(srcSkills);
+  if (shipped.length === 0) {
+    throw new Error('No bundled skills to install.');
+  }
+  const destSkills = join(cwd, '.claude', 'skills');
+  mkdirSync(destSkills, { recursive: true });
+  const installed = [];
+  const skipped = [];
+  const removed = [];
+  for (const skill of shipped) {
+    const dest = join(destSkills, skill);
+    if (existsSync(dest) && !force) {
+      skipped.push(skill);
+      continue;
+    }
+    // Replace rather than merge: a file this release dropped must not survive
+    // inside a directory that otherwise looks current.
+    rmSync(dest, { recursive: true, force: true });
+    cpSync(join(srcSkills, skill), dest, { recursive: true });
+    installed.push(skill);
+  }
+  if (force) {
+    for (const name of directoriesIn(destSkills)) {
+      if (!name.startsWith(SKILL_PREFIX) || shipped.includes(name)) continue;
+      rmSync(join(destSkills, name), { recursive: true, force: true });
+      removed.push(name);
+    }
+  }
+  return { installed, skipped, removed, destSkills, shipped };
+}
+export function formatSetupResult({ installed, skipped, removed, destSkills, shipped }) {
+  const lines = [];
+  for (const skill of shipped) {
+    if (installed.includes(skill)) lines.push(`  ok    ${skill}`);
+    else lines.push(`  skip  ${skill}  (already exists; pass --force to overwrite)`);
+  }
+  for (const skill of removed) {
+    lines.push(`  gone  ${skill}  (this release no longer ships it; removed)`);
+  }
+  const counts = [`${installed.length} installed`, `${skipped.length} skipped`];
+  if (removed.length > 0) counts.push(`${removed.length} removed`);
+  lines.push(`\n${counts.join(', ')}, in ${destSkills}`);
+  if (skipped.length > 0 && removed.length === 0) {
+    lines.push(`\nRe-run with --force to bring every skill up to this release.`);
+  }
+  const samples = shipped.map((s) => SAMPLE_PROMPTS[s] && [s, SAMPLE_PROMPTS[s]]).filter(Boolean);
+  if (samples.length > 0) {
+    lines.push(`\nIn Claude Code, prompts like these auto-trigger the matching skill:`);
+    for (const [skill, prompt] of samples) lines.push(`  "${prompt}"\n    ${skill}`);
+  }
+  return lines.join('\n');
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.75.0",
+  "version": "0.77.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [