@monkey-mini-app/dsh-mini-app 0.1.0 → 0.1.4

package/skills/monkey-mini-app/references/contracts/sheet.md

@@ -0,0 +1,34 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Sheet (L1 primitive)
+
+Slide-in side panel.
+
+**when** Detail/edit panel that keeps the list visible — the usual master-detail pattern. Size it with `width` on `SheetContent`: the panel carries its own `data-[side=right]:sm:max-w-sm` / `data-[side=left]:sm:max-w-sm`, so a `max-w-*` in `className` loses at ≥sm (inline style or `!max-w-*` also work).
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/sheet.tsx` · family: Surface · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Sheet` | `actionsRef?` `defaultOpen?` `defaultTriggerId?` `disablePointerDismissal?` `handle?` `modal?` `onOpenChange?` `onOpenChangeComplete?` `open?` `triggerId?` |
+| `SheetClose` | `nativeButton?` `render?` |
+| `SheetContent` | `finalFocus?` `initialFocus?` `render?` `showCloseButton?` `side?=top/right/bottom/left` `width?` |
+| `SheetDescription` | `render?` |
+| `SheetFooter` | — |
+| `SheetHeader` | — |
+| `SheetTitle` | `render?` |
+| `SheetTrigger` | `handle?` `nativeButton?` `payload?` `render?` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Sheet open={open} onOpenChange={setOpen}><SheetContent side="right"><SheetHeader><SheetTitle>详情</SheetTitle></SheetHeader>…</SheetContent></Sheet>
+```

package/skills/monkey-mini-app/references/contracts/sidebar.md

@@ -0,0 +1,42 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Sidebar (L1 primitive)
+
+**when** Many sections in one app; `AppShell` already wires one for you.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/sidebar.tsx` · family: Navigation · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Sidebar` | `collapsible?=none/icon/offcanvas` `side?=right/left` `variant?=sidebar/floating/inset` |
+| `SidebarContent` | — |
+| `SidebarFooter` | — |
+| `SidebarGroup` | — |
+| `SidebarGroupAction` | `render?` |
+| `SidebarGroupContent` | — |
+| `SidebarGroupLabel` | `render?` |
+| `SidebarHeader` | — |
+| `SidebarInput` | — |
+| `SidebarInset` | — |
+| `SidebarMenu` | — |
+| `SidebarMenuAction` | `render?` `showOnHover?` |
+| `SidebarMenuBadge` | — |
+| `SidebarMenuButton` | `isActive?` `render?` `size?=default/sm/lg` `tooltip?` `variant?=default/outline` |
+| `SidebarMenuItem` | — |
+| `SidebarMenuSkeleton` | `showIcon?` |
+| `SidebarMenuSub` | — |
+| `SidebarMenuSubButton` | `isActive?` `render?` `size?=md/sm` |
+| `SidebarMenuSubItem` | — |
+| `SidebarProvider` | `defaultOpen?` `onOpenChange?` `open?` |
+| `SidebarRail` | — |
+| `SidebarSeparator` | `orientation?` `render?` |
+| `SidebarTrigger` | `focusableWhenDisabled?` `nativeButton?` `render?` `size?=default/xs/sm/lg/icon/icon-xs/icon-sm/icon-lg` `variant?=link/default/outline/secondary/ghost/destructive` |
+| `useSidebar` (hook/util) | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._

package/skills/monkey-mini-app/references/contracts/skeleton.md

@@ -0,0 +1,33 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Skeleton (L1 primitive)
+
+Pulse placeholder block.
+
+**when** First paint while `call()` is pending — match the real layout's size.
+
+`import { Skeleton } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/skeleton.tsx` · family: Feedback & status · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Skeleton` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<div className="flex flex-col gap-2">{[0,1,2].map((i) => <Skeleton key={i} className="h-16 w-full" />)}</div>
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[skeleton-01.tsx](../examples/skeleton/skeleton-01.tsx)** — Skeleton — Loading placeholder shaped like the content that will replace it (cards/rows), avoiding layout jump on first paint.

package/skills/monkey-mini-app/references/contracts/slider-range.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # SliderRange
 
