@yh-ui/yh-ui-skill 1.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.md +40 -0
  2. package/assets/llms-full.txt +38 -0
  3. package/assets/llms.txt +22 -0
  4. package/assets/metadata.json +4 -0
  5. package/assets/skills/yh-ui/LICENSE.txt +21 -0
  6. package/assets/skills/yh-ui/README.md +53 -0
  7. package/assets/skills/yh-ui/SKILL.md +179 -0
  8. package/assets/skills/yh-ui/evals/model-eval-2026-05-16.md +47 -0
  9. package/assets/skills/yh-ui/references/agent-workflows.md +53 -0
  10. package/assets/skills/yh-ui/references/ai-components.md +82 -0
  11. package/assets/skills/yh-ui/references/api-cheatsheet.md +203 -0
  12. package/assets/skills/yh-ui/references/codegen-rubric.md +36 -0
  13. package/assets/skills/yh-ui/references/component-map.md +70 -0
  14. package/assets/skills/yh-ui/references/eval-scenarios.md +92 -0
  15. package/assets/skills/yh-ui/references/flow.md +54 -0
  16. package/assets/skills/yh-ui/references/nuxt.md +50 -0
  17. package/assets/skills/yh-ui/references/recipes-ai.md +58 -0
  18. package/assets/skills/yh-ui/references/recipes-flow.md +56 -0
  19. package/assets/skills/yh-ui/references/recipes-form-schema.md +82 -0
  20. package/assets/skills/yh-ui/references/recipes-table.md +83 -0
  21. package/assets/skills/yh-ui/references/request.md +70 -0
  22. package/assets/skills/yh-ui/references/source-truth.md +205 -0
  23. package/assets/skills/yh-ui/references/usage-patterns.md +111 -0
  24. package/assets/skills/yh-ui/references/vue-component-practices.md +84 -0
  25. package/dist/args.d.ts +2 -0
  26. package/dist/args.mjs +76 -0
  27. package/dist/cli.d.ts +2 -0
  28. package/dist/cli.mjs +153 -0
  29. package/dist/fs.d.ts +5 -0
  30. package/dist/fs.mjs +23 -0
  31. package/dist/index.d.ts +5 -0
  32. package/dist/index.mjs +10 -0
  33. package/dist/install.d.ts +4 -0
  34. package/dist/install.mjs +117 -0
  35. package/dist/targets.d.ts +6 -0
  36. package/dist/targets.mjs +64 -0
  37. package/dist/types.d.ts +53 -0
  38. package/dist/types.mjs +1 -0
  39. package/package.json +44 -0
