@misoto22/design 0.3.1 → 0.6.0

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",
@@ -269,29 +338,58 @@
     "category": "space",
     "light": "clamp(40px, calc(5 * var(--fluid)), 68px)"
   },
+  "radius-factor": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "1"
+  },
+  "radius-gate": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "min(1, var(--radius-factor))",
+    "comment": "Clamps the factor at 1 for the ADDING direction only. A frame's air is a fixed number of pixels, so `--radius-lg + 16px` would leave a rounded frame around a square panel the moment the theme went square; gated, it collapses to nothing along with everything else."
+  },
+  "radius-xs": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(4px * var(--radius-factor))",
+    "comment": "The numbers are the ones the rest of the industry settled on, and that is the argument for them: 8px for a control, 12px for a panel, and 4/6 for the small marks inside one. Tailwind's own scale, shadcn's `--radius` ± 2 and ± 4, Radix Themes' steps 3 and 4, and Material's `xs`/`sm`/`md` all agree within a pixel of this. The previous 2/4/6/10 was a step tighter than any of them, which is what made a card read as a rectangle with the corners shaved rather than as a rounded panel."
+  },
   "radius-sm": {
     "layer": "tokens",
     "category": "radius",
-    "light": "6px",
-    "comment": "─── Radius ───────────────────────────────────────────────────────────── Four steps, and there is no fifth. The old law was \"0 everywhere\"; the White Reset replaces that with a scale small enough to stay quiet on a white page. A 50% circle is geometry rather than a corner and is not a step here."
+    "light": "calc(6px * var(--radius-factor))",
+    "comment": "a mark inside a tight box"
   },
   "radius": {
     "layer": "tokens",
     "category": "radius",
-    "light": "8px",
-    "comment": "images, thumbnails, media frames"
+    "light": "calc(8px * var(--radius-factor))",
+    "comment": "chips, keys, list rows"
   },
   "radius-lg": {
     "layer": "tokens",
     "category": "radius",
-    "light": "14px",
-    "comment": "inputs, buttons, small plates"
+    "light": "calc(12px * var(--radius-factor))",
+    "comment": "inputs, code, small plates"
   },
   "radius-pill": {
     "layer": "tokens",
     "category": "radius",
-    "light": "999px",
-    "comment": "feature panels, dark plates"
+    "light": "calc(999px * var(--radius-factor))",
+    "comment": "cards, dialogs, menu panels"
+  },
+  "radius-row": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "max(0px, calc(var(--radius-lg) - 0.375rem))",
+    "comment": "The nesting law, applied to the two insets this system actually uses."
+  },
+  "radius-frame": {
+    "layer": "tokens",
+    "category": "radius",
+    "light": "calc(var(--radius-lg) + 1rem * var(--radius-gate))",
+    "comment": "a row in a 6px-padded panel"
   },
   "control-h-sm": {
     "layer": "tokens",
@@ -367,6 +465,22 @@
     "light": "0px",
     "comment": "`0px`, not `0`. The cell rule adds to this inside a calc, and a unitless zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole declaration is dropped and every column loses its gutter in silence."
   },
+  "panel-bg": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "var(--paper)",
+    "comment": "─── Floating surfaces ────────────────────────────────────────────────── What a panel that FLOATS fills with, and what it does to whatever is behind it. A dialog, a menu, a popover, a palette — the surfaces that sit OVER the page rather than in it, and therefore the only ones with anything behind them to treat. Both default to the plain surface and cost nothing. `--panel-filter: none` matters more than it looks: a `backdrop-filter` of any value, `blur(0px)` included, promotes its element to its own compositing layer and makes it a containing block for fixed descendants. Paid on every menu in the system, for a theme most readers will never turn on. `none` is not a blur of zero; it is no filter at all. A card is deliberately NOT on this list. It sits on the page ground, so there is nothing behind it to see through, and a card that blurs its own background is drawing an effect rather than an object."
+  },
+  "panel-border": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "var(--rule-2)"
+  },
+  "panel-filter": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "none"
+  },
   "ease": {
     "layer": "tokens",
     "category": "motion",
@@ -649,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,8 +1,8 @@
 {
   "name": "@misoto22/design",
-  "version": "0.3.1",
+  "version": "0.6.0",
   "private": false,
-  "description": "Monochrome design system \u2014 CSS tokens and accessible React primitives",
+  "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",
   "author": "Henry Chen",
   "type": "module",
@@ -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",
@@ -29,26 +38,16 @@
       "types": "./dist/tokens.d.ts",
       "import": "./dist/tokens.js"
     },
-    "./themes.css": "./dist/themes.css"
+    "./themes.css": "./dist/themes.css",
+    "./article.css": "./dist/article.css"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "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",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rm -rf dist",
-    "check:size": "node scripts/check-size.mjs"
-  },
   "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",
@@ -78,6 +77,7 @@
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
     "@fontsource/hanken-grotesk": "^5.2.5",
     "@fontsource/ibm-plex-mono": "^5.2.5",
     "@fontsource/newsreader": "^5.2.5",
@@ -94,8 +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",
@@ -105,10 +108,9 @@
     "node": ">=24",
     "pnpm": ">=11"
   },
-  "packageManager": "pnpm@11.9.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Misoto22/misoto22-design.git",
+    "url": "git+https://github.com/Misoto22/misoto22-design.git",
     "directory": "packages/design"
   },
   "keywords": [
@@ -126,5 +128,28 @@
   },
   "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: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 scripts agent bin",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "check:size": "node scripts/check-size.mjs",
+    "check:publish": "node scripts/check-publish.mjs"
   }
-}
+}

package/skills/misoto22-design/SKILL.md

@@ -0,0 +1,171 @@
+---
+name: misoto22-design
+description: Builds UI with @misoto22/design — a monochrome design system of CSS tokens and 52 accessible React primitives. Use when a project imports '@misoto22/design', sets data-mode / data-surface / data-radius / data-accent, or uses cn(), CONTROL_BASE, or isInvalid. Also applies when adding a component, theming, 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'
+```
+
+## 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 ~28,000
+for all fifty-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 seven `data-*` axes**, set on any element, not just `:root`.
+  `data-mode`, `data-surface`, `data-radius`, `data-rules`, `data-type`,
+  `data-motion`, `data-density`, plus `data-accent`.
+- **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" }
+  ]
+}