{"id":"d35c2230-1c9c-460e-97f5-1cff3544cc3f","shortId":"FUkKuB","kind":"skill","title":"tiny-vue-skill","tagline":"当使用 TinyVue 组件库(@opentiny/vue)进行开发时或者配置 TinyVue 工程的国际化，主题配置，表单校验说明，自动导入组件等，一定要阅读本技能。本技能提供严格的 API 文档和示例，以及如何查找流程以及代码规范。","description":"# TinyVue 组件库开发助手\n\n本技能提供 TinyVue 组件库的完整开发资源，包括组件目录、API 文档、示例代码和工程配置指南，帮助用户**快速生成符合规范的代码**。\n\n- 组件库对应的依赖包为`@opentiny/vue`\n- 图标库对应的依赖包为`@opentiny/vue-icon`\n- 组件库的样式依赖包为 `@opentiny/vue-theme`\n- 组件库的公共逻辑包为 `@opentiny/vue-renderless`\n- 组件库的公共函数包为 `@opentiny/utils`\n- 组件库的公共 hook 包为 `@opentiny/vue-hooks`\n- 组件库的公共指令包为 `@opentiny/vue-directive`\n- 组件库的国际化包为： `@opentiny/vue-locale`\n\n## 使用时机\n\n- 使用 TinyVue 组件库开发应用\n- 配置项目主题、国际化等工程设置\n- 查询组件 API 文档和示例代码\n- 编写符合 TinyVue 最佳实践的代码\n\n## 核心组件概览\n\n- **Layout (布局)**: 优先使用该组件进行页面布局。通过嵌套 `Row` (行) 和 `Col` (列) 实现栅格布局。\n- **Grid (表格)**: 用于大规模数据的展示、分页、过滤、排序及直接修改。\n- **Form (表单)**: 用于数据录入和校验，提供丰富的表单选项, `Form` 和 `FormItem`要配合使用。\n- **Input (输入框)**: 用于单行或多行的文本输入。\n- **Icon (图标)**: TinyVue 的图标使用方式与业界不同。图标均为**函数**（如 `IconEdit()`），需在组件中执行后方能渲染。\n\n## 目录结构\n\n```\n./menus.js     - 所有组件的名称索引\n./webdoc/      - 工程配置文档（安装、引入、i18n、主题等）\n./apis/        - 组件 API 文档（属性、事件、插槽、类型）\n./demos/       - 组件示例代码源码\n./rules/       - 查找和使用规范\n```\n\n## 使用方法\n\n根据任务类型，查阅对应的规则文档并严格遵循规范：\n\n| 规则文档                                    | 适用场景                                           |\n| ------------------------------------------- | -------------------------------------------------- |\n| [project-setting](rules/project-setting.md) | 安装 TinyVue、引入组件、配置国际化、主题、深色模式 |\n| [component-use](rules/component-use.md)     | 查找组件 API 文档和示例代码源码                    |\n\n## 重要约束\n\n- 严格遵循工程文档和组件 API 规范\n- 严禁使用其他开源库信息猜测 TinyVue 组件用法\n- 查找组件信息必须按顺序进行：组件名 → API 文档 → 示例代码\n- 在 Vue 的模板中引用组件时，组件名前缀使用 `tiny-`， 比如 `<tiny-button> </tiny-button>`\n- 不要使用业务组件","tags":["tiny","vue","skill","agent","skills","opentiny","agent-skills","ai-agents","tiny-charts","tiny-robot","tiny-vue"],"capabilities":["skill","source-opentiny","skill-tiny-vue-skill","topic-agent-skills","topic-ai-agents","topic-opentiny","topic-tiny-charts","topic-tiny-robot","topic-tiny-vue"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/opentiny/agent-skills/tiny-vue-skill","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add opentiny/agent-skills","source_repo":"https://github.com/opentiny/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.457","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 14 github stars · SKILL.md body (1,512 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T01:02:23.388Z","embedding":null,"createdAt":"2026-04-19T00:40:42.496Z","updatedAt":"2026-04-22T01:02:23.388Z","lastSeenAt":"2026-04-22T01:02:23.388Z","tsv":"'/apis':107 '/demos':115 '/menus.js':99 '/rules':117 '/webdoc':101 'api':17,26,56,109,139,143,150 'col':69 'compon':135 'component-us':134 'form':78,82 'formitem':84 'grid':72 'hook':42 'i18n':105 'icon':89 'iconedit':96 'input':86 'layout':62 'opentiny/utils':40 'opentiny/vue':8,32 'opentiny/vue-directive':46 'opentiny/vue-hooks':44 'opentiny/vue-icon':34 'opentiny/vue-locale':48 'opentiny/vue-renderless':38 'opentiny/vue-theme':36 'project':125 'project-set':124 'row':66 'rules/component-use.md':137 'rules/project-setting.md':127 'set':126 'skill':4 'skill-tiny-vue-skill' 'source-opentiny' 'tini':2,157 'tiny-vue-skil':1 'tinyvu':6,10,20,23,51,59,91,129,146 'topic-agent-skills' 'topic-ai-agents' 'topic-opentiny' 'topic-tiny-charts' 'topic-tiny-robot' 'topic-tiny-vue' 'use':136 'vue':3,154 '一定要阅读本技能':15 '不要使用业务组件':159 '严格遵循工程文档和组件':142 '严禁使用其他开源库信息猜测':145 '主题':132 '主题等':106 '主题配置':12 '事件':112 '以及如何查找流程以及代码规范':19 '优先使用该组件进行页面布局':64 '使用':50 '使用方法':119 '使用时机':49 '函数':94 '分页':75 '列':70 '包为':43 '包括组件目录':25 '和':68,83 '国际化等工程设置':54 '图标':90 '图标均为':93 '图标库对应的依赖包为':33 '在':153 '如':95 '安装':103,128 '实现栅格布局':71 '属性':111 '工程的国际化':11 '工程配置文档':102 '布局':63 '帮助用户':29 '引入':104 '引入组件':130 '当使用':5 '快速生成符合规范的代码':30 '所有组件的名称索引':100 '排序及直接修改':77 '提供丰富的表单选项':81 '插槽':113 '文档':27,110,151 '文档和示例':18 '文档和示例代码':57 '文档和示例代码源码':140 '最佳实践的代码':60 '本技能提供':22 '本技能提供严格的':16 '查找和使用规范':118 '查找组件':138 '查找组件信息必须按顺序进行':148 '查询组件':55 '查阅对应的规则文档并严格遵循规范':121 '核心组件概览':61 '根据任务类型':120 '比如':158 '深色模式':133 '用于单行或多行的文本输入':88 '用于大规模数据的展示':74 '用于数据录入和校验':80 '的图标使用方式与业界不同':92 '的模板中引用组件时':155 '目录结构':98 '示例代码':152 '示例代码和工程配置指南':28 '类型':114 '组件':108 '组件名':149 '组件名前缀使用':156 '组件库':7 '组件库对应的依赖包为':31 '组件库开发助手':21 '组件库开发应用':52 '组件库的公共':41 '组件库的公共函数包为':39 '组件库的公共指令包为':45 '组件库的公共逻辑包为':37 '组件库的国际化包为':47 '组件库的完整开发资源':24 '组件库的样式依赖包为':35 '组件用法':147 '组件示例代码源码':116 '编写符合':58 '自动导入组件等':14 '行':67 '表单':79 '表单校验说明':13 '表格':73 '要配合使用':85 '规则文档':122 '规范':144 '输入框':87 '过滤':76 '进行开发时或者配置':9 '适用场景':123 '通过嵌套':65 '配置国际化':131 '配置项目主题':53 '重要约束':141 '需在组件中执行后方能渲染':97","prices":[{"id":"4564d531-47e5-458b-bc28-0761ea893ac0","listingId":"d35c2230-1c9c-460e-97f5-1cff3544cc3f","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"opentiny","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-04-19T00:40:42.496Z"}],"sources":[{"listingId":"d35c2230-1c9c-460e-97f5-1cff3544cc3f","source":"github","sourceId":"opentiny/agent-skills/tiny-vue-skill","sourceUrl":"https://github.com/opentiny/agent-skills/tree/main/skills/tiny-vue-skill","isPrimary":false,"firstSeenAt":"2026-04-19T00:40:42.496Z","lastSeenAt":"2026-04-22T01:02:23.388Z"}],"details":{"listingId":"d35c2230-1c9c-460e-97f5-1cff3544cc3f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"opentiny","slug":"tiny-vue-skill","github":{"repo":"opentiny/agent-skills","stars":14,"topics":["agent-skills","ai","ai-agents","opentiny","tiny-charts","tiny-robot","tiny-vue"],"license":null,"html_url":"https://github.com/opentiny/agent-skills","pushed_at":"2026-04-18T01:30:26Z","description":"OpenTiny Agent Skills","skill_md_sha":"c4aa5e8385f77aba883b1e4e6a988f78c22f5ef6","skill_md_path":"skills/tiny-vue-skill/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/opentiny/agent-skills/tree/main/skills/tiny-vue-skill"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"tiny-vue-skill","license":"MIT","description":"当使用 TinyVue 组件库(@opentiny/vue)进行开发时或者配置 TinyVue 工程的国际化，主题配置，表单校验说明，自动导入组件等，一定要阅读本技能。本技能提供严格的 API 文档和示例，以及如何查找流程以及代码规范。"},"skills_sh_url":"https://skills.sh/opentiny/agent-skills/tiny-vue-skill"},"updatedAt":"2026-04-22T01:02:23.388Z"}}