+Two-thumb range slider.
+
+**when** min/max numeric filters.
+
 `import { SliderRange } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/slider-range.tsx` · composites
+`packages/ui/src/composites/slider-range.tsx` · family: Form · type: composite
 
 ## Props
 
@@ -14,3 +18,9 @@
 | `min` | `number \| undefined` |  |  |
 | `onChange` | `((value: number[]) => void) \| undefined` |  |  |
 | `value` | `number[] \| undefined` |  |  |
+
+## Example
+
+```tsx
+<SliderRange min={0} max={100} value={[10, 40]} onChange={(v) => set(v)} />
+```

package/skills/monkey-mini-app/references/contracts/slider.md

@@ -0,0 +1,25 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Slider (L1 primitive)
+
+**when** One numeric value. Range → `SliderRange`.
+
+`import { Slider } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/slider.tsx` · family: Form · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Slider` | `disabled?` `form?` `format?` `largeStep?` `locale?` `max?` `min?` `minStepsBetweenValues?` `name?` `onValueChange?` `onValueCommitted?` `orientation?` +5 |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[slider-01.tsx](../examples/slider/slider-01.tsx)** — Slider / SliderRange — One-handle range for 'pick a value' (thresholds, limits); SliderRange beside it for min–max filter pairs.

package/skills/monkey-mini-app/references/contracts/sortable-list.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # SortableList
 
+Drag-to-reorder list.
+
+**when** Priority queues / column order. Read-only ordered events → `Timeline`.
+
 `import { SortableList, SortableItem } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/products/sortable-list.tsx` · products
+`packages/ui/src/products/sortable-list.tsx` · family: Data & tables · type: product
 
 ## Props
 
@@ -21,3 +25,17 @@
 |---|---|:---:|---|
 | `id` | `string` | ✓ |  |
 | `label` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<SortableList items={items} onChange={(next) => set(next)} />
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[sortable-list-01.tsx](../examples/sortable-list/sortable-list-01.tsx)** — SortableList — Reorder by drag with the new order pushed back to state — priorities, playbooks, column order.

package/skills/monkey-mini-app/references/contracts/sparkline.md

@@ -1,13 +1,24 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # Sparkline
 
+Tiny inline trend line, no axes.
+
+**when** Trend inside a table row or KPI card.
+
 `import { Sparkline } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/sparkline.tsx` · blocks
+`packages/ui/src/blocks/sparkline.tsx` · family: Chart & data · type: block
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
+| `className` | `string \| undefined` |  |  |
 | `data` | `{ value: number; }[]` | ✓ |  |
+
+## Example
+
+```tsx
+<Sparkline data={[{ value: 3 }, { value: 9 }, { value: 6 }]} />
+```

package/skills/monkey-mini-app/references/contracts/spinner.md

@@ -0,0 +1,31 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Spinner (L1 primitive)
+
+**when** Inside a button while `call()` is pending. Known % → `Progress`.
+
+`import { Spinner } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/spinner.tsx` · family: Feedback & status · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Spinner` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Button disabled><Spinner /> 保存中</Button>
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[spinner-01.tsx](../examples/spinner/spinner-01.tsx)** — Spinner — Unknown-duration busy indicator inline in a button or row; prefer Progress when you can report percent.

package/skills/monkey-mini-app/references/contracts/stacked-bar-chart.md

@@ -1,15 +1,20 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # StackedBarChart
 
+Stacked bar chart over flat rows.
+
+**when** Comparing several series across categories (pass/fail per day). Single ratio → `DonutChart`; trend → `Sparkline`.
+
 `import { StackedBarChart, ChartConfig } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/bar-chart.tsx` · blocks
+`packages/ui/src/blocks/bar-chart.tsx` · family: Chart & data · type: block
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
+| `className` | `string \| undefined` |  |  |
 | `config` | `ChartConfig` | ✓ |  |
 | `data` | `Record<string, string \| number>[]` | ✓ |  |
 | `keys` | `string[]` | ✓ |  |
@@ -21,3 +26,13 @@
 ```ts
 Record< string, { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> } ) >
 ```
