Tiny Vue Skill

This is a development assistant for TinyVue, an open source Vue component library from OpenTiny. It helps you write code that follows TinyVue's specific conventions, which differ from other Vue libraries in some notable ways. Icons are functions that need to be executed before rendering, not just imported components. Template references use the tiny- prefix. The skill includes the full API docs, demo source code, and configuration guides for internationalization and theming. Use it when you're building apps with @opentiny/vue and need to look up component properties, events, or examples without switching to browser documentation. It enforces strict usage patterns and won't let you guess based on other Vue libraries.

skills.sh installs: 221
GitHub stars: 19
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add opentiny/agent-skills --skill tiny-vue-skill --agent claude-code

Installs into .claude/skills of the current project.

Files

TinyVue 组件库开发助手

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

组件库对应的依赖包为@opentiny/vue
图标库对应的依赖包为@opentiny/vue-icon
组件库的样式依赖包为 @opentiny/vue-theme
组件库的公共逻辑包为 @opentiny/vue-renderless
组件库的公共函数包为 @opentiny/utils
组件库的公共 hook 包为 @opentiny/vue-hooks
组件库的公共指令包为 @opentiny/vue-directive
组件库的国际化包为： @opentiny/vue-locale

使用时机

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

核心组件概览

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

目录结构

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