@misoto22/design 0.7.0 → 0.8.0

package/dist/tokens.js

@@ -297,37 +297,37 @@ export const TOKENS = {
   "fs-title": {
     "layer": "tokens",
     "category": "type",
-    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)"
+    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)",
+    "comment": "page h1 40 → 54px"
   },
   "fs-lead": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem)",
-    "comment": "page h1 40 → 54px"
+    "comment": "band heading 30 → 42px"
   },
   "fs-heading": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem)",
-    "comment": "band heading 30 → 42px"
+    "comment": "record title 24 → 29px"
   },
   "fs-sub": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem)",
-    "comment": "record title 24 → 29px"
+    "comment": "card sub-head 21 → 25px"
   },
   "fs-item": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem)",
-    "comment": "card sub-head 21 → 25px"
+    "comment": "in-card title 18 → 20px"
   },
   "pad": {
     "layer": "tokens",
     "category": "space",
-    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)",
-    "comment": "in-card title 18 → 20px"
+    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)"
   },
   "sec": {
     "layer": "tokens",
@@ -354,111 +354,114 @@ export const TOKENS = {
     "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."
+    "comment": "a mark inside a tight box"
   },
   "radius-sm": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(6px * var(--radius-factor))",
-    "comment": "a mark inside a tight box"
+    "comment": "chips, keys, list rows"
   },
   "radius": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(8px * var(--radius-factor))",
-    "comment": "chips, keys, list rows"
+    "comment": "inputs, code, small plates"
   },
   "radius-lg": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(12px * var(--radius-factor))",
-    "comment": "inputs, code, small plates"
+    "comment": "cards, dialogs, menu panels"
   },
   "radius-pill": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(999px * var(--radius-factor))",
-    "comment": "cards, dialogs, menu panels"
+    "comment": "capsules and counters"
   },
   "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."
+    "comment": "a row in a 6px-padded panel"
   },
   "radius-frame": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(var(--radius-lg) + 1rem * var(--radius-gate))",
-    "comment": "a row in a 6px-padded panel"
+    "comment": "a frame 16px outside a panel"
   },
   "control-h-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.875rem"
+    "light": "2.25rem",
+    "comment": "36px"
   },
   "control-h-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.25rem",
-    "comment": "30px"
+    "light": "2.75rem",
+    "comment": "44px — WCAG 2.5.5"
   },
   "control-h-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.5rem",
-    "comment": "36px — clears WCAG 2.5.8, not 2.5.5"
+    "light": "3rem",
+    "comment": "48px"
   },
   "control-px-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.75rem",
-    "comment": "40px"
+    "light": "1rem"
   },
   "control-px-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "1rem"
+    "light": "1.5rem"
   },
   "control-px-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.25rem"
+    "light": "1.75rem"
   },
   "control-py-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.25rem"
+    "light": "0.5rem",
+    "comment": "The vertical padding is part of the axis too, and has to be: a control whose padding alone exceeds the compact height never shrinks, because `min-height` is a floor and not a ceiling."
   },
   "control-py-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.75rem"
   },
   "control-py-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.75rem"
   },
   "control-gap": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.625rem"
   },
   "field-px": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.625rem"
