@misoto22/design 0.5.0 → 0.6.1

package/dist/tokens.js

@@ -168,6 +168,75 @@ export const TOKENS = {
     "light": "var(--clay)",
     "dark": "var(--clay)"
   },
+  "series-1": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#101010",
+    "comment": "─── Data ─────────────────────────────────────────────────────────────── The series ramp a chart paints with, and the one place the White Reset has to answer a question a monochrome system would rather not be asked: how do you tell six lines apart with no hue left to spend? The answer is that hue was never the primary carrier here — TEXTURE is. Every chart primitive ships a fill variant (hatched, dotted, lines, stripped, duotone) and the series ramp below is the SECOND encoding, not the first. That ordering is what makes the set legible to a colour-blind reader, in greyscale print, and under forced-colours, none of which a hue-first categorical palette survives. The eight steps are interleaved rather than sequential — light, dark, light, dark — so neighbouring series sit as far apart on the lightness ramp as eight steps allow. Adjacent separation is ΔE 21.0 (OKLab ×100) against a 15 floor, and every step clears 3:1 on its own ground. Two checks a chromatic palette would pass fail here BY DESIGN, and are stated rather than hidden: the chroma floor (these are greys) and the lightness band (--series-1 is ink, and ink is the darkest mark the system has). Texture plus a legend is the relief, and both are mandatory — `Chart.Legend` is not optional above one series. A consumer who genuinely needs hue does not hand-pick hexes: it sets `data-chart-palette=\"chroma\"` (see themes.css), which re-points these eight names onto a categorical palette validated against both grounds.",
+    "dark": "CanvasText"
+  },
+  "series-2": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#565656",
+    "dark": "CanvasText"
+  },
+  "series-3": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#202020",
+    "dark": "CanvasText"
+  },
+  "series-4": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#6a6a6a",
+    "dark": "CanvasText"
+  },
+  "series-5": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#313131",
+    "dark": "CanvasText"
+  },
+  "series-6": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#7e7e7e",
+    "dark": "CanvasText"
+  },
+  "series-7": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#434343",
+    "dark": "CanvasText"
+  },
+  "series-8": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#939393",
+    "dark": "CanvasText"
+  },
+  "series-track": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#eeece7",
+    "comment": "The empty ground a part-of-whole mark is drawn against — the unfilled remainder of a radial bar, the track behind a gauge. Not --rule: a track is a field, and a field that reads as a hairline disappears at radius.",
+    "dark": "Canvas"
+  },
+  "chart-fill": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "0.14",
+    "comment": "How solid a translucent mark is, and the one pair of tokens in the file that is NOT the same number on both grounds. A wash is `ink at N% over the page`. On paper, ink at 14% lands around #e3e3e3 — a legible, recessive band. Run the same 14% the other way and paper-white over near-black lands around #2c2c2c, which on a #0d0d0d ground is not a band, it is nothing. Perceived lightness is not linear and the two directions do not meet in the middle, so a single number cannot serve both: the dark side needs roughly twice the alpha to read as the same weight of mark. Every area fill, texture and flow band in the chart package reads these rather than carrying its own literal.",
+    "dark": "0.45"
+  },
+  "chart-texture": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "0.42",
+    "dark": "1"
+  },
   "sans": {
     "layer": "tokens",
     "category": "type",
@@ -695,6 +764,38 @@ export const TOKENS = {
     "light": "#101010",
     "comment": "The photo scrim is always dark by design, so it takes the ink literal rather than the semantic token (which inverts)."
   },
+  "chart-surface": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--paper)",
+    "comment": "─── Data ───────────────────────────────────────────────────────────── What a chart is allowed to read. The series ramp itself stays a primitive — a chart names a SERIES by index, and an index has no role to alias — but everything around the marks does have one, and naming it here is what keeps a chart from reaching for --rule or --ink directly. --chart-cursor is deliberately heavier than --chart-grid: the crosshair has to be findable against the grid it crosses, and at hairline weight on a dashed grid it was not."
+  },
+  "chart-grid": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule)"
+  },
+  "chart-cursor": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule-2)"
+  },
+  "chart-axis": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--ink-3-aa)"
+  },
+  "chart-track": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--series-track)"
+  },
+  "chart-pattern": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule)",
+    "comment": "The decorative plate behind the plot — a dot field, a hatch, a grid of plus marks. One step quieter than the grid, because it sits BEHIND data and must never compete with it for the same read."
+  },
   "shadow-color": {
     "layer": "semantic",
     "category": "depth",

package/dist/tokens.json

@@ -167,6 +167,75 @@
     "light": "var(--clay)",
     "dark": "var(--clay)"
   },
