@yh-ui/yh-ui-skill 1.0.30

package/assets/skills/yh-ui/references/api-cheatsheet.md

@@ -0,0 +1,203 @@
+# API Cheatsheet
+
+This file is generated by `pnpm generate:yh-ui-skill` using the TypeScript AST for script APIs and template scanning for slots. It lists common and source-extracted APIs that coding agents usually need. Check source docs for complete behavioral details.
+
+## Install Entries
+
+```ts
+import YhUI from '@yh-ui/yh-ui'
+import '@yh-ui/yh-ui/css'
+
+import { YhButton, YhTable } from '@yh-ui/components'
+import '@yh-ui/components/style.css'
+```
+
+## Common Components
+
+| Component          | Common usage                                                                        |
+| ------------------ | ----------------------------------------------------------------------------------- |
+| `YhButton`         | `type`, `size`, `loading`, click events                                             |
+| `YhInput`          | `v-model`, `clearable`, `placeholder`, password/text input                          |
+| `YhForm`           | Form container; use with `YhFormItem`                                               |
+| `YhFormItem`       | `label`, validation and field layout                                                |
+| `YhTable`          | `data`, `columns`, selection, pagination, toolbar, export, print, virtual scrolling |
+| `YhDialog`         | `v-model`, `title`, default/footer content                                          |
+| `YhDrawer`         | `v-model`, `title`, detail side panels                                              |
+| `YhMessage`        | Global feedback: success/error/info/warning style calls                             |
+| `YhConfigProvider` | Locale and configuration boundary                                                   |
+| `YhScrollbar`      | Custom scroll containers                                                            |
+| `YhCarousel`       | Image or content carousel; use with `YhCarouselItem`                                |
+| `YhImageMagnifier` | Product/image inspection                                                            |
+
+## Source-Extracted Priority APIs
+
+### YhAiAttachments
+
+Props: `beforeUpload`, `disabled`, `dragTarget`, `getDropContainer`, `hideUpload`, `httpRequest`, `items`, `limit`, `listStyle`, `maxCount`, `overflow`, `placeholder`, `scrollMaxHeight`, `themeOverrides`, `uploadIconSize`
+Emits: `delete-card`, `exceed`, `update:items`, `upload-change`, `upload-drop`, `upload-error`, `upload-success`
+Slots: `default`, `drop-area`, `file-item`, `upload-button`
+Expose: None detected
+
+### YhAiBubble
+
+Props: `allowedAttributes`, `allowedSchemes`, `allowedTags`, `avatar`, `citations`, `content`, `enablePythonRuntime`, `enableSanitizer`, `loading`, `markdown`, `markdownOptions`, `multimodal`, `onCitationClick`, `onExplainCode`, `onRunCode`, `onStreamComplete`, `placement`, `pyodideUrl`, `pythonApiUrl`, `pythonRuntime`, `role`, `sanitizer`, `shape`, `streamInterval`, `streamMode`, `streamSpeed`, `streaming`, `structuredData`, `themeOverrides`, `time`, `typing`, `variant`
+Emits: None detected
+Slots: `avatar`, `default`, `footer`, `header`
+Expose: None detected
+
+### YhAiBubbleList
+
+Props: `autoScroll`, `height`, `itemHeight`, `items`, `loading`, `themeOverrides`, `virtualScroll`
+Emits: None detected
+Slots: `bubble`, `default`, `loading`
+Expose: `scrollRef`, `scrollToBottom`, `scrollToIndex`
+
+### YhAiChat
+
+Props: `estimatedItemHeight`, `loading`, `messages`, `suggestions`, `themeOverrides`, `virtualHeight`, `virtualScroll`
+Emits: `clear`, `send`, `update:messages`
+Slots: `default`, `header`, `loading`, `message`, `sender`
+Expose: None detected
+
+### YhAiCodeBlock
+
+Props: `code`, `collapsible`, `defaultCollapsed`, `editable`, `filename`, `highlight`, `highlightLines`, `language`, `showEdit`, `showLineNumbers`, `showRun`, `themeOverrides`
+Emits: `copy`, `edit`, `run`, `update`
+Slots: `actions`, `default`
+Expose: None detected
+
+### YhAiCodeEditor
+
+Props: `autofocus`, `fontSize`, `height`, `initialValue`, `language`, `minimap`, `modelValue`, `readonly`, `tabSize`, `theme`, `themeOverrides`, `wordWrap`
+Emits: `change`, `dispose`, `mount`, `update:modelValue`
+Slots: None detected
+Expose: `focus`, `getEditor`, `getValue`, `setValue`
+
+### YhAiCodeRunner
+
+Props: `autorun`, `code`, `height`, `language`, `themeOverrides`
+Emits: `error`, `output`, `ready`, `run`, `stop`
+Slots: None detected
+Expose: `clear`, `reset`, `run`, `stop`
+
+### YhAiFileCard
+
+Props: `audioProps`, `byte`, `description`, `icon`, `imageProps`, `loading`, `mask`, `name`, `size`, `src`, `themeOverrides`, `type`, `videoProps`
+Emits: `click`
+Slots: `default`
+Expose: None detected
+
+### YhAiMermaid
+
+Props: `actions`, `className`, `classNames`, `code`, `config`, `header`, `onRenderTypeChange`, `prefixCls`, `style`, `styles`, `themeOverrides`
+Emits: `error`, `ready`, `render-type-change`
+Slots: `default`, `extra`, `header`
+Expose: None detected
+
+### YhAiSender
+
+Props: `attachments`, `clearable`, `commands`, `disabled`, `loading`, `maxLength`, `mentionOptions`, `modelValue`, `placeholder`, `showWordLimit`, `themeOverrides`
+Emits: `blur`, `change`, `clear`, `command`, `focus`, `remove-attachment`, `send`, `update:modelValue`, `upload`
+Slots: `actions`, `default`, `prefix`, `submit`
+Expose: None detected
+
+### YhAiSources
+
+Props: `maxVisible`, `mode`, `showFileType`, `showScore`, `sources`, `themeOverrides`
+Emits: `click`, `open`
+Slots: `default`
+Expose: `scrollToSource`
+
+### YhAiThoughtChain
+
+Props: `autoCollapse`, `className`, `classNames`, `content`, `dotSize`, `draggable`, `editable`, `items`, `lineGradient`, `markdown`, `showProgress`, `status`, `style`, `styles`, `themeOverrides`, `thinking`, `title`
+Emits: `node-add`, `node-click`, `node-delete`, `reorder`, `update:items`
+Slots: `default`
+Expose: None detected
+
+### YhFormSchema
+
+Props: `formProps`, `gutter`, `modelValue`, `schema`
+Emits: `change`, `submit`, `update:modelValue`, `validate`
+Slots: `default`
+Expose: `clearValidate`, `formRef`, `getModel`, `resetFields`, `scrollToField`, `setFieldValue`, `validate`
+
+### YhTable
+
+Props: `autoHeight`, `border`, `cellClassName`, `cellStyle`, `columns`, `contextMenuConfig`, `currentRowKey`, `data`, `dragConfig`, `emptyConfig`, `emptyText`, `expandConfig`, `filterConfig`, `fit`, `headerCellClassName`, `headerCellStyle`, `headerConfig`, `headerRowClassName`, `headerRowStyle`, `height`, `highlightCurrentRow`, `indexConfig`, `keepScroll`, `lazy`, `loadMethod`, `loading`, `maxHeight`, `pagination`, `resizable`, `rowClassName`, `rowConfig`, `rowKey`
+Emits: `cell-click`, `cell-dblclick`, `column-resize`, `column-visible-change`, `current-change`, `drag-end`, `expand-change`, `filter-change`, `header-click`, `header-contextmenu`, `page-change`, `row-click`, `row-contextmenu`, `row-dblclick`, `scroll`, `select`, `select-all`, `selection-change`, `sort-change`, `update:currentRowKey`, `update:data`
+Slots: `default`, `toolbar`, `toolbar-left`, `toolbar-left-prefix`, `toolbar-left-suffix`, `toolbar-right`, `toolbar-right-prefix`, `toolbar-right-suffix`
+Expose: `clearFilter`, `clearSelection`, `clearSort`, `doLayout`, `exportData`, `filter`, `getColumns`, `getExpandedRowKeys`, `getSelectionRowKeys`, `getSelectionRows`, `getTableData`, `importData`, `importFile`, `insertRow`, `openImport`, `print`, `printMultiple`, `printTemplate`, `refresh`, `removeRow`, `resetColumns`, `scrollTo`, `setColumnVisible`, `setCurrentRow`
+
+### Flow
+
+Props: `nodes`, `edges`, `modelValue`, `minZoom`, `maxZoom`, `zoomStep`, `panZoomSpeed`, `defaultNodeType`, `defaultEdgeType`, `nodesDraggable`, `edgesConnectable`, `selectable`, `multiSelectKey`, `background`, `backgroundColor`, `gridSize`, `snapToGrid`, `snapGrid`, `readonly`, `keyboardShortcuts`, `showControls`, `showMinimap`, `minimapNodeColor`, `showAlignmentGuides`, `history`, `maxHistory`, `virtualized`, `virtualizationThreshold`, `isValidConnection`, `themeOverrides`
+
+Emits: `update:modelValue`, `update:nodes`, `update:edges`, `nodeClick`, `nodeDblClick`, `nodeDragStart`, `nodeDrag`, `nodeDragEnd`, `nodeContextMenu`, `edgeClick`, `edgeDblClick`, `edgeContextMenu`, `edgeConnect`, `selectionChange`, `historyChange`, `viewportChange`
+
+Slots: `node`, `edge`
+
+## Table Columns
+
+Use column objects with at least `prop` and `label` unless the existing app uses another local pattern.
+
+```ts
+const columns = [
+  { prop: 'name', label: 'Name' },
+  { prop: 'status', label: 'Status' }
+]
+```
+
+## Theme
+
+Use the real theme plugin and hooks:
+
+```ts
+import { ThemePlugin, useTheme } from '@yh-ui/theme'
+
+app.use(ThemePlugin, {
+  preset: 'blue',
+  followSystem: true,
+  persist: true
+})
+```
+
+Common theme helpers include `useTheme`, `setThemePreset`, `toggleDarkMode`, `checkContrast`, and `getTextColorForBackground`.
+
+## Locale
+
+Use lowercase language package paths:
+
+```ts
+import zhCn from '@yh-ui/locale/lang/zh-cn'
+import en from '@yh-ui/locale/lang/en'
+```
+
+## Hooks
+
+| Hook               | Use case                         |
+| ------------------ | -------------------------------- |
+| `useNamespace`     | BEM-style class names            |
+| `useZIndex`        | Overlay z-index allocation       |
+| `useLocale`        | Component locale text            |
+| `useVirtualScroll` | Large lists                      |
+| `useCountdown`     | Countdown state                  |
+| `useSKU`           | SKU combinations                 |
+| `useAiChat`        | AI chat state from hooks package |
+
+## AI SDK
+
+Use `@yh-ui/ai-sdk/vue` when the example is Vue-specific:
+
+```ts
+import { createProviderAdapter, getProviderPreset, useAIChat } from '@yh-ui/ai-sdk/vue'
+```
+
+Use `@yh-ui/ai-sdk` for general AI SDK, Vercel AI SDK re-exports, agents, RAG, MCP, loaders, observability, and server utilities.
+
+## Do Not Use
+
+- `createYhTheme`
+- `createRequestInstance`
+- `@yh-ui/yh-ui/locale/zh-CN`
+- Invented component names that are not exported by the package

