@yh-ui/yh-ui-skill 1.0.30

package/assets/skills/yh-ui/references/recipes-form-schema.md

@@ -0,0 +1,82 @@
+# Deep Recipe: YhFormSchema
+
+Use this recipe for schema-driven forms, dynamic business forms, generated forms, and admin create/edit pages with conditional fields.
+
+## Default Choice
+
+Use `YhFormSchema` when fields are generated from configuration or when the form needs dynamic visibility, async options, grouped fields, list fields, or custom field rendering.
+
+Use `YhForm` + `YhFormItem` for small hand-written forms.
+
+## Source-Aligned API Highlights
+
+- Props: `modelValue`, `schema`, `formProps`, `gutter`.
+- Events: `update:modelValue`, `submit`, `change`, `validate`.
+- Schema item capabilities: `field`, `label`, `type`, `component`, `props`, `formItemProps`, `rules`, `required`, `hidden`, `disabled`, `slots`, `col`, `span`, `render`, `asyncOptions`, `optionProp`, `defaultValue`, `tooltip`.
+- Special item types: `divider`, `text`, `list`.
+- Expose: `validate`, `resetFields`, `clearValidate`, `scrollToField`, `getModel`, `setFieldValue`, `formRef`.
+
+## Pattern: Dynamic Form
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { YhButton, YhFormSchema, YhMessage } from '@yh-ui/components'
+import type { FormSchema } from '@yh-ui/components'
+
+const model = ref({
+  name: '',
+  role: '',
+  enabled: true
+})
+
+const schema: FormSchema = [
+  {
+    field: 'name',
+    label: 'Name',
+    component: 'input',
+    required: true,
+    props: { clearable: true, placeholder: 'User name' }
+  },
+  {
+    field: 'role',
+    label: 'Role',
+    component: 'select',
+    required: true,
+    asyncOptions: async () => [
+      { label: 'Admin', value: 'admin' },
+      { label: 'Editor', value: 'editor' }
+    ]
+  },
+  {
+    field: 'enabled',
+    label: 'Enabled',
+    component: 'switch',
+    defaultValue: true
+  }
+]
+
+function submit() {
+  YhMessage.success('Saved')
+}
+</script>
+
+<template>
+  <YhFormSchema
+    v-model="model"
+    :schema="schema"
+    :form-props="{ labelWidth: 120 }"
+    @submit="submit"
+  />
+  <YhButton type="primary" @click="submit">Save</YhButton>
+</template>
+```
+
+## Agent Rules
+
+- Use `v-model` with `modelValue`.
+- Use `required` for simple required rules and `rules` for custom validation.
+- Use `hidden`/`disabled` functions for dynamic behavior.
+- Use `asyncOptions` for remote options instead of manually wiring loading state for each field.
+- Use `type: 'list'` for repeatable field groups.
+- Do not use `YhFormSchema` for a tiny static form unless schema generation is useful.

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

@@ -0,0 +1,83 @@
+# Deep Recipe: YhTable
+
+Use this recipe when the user asks for data tables, admin list pages, exports, selection, pagination, or large datasets.
+
+## Default Choice
+
+Use `YhTable` with a stable `columns` array and typed row data. Add `YhPagination` only when pagination is not handled through `YhTable`'s `pagination` prop.
+
+## Source-Aligned API Highlights
+
+- Props: `data`, `columns`, `rowKey`, `loading`, `pagination`, `selectionConfig`, `sortConfig`, `filterConfig`, `virtualConfig`, `toolbarConfig`, `emptyConfig`, `height`, `maxHeight`, `border`, `stripe`, `showIndex`.
+- Events: `sort-change`, `filter-change`, `page-change`, `selection-change`, `row-click`, `cell-click`, `scroll`, `update:data`.
+- Expose: `refresh`, `clearSelection`, `getSelectionRows`, `sort`, `clearSort`, `filter`, `clearFilter`, `exportData`, `print`, `scrollTo`, `doLayout`.
+
+## Pattern: Request-Driven Table
+
+```vue
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { YhButton, YhEmpty, YhForm, YhFormItem, YhInput, YhTable } from '@yh-ui/components'
+import { createRequest, useRequest } from '@yh-ui/request'
+
+interface UserRow {
+  id: number
+  name: string
+  email: string
+  status: string
+}
+
+const api = createRequest({ baseURL: '/api' })
+const keyword = ref('')
+const page = ref({ currentPage: 1, pageSize: 20, total: 0 })
+
+const columns = [
+  { prop: 'name', label: 'Name', minWidth: 160 },
+  { prop: 'email', label: 'Email', minWidth: 220 },
+  { prop: 'status', label: 'Status', width: 120 }
+]
+
+const { data, loading, error, refresh } = useRequest(async () => {
+  const result = await api.get<{ list: UserRow[]; total: number }>('/users', {
+    params: { keyword: keyword.value, page: page.value.currentPage, pageSize: page.value.pageSize }
+  })
+  page.value.total = result.total
+  return result.list
+})
+
+const rows = computed(() => data.value || [])
+</script>
+
+<template>
+  <YhForm inline>
+    <YhFormItem label="Keyword">
+      <YhInput v-model="keyword" clearable placeholder="Search users" />
+    </YhFormItem>
+    <YhFormItem>
+      <YhButton type="primary" :loading="loading" @click="refresh">Search</YhButton>
+    </YhFormItem>
+  </YhForm>
+
+  <YhTable
+    row-key="id"
+    :data="rows"
+    :columns="columns"
+    :loading="loading"
+    :pagination="page"
+    border
+    stripe
+    @page-change="refresh"
+  />
+
+  <YhEmpty v-if="!loading && !rows.length && !error" description="No users found" />
+</template>
+```
+
+## Agent Rules
+
+- Keep `columns` outside the template.
+- Use `rowKey` whenever rows have identity.
+- Use `virtualConfig` for large local datasets.
+- Use `loading` and `emptyConfig`/`YhEmpty` for async states.
+- Use table events for remote sort/filter/page behavior.
+- Do not invent `YhDataTable`; use `YhTable`.

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

@@ -0,0 +1,70 @@
+# Request Hooks
+
+Use `@yh-ui/request` for request clients, Vue request state, streaming events, pagination, queues, GraphQL, WebSocket, and HTTP cache helpers.
+
+## Request Instance
+
+```ts
+import { createRequest } from '@yh-ui/request'
+
+const api = createRequest({
+  baseURL: '/api',
+  timeout: 10000,
+  retry: 2
+})
+
+api.interceptors.request.use((config) => {
+  config.headers = {
+    ...config.headers,
+    Authorization: `Bearer ${getToken()}`
+  }
+  return config
+})
+```
+
+## useRequest
+
+```vue
+<script setup lang="ts">
+import { createRequest, useRequest } from '@yh-ui/request'
+
+interface User {
+  id: number
+  name: string
+}
+
+const api = createRequest({ baseURL: '/api' })
+const { data, loading, error, refresh, run } = useRequest<User[]>(() => api.get<User[]>('/users'))
+</script>
+
+<template>
+  <YhButton :loading="loading" @click="refresh">Refresh</YhButton>
+  <YhButton @click="run()">Run</YhButton>
+  <pre v-if="error">{{ error.message }}</pre>
+  <ul>
+    <li v-for="user in data" :key="user.id">{{ user.name }}</li>
+  </ul>
+</template>
+```
+
+## SSE
+
+```ts
+import { useSSE } from '@yh-ui/request'
+
+const { isConnected, connect, disconnect, error } = useSSE('/api/events', {
+  reconnect: true,
+  reconnectInterval: 3000,
+  onMessage: (event) => {
+    console.log(event.data)
+  }
+})
+```
+
+## Agent Rules
+
+- Use `createRequest`, not old names.
+- Prefer `useRequest` for component state instead of manually maintaining `loading`, `data`, and `error`.
+- Use `useSSE` or `useAIStream` for streaming responses.
+- Use pagination/load-more hooks when building list pages.
+- Keep auth token handling in request interceptors or server middleware.

package/assets/skills/yh-ui/references/source-truth.md

@@ -0,0 +1,205 @@
+# Source Truth
+
+This file is generated by `pnpm generate:yh-ui-skill`. Edit `scripts/generate-yh-ui-skill.mjs` for durable source-truth changes.
+
+This file is the compact source-aligned reference for AI agents. Prefer these names and package boundaries over guesses. It mirrors the public exports found in the current repository source.
+
+## Package Boundaries
+
+| Package             | Source-aligned purpose                                                                                    |
+| ------------------- | --------------------------------------------------------------------------------------------------------- |
+| `@yh-ui/yh-ui`      | All-in-one Vue plugin; re-exports components, hooks, utils, theme, and locale                             |
+| `@yh-ui/components` | Vue components, business widgets, AI UI components, global methods                                        |
+| `@yh-ui/hooks`      | Composition API utilities used by components and applications                                             |
+| `@yh-ui/theme`      | Theme plugin, theme manager, tokens, CSS variables, dark mode and density                                 |
+| `@yh-ui/locale`     | Locale files and `Language` type                                                                          |
+| `@yh-ui/icons`      | Iconify runtime, icon helpers, preset collections, generated icon components                              |
+| `@yh-ui/request`    | Fetch-based request client, Vue hooks, SSE, AI stream, pagination, queues, GraphQL, WebSocket, HTTP cache |
+| `@yh-ui/flow`       | Flow canvas, built-in nodes/edges, BPMN nodes, AI workflow nodes, editor helpers                          |
+| `@yh-ui/ai-sdk`     | Vercel AI SDK re-exports, Vue AI hooks, provider adapters, tools, agents, RAG, MCP, observability         |
+| `@yh-ui/nuxt`       | Nuxt module for component registration, composable imports, CSS injection, build transpile                |
+
+## `@yh-ui/components` Exports
+
+### Base and form components
+
+`YhButton`, `YhInput`, `YhInputNumber`, `YhInputTag`, `YhAutocomplete`, `YhCheckbox`, `YhCheckboxGroup`, `YhRadio`, `YhRadioGroup`, `YhRadioButton`, `YhSwitch`, `YhRate`, `YhSelect`, `YhOption`, `YhCascader`, `YhCascaderPanel`, `YhSlider`, `YhTimeSelect`, `YhTimePicker`, `YhDatePicker`, `YhTransfer`, `YhTransferPanel`, `YhTreeSelect`, `YhColorPicker`, `YhUpload`, `YhForm`, `YhFormItem`, `YhFormSchema`, `YhMention`
+
+### Layout, navigation, and typography
+
+`YhRow`, `YhCol`, `YhDivider`, `YhSpace`, `YhContainer`, `YhHeader`, `YhAside`, `YhMain`, `YhFooter`, `YhGrid`, `YhGridItem`, `YhConfigProvider`, `YhBreadcrumb`, `YhBreadcrumbItem`, `YhTabs`, `YhTabPane`, `YhSteps`, `YhStep`, `YhMenu`, `YhMenuItem`, `YhMenuItemGroup`, `YhSubMenu`, `YhDropdown`, `YhDropdownItem`, `YhDropdownMenu`, `YhAffix`, `YhBackTop`, `YhInfiniteScroll`, `YhTypographyTitle`, `YhTypographyText`, `YhTypographyParagraph`, `YhTypographyLink`
+
+### Data display and feedback
+
+`YhTag`, `YhIcon`, `YhBadge`, `YhCard`, `YhAvatar`, `YhEmpty`, `YhSkeleton`, `YhSkeletonItem`, `YhProgress`, `YhAlert`, `YhSpin`, `YhLoading`, `YhMessage`, `YhNotification`, `YhMessageBox`, `YhTooltip`, `YhPopconfirm`, `YhPopover`, `YhDialog`, `YhDialogMethod`, `YhDrawer`, `YhWatermark`, `YhMarquee`, `YhPagination`, `YhImage`, `YhImageViewer`, `YhDescriptions`, `YhDescriptionsItem`, `YhCalendar`, `YhWaterfall`, `YhTree`, `YhTreeNode`, `YhCountdown`, `YhTable`, `YhTableColumn`, `YhCarousel`, `YhCarouselItem`, `YhScrollbar`, `YhResult`
+
+### Business components
+
+`YhGanttChart`, `YhSkuSelector`, `YhPrice`, `YhProductCard`, `YhImageMagnifier`, `YhCouponCard`, `YhLuckyDraw`, `YhFilterBar`, `YhSubmitBar`, `YhCategoryNav`, `YhSmartAddress`
+
+### AI components
+
+`YhAiChat`, `YhAiBubble`, `YhAiSender`, `YhAiThoughtChain`, `YhAiCodeBlock`, `YhAiCodeEditor`, `YhAiCodeRunner`, `YhAiThinking`, `YhAiWelcome`, `YhAiActionGroup`, `YhAiEditorSender`, `YhAiArtifacts`, `YhAiVoiceTrigger`, `YhAiConversations`, `YhAiPrompts`, `YhAiAgentCard`, `YhAiSources`, `YhAiProvider`, `YhAiMention`, `YhAiBubbleList`, `YhAiFileCard`, `YhAiAttachments`, `YhAiMermaid`
+
+Global methods from component install:
+
+`YhMessage`, `YhNotification`, `YhDialogMethod`, `YhMessageBox`, and aliases on `app.config.globalProperties` such as `$message`, `$notify`, `$dialog`, `$msgbox`, `$alert`, `$confirm`, `$prompt`.
+
+## Priority Component API Surface
+
+### 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`
+
+## `@yh-ui/hooks` Exports
+
+Use hooks from these source modules:
+
+`useNamespace`, `useZIndex`, `useSKU`, `useCountdown`, `useLocale`, `useId`, `useFormItem`, `useVirtualScroll`, `useCache`, `useEventListener`, `useScrollLock`, `useClickOutside`, `useConfig`, AI hooks from `use-ai`, and reactive storage helpers from `storage`.
+
+## `@yh-ui/flow` Exports
+
+Canvas and helpers:
+
+`Flow`, `Minimap`, `Controls`, `FlowBackground`, `NodeEditPanel`, `EdgeEditPanel`, `AiNodeEditPanel`.
+
+Nodes:
+
+`BaseNode`, `InputNode`, `OutputNode`, `GroupNode`, `CustomNode`, `NodeResizer`, `NodeToolbar`, `DiamondNode`, `DatabaseNode`.
+
+BPMN nodes:
+
+`BpmnStartEvent`, `BpmnEndEvent`, `BpmnTask`, `BpmnServiceTask`, `BpmnUserTask`, `BpmnExclusiveGateway`, `BpmnParallelGateway`, `BpmnInclusiveGateway`, `BPMN_NODE_TYPES`, `registerBpmnNodes`.
+
+AI workflow nodes:
+
+`AiLlmNode`, `AiPromptNode`, `AiAgentNode`, `AiToolNode`, `AiConditionNode`, `AiStartNode`, `AiEndNode`, `AiMemoryNode`, `AI_WORKFLOW_NODE_TYPES`, `registerAiWorkflowNodes`.
+
+Edges:
+
+`BaseEdge`, `SmoothEdge`, `StepEdge`, `BezierEdge`, `DataFlowEdge`.
+
+Flow API:
+
+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`
+
+## `@yh-ui/ai-sdk` Capability Map
+
+Use these real capabilities:
+
+- Vercel AI SDK re-exports such as `generateText`, `streamText`, `generateObject`, `streamObject`, `embed`, `tool`, `jsonSchema`, `zodSchema`.
+- Vue AI helpers: `useAIChat`, `useAIStream`, `useConversation`, `useConversations`, `createStreamableValue`, `createYHFunctionTool`, `createProviderAdapter`, `getProviderPreset`, `PROVIDER_PRESETS`, `XRequest`, `createXRequest`.
+- Agents and workflows: `useReActAgent`, `createPlanExecuteAgent`, `createEnhancedAgent`, `createReflexionAgent`, `createReWOOAgent`, `createChain`, `createParallelChain`.
+- RAG and vector helpers: `createRAGSystem`, `createProductionRAG`, `createInMemoryVectorStore`, loaders and chunking helpers.
+- MCP: `useMCPClient`, `useMCPTools`, `MCPServer`, `useMCPServer`, `createMCPServerHTTPHandler`.
+- Observability and safety: `createTracer`, `createObservabilityManager`, `createSafetyFilter`, rate limit and cache adapters.
+
+## Nuxt Auto-Imports
+
+The Nuxt module registers component names using the configured prefix, default `Yh`. It also auto-imports common hooks and globals from `@yh-ui/hooks` and `@yh-ui/components`.
+
+Important nuance: native `useId` is not overridden. YH-UI's hook is imported as `useYhId`.
+
+## Known Non-Goals
+
+- Do not claim complete API coverage inside this skill. It is a compact agent guide.
+- Do not include provider secrets in frontend examples.
+- Do not use legacy or guessed APIs when a source export is listed here.

package/assets/skills/yh-ui/references/usage-patterns.md

@@ -0,0 +1,111 @@
+# Usage Patterns
+
+These patterns are intentionally short. Use them as starting points, then adapt names and data to the user's app.
+
+## Filterable Table Page
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { YhButton, YhForm, YhFormItem, YhInput, YhTable } from '@yh-ui/components'
+
+const keyword = ref('')
+const rows = ref([{ id: 1, name: 'YH-UI', status: 'active' }])
+const columns = [
+  { prop: 'name', label: 'Name' },
+  { prop: 'status', label: 'Status' }
+]
+
+function search() {
+  // call API or filter rows
+}
+</script>
+
+<template>
+  <YhForm inline>
+    <YhFormItem label="Keyword">
+      <YhInput v-model="keyword" clearable placeholder="Search" />
+    </YhFormItem>
+    <YhFormItem>
+      <YhButton type="primary" @click="search">Search</YhButton>
+    </YhFormItem>
+  </YhForm>
+
+  <YhTable :data="rows" :columns="columns" />
+</template>
+```
+
+## Dialog Form
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { YhButton, YhDialog, YhForm, YhFormItem, YhInput } from '@yh-ui/components'
+
+const open = ref(false)
+const name = ref('')
+</script>
+
+<template>
+  <YhButton type="primary" @click="open = true">Create</YhButton>
+
+  <YhDialog v-model="open" title="Create item">
+    <YhForm>
+      <YhFormItem label="Name">
+        <YhInput v-model="name" />
+      </YhFormItem>
+    </YhForm>
+  </YhDialog>
+</template>
+```
+
+## Theme Variables In Custom CSS
+
+```vue
+<template>
+  <section class="summary-panel">
+    <slot />
+  </section>
+</template>
+
+<style scoped>
+.summary-panel {
+  color: var(--yh-text-color-primary);
+  background: var(--yh-bg-color);
+  border: 1px solid var(--yh-border-color);
+  border-radius: var(--yh-border-radius-base);
+}
+</style>
+```
+
+## Locale Boundary
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { YhConfigProvider } from '@yh-ui/components'
+import zhCn from '@yh-ui/locale/lang/zh-cn'
+import en from '@yh-ui/locale/lang/en'
+
+const locale = ref(zhCn)
+</script>
+
+<template>
+  <YhConfigProvider :locale="locale">
+    <YhButton @click="locale = en">English</YhButton>
+    <slot />
+  </YhConfigProvider>
+</template>
+```
+
+## Icon Usage
+
+```vue
+<script setup lang="ts">
+import { Icon } from '@yh-ui/icons/vue'
+</script>
+
+<template>
+  <Icon icon="lucide:search" :size="18" />
+</template>
+```