+  "series-1": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#101010",
+    "comment": "─── Data ─────────────────────────────────────────────────────────────── The series ramp a chart paints with, and the one place the White Reset has to answer a question a monochrome system would rather not be asked: how do you tell six lines apart with no hue left to spend? The answer is that hue was never the primary carrier here — TEXTURE is. Every chart primitive ships a fill variant (hatched, dotted, lines, stripped, duotone) and the series ramp below is the SECOND encoding, not the first. That ordering is what makes the set legible to a colour-blind reader, in greyscale print, and under forced-colours, none of which a hue-first categorical palette survives. The eight steps are interleaved rather than sequential — light, dark, light, dark — so neighbouring series sit as far apart on the lightness ramp as eight steps allow. Adjacent separation is ΔE 21.0 (OKLab ×100) against a 15 floor, and every step clears 3:1 on its own ground. Two checks a chromatic palette would pass fail here BY DESIGN, and are stated rather than hidden: the chroma floor (these are greys) and the lightness band (--series-1 is ink, and ink is the darkest mark the system has). Texture plus a legend is the relief, and both are mandatory — `Chart.Legend` is not optional above one series. A consumer who genuinely needs hue does not hand-pick hexes: it sets `data-chart-palette=\"chroma\"` (see themes.css), which re-points these eight names onto a categorical palette validated against both grounds.",
+    "dark": "CanvasText"
+  },
+  "series-2": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#565656",
+    "dark": "CanvasText"
+  },
+  "series-3": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#202020",
+    "dark": "CanvasText"
+  },
+  "series-4": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#6a6a6a",
+    "dark": "CanvasText"
+  },
+  "series-5": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#313131",
+    "dark": "CanvasText"
+  },
+  "series-6": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#7e7e7e",
+    "dark": "CanvasText"
+  },
+  "series-7": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#434343",
+    "dark": "CanvasText"
+  },
+  "series-8": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#939393",
+    "dark": "CanvasText"
+  },
+  "series-track": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "#eeece7",
+    "comment": "The empty ground a part-of-whole mark is drawn against — the unfilled remainder of a radial bar, the track behind a gauge. Not --rule: a track is a field, and a field that reads as a hairline disappears at radius.",
+    "dark": "Canvas"
+  },
+  "chart-fill": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "0.14",
+    "comment": "How solid a translucent mark is, and the one pair of tokens in the file that is NOT the same number on both grounds. A wash is `ink at N% over the page`. On paper, ink at 14% lands around #e3e3e3 — a legible, recessive band. Run the same 14% the other way and paper-white over near-black lands around #2c2c2c, which on a #0d0d0d ground is not a band, it is nothing. Perceived lightness is not linear and the two directions do not meet in the middle, so a single number cannot serve both: the dark side needs roughly twice the alpha to read as the same weight of mark. Every area fill, texture and flow band in the chart package reads these rather than carrying its own literal.",
+    "dark": "0.45"
+  },
+  "chart-texture": {
+    "layer": "tokens",
+    "category": "data",
+    "light": "0.42",
+    "dark": "1"
+  },
   "sans": {
     "layer": "tokens",
     "category": "type",
@@ -694,6 +763,38 @@
     "light": "#101010",
     "comment": "The photo scrim is always dark by design, so it takes the ink literal rather than the semantic token (which inverts)."
   },