package/assets/skills/yh-ui/references/codegen-rubric.md

@@ -0,0 +1,36 @@
+# Code Generation Rubric
+
+Use this checklist before returning YH-UI code.
+
+## Must Pass
+
+- Imports use real package paths from `source-truth.md`.
+- Component names exist in `source-truth.md`.
+- Vue examples include required CSS when using component-only imports.
+- Nuxt examples use `@yh-ui/nuxt` and rely on auto-import unless the user disabled it.
+- Locale imports use `@yh-ui/locale/lang/zh-cn`, `@yh-ui/locale/lang/en`, or another real locale path pattern.
+- Theme customization uses `@yh-ui/theme`, `ThemePlugin`, `useTheme`, or CSS variables.
+- Request examples use `createRequest` and `useRequest` instead of stale factory names.
+- Flow examples set an explicit height.
+- AI examples do not expose provider API keys in frontend code.
+- Vue SFC examples follow `vue-component-practices.md` for block order, TypeScript, props/emits, reactivity, accessibility, SSR, and performance.
+
+## Should Pass
+
+- Pick the smallest YH-UI surface that solves the task.
+- Prefer composable AI UI for custom products and `YhAiChat` for complete chat surfaces.
+- Include empty, loading, and error states for data-heavy pages.
+- Keep examples TypeScript-friendly.
+- Avoid unrelated dependencies when YH-UI already provides the capability.
+- Keep generated UI code readable and production-shaped, not demo-only.
+- Use stable `:key` values, computed derived state, and explicit loading/error/empty states where relevant.
+
+## Red Flags
+
+- Invented `Yh*` components.
+- Old APIs such as `createYhTheme` or `createRequestInstance`.
+- Nuxt pages manually importing many YH-UI components despite auto-import.
+- Hard-coded design tokens where `var(--yh-*)` variables would fit.
+- Flow canvas without height.
+- Provider secrets in Vite env variables or browser bundles.
+- Direct prop mutation, untyped emits, inaccessible icon buttons, or browser-only APIs during SSR.