package/README.md ADDED
@@ -0,0 +1,40 @@
1
+ # @yh-ui/yh-ui-skill
2
+
3
+ `@yh-ui/yh-ui-skill` packages the YH-UI agent knowledge base as a publishable CLI.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm i -g @yh-ui/yh-ui-skill
9
+ ```
10
+
11
+ Or run it without a global install:
12
+
13
+ ```bash
14
+ npx @yh-ui/yh-ui-skill install --target cursor
15
+ ```
16
+
17
+ ## Usage
18
+
19
+ ```bash
20
+ yh-ui-skill install
21
+ yh-ui-skill install --target cursor
22
+ yh-ui-skill install --target codex --force
23
+ yh-ui-skill install --out-dir ./.yh-ui
24
+ yh-ui-skill doctor --target claude
25
+ ```
26
+
27
+ ## Targets
28
+
29
+ - `project`: install into `.yh-ui/`
30
+ - `cursor`: install into `.cursor/`
31
+ - `claude`: install into `.claude/`
32
+ - `codex`: install into `.codex/`
33
+ - `markdown`: export into `yh-ui-skill/`
34
+
35
+ ## Package Contents
36
+
37
+ - `skills/yh-ui/`
38
+ - `llms.txt`
39
+ - `llms-full.txt`
40
+ - install manifest for doctor checks
@@ -0,0 +1,38 @@
1
+ # YH-UI Full AI Context
2
+
3
+ Read `skills/yh-ui/SKILL.md` first. Then load only the references relevant to the task.
4
+
5
+ ## Skill Files
6
+
7
+ - `skills/yh-ui/SKILL.md`
8
+ - `skills/yh-ui/README.md`
9
+ - `skills/yh-ui/references/source-truth.md`
10
+ - `skills/yh-ui/references/agent-workflows.md`
11
+ - `skills/yh-ui/references/vue-component-practices.md`
12
+ - `skills/yh-ui/references/component-map.md`
13
+ - `skills/yh-ui/references/usage-patterns.md`
14
+ - `skills/yh-ui/references/api-cheatsheet.md`
15
+ - `skills/yh-ui/references/nuxt.md`
16
+ - `skills/yh-ui/references/ai-components.md`
17
+ - `skills/yh-ui/references/request.md`
18
+ - `skills/yh-ui/references/flow.md`
19
+ - `skills/yh-ui/references/recipes-table.md`
20
+ - `skills/yh-ui/references/recipes-form-schema.md`
21
+ - `skills/yh-ui/references/recipes-ai.md`
22
+ - `skills/yh-ui/references/recipes-flow.md`
23
+ - `skills/yh-ui/references/codegen-rubric.md`
24
+ - `skills/yh-ui/references/eval-scenarios.md`
25
+
26
+ ## Verification
27
+
28
+ - Regenerate generated references: `pnpm generate:yh-ui-skill`
29
+ - Verify skill consistency: `pnpm verify:yh-ui-skill`
30
+ - Typecheck repository: `pnpm typecheck`
31
+
32
+ ## Anti-Hallucination Rules
33
+
34
+ - Do not invent `Yh*` components. Check `source-truth.md`.
35
+ - Do not use `createYhTheme` or `createRequestInstance`.
36
+ - Do not import locale files from `@yh-ui/yh-ui/locale/zh-CN`.
37
+ - Do not expose AI provider keys in frontend code.
38
+ - In SSR/Nuxt, wrap browser-heavy Flow examples in `<ClientOnly>`.
@@ -0,0 +1,22 @@
1
+ # YH-UI AI Entry
2
+
3
+ YH-UI is a Vue 3.5+ component system with core components, AI UI, flow editor, request hooks, theme, icons, locale, and Nuxt integration.
4
+
5
+ Primary AI skill:
6
+
7
+ - `skills/yh-ui/SKILL.md`
8
+
9
+ High-value references:
10
+
11
+ - `skills/yh-ui/references/source-truth.md`: generated package/component/API source truth.
12
+ - `skills/yh-ui/references/agent-workflows.md`: task routing for AI coding agents.
13
+ - `skills/yh-ui/references/vue-component-practices.md`: Vue 3 component-library practices.
14
+ - `skills/yh-ui/references/codegen-rubric.md`: code generation acceptance checklist.
15
+ - `skills/yh-ui/references/component-map.md`: scenario-to-component mapping.
16
+ - `skills/yh-ui/references/api-cheatsheet.md`: generated priority API cheatsheet.
17
+ - `skills/yh-ui/references/recipes-table.md`: YhTable deep recipe.
18
+ - `skills/yh-ui/references/recipes-form-schema.md`: YhFormSchema deep recipe.
19
+ - `skills/yh-ui/references/recipes-ai.md`: YhAi component deep recipe.
20
+ - `skills/yh-ui/references/recipes-flow.md`: Flow deep recipe.
21
+
22
+ Use `@yh-ui/nuxt` for Nuxt, `@yh-ui/components` for component-only imports, `@yh-ui/yh-ui` for all-in-one Vue install, `@yh-ui/request` for request state, `@yh-ui/flow` for flow editors, and `@yh-ui/ai-sdk` for AI SDK integrations.
@@ -0,0 +1,4 @@
1
+ {
2
+ "packageName": "@yh-ui/yh-ui-skill",
3
+ "version": "1.0.30"
4
+ }
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 YH-UI Team
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,53 @@
1
+ # YH-UI Agent Skill
2
+
3
+ This directory packages YH-UI knowledge for modern AI coding agents. It is designed as a small cross-platform skill: one `SKILL.md` file plus progressively loaded reference files.
4
+
5
+ ## Use Cases
6
+
7
+ - Generate Vue 3 or Nuxt code with YH-UI components.
8
+ - Choose the right YH-UI package for a task.
9
+ - Avoid hallucinated component names, package paths, theme APIs, and locale paths.
10
+ - Give AI agents compact examples for admin pages, AI chat, request hooks, flow editors, themes, icons, and locale setup.
11
+ - Anchor generated code to source exports documented in `references/source-truth.md`.
12
+
13
+ ## Design Principles
14
+
15
+ - `SKILL.md` stays as the operating manual and trigger surface.
16
+ - Reference files are loaded progressively by task, keeping agent context small.
17
+ - `source-truth.md` is the compact export map and must match source exports.
18
+ - `api-cheatsheet.md` is generated from source using TypeScript AST extraction for priority props, emits, slots, and exposed methods.
19
+ - Deep recipe files hold opinionated high-value patterns for complex components.
20
+ - `codegen-rubric.md` defines what generated YH-UI code must satisfy.
21
+ - `eval-scenarios.md` captures regression prompts for checking AI behavior over time.
22
+
23
+ ## How To Use
24
+
25
+ ### ChatGPT, Codex, Claude, and compatible skill loaders
26
+
27
+ Add the `skills/yh-ui` folder as a project skill or knowledge folder. The primary entry is `SKILL.md`.
28
+
29
+ ### Claude.ai / Claude Code style
30
+
31
+ Upload or reference this folder as a skill. The YAML frontmatter in `SKILL.md` provides the name and trigger description. Reference files are intentionally split so the model can load only what it needs.
32
+
33
+ ### Cursor, Codex, and engineering agents
34
+
35
+ Point the agent to `skills/yh-ui/SKILL.md` before asking it to generate YH-UI code. For repository-level rules, reuse the core rules from `SKILL.md` in your agent instructions.
36
+
37
+ ### ChatGPT project knowledge
38
+
39
+ Upload `SKILL.md` plus the `references` directory. Tell the assistant to read `SKILL.md` first and open reference files only when relevant.
40
+
41
+ ## Release Checklist
42
+
43
+ - Run `pnpm verify:yh-ui-skill`.
44
+ - Run `pnpm generate:yh-ui-skill` when component exports or priority APIs change.
45
+ - Confirm package versions in the repository are current.
46
+ - Confirm `references/source-truth.md` matches package exports when components are added or renamed.
47
+ - Run the prompts in `references/eval-scenarios.md` against at least one target AI model before a major skill release.
48
+ - Confirm README links still resolve.
49
+ - Regenerate the skill if component package boundaries change.
50
+
51
+ ## License
52
+
53
+ MIT. See `LICENSE.txt`.
@@ -0,0 +1,179 @@
1
+ ---
2
+ name: yh-ui
3
+ description: Use this skill when building Vue 3 or Nuxt interfaces with YH-UI, including admin screens, AI chat products, request hooks, flow editors, themes, icons, locale setup, and component selection. It helps coding agents choose real YH-UI packages/components and produce correct examples without inventing APIs.
4
+ ---
5
+
6
+ # YH-UI Agent Skill
7
+
8
+ YH-UI is a Vue 3.5+ component system for product-grade applications. Use this skill to generate code that uses the actual YH-UI package boundaries, component names, and integration patterns.
9
+
10
+ ## When To Use
11
+
12
+ Use this skill for:
13
+
14
+ - Vue 3 or Nuxt UI built with YH-UI.
15
+ - Selecting YH-UI components for admin, AI, ecommerce, workflow, data, theme, locale, or request tasks.
16
+ - Fixing hallucinated YH-UI imports, component names, paths, or outdated examples.
17
+ - Reviewing whether generated YH-UI code follows source-aligned package boundaries.
18
+ - Improving YH-UI code so it follows modern Vue 3 component-library practices.
19
+
20
+ Do not use this skill for:
21
+
22
+ - Non-Vue UI libraries.
23
+ - Generic prompt writing unrelated to YH-UI implementation.
24
+ - Backend-only AI workflows unless they use `@yh-ui/ai-sdk`, MCP, RAG, or provider adapters.
25
+
26
+ ## Core Rules
27
+
28
+ - Prefer existing YH-UI components over hand-written base controls.
29
+ - Do not invent components, props, hooks, package paths, or theme APIs.
30
+ - Use `@yh-ui/yh-ui` for ordinary Vue apps that want the all-in-one entry.
31
+ - Use `@yh-ui/nuxt` for Nuxt apps and rely on auto-imported components/composables.
32
+ - Use `@yh-ui/components` when the user asks for component-only usage.
33
+ - Use `@yh-ui/request` for request state, SSE, pagination, queues, GraphQL, WebSocket, or HTTP cache helpers.
34
+ - Use `@yh-ui/flow` for flow charts, node editors, BPMN sketches, or AI workflow diagrams.
35
+ - Use `@yh-ui/ai-sdk` with `@yh-ui/components` for AI chat, streaming, tools, and provider adapters.
36
+ - Use `@yh-ui/theme` tokens and CSS variables instead of hard-coded visual systems.
37
+ - Keep model API keys on the server. Never put provider secrets in browser code.
38
+ - In SSR/Nuxt, wrap browser-heavy flow editors in `<ClientOnly>`.
39
+
40
+ ## Agent Workflow
41
+
42
+ 1. Classify the task: Vue app, Nuxt app, AI UI, request/data, flow/workflow, theme/locale, icon, or review.
43
+ 2. Read `references/source-truth.md` when component/package accuracy matters.
44
+ 3. Read only the specialized reference needed for the classified task.
45
+ 4. Apply `references/vue-component-practices.md` for SFC structure, TypeScript, props/emits, slots, accessibility, SSR, and performance.
46
+ 5. Generate code with real package imports and YH-UI components.
47
+ 6. Check the result against `references/codegen-rubric.md` before answering.
48
+
49
+ ## Quick Package Decision
50
+
51
+ | Task | Package |
52
+ | ----------------------------------- | ------------------------------------- |
53
+ | Full Vue component library | `@yh-ui/yh-ui` |
54
+ | Component-only import | `@yh-ui/components` |
55
+ | Nuxt integration | `@yh-ui/nuxt` |
56
+ | AI chat UI and streams | `@yh-ui/components` + `@yh-ui/ai-sdk` |
57
+ | Request hooks and clients | `@yh-ui/request` |
58
+ | Flow editor and workflow canvas | `@yh-ui/flow` |
59
+ | Iconify runtime and icon components | `@yh-ui/icons` |
60
+ | Theme tokens and runtime theme | `@yh-ui/theme` |
61
+ | Locale files | `@yh-ui/locale` |
62
+
63
+ ## High-Frequency Patterns
64
+
65
+ ### Vue Install
66
+
67
+ ```ts
68
+ import { createApp } from 'vue'
69
+ import YhUI from '@yh-ui/yh-ui'
70
+ import '@yh-ui/yh-ui/css'
71
+ import App from './App.vue'
72
+
73
+ createApp(App).use(YhUI).mount('#app')
74
+ ```
75
+
76
+ ### On-Demand Components
77
+
78
+ ```vue
79
+ <script setup lang="ts">
80
+ import { YhButton, YhInput, YhTable } from '@yh-ui/components'
81
+ import '@yh-ui/components/style.css'
82
+ </script>
83
+
84
+ <template>
85
+ <YhInput clearable placeholder="Search" />
86
+ <YhButton type="primary">Submit</YhButton>
87
+ <YhTable :data="rows" :columns="columns" />
88
+ </template>
89
+ ```
90
+
91
+ ### Nuxt
92
+
93
+ ```ts
94
+ export default defineNuxtConfig({
95
+ modules: ['@yh-ui/nuxt'],
96
+ yhUI: {
97
+ importStyle: true,
98
+ buildTranspile: true,
99
+ prefix: 'Yh'
100
+ }
101
+ })
102
+ ```
103
+
104
+ ### AI Chat
105
+
106
+ ```vue
107
+ <script setup lang="ts">
108
+ import { YhAiBubble, YhAiSender } from '@yh-ui/components'
109
+ import { useAIChat } from '@yh-ui/ai-sdk/vue'
110
+
111
+ const { messages, input, isLoading, sendMessage, stop } = useAIChat({
112
+ api: '/api/chat'
113
+ })
114
+ </script>
115
+
116
+ <template>
117
+ <YhAiBubble
118
+ v-for="message in messages"
119
+ :key="message.id"
120
+ :role="message.role"
121
+ :content="message.content"
122
+ streaming
123
+ />
124
+ <YhAiSender v-model="input" :loading="isLoading" @send="sendMessage" @cancel="stop" />
125
+ </template>
126
+ ```
127
+
128
+ ### Flow Editor
129
+
130
+ ```vue
131
+ <script setup lang="ts">
132
+ import { Controls, Flow, FlowBackground, Minimap } from '@yh-ui/flow'
133
+ import type { FlowEdge, FlowNode } from '@yh-ui/flow'
134
+
135
+ const nodes: FlowNode[] = [
136
+ { id: 'start', type: 'input', label: 'Start', position: { x: 80, y: 80 } }
137
+ ]
138
+ const edges: FlowEdge[] = []
139
+ </script>
140
+
141
+ <template>
142
+ <Flow :nodes="nodes" :edges="edges" fit-view style="height: 560px">
143
+ <Minimap />
144
+ <Controls />
145
+ <FlowBackground />
146
+ </Flow>
147
+ </template>
148
+ ```
149
+
150
+ ## Progressive References
151
+
152
+ Read only the file needed for the task:
153
+
154
+ - Source-aligned exports and package boundaries: `references/source-truth.md`
155
+ - Agent task workflows: `references/agent-workflows.md`
156
+ - Vue component-library practices: `references/vue-component-practices.md`
157
+ - Component selection: `references/component-map.md`
158
+ - Common implementation patterns: `references/usage-patterns.md`
159
+ - Frequently used props/events: `references/api-cheatsheet.md`
160
+ - Nuxt auto-import and SSR: `references/nuxt.md`
161
+ - AI components and AI SDK: `references/ai-components.md`
162
+ - Request hooks: `references/request.md`
163
+ - Flow editor: `references/flow.md`
164
+ - Deep table recipe: `references/recipes-table.md`
165
+ - Deep form schema recipe: `references/recipes-form-schema.md`
166
+ - Deep AI recipe: `references/recipes-ai.md`
167
+ - Deep Flow recipe: `references/recipes-flow.md`
168
+ - Code generation acceptance rubric: `references/codegen-rubric.md`
169
+ - Evaluation prompts for regression testing: `references/eval-scenarios.md`
170
+
171
+ ## Common Failure Guards
172
+
173
+ - Do not use old or non-existing APIs such as `createYhTheme` or `createRequestInstance`.
174
+ - Locale files use paths like `@yh-ui/locale/lang/zh-cn`.
175
+ - Nuxt users should not manually import every component in ordinary pages.
176
+ - Flow canvases need an explicit height.
177
+ - Prefer `YhConfigProvider` for runtime locale/config boundaries.
178
+ - Prefer theme CSS variables such as `var(--yh-color-primary)` in custom styles.
179
+ - If unsure whether a component exists, check `references/source-truth.md` before generating code.
@@ -0,0 +1,47 @@
1
+ # YH-UI Skill Eval Record: 2026-05-16
2
+
3
+ ## Scope
4
+
5
+ This record evaluates the current skill package against `references/eval-scenarios.md`.
6
+
7
+ No external model provider credentials are available in this workspace, so this run is a local rubric-based evaluation of the skill package and generated references. It records expected model behavior, likely failure modes, and follow-up optimizations.
8
+
9
+ ## Result Summary
10
+
11
+ | Scenario | Local skill support | Expected model risk | Follow-up |
12
+ | ------------------------ | ------------------- | -------------------------------------------------- | -------------------------------------------------------- |
13
+ | Vue Admin Table | Strong | Medium: may omit loading/error/empty states | Added `recipes-table.md` and rubric checks |
14
+ | Nuxt Setup | Strong | Low: may manually import components | Nuxt reference already warns against manual page imports |
15
+ | AI Chat Surface | Strong | Medium: may invent source/attachment props | Added `recipes-ai.md` and generated API highlights |
16
+ | Request Hook | Good | Low: may use stale factory names | `request.md` and forbidden API checks cover this |
17
+ | Flow In Nuxt | Strong | Medium: may omit height or `<ClientOnly>` | Added `recipes-flow.md` and rubric checks |
18
+ | Reusable Vue Wrapper | Good | Medium: may mutate props or skip accessible labels | Added `vue-component-practices.md` |
19
+ | Repair Hallucinated Code | Strong | Low | Forbidden patterns and repair workflow cover this |
20
+
21
+ ## Failure Examples To Watch
22
+
23
+ - `YhDataTable`, `YhAiSuggestion`, or other invented components.
24
+ - `createYhTheme` instead of `ThemePlugin` or `useTheme`.
25
+ - `createRequestInstance` instead of `createRequest`.
26
+ - Nuxt pages manually importing many components despite `@yh-ui/nuxt`.
27
+ - Flow examples without explicit height.
28
+ - AI examples using `VITE_OPENAI_API_KEY` in client code.
29
+ - Schema forms mutating props directly or skipping typed `v-model`.
30
+
31
+ ## Optimizations Applied
32
+
33
+ - Generated `source-truth.md` and `api-cheatsheet.md` from source.
34
+ - Upgraded generation to TypeScript AST extraction for exported props/emits, typed `defineEmits`, interface slots/exposes, and `defineExpose(expose)` patterns.
35
+ - Added deep recipes for `YhTable`, `YhFormSchema`, `YhAi*`, and `Flow`.
36
+ - Added `llms.txt` and `llms-full.txt` for retrieval-oriented AI tools.
37
+ - Expanded verification so generated source truth must cover source-exported `Yh*` components.
38
+
39
+ ## Next Real Model Run
40
+
41
+ Run each prompt in `references/eval-scenarios.md` against target tools such as ChatGPT, Claude, Cursor, and Codex with this skill attached. Record:
42
+
43
+ - Whether package imports are correct.
44
+ - Whether component names exist in `source-truth.md`.
45
+ - Whether generated code passes the `codegen-rubric.md`.
46
+ - Any hallucinated props/events/slots.
47
+ - Any missing Vue best-practice behaviors.
@@ -0,0 +1,53 @@
1
+ # Agent Workflows
2
+
3
+ Use this file to route an AI coding task before writing code. Load only the workflow that matches the user request.
4
+
5
+ ## Vue Component Page
6
+
7
+ 1. Use `@yh-ui/yh-ui` for full-app setup or `@yh-ui/components` for local imports.
8
+ 2. Choose components from `component-map.md`.
9
+ 3. Apply `vue-component-practices.md` for SFC structure, typed props/emits, slots, accessibility, and performance.
10
+ 4. Use `@yh-ui/components/style.css` only for component-only examples.
11
+ 5. Use theme variables in custom CSS.
12
+ 6. Avoid inventing app state libraries unless the user asks.
13
+
14
+ ## Nuxt Page
15
+
16
+ 1. Use `@yh-ui/nuxt` in `nuxt.config.ts`.
17
+ 2. Do not import every component inside pages when Nuxt auto-import is enabled.
18
+ 3. Apply Vue SSR and hydration rules from `vue-component-practices.md`.
19
+ 4. Use `<ClientOnly>` for flow editors or browser-heavy AI rendering.
20
+ 5. Use server routes for AI provider secrets and private APIs.
21
+
22
+ ## AI Product UI
23
+
24
+ 1. Decide whether the user wants a complete chat app or composable parts.
25
+ 2. Use `YhAiChat` for a complete surface; otherwise compose `YhAiBubbleList`, `YhAiBubble`, `YhAiSender`, `YhAiSources`, `YhAiAttachments`, and `YhAiActionGroup`.
26
+ 3. Use `@yh-ui/ai-sdk/vue` for Vue chat state.
27
+ 4. Keep provider keys server-side.
28
+ 5. Show tool or reasoning progress as UI state, not hidden chain-of-thought text.
29
+
30
+ ## Request/Data Task
31
+
32
+ 1. Use `createRequest` for clients.
33
+ 2. Use `useRequest` for component request state.
34
+ 3. Use `useSSE`, `useAIStream`, GraphQL, queue, or WebSocket helpers only when the task calls for them.
35
+ 4. Put auth and cross-cutting behavior in interceptors.
36
+ 5. Keep loading, error, retry, and empty states visible in UI examples.
37
+
38
+ ## Flow/Workflow Task
39
+
40
+ 1. Use `@yh-ui/flow`.
41
+ 2. Always set an explicit canvas height.
42
+ 3. Use `Flow`, `Minimap`, `Controls`, and `FlowBackground` for ordinary canvases.
43
+ 4. Use BPMN exports for BPMN diagrams and AI workflow exports for agent/workflow diagrams.
44
+ 5. In Nuxt, wrap flow canvases in `<ClientOnly>`.
45
+
46
+ ## Review Or Repair Task
47
+
48
+ 1. Compare imports and component names against `source-truth.md`.
49
+ 2. Look for stale APIs: `createYhTheme`, `createRequestInstance`, and `@yh-ui/yh-ui/locale/zh-CN`.
50
+ 3. Check SFC, reactivity, props/emits, slot, accessibility, and SSR issues against `vue-component-practices.md`.
51
+ 4. Check whether Nuxt examples unnecessarily import components.
52
+ 5. Check whether AI examples expose provider keys in browser code.
53
+ 6. Check whether flow examples have an explicit height.
@@ -0,0 +1,82 @@
1
+ # AI Components And AI SDK
2
+
3
+ Use `@yh-ui/components` for AI UI and `@yh-ui/ai-sdk` for chat, streaming, provider adapters, tools, cache, and conversation state.
4
+
5
+ ## Core UI Components
6
+
7
+ | Component | Use case |
8
+ | ------------------- | --------------------------------------- |
9
+ | `YhAiChat` | Complete chat surface |
10
+ | `YhAiBubble` | Message bubble and streaming content |
11
+ | `YhAiSender` | User input and send/cancel interactions |
12
+ | `YhAiProvider` | AI context boundary |
13
+ | `YhAiBubbleList` | Conversation message list |
14
+ | `YhAiThoughtChain` | Reasoning or step display |
15
+ | `YhAiThinking` | Thinking state |
16
+ | `YhAiActionGroup` | Message-level actions |
17
+ | `YhAiCodeBlock` | Code answer rendering |
18
+ | `YhAiCodeEditor` | Editable code |
19
+ | `YhAiCodeRunner` | Code execution UI |
20
+ | `YhAiArtifacts` | Rich generated artifacts |
21
+ | `YhAiAttachments` | Attached files |
22
+ | `YhAiFileCard` | File message card |
23
+ | `YhAiMention` | Mention-style prompt input |
24
+ | `YhAiMermaid` | Mermaid diagram rendering |
25
+ | `YhAiSources` | Citations and references |
26
+ | `YhAiConversations` | Conversation list |
27
+ | `YhAiPrompts` | Prompt suggestions |
28
+ | `YhAiAgentCard` | Agent marketplace/profile card |
29
+ | `YhAiVoiceTrigger` | Voice input trigger |
30
+ | `YhAiEditorSender` | Editor-like sender surface |
31
+
32
+ ## Chat Hook
33
+
34
+ ```vue
35
+ <script setup lang="ts">
36
+ import { YhAiBubble, YhAiSender } from '@yh-ui/components'
37
+ import { useAIChat } from '@yh-ui/ai-sdk/vue'
38
+
39
+ const { messages, input, isLoading, sendMessage, stop } = useAIChat({
40
+ api: '/api/chat'
41
+ })
42
+ </script>
43
+
44
+ <template>
45
+ <YhAiBubble
46
+ v-for="message in messages"
47
+ :key="message.id"
48
+ :role="message.role"
49
+ :content="message.content"
50
+ streaming
51
+ />
52
+ <YhAiSender v-model="input" :loading="isLoading" @send="sendMessage" @cancel="stop" />
53
+ </template>
54
+ ```
55
+
56
+ ## Provider Adapter
57
+
58
+ ```ts
59
+ import { createProviderAdapter, getProviderPreset } from '@yh-ui/ai-sdk/vue'
60
+
61
+ const preset = getProviderPreset('deepseek')
62
+
63
+ const provider = createProviderAdapter({
64
+ ...preset,
65
+ apiKey: process.env.DEEPSEEK_API_KEY,
66
+ defaultModel: 'deepseek-chat'
67
+ })
68
+ ```
69
+
70
+ ## Security Rules
71
+
72
+ - Never expose provider keys in Vite `VITE_*` variables or browser code.
73
+ - Put provider calls in server routes and stream sanitized output to the client.
74
+ - Treat user prompts and model output as untrusted content when rendering custom HTML.
75
+
76
+ ## Modern AI Best Practices
77
+
78
+ - Compose small surfaces: bubble list, sender, sources, attachments, and actions should be separate when the user needs control.
79
+ - Use `YhAiChat` only when the user wants a complete chat component.
80
+ - Show tool or reasoning state with `YhAiThoughtChain` or `YhAiThinking`; do not fake hidden chain-of-thought text.
81
+ - Render citations with `YhAiSources` and artifacts with `YhAiArtifacts` instead of plain links when the UI needs trust and traceability.
82
+ - Use `createYHFunctionTool` for tool definitions and keep business execution server-side when it touches private data.