+  "chart-surface": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--paper)",
+    "comment": "─── Data ───────────────────────────────────────────────────────────── What a chart is allowed to read. The series ramp itself stays a primitive — a chart names a SERIES by index, and an index has no role to alias — but everything around the marks does have one, and naming it here is what keeps a chart from reaching for --rule or --ink directly. --chart-cursor is deliberately heavier than --chart-grid: the crosshair has to be findable against the grid it crosses, and at hairline weight on a dashed grid it was not."
+  },
+  "chart-grid": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule)"
+  },
+  "chart-cursor": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule-2)"
+  },
+  "chart-axis": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--ink-3-aa)"
+  },
+  "chart-track": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--series-track)"
+  },
+  "chart-pattern": {
+    "layer": "semantic",
+    "category": "data",
+    "light": "var(--rule)",
+    "comment": "The decorative plate behind the plot — a dot field, a hatch, a grid of plus marks. One step quieter than the grid, because it sits BEHIND data and must never compete with it for the same read."
+  },
   "shadow-color": {
     "layer": "semantic",
     "category": "depth",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@misoto22/design",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "private": false,
   "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",
@@ -11,14 +11,23 @@
   ],
   "files": [
     "dist",
+    "skills",
+    "bin",
     "LICENSE",
     "README.md"
   ],