package/assets/skills/yh-ui/references/component-map.md

@@ -0,0 +1,70 @@
+# Component Map
+
+Use this map to choose real YH-UI components for common product tasks.
+
+## Admin And Dashboard
+
+| Scenario                   | Recommended components                                                    |
+| -------------------------- | ------------------------------------------------------------------------- |
+| Search/filter form         | `YhForm`, `YhFormItem`, `YhInput`, `YhSelect`, `YhDatePicker`, `YhButton` |
+| Data table page            | `YhTable`, `YhPagination`, `YhTag`, `YhDropdown`, `YhMessage`             |
+| Detail drawer              | `YhDrawer`, `YhDescriptions`, `YhButton`, `YhSpace`                       |
+| Confirm destructive action | `YhPopconfirm`, `YhMessage`, `YhButton`                                   |
+| Empty/error result         | `YhEmpty`, `YhResult`, `YhButton`                                         |
+| Scrollable panel           | `YhScrollbar`, `YhBackTop`                                                |
+| Image gallery              | `YhImage`, `YhImageViewer`, `YhCarousel`, `YhCarouselItem`                |
+
+## Forms
+
+| Scenario           | Recommended components                                                           |
+| ------------------ | -------------------------------------------------------------------------------- |
+| Standard form      | `YhForm`, `YhFormItem`, `YhInput`, `YhSelect`, `YhRadioGroup`, `YhCheckboxGroup` |
+| Schema-driven form | `YhFormSchema`                                                                   |
+| Upload form        | `YhUpload`, `YhForm`, `YhMessage`                                                |
+| Numeric settings   | `YhInputNumber`, `YhSlider`, `YhSwitch`                                          |
+| Tags or mentions   | `YhInputTag`, `YhMention`                                                        |
+
+## AI Products
+
+| Scenario          | Recommended components                              |
+| ----------------- | --------------------------------------------------- |
+| Chat surface      | `YhAiBubble`, `YhAiSender`, `YhAiProvider`          |
+| Complete chat app | `YhAiChat`, `YhAiConversations`, `YhAiPrompts`      |
+| Reasoning display | `YhAiThoughtChain`, `YhAiThinking`                  |
+| Code response     | `YhAiCodeBlock`, `YhAiCodeEditor`, `YhAiCodeRunner` |
+| Source citations  | `YhAiSources`, `YhAiArtifacts`, `YhAiAttachments`   |
+| Message list      | `YhAiBubbleList`, `YhAiBubble`, `YhAiActionGroup`   |
+| File response     | `YhAiFileCard`, `YhAiAttachments`                   |
+| Prompt mention    | `YhAiMention`, `YhAiPrompts`                        |
+| Mermaid diagram   | `YhAiMermaid`                                       |
+
+## Ecommerce And Business
+
+| Scenario            | Recommended components                                    |
+| ------------------- | --------------------------------------------------------- |
+| Product listing     | `YhProductCard`, `YhPrice`, `YhWaterfall`, `YhPagination` |
+| SKU selection       | `YhSkuSelector` or `useSKU`                               |
+| Coupons             | `YhCouponCard`                                            |
+| Checkout footer     | `YhSubmitBar`                                             |
+| Address parsing     | `YhSmartAddress`, `useAddressParser`                      |
+| Category navigation | `YhCategoryNav`                                           |
+| Product inspection  | `YhImageMagnifier`, `YhImage`                             |
+| Promotion filter    | `YhFilterBar`, `YhLuckyDraw`                              |
+
+## Workflow And Flow
+
+| Scenario           | Recommended package/components                                 |
+| ------------------ | -------------------------------------------------------------- |
+| Flow canvas        | `@yh-ui/flow`: `Flow`, `Controls`, `Minimap`, `FlowBackground` |
+| Custom node editor | `NodeEditPanel`, `EdgeEditPanel`, `NodeToolbar`, `NodeResizer` |
+| BPMN sketch        | BPMN node exports from `@yh-ui/flow`                           |
+| AI workflow        | AI workflow node exports from `@yh-ui/flow`                    |
+
+## Icons, Theme, Locale
+
+| Scenario                | Recommended package/components              |
+| ----------------------- | ------------------------------------------- |
+| Runtime Iconify icon    | `@yh-ui/icons/vue`: `Icon`                  |
+| YH icon component       | `YhIcon`                                    |
+| Theme switching         | `@yh-ui/theme`: `ThemePlugin`, `useTheme`   |
+| Runtime locale boundary | `YhConfigProvider` + `@yh-ui/locale/lang/*` |

