@wangs-ui/skills 1.3.0-alpha.2 → 1.3.0-alpha.9

package/README.md

@@ -2,11 +2,7 @@
 
 Modular AI agent skills installer and manager for **Wangs UI** React components and design patterns.
 
----
-
-## 📚 Dedicated Storybook Guide
-
-For a step-by-step guide on using `@wangs-ui/skills` independently with any Storybook project, see the [Dedicated Storybook Guide](../../docs/storybook-mcp-skills.md).
+Skills are standalone: they work in any Storybook or React project without requiring project scaffolding tools. They pair with [`@wangs-ui/mcp`](../mcp/README.md), which supplies the live component catalog, typed APIs, and story implementations the skills tell agents to verify against.
 
 ---
 
@@ -34,5 +30,6 @@ npx @wangs-ui/skills remove create-form
 ## 🛠️ Features
 
 - **Modular UI Skills**: Installs specialized guidelines, component patterns, and rules into your AI agent environment.
+- **MCP-Verified Guidance**: Skills mandate querying the MCP server for live contracts instead of hardcoding props, so guidance never drifts from the installed package version.
 - **Cross-Platform & Multi-Agent**: Supports Antigravity IDE, Claude Code, OpenCode, Kilo, and universal agent directories on Mac and Windows.
 - **Independent Usage**: Works in any Storybook or React project without requiring project scaffolding tools.

package/dist/bin.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { i as listSkills, n as updateSkills, r as addSkills, t as removeSkills } from "./src-DDi-O7tk.js";
+import { i as listSkills, n as updateSkills, r as addSkills, t as removeSkills } from "./src-BvsMfJmb.js";
 import path from "node:path";
 import { parseArgs } from "node:util";
 //#region bin.ts

package/dist/index.js

@@ -1,2 +1,2 @@
-import { a as getAgentSkillDirs, c as isSkillInstalled, d as loadAllSkills, i as listSkills, l as removeSkill, n as updateSkills, o as getInstalledSkills, r as addSkills, s as installSkill, t as removeSkills, u as getSkill } from "./src-DDi-O7tk.js";
+import { a as getAgentSkillDirs, c as isSkillInstalled, d as loadAllSkills, i as listSkills, l as removeSkill, n as updateSkills, o as getInstalledSkills, r as addSkills, s as installSkill, t as removeSkills, u as getSkill } from "./src-BvsMfJmb.js";
 export { addSkills, getAgentSkillDirs, getInstalledSkills, getSkill, installSkill, isSkillInstalled, listSkills, loadAllSkills, removeSkill, removeSkills, updateSkills };

package/dist/skills/craft-theme/SKILL.md