+
+## Example
+
+```tsx
+<StackedBarChart
+  data={[{ label: "09-01", ok: 12, fail: 2 }]}
+  keys={["ok", "fail"]}
+  config={{ ok: { label: "通过", color: "var(--primary)" }, fail: { label: "失败", color: "var(--destructive)" } }}
+/>
+```

package/skills/monkey-mini-app/references/contracts/stat-card.md

@@ -1,4 +1,4 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # StatCard
 
@@ -8,7 +8,7 @@ KPI card: title, value, optional delta/trend.
 
 `import { StatCard } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/stat-card.tsx` · blocks
+`packages/ui/src/blocks/stat-card.tsx` · family: Chart & data · type: block
 
 ## Props
 

package/skills/monkey-mini-app/references/contracts/status-badge.md

@@ -1,4 +1,4 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # StatusBadge
 
@@ -8,7 +8,7 @@ Toned badge for run/test status.
 
 `import { StatusBadge } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/status-badge.tsx` · blocks
+`packages/ui/src/blocks/status-badge.tsx` · family: Feedback & status · type: block
 
 ## Props
 

package/skills/monkey-mini-app/references/contracts/stepper-item.md

@@ -0,0 +1,39 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# StepperItem
+
+One step inside `Stepper` (title, description, status).
+
+**when** As a child of `Stepper` only — status is `default | active | completed` (lowercase).
+
+`import { StepperItem, StepStatus, StepperProps } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/products/stepper.tsx` · family: Feedback & status · type: product
+
+## Props
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `children` | `React.ReactNode` |  | Content rendered below the step header (code blocks, text, etc.). |
+| `className` | `string \| undefined` |  |  |
+| `description` | `string \| undefined` |  | Optional description below the title. |
+| `icon` | `React.ReactNode` |  | Custom icon to replace the step number circle. |
+| `status` | `StepStatus \| undefined` |  | Visual status of this step. Defaults to "default". |
+| `step` | `number \| undefined` |  | Override the auto-incremented step number. |
+| `title` | `string` | ✓ | Step heading text. |
+
+## Types
+
+### `StepStatus`
+
+```ts
+"default" | "active" | "completed"
+```
+
+### `StepperProps`
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `children` | `React.ReactNode` | ✓ | StepperItem elements. |
+| `className` | `string \| undefined` |  |  |
+| `orientation` | `"vertical" \| "horizontal" \| undefined` |  | Layout direction. Defaults to "vertical". |

package/skills/monkey-mini-app/references/contracts/stepper.md

@@ -1,26 +1,53 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # Stepper
 
-`import { Stepper, Step } from "@monkey-mini-app/ui"`
+Numbered steps with status; children are `StepperItem`.
 
-`packages/ui/src/products/stepper.tsx` · products
+**when** Wizard/progress of an ordered process. Time axis → `RunTimeline`.
+
+`import { Stepper, StepStatus, StepperItemProps } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/products/stepper.tsx` · family: Feedback & status · type: product
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
-| `current` | `number` | ✓ |  |
-| `onStepClick` | `((index: number) => void) \| undefined` |  |  |
-| `orientation` | `"vertical" \| "horizontal" \| undefined` |  |  |
-| `steps` | `Step[]` | ✓ |  |
+| `children` | `React.ReactNode` | ✓ | StepperItem elements. |
+| `className` | `string \| undefined` |  |  |
+| `orientation` | `"vertical" \| "horizontal" \| undefined` |  | Layout direction. Defaults to "vertical". |
 
 ## Types
 
-### `Step`
+### `StepStatus`
+
+```ts
+"default" | "active" | "completed"
+```
+
+### `StepperItemProps`
 
 | field | type | required | note |
 |---|---|:---:|---|