package/assets/skills/yh-ui/references/eval-scenarios.md

@@ -0,0 +1,92 @@
+# Eval Scenarios
+
+Use these prompts to test whether the skill helps an AI model generate source-aligned YH-UI code.
+
+## Scenario 1: Vue Admin Table
+
+Prompt:
+
+> Build a Vue 3 page with a keyword filter, search button, table, and empty state using YH-UI.
+
+Expected signals:
+
+- Uses `YhForm`, `YhFormItem`, `YhInput`, `YhButton`, `YhTable`, and optionally `YhEmpty`.
+- Imports from `@yh-ui/components` or uses the all-in-one package.
+- Does not invent table props beyond common `data` and `columns`.
+- Uses stable keys, stable column definitions, and loading/error/empty states when request-driven.
+
+## Scenario 2: Nuxt Setup
+
+Prompt:
+
+> Add YH-UI to a Nuxt app and create a page with a button and table.
+
+Expected signals:
+
+- Uses `modules: ['@yh-ui/nuxt']`.
+- Page uses `<YhButton>` and `<YhTable>` directly.
+- Does not manually import every component in the page.
+
+## Scenario 3: AI Chat Surface
+
+Prompt:
+
+> Create a custom AI chat UI with streaming messages, sources, attachments, and cancel support.
+
+Expected signals:
+
+- Uses `YhAiBubbleList` or `YhAiBubble`, `YhAiSender`, `YhAiSources`, `YhAiAttachments`.
+- Uses `useAIChat` from `@yh-ui/ai-sdk/vue`.
+- Keeps provider secrets out of browser code.
+- Does not display hidden chain-of-thought text.
+
+## Scenario 4: Request Hook
+
+Prompt:
+
+> Fetch users from `/api/users` with loading, error, and refresh behavior.
+
+Expected signals:
+
+- Uses `createRequest` and `useRequest`.
+- Shows loading/error UI.
+- Does not use `createRequestInstance`.
+
+## Scenario 5: Flow In Nuxt
+
+Prompt:
+
+> Add an AI workflow editor to a Nuxt page.
+
+Expected signals:
+
+- Uses `@yh-ui/flow`.
+- Wraps the editor in `<ClientOnly>`.
+- Sets explicit height.
+- Uses AI workflow node names from `source-truth.md`.
+
+## Scenario 6: Reusable Vue Wrapper
+
+Prompt:
+
+> Create a reusable YH-UI search toolbar component with typed props, v-model filters, slots for actions, and accessible buttons.
+
+Expected signals:
+
+- Uses `<script setup lang="ts">`.
+- Types props and emits or uses `defineModel` when appropriate.
+- Does not mutate props directly.
+- Provides named slots such as `actions`.
+- Icon-only buttons have accessible labels.
+
+## Scenario 7: Repair Hallucinated Code
+
+Prompt:
+
+> Fix this YH-UI snippet that imports `createYhTheme`, `YhAiSuggestion`, and `@yh-ui/yh-ui/locale/zh-CN`.
+
+Expected signals:
+
+- Replaces theme usage with `ThemePlugin` or `useTheme`.
+- Replaces non-existing AI components with source-aligned components.
+- Replaces locale path with `@yh-ui/locale/lang/zh-cn`.

