Agent Skills: TinyVue 组件库开发助手

TinyVue 组件库代码的**生成**和**实施指导**,在分析、规划或生成组件时使用。本技能提供严格的 API 约束、文档和示例的查找流程以及代码规范。

UncategorizedID: opentiny/agent-skills/tiny-vue-skill

Install this agent skill to your local

pnpm dlx add-skill https://github.com/opentiny/agent-skills/tree/HEAD/skills/tiny-vue-skill

Skill Files

Browse the full folder contents for tiny-vue-skill.

Download Skill

Loading file tree…

skills/tiny-vue-skill/SKILL.md

Skill Metadata

Name
tiny-vue-skill
Description
TinyVue 组件库代码的**生成**和**实施指导**,在分析、规划或生成组件时使用。本技能提供严格的 API 约束、文档和示例的查找流程以及代码规范。

TinyVue 组件库开发助手

本技能提供 TinyVue 组件库的完整开发资源,包括组件目录、API 文档、示例代码和工程配置指南,帮助用户快速生成符合规范的代码

使用时机

  • 使用 TinyVue 组件库开发应用
  • 配置项目主题、国际化等工程设置
  • 查询组件 API 文档和示例代码
  • 编写符合 TinyVue 最佳实践的代码

核心组件概览

  • Layout (布局): 优先使用该组件进行页面布局。通过嵌套 Row (行) 和 Col (列) 实现栅格布局。
  • Grid (表格): 用于大规模数据的展示、分页、过滤、排序及直接修改。
  • Form (表单): 用于数据录入和校验,提供丰富的表单选项。
  • Icon (图标): TinyVue 的图标使用方式与业界不同。图标均为函数(如 IconEdit()),需在组件中执行后方能渲染。

目录结构

./menus.js     - 所有组件的名称索引
./webdoc/      - 工程配置文档(安装、引入、i18n、主题等)
./apis/        - 组件 API 文档(属性、事件、插槽、类型)
./demos/       - 组件示例代码源码
./rules/       - 查找和使用规范

使用方法

根据任务类型,查阅对应的规则文档并严格遵循规范:

| 规则文档 | 适用场景 | | ------------------------------------------- | -------------------------------------------------- | | project-setting | 安装 TinyVue、引入组件、配置国际化、主题、深色模式 | | component-use | 查找组件 API 文档和示例代码源码 |

重要约束

  • 严格遵循工程文档和组件 API 规范
  • 严禁使用其他开源库信息猜测 TinyVue 组件用法
  • 查找组件信息必须按顺序进行:组件名 → API 文档 → 示例代码
TinyVue 组件库开发助手 Skill | Agent Skills