-| `description` | `string \| undefined` |  |  |
-| `id` | `string` | ✓ |  |
-| `title` | `string` | ✓ |  |
+| `children` | `React.ReactNode` |  | Content rendered below the step header (code blocks, text, etc.). |
+| `className` | `string \| undefined` |  |  |
+| `description` | `string \| undefined` |  | Optional description below the title. |
+| `icon` | `React.ReactNode` |  | Custom icon to replace the step number circle. |
+| `status` | `StepStatus \| undefined` |  | Visual status of this step. Defaults to "default". |
+| `step` | `number \| undefined` |  | Override the auto-incremented step number. |
+| `title` | `string` | ✓ | Step heading text. |
+
+## Example
+
+```tsx
+<Stepper><StepperItem title="上传" status="pass" /><StepperItem title="校验" status="running" /></Stepper>
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[stepper-01.tsx](../examples/stepper/stepper-01.tsx)** — Stepper — Multi-step flow (draft → review → ship) with completed/active/pending states, vertical and horizontal. — _*Vertical and horizontal*_

package/skills/monkey-mini-app/references/contracts/switch.md

@@ -0,0 +1,25 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Switch (L1 primitive)
+
+Boolean toggle.
+
+**when** Immediate on/off settings (submit-on-toggle).
+
+`import { Switch } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/switch.tsx` · family: Form · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Switch` | `checked?` `disabled?` `form?` `inputRef?` `name?` `nativeButton?` `onCheckedChange?` `readOnly?` `render?` `required?` `size?=default/sm` `uncheckedValue?` +1 |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Switch checked={on} onCheckedChange={set} />
+```

package/skills/monkey-mini-app/references/contracts/table-page.md

@@ -0,0 +1,41 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# TablePage
+
+Full-height table page: toolbar pinned, one scrolling band for the grid, bulk bar floating. Without it a `DataGrid` is dropped into a plain flex column, the tallest child wins, and the page scrolls instead of the table: the toolbar slides off, pagination ends up below the fold, and selecting 200 rows shoves the table down every time the bulk bar appears. The band owns `min-h-0` + `overflow-y-auto` here, and the bulk bar is out of flow with `pointer-events-none` on its track so the rows under it stay clickable.
+
+**when** Page shape: one wide filterable table is the product — inventories, ledgers, saved views
+
+`import { TablePage } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/blocks/table-page.tsx` · family: Layout & structure · type: block
+
+## Props
+
+| field | type | required | note |
+|---|---|:---:|---|
+| `bulk` | `ReactNode` |  | Bulk actions. Floats over the bottom of the grid instead of pushing the rows around. |
+| `className` | `string \| undefined` |  |  |
+| `empty` | `ReactNode` |  | First-run / no-match placeholder. Renders when `grid` is not given. |
+| `grid` | `ReactNode` |  | The table itself (a `DataGrid`, usually). The only slot that scrolls. |
+| `pagination` | `ReactNode` |  | A pager you own. `DataGrid` already renders its own when `features.pagination` is on. |
+| `toolbar` | `ReactNode` |  | Page-level actions above the table: search, filters, "New". Pinned; it never scrolls away. |
+
+## Example
+
+```tsx
+<TablePage
+  toolbar={<FilterBar {...{ query, onQueryChange, filters }} />}
+  grid={rows.length ? <DataGrid columns={columns} data={rows} /> : undefined}
+  empty={<FirstRun onImport={import} />}
+  bulk={selected.size ? <BulkBar count={selected.size} onClear={clear} /> : undefined}
+/>
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[table-page-01.tsx](../examples/table-page/table-page-01.tsx)** — TablePage — A wide table as the whole product: the filter bar stays pinned, only the grid scrolls, and ticking rows floats a bulk bar over the bottom without moving a single row. — _*Scroll the table — the toolbar stays put; select rows — the bar floats over the grid, it never pushes rows down*_

package/skills/monkey-mini-app/references/contracts/table.md