+  "bin": {
+    "misoto22-design": "./bin/misoto22-design.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts/index.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./tokens.css": "./dist/tokens.css",
     "./semantic.css": "./dist/semantic.css",
@@ -35,8 +44,10 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "peerDependencies": {
+    "motion": "^12.23.26",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "recharts": "^3.8.0"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.14",
@@ -83,9 +94,11 @@
     "esbuild": "^0.28.2",
     "esbuild-fix-imports-plugin": "^1.0.23",
     "jsdom": "^29.1.1",
+    "motion": "^12.43.0",
     "publint": "^0.3.24",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "recharts": "3.8.0",
     "tailwindcss": "4.3.3",
     "tsup": "^8.5.0",
     "typescript": "^6.0.3",
@@ -116,14 +129,23 @@
   "publishConfig": {
     "access": "public"
   },
+  "peerDependenciesMeta": {
+    "motion": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build:fonts": "node scripts/vendor-fonts.mjs",
     "build:js": "NODE_OPTIONS=--max-old-space-size=6144 tsup",
     "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --minify && node scripts/copy-portable-css.mjs && node scripts/emit-tokens.mjs",
-    "build": "pnpm run build:fonts && pnpm run build:js && pnpm run build:css",
+    "build:agent": "node scripts/emit-agent.mjs",
+    "build": "pnpm run build:fonts && pnpm run build:js && pnpm run build:css && pnpm run build:agent",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src",
+    "lint": "eslint src scripts agent bin",
     "test": "vitest run",
     "test:watch": "vitest",
     "clean": "rm -rf dist",

package/skills/misoto22-design/SKILL.md

@@ -0,0 +1,209 @@
+---
+name: misoto22-design
+description: Builds UI with @misoto22/design — a monochrome design system of CSS tokens and 72 accessible React primitives, charts included. Use when a project imports '@misoto22/design' or '@misoto22/design/charts', sets data-mode / data-surface / data-radius / data-density, or uses cn(), CONTROL_BASE, or isInvalid. Also applies when adding a component, theming, plotting data, or fixing a form, table, dialog, or toast in such a project.
+allowed-tools: Bash(npx misoto22-design *), Bash(pnpm exec misoto22-design *), Bash(bunx misoto22-design *)
+---
+
+# @misoto22/design
+
+CSS tokens plus React 19 primitives. Components ship compiled — you import them,
+you do not copy them into the project.
+
+```tsx
+import { Button, Field, Input } from '@misoto22/design'
+import '@misoto22/design/styles.css'
+```
+
+## Two entry points
+
+The root entry has no dependencies a consumer has to install. Everything that
+plots data lives behind a second specifier, because it needs a rendering engine
+and an animation runtime that nothing else in the package does:
+
+```tsx
+import { AreaChart, BarList, BigNumber } from '@misoto22/design/charts'
+```
+
+```bash
+pnpm add recharts motion      # optional peers, only for the charts entry
+```
+
+That separation is the reason an app that renders a Badge never resolves
+`recharts` — so importing a chart from the root specifier does not render a
+blank component, it throws. `docs <Component>` prints the right line for each
+one; the `Import:` header is derived from the tree the component lives in, not
+written by hand.
+
+Some of the charts need no engine at all — `Heatmap` is a `<table>`,
+`Sparkline` is one `<path>`, `BarList`, `BigNumber` and `BulletChart` are plain
+HTML — but they ship from the charts entry all the same, so the boundary stays
+one line rather than a list to memorise.
+
+One more, for surfaces that cannot read a custom property — an OpenGraph card, a
+`theme-color`, a canvas:
+
+```ts
+import { TOKENS } from '@misoto22/design/tokens'
+```
+
+Never for styling a component. A literal in a stylesheet is a value that stops
+following the theme, and every one of these mirrors a token that does.
+
+## What this project has installed
+
+```
+!`npx misoto22-design docs --installed`
+```
+
+That is the version resolved in this project and every component it ships. Get
+one component's full contract — every prop with its type and default, its
+exported unions, its keyboard map, its accessibility promises, its examples —
+with:
+
+```bash
+npx misoto22-design docs Button
+```
+
+Run that before writing against a component you have not used in this session.
+The median component is ~500 tokens and the largest is ~1,300, against far more
+for all seventy-two. It is generated from the installed source, so it cannot be
+out of date the way the website can.
+
+It also resolves parts and types, not just components: `docs CardBody`,
+`docs TH` and `docs ButtonVariant` all land on the right file. When an import
+fails, ask it about the identifier you tried.
+
+## The one thing to internalise
+
+**This is not shadcn/ui, and the names differ where it matters most.** A model
+writing from habit produces imports that do not exist. The full table is in
+[naming.md](./rules/naming.md); these four are the ones that come up every time:
+
+| Habit | Here |
+| --- | --- |
+| `CardContent` | **`CardBody`** |
+| `TableHeader` / `TableBody` / `TableRow` / `TableHead` / `TableCell` | **`THead` / `TBody` / `TR` / `TH` / `TD`** |
+| `<DialogTitle>` as a child | **`<DialogContent title="…">`** — a prop, not a child |
+| `<AlertTitle>` / `<AlertDescription>` | **`<Alert tone title="…">`** — props, not children |
+
+## Critical rules
+
+Always enforced. Each links to a file with Incorrect/Correct pairs — read it when
+you are about to do that thing, not before.
+
+### Colour and theming → [tokens.md](./rules/tokens.md)
+
+- **Never write a raw colour.** No `bg-neutral-900`, no `text-gray-500`, no hex.
+  Read the semantic layer: `bg-(--background)`, `text-(--foreground-muted)`,
+  `border-(--border-color)`.
+- **Never write a `dark:` variant.** Dark mode is a value swap behind
+  `data-mode="dark"`; a `dark:` override fights it and wins in only one theme.
+- **Theme with the `data-*` axes**, set on any element, not just `:root`.
+  `data-mode`, `data-surface`, `data-radius`, `data-rules`, `data-type`,
+  `data-motion`, `data-density`, `data-table-density`, `data-chart-palette`.
+  There is no `data-accent` — `--accent` is a custom property, re-pointed in
+  CSS. `npx misoto22-design docs --installed` prints the current list; it is
+  read out of the stylesheets rather than kept by hand here.
+- **Durations and radii come from tokens.** `duration-(--duration-fast)`,
+  `rounded-(--radius)` — not `duration-150`, not `rounded-lg`.
+- **No blurred shadow.** `--shadow*` resolves to `none` on purpose. Depth is a
+  hairline, a change of ground, or `--lift`.
+
+### Composition → [composition.md](./rules/composition.md)
+
+- **`className` adjusts layout, never appearance.** Margin, width, grid
+  placement — yes. Colour, border, radius, font — no; that is what the props and
+  the axes are for.
+- **Use `cn()` for conditional classes.** It is exported. Plain template
+  literals emit both sides of a Tailwind conflict and let stylesheet order pick
+  the winner.
+- **Card uses the full set.** `Card` → `CardHeader` / `CardTitle` / `CardBody` /
+  `CardFooter`. Do not dump everything into one div.
+- **`Select` is one component, not a compound.** It takes `label`, `placeholder`
+  and `SelectItem` children. There is no `SelectTrigger` or `SelectValue`.
+- **Logical properties, always.** `ps-` / `pe-` / `start-` / `end-` /
+  `text-start`. The package is RTL-correct and a physical property breaks it.
+
+### Forms → [forms.md](./rules/forms.md)
+
+- **A labelled control is a `Field`.** `<Field label hint error required>` wraps
+  one control and wires `aria-describedby`, `aria-required` and `aria-invalid`
+  onto it. Never hand-roll `<label>` + input + error div.
+- **Errors go in `Field`'s `error` prop.** It replaces `hint` — they are one
+  slot, not two stacked messages — and it sets `aria-invalid` on the control for
+  you, so do not also pass `invalid`.
+- **Outside a `Field`, invalid state is `invalid` or `aria-invalid`** on the
+  control. Never a red border class.
+- **One control per `Field`.** The wiring clones a single element child; a
+  wrapper div around two controls silently wires nothing.
+- **Build custom controls on `CONTROL_BASE` + `CONTROL_BORDER`** and read the
+  state with `isInvalid()`. All three are exported.
+
+### Accessibility → [a11y.md](./rules/a11y.md)
+
+- **Four props are required by the type because forgetting them ships an
+  unusable control**: `Table.caption`, `Progress.label`, `Avatar.alt`,
+  `FloatingIconButton.label`. `Select.label` and `Badge.children` too.
+- **`<Button iconOnly>` needs `aria-label`.** There is no text to read.
+- **Decoration is `aria-hidden`.** A status dot beside the word "Available"
+  repeats it.
+- **Colour is never the only carrier** of a status. Every tone is doubled by an
+  icon or by the words.
+
+### Imports
+
+- **`toast` comes from `@misoto22/design`, not from `sonner`.** Render `<Toaster />`
+  once at the app root.
+- **Styles are a separate import.** `@misoto22/design/styles.css` for the whole
+  compiled sheet, or `tokens.css` + `semantic.css` + `keyframes.css` when the app
+  compiles its own Tailwind.
+
+## Key patterns
+
+```tsx
+// A labelled, validated field. Field does the ARIA wiring, including
+// aria-invalid — do not also pass `invalid` on the control.
+<Field label="Email" required error={errors.email}>
+  <Input type="email" />
+</Field>
+
+// A select. One component; label is required.
+<Select label="Region" placeholder="Choose one">
+  <SelectItem value="au">Australia</SelectItem>
+</Select>
+
+// A dialog. The title is a prop, and it is not optional for a screen reader.
+<Dialog>
+  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
+  <DialogContent title="Delete project" description="This cannot be undone.">
+    <Button variant="danger">Delete</Button>
+  </DialogContent>
+</Dialog>
+
+// A table. caption is required; it is what a screen reader announces.
+<Table caption="Open invoices" borders="rows">
+  <THead><TR><TH>Client</TH><TH align="end">Amount</TH></TR></THead>
+  <TBody><TR><TD>Acme</TD><TD align="end">$1,200</TD></TR></TBody>
+</Table>
+
+// Colour: semantic tokens, no raw values, no dark: variant.
+<div className="bg-(--card-background) text-(--foreground-muted)">  // correct
+<div className="bg-white text-gray-500 dark:bg-neutral-900">        // wrong
+
+// Theming: an axis on any element themes the subtree below it.
+<section data-surface="warm" data-radius="round">…</section>
+```
+
+## Variants, in full
+
+Short enough to inline; everything else comes from `docs <Component>`.
+
+Every union is exported under the name in brackets, so a wrapper can take one
+without retyping it.
+
+- `Button` — `variant` [`ButtonVariant`]: `primary` `secondary` `ghost` `danger` · `size` [`ButtonSize`]: `sm` `md` `lg` · also `href`, `asChild`, `loading`, `iconOnly`, `keycap`
+- `Badge` — `tone` [`BadgeTone`]: `neutral` `success` `warning` `danger` `outline`
+- `Alert` — `tone` [`AlertTone`]: `info` `success` `warning` `danger`
+- `Card` — `variant`: `outline` `plate` `flat`
+- `Table` — `borders` [`TableBorders`]: `rows` `grid` `bordered` `bordered-grid` `none` · `density`: `comfortable` `compact`
+- `TH` / `TD` — `align` [`TableAlign`]: `start` `center` `end`

package/skills/misoto22-design/evals/claims.json

@@ -0,0 +1,95 @@
+{
+  "$comment": "Every identifier the skill tells an agent to write, paired with the habit it replaces. `skill.test.ts` asserts that each `use` is really exported, that each `avoid` really is not, and that both still appear in the rules — so a rename in the package, or a rule quietly deleted from the prose, fails the build instead of teaching the next agent something that stopped being true.",
+  "naming": [
+    { "use": "CardBody", "avoid": "CardContent" },
+    { "use": "THead", "avoid": "TableHeader" },
+    { "use": "TBody", "avoid": "TableBody" },
+    { "use": "TR", "avoid": "TableRow" },
+    { "use": "TH", "avoid": "TableHead" },
+    { "use": "TD", "avoid": "TableCell" },
+    { "use": "DialogContent", "avoid": "DialogTitle" },
+    { "use": "DialogContent", "avoid": "DialogHeader" },
+    { "use": "SheetContent", "avoid": "SheetTitle" },
+    { "use": "Tooltip", "avoid": "TooltipTrigger" },
+    { "use": "Tooltip", "avoid": "TooltipContent" },
+    { "use": "Alert", "avoid": "AlertTitle" },
+    { "use": "Alert", "avoid": "AlertDescription" },
+    { "use": "AccordionItem", "avoid": "AccordionTrigger" },
+    { "use": "AccordionItem", "avoid": "AccordionContent" },
+    { "use": "Select", "avoid": "SelectTrigger" },
+    { "use": "Select", "avoid": "SelectValue" },
+    { "use": "Select", "avoid": "SelectContent" }
+  ],
+  "$comment2": "Identifiers the skill names as real and reachable, without pairing them against a habit. Same guarantee: named in the prose, exported by the package.",
+  "exported": [
+    "cn",
+    "toast",
+    "Toaster",
+    "CONTROL_BASE",
+    "CONTROL_BORDER",
+    "isInvalid",
+    "Field",
+    "Input",
+    "Textarea",
+    "NativeSelect",
+    "Combobox",
+    "Checkbox",
+    "Switch",
+    "RadioGroup",
+    "RadioGroupItem",
+    "ToggleGroup",
+    "ToggleGroupItem",
+    "Slider",
+    "DatePicker",
+    "DateRangePicker",
+    "Card",
+    "CardHeader",
+    "CardTitle",
+    "CardFooter",
+    "Table",
+    "EmptyState",
+    "ErrorState",
+    "Separator",
+    "Skeleton",
+    "SkeletonLine",
+    "SkeletonText",
+    "SkeletonPage",
+    "Badge",
+    "StatusPill",
+    "Kbd",
+    "Breadcrumb",
+    "AppShell",
+    "Steps",
+    "Article",
+    "SelectItem",
+    "TooltipProvider",
+    "DialogTrigger",
+    "ButtonVariant",
+    "ButtonSize",
+    "BadgeTone",
+    "AlertTone",
+    "TableAlign",
+    "TableBorders"
+  ],
+  "$comment3": "Required-by-the-type props the a11y rule promises. `skill.test.ts` checks each against the extracted source, so a prop that stops being required stops being advertised as required.",
+  "requiredProps": [
+    { "component": "Table", "part": "Table", "prop": "caption" },
+    { "component": "Progress", "part": "Progress", "prop": "label" },
+    { "component": "Avatar", "part": "Avatar", "prop": "alt" },
+    { "component": "Avatar", "part": "Avatar", "prop": "fallback" },
+    { "component": "FloatingIconButton", "part": "FloatingIconButton", "prop": "label" },
+    { "component": "FloatingIconButton", "part": "FloatingIconButton", "prop": "position" },
+    { "component": "Select", "part": "Select", "prop": "label" },
+    { "component": "Combobox", "part": "Combobox", "prop": "label" },
+    { "component": "Combobox", "part": "Combobox", "prop": "options" },
+    { "component": "Sheet", "part": "SheetContent", "prop": "title" },
+    { "component": "Accordion", "part": "AccordionItem", "prop": "title" },
+    { "component": "EmptyState", "part": "EmptyState", "prop": "title" },
+    { "component": "Badge", "part": "Badge", "prop": "children" }
+  ],
+  "$comment4": "Props the skill describes as OPTIONAL where a reader would assume otherwise. Guarded in the same direction: if one becomes required, the prose that says it is not has to change with it.",
+  "optionalProps": [
+    { "component": "Dialog", "part": "DialogContent", "prop": "title" },
+    { "component": "Alert", "part": "Alert", "prop": "title" }
+  ]
+}