@@ -0,0 +1,62 @@
+---
+name: craft-theme
+description: Generate a brand-color theme (13-shade tonal palette + M3-style semantic tokens) for a Wangs UI app via the `wangs-ui-generate-palette` CLI — never hand-write hex shade ramps.
+---
+
+# Skill: Craft Theme
+
+Use this skill whenever the user asks to create, customize, or rebrand the color theme of an app built on `@wangs-ui/react-core` / `@wangs-ui/foundation` — "make the app's theme orange", "use our brand color #ff6b35", "add a new palette called sunset", etc.
+
+## The rule this skill exists to enforce
+
+**Never hand-write a 13-shade tonal ramp, and never hand-pick which shade pairs with which as a text/foreground color.** Wangs UI's own design system shipped with exactly that mistake for a while: hand-tuned palette files drifted from what the perceptual (OKLCH) generator would produce, which caused white text to render at 2.54:1 contrast on one brand's primary color — invisible-adjacent, and only caught by a dedicated audit. The generator and the contrast math it's paired with exist specifically so this class of bug can't happen again. Always reach for the CLI below instead of writing hex values yourself.
+
+## 1. Generate the palette
+
+```bash
+npx wangs-ui-generate-palette --name=<id> --primary=<#hex> [options] --out=<path>
+```
+
+- `--name` (required): identifier for the palette, e.g. `sunset`. Used for the exported const name (`sunsetPalette`) and, unless `--out` is given, the output filename (`sunset.ts`).
+- `--primary` (required): the brand/key hex color, e.g. `#ff6b35`.
+- Optional per-family overrides — omit any of these to let the generator harmoniously auto-derive it from `--primary` (secondary: boosted-lightness variant of primary's hue; tertiary: +60° hue rotation; general: near-neutral variant of primary's hue) or fall back to the generator's calibrated defaults (success/danger/warning/info):
+  `--secondary=#hex --tertiary=#hex --general=#hex --success=#hex --danger=#hex --warning=#hex --info=#hex`
+- `--out=<path>` (optional): where to write the file. Defaults to `./<name>.ts` in the current working directory — always pass an explicit `--out` pointing into the consumer app's own theme directory (e.g. `src/theme/sunset.ts`), don't rely on the default.
+
+If `@wangs-ui/foundation` isn't already a dependency of the project you're working in, install it first (`pnpm add @wangs-ui/foundation` or the project's equivalent) — the CLI ships as its `bin`.
+
+**The written file is chmod'd read-only (0o444) and headed with an AUTO-GENERATED / DO NOT EDIT BY HAND comment.** If a color needs to change, re-run the command (it clears the read-only bit, rewrites, and re-locks it) — never hand-edit a shade in the output, and never `chmod` it writable to bypass this. Note the read-only bit is a local filesystem attribute only; it is not preserved by git across clones, so it is a deterrent for the person/agent working in this checkout right now, not a hard guarantee for every future contributor.
+
+## 2. Wire it into the app
+
+The generated file exports a plain `Palette` object — pass it directly to `WangsUiProvider`'s `theme.palette` (or `theme.defaultPalette` for uncontrolled mode):
+
+```tsx
+import { WangsUiProvider } from '@wangs-ui/react-core/api';
+import preset from '@wangs-ui/react-presets/fixedasset'; // or whichever preset the app uses
+import { sunsetPalette } from './theme/sunset';
+
+const App = () => (
+  <WangsUiProvider configOptions={{ preset }} theme={{ palette: sunsetPalette, mode: 'light' }}>
+    <YourApp />
+  </WangsUiProvider>
+);
+```
+
+`theme.palette` also accepts a built-in palette name (`'blue' | 'emerald' | 'crimson' | 'carbon' | 'gold'`) or a raw hex string — a generated `Palette` object is the right choice once you have brand-specific secondary/tertiary/status colors to preserve, not just a single key color.
+
+## 3. Regenerating / evolving an existing custom palette
+
+To change a color, re-run the same command with a new hex for the family that changed — **always pass every family you want to keep**, not just the one changing, since each run is a full regeneration from the anchors you give it:
+
+```bash
+npx wangs-ui-generate-palette --name=sunset --primary=#ff6b35 --tertiary=#2a9d8f --out=src/theme/sunset.ts
+```
+
+## 4. If you're extending Wangs UI itself (contributing a new official palette)
+
+This is a different, rarer case than theming a consumer app — only relevant if you're working inside the `wangs-ui-react` monorepo itself and adding a 6th built-in palette alongside blue/emerald/crimson/carbon/gold:
+
+1. Run the generator with `--out` pointing at `packages/foundation/theme/tokens/palettes/<name>.ts`.
+2. Register it: add `'<name>'` to the `PaletteName` union and `paletteLoaders` map in `packages/foundation/theme/context/ThemeContext.tsx`, and re-export it from `packages/foundation/theme/tokens/palettes/index.ts`.
+3. Run the contrast regression suite before considering it done: `pnpm exec vitest run --config packages/foundation/vitest.config.ts` — it checks every semantic token pairing (including the new palette) against WCAG AA across both light and dark mode. See `packages/foundation/theme/tokens/COLOR_TOKEN_CONTRACT.md` for the full rule set this is checked against.

package/dist/skills/create-form/SKILL.md

@@ -13,28 +13,36 @@ Use this skill when building forms, data entry panels, modal forms, settings pag
 
 Do **NOT** hardcode or guess prop names, component options, preset variations, or Storybook patterns in this document. Always retrieve component definitions, active props, and live Storybook implementations directly via MCP:
 
-### Component & Form Documentation Protocol:
+### Component & Form API Protocol:
 
 ```json
-get-documentation({ "id": "form" })
-get-documentation({ "id": "field" })
-get-documentation({ "id": "dialogform" })
-get-documentation({ "id": "input" })
-get-documentation({ "id": "numberinput" })
-get-documentation({ "id": "select" })
-get-documentation({ "id": "multiselect" })
-get-documentation({ "id": "datepicker" })
-get-documentation({ "id": "fileupload" })
+get_component_api({ "id": "form" })
+get_component_api({ "id": "field" })
+get_component_api({ "id": "dialogform" })
+get_component_api({ "id": "input" })
+get_component_api({ "id": "numberinput" })
+get_component_api({ "id": "select" })
+get_component_api({ "id": "multiselect" })
+get_component_api({ "id": "datepicker" })
+get_component_api({ "id": "fileupload" })
+```
+
+### Curated Form Documentation:
+
+```json
+get_documentation({ "id": "form" })
+get_documentation({ "id": "dialogform" })
+get_documentation({ "id": "field" })
 ```
 
 ### Live Storybook & Interactive Behavior Protocol:
 
 ```json
-get-documentation-for-story({ "id": "form", "storyName": "Default" })
-get-documentation-for-story({ "id": "form", "storyName": "AsyncInitialValues" })
-get-documentation-for-story({ "id": "form", "storyName": "ConditionalFields" })
-get-documentation-for-story({ "id": "form", "storyName": "CascadingOptions" })
-get-documentation-for-story({ "id": "dialogform", "storyName": "Default" })
+get_component_examples({ "component": "form", "variant": "Default" })
+get_component_examples({ "component": "form", "variant": "AsyncInitialValues" })
+get_component_examples({ "component": "form", "variant": "ConditionalFields" })
+get_component_examples({ "component": "form", "variant": "CascadingOptions" })
+get_component_examples({ "component": "dialogform", "variant": "Default" })
 ```
 
 ### Knowledge Graph & Symbol Usages:

package/dist/skills/data-table/SKILL.md

@@ -16,21 +16,28 @@ Do **NOT** guess table prop names or hardcode table structures. Query the MCP se
 ### Inspect Component Contracts:
 
 ```json
-get-documentation({ "id": "datatable" })
-get-documentation({ "id": "exportbutton" })
-get-documentation({ "id": "filtercontainer" })
-get-documentation({ "id": "bulkactionbutton" })
+get_component_api({ "id": "datatable" })
+get_component_api({ "id": "exportbutton" })
+get_component_api({ "id": "filtercontainer" })
+get_component_api({ "id": "bulkactionbutton" })
+```
+
+### Read Curated Documentation:
+
+```json
+get_documentation({ "id": "datatable" })
+get_documentation({ "id": "exportbutton" })
 ```
 
 ### Inspect Live Story Implementations:
 
 ```json
-get-documentation-for-story({ "id": "datatable", "storyName": "Basic" })
-get-documentation-for-story({ "id": "datatable", "storyName": "ServerPagination" })
-get-documentation-for-story({ "id": "datatable", "storyName": "Sortable" })
-get-documentation-for-story({ "id": "datatable", "storyName": "MultipleSelection" })
-get-documentation-for-story({ "id": "datatable", "storyName": "CustomColumn" })
-get-documentation-for-story({ "id": "exportbutton", "storyName": "WithTable" })
+get_component_examples({ "component": "datatable", "variant": "Basic" })
+get_component_examples({ "component": "datatable", "variant": "CursorPagination" })
+get_component_examples({ "component": "datatable", "variant": "Sortable" })
+get_component_examples({ "component": "datatable", "variant": "MultipleSelection" })
+get_component_examples({ "component": "datatable", "variant": "CustomColumn" })
+get_component_examples({ "component": "exportbutton", "variant": "WithTable" })
 ```
 
 ### Inspect Knowledge Graph & Usages:
@@ -47,7 +54,7 @@ query_graph({ "query": "useDataTableFetch" })
 The Wangs UI `DataTable` is built on a modular, headless-first architecture:
 
 1. **Declarative Column Definitions (`TableColumn<T>[]`)**:
-   Columns are configured as typed array objects, not as JSX children. Check `get-documentation({ "id": "datatable" })` for column field types.
+   Columns are configured as typed array objects, not as JSX children. Check `get_component_api({ "id": "datatable" })` for column field types.
 2. **Table Instance Hook (`useDataTable`)**:
    Coordinates table state (sorting, pagination, selection, column ordering, pinning, visibility).
 3. **Data Fetching Hook (`useDataTableFetch`)**:
@@ -62,7 +69,7 @@ The Wangs UI `DataTable` is built on a modular, headless-first architecture:
 
 ## 3. Mandatory Implementation Rules
 
-1. **Query MCP for Current Code Patterns**: Always run `get-documentation-for-story` for `datatable` before drafting code.
+1. **Query MCP for Current Code Patterns**: Always run `get_component_examples` for `datatable` before drafting code.
 2. **Strict Subpath Imports**: Import via `@wangs-ui/react-core/primitive/datatable` and companion primitive paths.
 3. **Always Translate Visible Copy**: All column header labels, empty state messages, and action button labels must be wrapped in `t('...')` from `@wangs-ui/react-i18n`.
 4. **Stable Row Identity**: Always configure a unique key identifier for stable selection and row identity.

package/dist/skills/dialog-modal/SKILL.md

@@ -16,18 +16,26 @@ Do **NOT** guess overlay props, event names, or footer slots. Query the MCP serv
 ### Inspect Overlay Contracts:
 
 ```json
-get-documentation({ "id": "dialog" })
-get-documentation({ "id": "dialogform" })
-get-documentation({ "id": "modal" })
-get-documentation({ "id": "toast" })
+get_component_api({ "id": "dialog" })
+get_component_api({ "id": "dialogform" })
+get_component_api({ "id": "modal" })
+get_component_api({ "id": "toast" })
+```
+
+### Read Curated Overlay Documentation:
+
+```json
+get_documentation({ "id": "dialog" })
+get_documentation({ "id": "dialogform" })
+get_documentation({ "id": "modal" })
 ```
 
 ### Inspect Live Story Implementations:
 
 ```json
-get-documentation-for-story({ "id": "dialog", "storyName": "Confirmation" })
-get-documentation-for-story({ "id": "dialogform", "storyName": "Default" })
-get-documentation-for-story({ "id": "modal", "storyName": "Default" })
+get_component_examples({ "component": "dialog", "variant": "RichHeaderFooter" })
+get_component_examples({ "component": "dialogform", "variant": "Default" })
+get_component_examples({ "component": "modal", "variant": "Default" })
 ```
 
 ### Inspect Knowledge Graph & Usages:

package/dist/skills/i18n-usage/SKILL.md

@@ -16,19 +16,26 @@ Do **NOT** guess component localization contracts, language switcher variants, o
 ### Inspect Localized Component Contracts:
 
 ```json
-get-documentation({ "id": "languageswitcher" })
-get-documentation({ "id": "currencyinput" })
-get-documentation({ "id": "datepicker" })
-get-documentation({ "id": "select" })
-get-documentation({ "id": "datatable" })
+get_component_api({ "id": "languageswitcher" })
+get_component_api({ "id": "currencyinput" })
+get_component_api({ "id": "datepicker" })
+get_component_api({ "id": "select" })
+get_component_api({ "id": "datatable" })
+```
+
+### Read Curated Localization Documentation:
+
+```json
+get_documentation({ "id": "languageswitcher" })
+get_documentation({ "id": "currencyinput" })
 ```
 
 ### Inspect Live Story Implementations:
 
 ```json
-get-documentation-for-story({ "id": "languageswitcher", "storyName": "Basic" })
-get-documentation-for-story({ "id": "currencyinput", "storyName": "Basic" })
-get-documentation-for-story({ "id": "datepicker", "storyName": "Default" })
+get_component_examples({ "component": "languageswitcher", "variant": "Default" })
+get_component_examples({ "component": "currencyinput", "variant": "Default" })
+get_component_examples({ "component": "datepicker", "variant": "Default" })
 ```
 
 ---

package/dist/skills/layout-navigation/SKILL.md

@@ -16,19 +16,26 @@ Do **NOT** guess layout block slots, sidebar item interfaces, or breadcrumb prop
 ### Inspect Layout & Navigation Contracts:
 
 ```json
-get-documentation({ "id": "applayout" })
-get-documentation({ "id": "sidebar" })
-get-documentation({ "id": "breadcrumb" })
-get-documentation({ "id": "tabs" })
+get_component_api({ "id": "applayout" })
+get_component_api({ "id": "sidebar" })
+get_component_api({ "id": "breadcrumb" })
+get_component_api({ "id": "tabs" })
+```
+
+### Read Curated Layout Documentation:
+
+```json
+get_documentation({ "id": "applayout" })
+get_documentation({ "id": "sidebar" })
 ```
 
 ### Inspect Live Story Implementations:
 
 ```json
-get-documentation-for-story({ "id": "applayout", "storyName": "Default" })
-get-documentation-for-story({ "id": "sidebar", "storyName": "Default" })
-get-documentation-for-story({ "id": "breadcrumb", "storyName": "Default" })
-get-documentation-for-story({ "id": "tabs", "storyName": "Default" })
+get_component_examples({ "component": "applayout", "variant": "TopNavbar" })
+get_component_examples({ "component": "sidebar", "variant": "WithSubMenu" })
+get_component_examples({ "component": "breadcrumb", "variant": "Default" })
+get_component_examples({ "component": "tabs", "variant": "Default" })
 ```
 
 ### Inspect Knowledge Graph & Usages:

package/dist/skills/universal-layout/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: universal-layout
+description: Universal layout primitives (Box, Flex, Stack, Grid, Container, Section) with ResponsiveValue patterns for Web and React Native in Wangs UI.
+---
+
+# Skill: Universal Layout Primitives
+
+Use this skill when arranging page structure, spacing, or responsive grids with
+`@wangs-ui/foundation/layout`.
+For app shells (sidebar, breadcrumb, tabs), see the `layout-navigation` skill instead.
+
+---
+
+## 1. MCP Inspection Protocol (Mandatory Single Source of Truth)
+
+Do **NOT** guess layout prop names, spacing scales, or breakpoint keys. Query the MCP
+server dynamically:
+
+```json
+list_catalog({ "category": "layout" })
+get_component_api({ "id": "layout:box" })
+get_component_api({ "id": "layout:grid" })
+get_documentation({ "id": "layout-stack" })
+```
+
+Resolve shared types before writing responsive props:
+
+```json
+resolve_type_definition({ "name": "ResponsiveValue" })
+resolve_type_definition({ "name": "SpacingKey" })
+```
+
+---
+
+## 2. Choosing the Right Primitive
+
+1. **Stack (VStack)** — default for vertical flows (forms, cards, page sections).
+   Fixed `column` direction, uniform `gap`, optional auto-`separator`.
+2. **HStack** — horizontal rows with vertical centering (avatar + label + action,
+   toolbar clusters). Fixed `row` direction.
+3. **Flex** — only when you need explicit `direction`, `wrap`, `align`, or `justify`
+   control beyond what Stack/HStack fix. Prefer Stack/HStack otherwise.
+4. **Grid** — two-dimensional placement or multi-column flows:
+   - explicit `columns={{ compact: 1, medium: 2, expanded: 4 }}` for fixed column counts;
+   - `minItemWidth` for auto-fit (columns grow/shrink with container width, no media query);
+   - `GridItem` with `colSpan` / `rowSpan` for featured tiles.
+5. **Box** — leaf-level spacing/sizing wrapper (`p`, `m`, `radius`, `overflow`), or
+   polymorphic `as="section" | "main" | "article"` for landmarks.
+6. **Container / Section** — page-level rhythm only: `Container` bounds max-width
+   (`size`, default `'xl'`) with consistent horizontal padding; `Section` sets
+   vertical rhythm (`space: 'sm' | 'md' | 'lg'`, default `'md'`). Never nest
+   `Container` inside `Container`.
+7. **ZStack** — overlays (badge on card, status dot on avatar, hero overlay).
+8. **AspectRatio / Bleed / Spacer** — media frames (`ratio`), full-bleed breakouts
+   inside padded containers (`Bleed`), and flexible fillers in stacks (`Spacer`).
+
+---
+
+## 3. Mandatory Implementation Rules
+
+1. **ResponsiveValue everywhere**: scalar for static (`gap={4}`), object for
+   adaptive (`gap={{ compact: 2, medium: 4, expanded: 6 }}`,
+   `columns={{ compact: 1, medium: 2, expanded: 4 }}`). Breakpoints are
+   `compact` (mobile-first base), `medium` (`md:`), `expanded` (`lg:`).
+2. **Separators, not manual dividers**: `<Stack separator={<Divider />}>` inserts
+   dividers between children with no trailing element. Never hand-place a divider
+   after every child.
+3. **Spacing scale**: `gap`/`p`/`m` use `SpacingKey` (Tailwind numeric scale,
+   1 unit = 4px). Never pass raw pixel strings to spacing props.
+4. **Strict subpath imports**:
+   ```tsx
+   import { Stack, HStack, Grid, Container } from '@wangs-ui/foundation/layout';
+   ```
+5. **Translate visible labels** inside layout children via `t('...')` from
+   `@wangs-ui/react-i18n` (layout props themselves are never translated).
+
+---
+
+## 4. Anti-Patterns (Forbidden)
+
+1. **Gap vs margin**: NEVER hardcode `marginBottom`/`mb-*` on children inside a
+   Stack/Flex/Grid to fake spacing — always use the parent's `gap`/`gapX`/`gapY`.
+   Margins collapse unpredictably and break `separator` insertion.
+2. **No nested Containers** and no `Container` for non-page content (cards, modals).
+3. **No `Flex` with hardcoded `flexDirection` styles** when `Stack`/`HStack` express it.
+4. **No raw media queries** for `direction`/`gap`/`columns` — use `ResponsiveValue`.
+5. **No `Grid` for one-dimensional lists** — that is `Stack`/`HStack` territory.

package/dist/skills/wangs-ui-components/SKILL.md

@@ -15,28 +15,34 @@ Do **NOT** guess component props, Pass-Through (`pt`) slots, or event names. Alw
 
 ```mermaid
 graph TD
-    A[Identify Component Needed] --> B[Call get-documentation id]
-    B --> C{Need live story / variant code?}
-    C -->|Yes| D[Call get-documentation-for-story]
-    C -->|No| E[Check Graphify: query_graph]
-    D --> E
-    E --> F[Implement Component with Subpath Imports]
+    A[Identify Component Needed] --> B[list_catalog to confirm the id]
+    B --> C[get_component_api for the typed contract]
+    C --> D{Need live story / variant code?}
+    D -->|Yes| E[get_component_examples]
+    D -->|No| F[get_documentation for curated guidance]
+    E --> G[Check Graphify: query_graph]
+    F --> G
+    G --> H[Implement Component with Subpath Imports]
 ```
 
 ### Discovery Steps:
 
 1. **Inspect Component Contract & Props**:
    ```json
-   get-documentation({ "id": "button" })
-   get-documentation({ "id": "input" })
-   get-documentation({ "id": "datatable" })
+   get_component_api({ "id": "button" })
+   get_component_api({ "id": "input" })
+   get_component_api({ "id": "datatable" })
    ```
-2. **Inspect Live Usage & Story Variants**:
+2. **Inspect Curated Documentation**:
    ```json
-   get-documentation-for-story({ "id": "button", "storyName": "Default" })
-   get-documentation-for-story({ "id": "datatable", "storyName": "ServerPagination" })
+   get_documentation({ "id": "button" })
    ```
-3. **Inspect Relationships & Real Usages in Graph**:
+3. **Inspect Live Usage & Story Variants**:
+   ```json
+   get_component_examples({ "component": "button", "variant": "Sizes" })
+   get_component_examples({ "component": "datatable", "variant": "CursorPagination" })
+   ```
+4. **Inspect Relationships & Real Usages in Graph**:
    ```json
    query_graph({ "query": "DataTable" })
    query_graph({ "query": "usePT" })
@@ -104,5 +110,7 @@ Never write raw HTML elements when a Wangs UI primitive exists:
 
 ### Spacing Tokens
 
-- Gap: `gap-xs`, `gap-sm`, `gap-md`, `gap-lg`, `gap-xl`, `gap-2xl`, `gap-3xl`
-- Padding: `p-xs`, `p-sm`, `p-md`, `p-lg`, `p-xl`, `p-2xl`, `p-3xl`
+- Flat numeric scale, Tailwind-aligned (1 unit = 4px): `0`, `0.5`, `1`, `1.5`, `2`, `2.5`, `3`, `3.5`, `4`…`16` (e.g. `4` = 16px)
+- Web: use numeric utilities directly — Gap: `gap-4`, Padding: `px-4 py-1.5`
+- Native: read pixel values via `useTheme().spacing` (e.g. `spacing[4] === 16`)
+- Responsiveness via `ResponsiveValue<T>` size props and `<Show>`, not per-density spacing tokens