package/assets/skills/yh-ui/references/vue-component-practices.md

@@ -0,0 +1,84 @@
+# Vue Component Practices
+
+Use these rules when generating or reviewing YH-UI Vue 3 code. They combine Vue official guidance with component-library patterns that make AI-generated code safer and easier to maintain.
+
+## SFC Structure
+
+- Prefer `<script setup lang="ts">` for application examples and small components.
+- Order SFC blocks as `<script>`, `<template>`, then `<style>`.
+- Keep imports at the top, then types, props/emits/models, state, computed values, watchers, lifecycle hooks, and functions grouped by feature.
+- Use `scoped` styles for page/example CSS unless the task intentionally edits global theme CSS.
+- Avoid large inline template expressions. Move non-trivial logic to computed values or functions.
+
+## Props, Emits, And v-model
+
+- Type props with TypeScript interfaces or inline type literals.
+- Use `withDefaults(defineProps<Props>(), defaults)` when defaults are needed.
+- Use typed `defineEmits` for custom events.
+- For two-way binding, prefer `defineModel` in new Vue 3.4+ examples when the target project supports it; otherwise use `modelValue` and `update:modelValue`.
+- Never mutate props directly. Emit events or copy prop values into local state when local edits are needed.
+- Keep event names explicit and user-action oriented, such as `submit`, `cancel`, `refresh`, or `update:filters`.
+
+## Slots And Composition
+
+- Prefer slots for customizable content over hard-coded markup when writing reusable components.
+- Use named slots for clear extension points such as `header`, `toolbar`, `actions`, `empty`, and `footer`.
+- In app pages, compose YH-UI components directly instead of wrapping every component in a thin local abstraction.
+- Create composables only when stateful logic is reused or complex enough to deserve a named boundary.
+
+## Reactivity
+
+- Use `ref` for primitives and replaceable values.
+- Use `reactive` for stable object state that is mutated by field.
+- Use `computed` for derived values instead of maintaining duplicated state.
+- Use `watch` for side effects, not for deriving values.
+- Avoid destructuring reactive objects unless using `toRefs`, `storeToRefs`, or Vue 3.5 reactive props destructure intentionally.
+- Use `shallowRef` for large immutable objects, external instances, editors, charts, or flow graphs when deep reactivity is unnecessary.
+
+## Accessibility
+
+- Prefer semantic HTML around YH-UI components.
+- Ensure icon-only buttons have an accessible label.
+- Keep form labels visible through `YhFormItem` or explicit `aria-label`.
+- Preserve keyboard behavior for dialogs, drawers, dropdowns, popovers, tabs, and menus.
+- Do not remove focus outlines unless replacing them with an equally visible focus style.
+
+## Performance
+
+- Keep large tables and lists virtualized when YH-UI offers virtual scrolling.
+- Use lazy-loaded components for heavy features such as flow editors, charts, code editors, and AI artifact renderers.
+- Avoid creating new object/function literals in hot template loops when they can be stable constants.
+- Use `v-show` for frequent toggles and `v-if` for expensive conditional branches.
+- Use stable `:key` values in `v-for`; never use array index when item identity exists.
+- Keep expensive formatting in computed values or memoized helpers.
+
+## SSR And Hydration
+
+- Do not access `window`, `document`, `localStorage`, `ResizeObserver`, or canvas APIs during SSR.
+- Use `onMounted` or Nuxt `<ClientOnly>` for browser-only integrations.
+- Give flow editors, charts, virtual lists, and code editors stable container dimensions to avoid hydration/layout shifts.
+- Keep server-rendered initial state deterministic.
+
+## Forms And Data Pages
+
+- Use `YhForm`, `YhFormItem`, and typed form state for editable data.
+- Keep search filters separate from committed query params when a page needs reset/search behavior.
+- Include loading, error, empty, and success feedback for request-driven screens.
+- Use `YhMessage`, `YhNotification`, `YhPopconfirm`, and `YhMessageBox` for user feedback instead of ad hoc alerts.
+- Use `YhTable` columns as stable constants or computed values, not inline arrays in templates.
+
+## Component-Library Code Style
+
+- Preserve public API compatibility when editing reusable components.
+- Do not rename props/events unless the user explicitly asks for a breaking change.
+- Keep component props small and orthogonal.
+- Prefer CSS variables and existing theme tokens over hard-coded colors.
+- Use `useNamespace` for internal BEM-style component classes when editing package components.
+- Use `useZIndex`, `useLocale`, `useId`/`useYhId`, and config hooks instead of local one-off implementations.
+
+## Testing Expectations
+
+- For reusable components, test props, emitted events, slots, keyboard/focus behavior, and important visual states.
+- For composables, test state transitions and cleanup.
+- For request code, test loading, success, error, retry, and cancellation when present.
+- For Nuxt/SSR examples, check that browser-only code is gated.

package/dist/args.d.ts

@@ -0,0 +1,2 @@
+import type { ParsedArgs } from './types';
+export declare function parseArgs(argv: string[]): ParsedArgs;