+    "light": "0.875rem",
+    "comment": "Text inputs are measured separately: they are read as much as they are hit, so their padding tracks the type rather than the target."
   },
   "field-py": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.625rem"
   },
   "table-pad-y": {
     "layer": "tokens",
     "category": "other",
-    "light": "0.5rem"
+    "light": "0.875rem",
+    "comment": "A table's own row padding. Separate from the control scale because a table row is neither a control nor a field — it is a line of text with a rule under it, and it tightens on its own axis."
   },
   "table-pad-x": {
     "layer": "tokens",
@@ -507,7 +510,7 @@ export const TOKENS = {
     "layer": "tokens",
     "category": "layer",
     "light": "1",
-    "comment": "─── Stacking ─── seven ranks, named for what sits at each."
+    "comment": "─── Stacking ─── seven ranks, named for what sits at each. Every overlay in the package portals to document.body, so all of them are siblings in the ROOT stacking context and the rank is the whole of the decision — there is no ancestor left to nest one inside another. Read it as a sentence: a sticky header clears the page, a drawer clears the header, a scrim covers both, a modal sits on its scrim, an ANCHORED panel clears the modal it was opened from, and a toast clears everything because it is the only rank that has to survive a modal asking a question. --z-anchored is the one that is not obvious, and it is the one that was wrong. A popover, a menu or a select listbox is opened FROM something, and the surface it is most often opened from is a modal — a select inside a modal form is one of the most ordinary shapes in an application. Ranked below the modal, as it was, the panel is painted behind the very dialog that summoned it. The rank it replaced, --z-palette, was read by nothing: a command palette is a Dialog, so it lands at --z-modal, and its order against a second modal is settled by document order — which is the right answer, because it moves a scrim and its panel together."
   },
   "z-sticky": {
     "layer": "tokens",
@@ -529,7 +532,7 @@ export const TOKENS = {
     "category": "layer",
     "light": "210"
   },
-  "z-palette": {
+  "z-anchored": {
     "layer": "tokens",
     "category": "layer",
     "light": "220"
@@ -800,7 +803,7 @@ export const TOKENS = {
     "layer": "semantic",
     "category": "depth",
     "light": "transparent",
-    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. Reach for --lift instead, which is the offset idiom expressed once."
+    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. --lift below is the sanctioned offset idiom for anything that must read as raised."
   },
   "shadow-sm": {
     "layer": "semantic",
@@ -821,7 +824,7 @@ export const TOKENS = {
     "layer": "semantic",
     "category": "depth",
     "light": "3px 3px 0 0 var(--shadow-offset)",
-    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur. Used by a plate that must read as sitting above the page."
+    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur, in the accent rather than a grey because --shadow-offset points at --clay. PUBLISHED, NOT CONSUMED. No component in this package sets either one — there is not a single shadow-(--lift) in src/. What the library actually separates with is a hairline, a change of ground, and the reversal that Card variant=\"plate\" reaches for. These two exist so a consumer building a raised plate of their own has the system's answer instead of inventing a blur; do not read them as describing what the library does."
   },
   "lift-sm": {
     "layer": "semantic",
@@ -872,8 +875,8 @@ export const TOKENS = {
   "z-dropdown": {
     "layer": "semantic",
     "category": "layer",
-    "light": "var(--z-drawer)",
-    "comment": "─── Stacking ─── five component-facing names onto the seven ranks. ─────"
+    "light": "var(--z-anchored)",
+    "comment": "─── Stacking ─── two component-facing names onto the seven ranks. ────── The other five ranks are read by their own names; only these two had a component-facing spelling that outlived the rank it pointed at. --z-dropdown pointed at --z-drawer, 100, which put every anchored panel under the modal at 210 that opened it."
   },
   "z-overlay": {
     "layer": "semantic",

package/dist/tokens.json

@@ -296,37 +296,37 @@
   "fs-title": {
     "layer": "tokens",
     "category": "type",
-    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)"
+    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)",
+    "comment": "page h1 40 → 54px"
   },
   "fs-lead": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem)",
-    "comment": "page h1 40 → 54px"
+    "comment": "band heading 30 → 42px"
   },
   "fs-heading": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem)",
-    "comment": "band heading 30 → 42px"
+    "comment": "record title 24 → 29px"
   },
   "fs-sub": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem)",
-    "comment": "record title 24 → 29px"
+    "comment": "card sub-head 21 → 25px"
   },
   "fs-item": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem)",
-    "comment": "card sub-head 21 → 25px"
+    "comment": "in-card title 18 → 20px"
   },
   "pad": {
     "layer": "tokens",
     "category": "space",
-    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)",
-    "comment": "in-card title 18 → 20px"
+    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)"
   },
   "sec": {
     "layer": "tokens",
@@ -353,111 +353,114 @@
     "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."
+    "comment": "a mark inside a tight box"
   },
   "radius-sm": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(6px * var(--radius-factor))",
-    "comment": "a mark inside a tight box"
+    "comment": "chips, keys, list rows"
   },
   "radius": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(8px * var(--radius-factor))",
-    "comment": "chips, keys, list rows"
+    "comment": "inputs, code, small plates"
   },
   "radius-lg": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(12px * var(--radius-factor))",