package/assets/skills/yh-ui/references/flow.md

@@ -0,0 +1,54 @@
+# Flow Editor
+
+Use `@yh-ui/flow` for flow charts, node editors, BPMN sketches, and AI workflow diagrams.
+
+## Basic Canvas
+
+```vue
+<script setup lang="ts">
+import { Controls, Flow, FlowBackground, Minimap } from '@yh-ui/flow'
+import type { FlowEdge, FlowNode } from '@yh-ui/flow'
+
+const nodes: FlowNode[] = [
+  { id: 'start', type: 'input', label: 'Start', position: { x: 80, y: 80 } },
+  { id: 'task', label: 'Process', position: { x: 280, y: 80 } }
+]
+
+const edges: FlowEdge[] = [{ id: 'e-start-task', source: 'start', target: 'task' }]
+</script>
+
+<template>
+  <Flow :nodes="nodes" :edges="edges" fit-view style="height: 560px">
+    <Minimap />
+    <Controls />
+    <FlowBackground />
+  </Flow>
+</template>
+```
+
+## Nuxt SSR
+
+```vue
+<template>
+  <ClientOnly>
+    <Flow :nodes="nodes" :edges="edges" style="height: 560px" />
+  </ClientOnly>
+</template>
+```
+
+## Useful Exports
+
+| Area    | Exports                                                                                         |
+| ------- | ----------------------------------------------------------------------------------------------- |
+| Canvas  | `Flow`, `Minimap`, `Controls`, `FlowBackground`                                                 |
+| Nodes   | `BaseNode`, `InputNode`, `OutputNode`, `GroupNode`, `CustomNode`, `DiamondNode`, `DatabaseNode` |
+| Edges   | `BaseEdge`, `SmoothEdge`, `StepEdge`, `BezierEdge`, `DataFlowEdge`                              |
+| Editing | `NodeEditPanel`, `EdgeEditPanel`, `AiNodeEditPanel`, `NodeToolbar`, `NodeResizer`               |
+| Presets | BPMN nodes, AI workflow nodes, registration helpers                                             |
+
+## Agent Rules
+
+- Always give the canvas an explicit height.
+- Use Vue components for custom node rendering.
+- Keep workflow node data serializable when persistence is required.
+- Use BPMN exports for BPMN-style diagrams and AI workflow exports for agent-like flows.