@@ -0,0 +1,42 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Table (L1 primitive)
+
+Raw HTML table primitives.
+
+**when** Only when you need full control of cells. Otherwise use `DataGrid` (sorting/filter/paging/CSV built in).
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/table.tsx` · family: Data & tables · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Table` | — |
+| `TableBody` | — |
+| `TableCaption` | — |
+| `TableCell` | — |
+| `TableFooter` | — |
+| `TableHead` | — |
+| `TableHeader` | — |
+| `TableRow` | — |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Table><TableHeader><TableRow><TableHead>列</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>v</TableCell></TableRow></TableBody></Table>
+```
+
+## Examples
+
+Runnable files under `references/examples/` — portable by construction (`react` +
+`@monkey-mini-app/ui` + relatives), so copy the closest one into `ui.tsx` / `ui/`.
+Pick by **scenario**, then open the file you need.
+
+- **[table-01.tsx](../examples/table/table-01.tsx)** — Table — Static, semantic table you lay out by hand — small fixed datasets; switch to DataGrid the moment you need sort/filter/pagination.

package/skills/monkey-mini-app/references/contracts/tabs.md

@@ -0,0 +1,31 @@
+<!-- generated by scripts/gen/skill — do not edit -->
+
+# Tabs (L1 primitive)
+
+Switch between views in one page.
+
+**when** Board vs table, or settings sections. Navigation between routes/pages → keep it in your own state.
+
+Compound: compose the parts below — **do not invent part names**.
+
+`import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "@monkey-mini-app/ui"`
+
+`packages/ui/src/components/tabs.tsx` · family: Navigation · type: component · primitive
+
+## Parts
+
+| part | own props |
+|---|---|
+| `Tabs` | `onValueChange?` `orientation?` `render?` `value?` |
+| `TabsContent` | `keepMounted?` `render?` `value` |
+| `TabsList` | `activateOnFocus?` `loopFocus?` `render?` `variant?=line/default` |
+| `TabsTrigger` | `disabled?` `nativeButton?` `render?` `value` |
+| `tabsListVariants` (hook/util) | `class?` `variant?=line/default` |
+
+_Inherited HTML/ARIA props (`className`, `style`, `id`, `onClick`, `aria-*`, …) omitted — every component takes them._
+
+## Skeleton
+
+```tsx
+<Tabs value={v} onValueChange={set}><TabsList><TabsTrigger value="a">A</TabsTrigger></TabsList><TabsContent value="a">…</TabsContent></Tabs>
+```

package/skills/monkey-mini-app/references/contracts/tag-input.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # TagInput
 
+Chip-style multi-value text input.
+
+**when** Labels/owners where free values are allowed (`Transfer` when choosing from a fixed pool).
+
 `import { TagInput } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/composites/tag-input.tsx` · composites
+`packages/ui/src/composites/tag-input.tsx` · family: Form · type: composite
 
 ## Props
 
@@ -13,3 +17,9 @@
 | `onChange` | `((value: string[]) => void) \| undefined` |  |  |
 | `placeholder` | `string \| undefined` |  |  |
 | `value` | `string[] \| undefined` |  |  |
+
+## Example
+
+```tsx
+<TagInput value={tags} onChange={(v) => set(v)} />
+```

package/skills/monkey-mini-app/references/contracts/terminal.md

@@ -1,13 +1,24 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # Terminal
 
+Fixed-width console block.
+
+**when** Showing a command + its output verbatim. Timestamped levels/scrolling → `LogViewer`.
+
 `import { Terminal } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/terminal.tsx` · blocks
+`packages/ui/src/blocks/terminal.tsx` · family: Realtime · type: block
 
 ## Props
 
 | field | type | required | note |
 |---|---|:---:|---|
+| `className` | `string \| undefined` |  |  |
 | `lines` | `string[]` | ✓ |  |
+
+## Example
+
+```tsx
+<Terminal lines={["$ df -h", "/dev/disk1  62%"]} />
+```

package/skills/monkey-mini-app/references/contracts/test-step-list.md

@@ -1,10 +1,14 @@
-<!-- generated by scripts/generate-skill.mjs — do not edit -->
+<!-- generated by scripts/gen/skill — do not edit -->
 
 # TestStepList
 
+Numbered test steps with expected/actual + status.
+
+**when** QA cases, checklists that get executed and graded.
+
 `import { TestStepList, TestStep } from "@monkey-mini-app/ui"`
 
-`packages/ui/src/blocks/test-step-list.tsx` · blocks
+`packages/ui/src/blocks/test-step-list.tsx` · family: Data & tables · type: block
 
 ## Props
 
@@ -21,3 +25,9 @@
 | `id` | `string` | ✓ |  |
 | `status` | `string` | ✓ |  |
 | `title` | `string` | ✓ |  |
+
+## Example
+
+```tsx
+<TestStepList steps={[{ id: "s1", name: "登录", status: "pass" }]} />
+```