-    "comment": "inputs, code, small plates"
+    "comment": "cards, dialogs, menu panels"
   },
   "radius-pill": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(999px * var(--radius-factor))",
-    "comment": "cards, dialogs, menu panels"
+    "comment": "capsules and counters"
   },
   "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."
+    "comment": "a row in a 6px-padded panel"
   },
   "radius-frame": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(var(--radius-lg) + 1rem * var(--radius-gate))",
-    "comment": "a row in a 6px-padded panel"
+    "comment": "a frame 16px outside a panel"
   },
   "control-h-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.875rem"
+    "light": "2.25rem",
+    "comment": "36px"
   },
   "control-h-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.25rem",
-    "comment": "30px"
+    "light": "2.75rem",
+    "comment": "44px — WCAG 2.5.5"
   },
   "control-h-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.5rem",
-    "comment": "36px — clears WCAG 2.5.8, not 2.5.5"
+    "light": "3rem",
+    "comment": "48px"
   },
   "control-px-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.75rem",
-    "comment": "40px"
+    "light": "1rem"
   },
   "control-px-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "1rem"
+    "light": "1.5rem"
   },
   "control-px-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.25rem"
+    "light": "1.75rem"
   },
   "control-py-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.25rem"
+    "light": "0.5rem",
+    "comment": "The vertical padding is part of the axis too, and has to be: a control whose padding alone exceeds the compact height never shrinks, because `min-height` is a floor and not a ceiling."
   },
   "control-py-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.75rem"
   },
   "control-py-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.75rem"
   },
   "control-gap": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.625rem"
   },
   "field-px": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.625rem"
+    "light": "0.875rem",
+    "comment": "Text inputs are measured separately: they are read as much as they are hit, so their padding tracks the type rather than the target."
   },
   "field-py": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.625rem"
   },
   "table-pad-y": {
     "layer": "tokens",
     "category": "other",
-    "light": "0.5rem"
+    "light": "0.875rem",
+    "comment": "A table's own row padding. Separate from the control scale because a table row is neither a control nor a field — it is a line of text with a rule under it, and it tightens on its own axis."
   },
   "table-pad-x": {
     "layer": "tokens",
@@ -506,7 +509,7 @@
     "layer": "tokens",
     "category": "layer",
     "light": "1",
-    "comment": "─── Stacking ─── seven ranks, named for what sits at each."
+    "comment": "─── Stacking ─── seven ranks, named for what sits at each. Every overlay in the package portals to document.body, so all of them are siblings in the ROOT stacking context and the rank is the whole of the decision — there is no ancestor left to nest one inside another. Read it as a sentence: a sticky header clears the page, a drawer clears the header, a scrim covers both, a modal sits on its scrim, an ANCHORED panel clears the modal it was opened from, and a toast clears everything because it is the only rank that has to survive a modal asking a question. --z-anchored is the one that is not obvious, and it is the one that was wrong. A popover, a menu or a select listbox is opened FROM something, and the surface it is most often opened from is a modal — a select inside a modal form is one of the most ordinary shapes in an application. Ranked below the modal, as it was, the panel is painted behind the very dialog that summoned it. The rank it replaced, --z-palette, was read by nothing: a command palette is a Dialog, so it lands at --z-modal, and its order against a second modal is settled by document order — which is the right answer, because it moves a scrim and its panel together."
   },
   "z-sticky": {
     "layer": "tokens",
@@ -528,7 +531,7 @@
     "category": "layer",
     "light": "210"
   },