package/assets/skills/yh-ui/references/nuxt.md

@@ -0,0 +1,50 @@
+# Nuxt Integration
+
+Use `@yh-ui/nuxt` for Nuxt 3/4 apps.
+
+## Setup
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@yh-ui/nuxt'],
+  yhUI: {
+    importStyle: true,
+    buildTranspile: true,
+    prefix: 'Yh',
+    ssrOptimization: {
+      componentCache: true
+    }
+  }
+})
+```
+
+## Usage
+
+After module registration, ordinary pages should use YH-UI components directly:
+
+```vue
+<template>
+  <YhButton type="primary">Create</YhButton>
+  <YhInput v-model="keyword" clearable placeholder="Search" />
+  <YhTable :data="rows" :columns="columns" />
+</template>
+
+<script setup lang="ts">
+const keyword = ref('')
+const rows = ref([{ id: 1, name: 'YH-UI' }])
+const columns = [{ prop: 'name', label: 'Name' }]
+</script>
+```
+
+## Auto-Imported Utilities
+
+The module auto-imports common hooks and utilities such as `useNamespace`, `useZIndex`, `useLocale`, `useVirtualScroll`, `useAiChat`, `useSKU`, and `useCountdown`.
+
+`useId` is imported as `useYhId` to avoid conflicts with Vue/Nuxt native `useId`.
+
+## SSR Rules
+
+- Use `<ClientOnly>` around browser-heavy flow editors.
+- Do not assume `window`, `document`, or `localStorage` exists during SSR.
+- Keep API keys on the server side, especially for AI provider routes.
+- Let the module inject CSS unless the user explicitly disabled `importStyle`.

package/assets/skills/yh-ui/references/recipes-ai.md

@@ -0,0 +1,58 @@
+# Deep Recipe: YhAi Components
+
+Use this recipe for AI chat, copilots, assistant panels, generated artifacts, citations, attachments, and code-heavy AI answers.
+
+## Default Choice
+
+- Use `YhAiChat` for a complete chat surface.
+- Compose `YhAiBubbleList`, `YhAiBubble`, `YhAiSender`, `YhAiSources`, `YhAiAttachments`, and `YhAiActionGroup` for custom products.
+- Use `@yh-ui/ai-sdk/vue` for Vue chat state.
+- Keep provider secrets in server routes.
+
+## Source-Aligned API Highlights
+
+- `YhAiChat`: `messages`, `loading`, `suggestions`, `virtualScroll`, `virtualHeight`, `estimatedItemHeight`; emits `send`, `update:messages`, `clear`; slots `header`, `message`, `loading`, `sender`.
+- `YhAiBubble`: `content`, `markdown`, `role`, `placement`, `loading`, `typing`, `streaming`, `citations`, `multimodal`, `structuredData`, `enableSanitizer`; slots `avatar`, `header`, `default`, `footer`.
+- `YhAiSender`: `modelValue`, `placeholder`, `disabled`, `loading`, `clearable`, `commands`, `mentionOptions`, `attachments`; emits `update:modelValue`, `send`, `change`, `clear`, `command`, `remove-attachment`, `upload`; slots `prefix`, `actions`, `submit`.
+
+## Pattern: Custom Chat
+
+```vue
+<script setup lang="ts">
+import { YhAiAttachments, YhAiBubble, YhAiSender, YhAiSources } from '@yh-ui/components'
+import { useAIChat } from '@yh-ui/ai-sdk/vue'
+
+const { messages, input, isLoading, sendMessage, stop } = useAIChat({
+  api: '/api/chat'
+})
+</script>
+
+<template>
+  <section class="chat-shell">
+    <YhAiBubble
+      v-for="message in messages"
+      :key="message.id"
+      :role="message.role"
+      :content="message.content"
+      :loading="message.status === 'loading'"
+      streaming
+    />
+
+    <YhAiSources v-if="messages.at(-1)?.sources?.length" :sources="messages.at(-1).sources" />
+    <YhAiAttachments
+      v-if="messages.at(-1)?.attachments?.length"
+      :items="messages.at(-1).attachments"
+    />
+
+    <YhAiSender v-model="input" :loading="isLoading" @send="sendMessage" @cancel="stop" />
+  </section>
+</template>
+```
+
+## Security And UX Rules
+
+- Never expose provider keys through `VITE_*` env vars or browser code.
+- Treat model output as untrusted content; keep sanitizer enabled unless the server sanitizes output.
+- Do not display hidden chain-of-thought text. Use `YhAiThoughtChain` for explicit user-facing reasoning steps.
+- Use `YhAiSources` for citations and `YhAiArtifacts` for rich generated outputs.
+- Use `YhAiCodeBlock`, `YhAiCodeEditor`, and `YhAiCodeRunner` for code-centric responses instead of raw `<pre>` blocks when interaction matters.

package/assets/skills/yh-ui/references/recipes-flow.md

@@ -0,0 +1,56 @@
+# Deep Recipe: Flow
+
+Use this recipe for workflow editors, node graphs, BPMN-like diagrams, AI workflow canvases, and visual automation builders.
+
+## Default Choice
+
+Use `@yh-ui/flow` with `Flow`, `Controls`, `Minimap`, and `FlowBackground`.
+
+Always set an explicit canvas height.
+
+## Source-Aligned API Highlights
+
+- Props: `nodes`, `edges`, `modelValue`, `minZoom`, `maxZoom`, `defaultNodeType`, `defaultEdgeType`, `nodesDraggable`, `edgesConnectable`, `selectable`, `background`, `snapToGrid`, `readonly`, `keyboardShortcuts`, `showControls`, `showMinimap`, `history`, `virtualized`, `isValidConnection`.
+- Events: `update:modelValue`, `update:nodes`, `update:edges`, `nodeClick`, `nodeDragStart`, `nodeDrag`, `nodeDragEnd`, `edgeClick`, `edgeConnect`, `selectionChange`, `historyChange`, `viewportChange`.
+- Slots: `node`, `edge`.
+- Use AI workflow nodes: `AiLlmNode`, `AiPromptNode`, `AiAgentNode`, `AiToolNode`, `AiConditionNode`, `AiStartNode`, `AiEndNode`, `AiMemoryNode`.
+- Use BPMN nodes: `BpmnStartEvent`, `BpmnEndEvent`, `BpmnTask`, `BpmnServiceTask`, `BpmnUserTask`, `BpmnExclusiveGateway`, `BpmnParallelGateway`, `BpmnInclusiveGateway`.
+
+## Pattern: Nuxt AI Workflow
+
+```vue
+<script setup lang="ts">
+import { Controls, Flow, FlowBackground, Minimap } from '@yh-ui/flow'
+import type { Edge, Node } from '@yh-ui/flow'
+
+const nodes: Node[] = [
+  { id: 'start', type: 'ai-start', label: 'Start', position: { x: 80, y: 120 } },
+  { id: 'llm', type: 'ai-llm', label: 'LLM', position: { x: 320, y: 120 } },
+  { id: 'end', type: 'ai-end', label: 'End', position: { x: 560, y: 120 } }
+]
+
+const edges: Edge[] = [
+  { id: 'e-start-llm', source: 'start', target: 'llm' },
+  { id: 'e-llm-end', source: 'llm', target: 'end' }
+]
+</script>
+
+<template>
+  <ClientOnly>
+    <Flow :nodes="nodes" :edges="edges" fit-view style="height: 640px">
+      <Minimap />
+      <Controls />
+      <FlowBackground />
+    </Flow>
+  </ClientOnly>
+</template>
+```
+
+## Agent Rules
+
+- In Nuxt or SSR, wrap in `<ClientOnly>`.
+- Use serializable node `data` for persistence.
+- Use `isValidConnection` for business validation.
+- Use `update:nodes` and `update:edges` for controlled editing.
+- Use slots for custom node/edge rendering.
+- Do not render Flow in a zero-height container.