-  "z-palette": {
+  "z-anchored": {
     "layer": "tokens",
     "category": "layer",
     "light": "220"
@@ -799,7 +802,7 @@
     "layer": "semantic",
     "category": "depth",
     "light": "transparent",
-    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. Reach for --lift instead, which is the offset idiom expressed once."
+    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. --lift below is the sanctioned offset idiom for anything that must read as raised."
   },
   "shadow-sm": {
     "layer": "semantic",
@@ -820,7 +823,7 @@
     "layer": "semantic",
     "category": "depth",
     "light": "3px 3px 0 0 var(--shadow-offset)",
-    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur. Used by a plate that must read as sitting above the page."
+    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur, in the accent rather than a grey because --shadow-offset points at --clay. PUBLISHED, NOT CONSUMED. No component in this package sets either one — there is not a single shadow-(--lift) in src/. What the library actually separates with is a hairline, a change of ground, and the reversal that Card variant=\"plate\" reaches for. These two exist so a consumer building a raised plate of their own has the system's answer instead of inventing a blur; do not read them as describing what the library does."
   },
   "lift-sm": {
     "layer": "semantic",
@@ -871,8 +874,8 @@
   "z-dropdown": {
     "layer": "semantic",
     "category": "layer",
-    "light": "var(--z-drawer)",
-    "comment": "─── Stacking ─── five component-facing names onto the seven ranks. ─────"
+    "light": "var(--z-anchored)",
+    "comment": "─── Stacking ─── two component-facing names onto the seven ranks. ────── The other five ranks are read by their own names; only these two had a component-facing spelling that outlived the rank it pointed at. --z-dropdown pointed at --z-drawer, 100, which put every anchored panel under the modal at 210 that opened it."
   },
   "z-overlay": {
     "layer": "semantic",

package/llms.txt

@@ -0,0 +1,35 @@
+# @misoto22/design
+
+> A monochrome design system for software, writing and photography: portable CSS
+> tokens and accessible React 19 primitives, charts and diagrams. Components ship
+> compiled — import them, do not copy them.
+
+This file is a stub on purpose. It carries no prop tables and no version, so it
+cannot go stale between releases; everything it points at is generated from the
+source in this same tarball at build time.
+
+## In this package, offline
+
+- [dist/agent/index.md](./dist/agent/index.md): every component, one line each, plus the theme axes read out of the stylesheets.
+- [dist/agent/<Component>.md](./dist/agent/): one component in full — every prop with its type and default, the exported unions, the keyboard contract, the accessibility promises, the examples.
+- [skills/misoto22-design/SKILL.md](./skills/misoto22-design/SKILL.md): the conventions an agent gets wrong from habit — the names that diverge from shadcn/ui, and colour that is never a raw class.
+- [AGENTS.md](./AGENTS.md): the short version of this, plus what to know when working on the package itself.
+
+Prefer the CLI over reading these by path — it resolves parts and types, not
+just components:
+
+```bash
+npx misoto22-design docs Button
+npx misoto22-design docs --installed
+```
+
+## On the web
+
+- [https://ui.misoto22.com/llms.txt](https://ui.misoto22.com/llms.txt): the site's index.
+- [https://ui.misoto22.com/llms-full.txt](https://ui.misoto22.com/llms-full.txt): every component inline, in one file.
+- [https://ui.misoto22.com](https://ui.misoto22.com): the rendered documentation.
+
+## Optional
+
+- [README.md](./README.md): install, theming, and the same three commands for a human reader.
+- [CHANGELOG.md](./CHANGELOG.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@misoto22/design",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "private": false,
   "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",
@@ -13,6 +13,9 @@
     "dist",
     "skills",
     "bin",
+    "AGENTS.md",
+    "CLAUDE.md",
+    "llms.txt",
     "LICENSE",
     "README.md"
   ],
@@ -143,7 +146,7 @@
   },
   "scripts": {
     "build:fonts": "node scripts/vendor-fonts.mjs",
-    "build:js": "NODE_OPTIONS=--max-old-space-size=6144 tsup",
+    "build:js": "NODE_OPTIONS=--max-old-space-size=8192 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",

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

@@ -0,0 +1,84 @@
+{
+  "$comment": "Prompts a real agent runs against this skill, and what its output has to show. This is the half `claims.json` cannot reach: that file proves the rules match the package, which is necessary and does not prove an agent given the rules writes correct code. Each `must_use` identifier is checked for existence by `skill.test.ts`, so an eval cannot quietly start expecting something the package no longer exports.",
+  "skill_name": "misoto22-design",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "Using @misoto22/design, build a settings form with fields for full name and email address, and show a validation error under email when it is invalid.",
+      "expected_output": "A React component using one Field per control, the error prop rather than a red border, and gap-* on the form.",
+      "must_use": ["Field", "Input", "Button"],
+      "must_not_contain": ["space-y-", "border-red", "text-red-", "<label", "aria-describedby="],
+      "expectations": [
+        "Wraps each control in its own Field with a label, not a hand-rolled <label> plus input plus error div",
+        "Puts the validation message in Field's error prop, which sets aria-invalid on the control for it",
+        "Does not also pass invalid on the Input inside a Field with an error — that is redundant",
+        "Never a wrapper div between Field and its control, which would wire the div instead",
+        "Lays the form out with flex and gap-*, not space-y-*"
+      ]
+    },
+    {
+      "id": 2,
+      "prompt": "Using @misoto22/design, add a confirmation dialog for deleting a project. It needs a heading, an explanation, and Cancel and Delete buttons.",
+      "expected_output": "A Dialog whose title and description are props on DialogContent, with a danger-variant Delete button.",
+      "must_use": ["Dialog", "DialogTrigger", "DialogContent", "Button"],
+      "must_not_contain": ["DialogTitle", "DialogHeader", "DialogDescription", "DialogFooter"],
+      "expectations": [
+        "Passes title and description as props on DialogContent — there is no DialogTitle or DialogHeader export here",
+        "Uses variant=\"danger\" for the destructive action",
+        "Wraps the trigger with asChild rather than nesting a button inside a button",
+        "Sets no z-index: the overlay handles its own stacking"
+      ]
+    },
+    {
+      "id": 3,
+      "prompt": "Using @misoto22/design, render a table of open invoices with client, due date and amount, with the amount column right-aligned.",
+      "expected_output": "A Table with a real caption and the short part names, amount aligned with the align prop.",
+      "must_use": ["Table", "THead", "TBody", "TR", "TH", "TD"],
+      "must_not_contain": ["TableHeader", "TableBody", "TableRow", "TableHead", "TableCell", "text-right"],
+      "expectations": [
+        "Uses THead / TBody / TR / TH / TD — the shadcn/ui names are not exported here",
+        "Gives caption a real sentence saying what the table lists, not an empty string and not the word \"Table\"",
+        "Right-aligns with align=\"end\" on TH and TD, not a text-right class, so the table stays RTL-correct"
+      ]
+    },
+    {
+      "id": 4,
+      "prompt": "Using @misoto22/design, build a dashboard row of four stat cards. Each shows a title, a big number, a change badge, and a loading state.",
+      "expected_output": "Full Card composition, Skeleton for loading, Badge for the change, semantic tokens throughout.",
+      "must_use": ["Card", "CardHeader", "CardTitle", "CardBody", "Badge", "Skeleton"],
+      "must_not_contain": ["CardContent", "animate-pulse", "bg-green-", "text-red-", "dark:"],
+      "expectations": [
+        "Uses CardBody, not CardContent",
+        "Composes CardHeader and CardTitle rather than putting everything in one block",
+        "Uses Skeleton for the loading placeholder, not a custom animate-pulse div",
+        "Uses Badge for the change rather than a styled span",
+        "Writes no raw colour and no dark: variant — semantic tokens resolve in both modes"
+      ]
+    },
+    {
+      "id": 5,
+      "prompt": "Using @misoto22/design, add a small area chart of monthly revenue above the stat cards.",
+      "expected_output": "A chart imported from the charts entry point, with the peers named.",
+      "must_use": ["AreaChart"],
+      "must_not_contain": ["from '@misoto22/design'\nimport { AreaChart"],
+      "expectations": [
+        "Imports the chart from '@misoto22/design/charts', not from the root specifier — the root does not export it and the import throws",
+        "Mentions that recharts and motion are peer dependencies the project needs installed",
+        "Does not reach for recharts directly to build the chart by hand"
+      ]
+    },
+    {
+      "id": 6,
+      "prompt": "Using @misoto22/design, add an icon-only button that copies the current URL, and a toast confirming it.",
+      "expected_output": "An iconOnly Button with an accessible name, and toast imported from this package.",
+      "must_use": ["Button", "toast", "Toaster"],
+      "must_not_contain": ["from 'sonner'"],
+      "expectations": [
+        "Gives the iconOnly Button an aria-label naming the action — without one it is announced as \"button\" and nothing else",
+        "Imports toast from '@misoto22/design', not from sonner",
+        "Renders Toaster once at the app root rather than beside the button",
+        "Puts no sizing class on the icon"
+      ]
+    }
+  ]
+}