tiny-vue-skill

TinyVue Component Library Development Assistant

This skill provides complete development resources for the TinyVue component library, including component catalog, API documentation, example code, and project configuration guides, helping usersquickly generate code that conforms to standards。

• The dependency package corresponding to the component library is@opentiny/vue
• The dependency package corresponding to the icon library is@opentiny/vue-icon
• The style dependency package of the component library is @opentiny/vue-theme
• The common logic package of the component library is @opentiny/vue-renderless
• The common function package of the component library is @opentiny/utils
• The common hook package of the component library is @opentiny/vue-hooks
• The common directive package of the component library is @opentiny/vue-directive
• The internationalization package of the component library is: @opentiny/vue-locale

When to Use

• Developing applications with the TinyVue component library
• Configuring project settings such as themes and internationalization
• Looking up component API documentation and example code
• Writing code that conforms to TinyVue best practices

Core Component Overview

• Layout: Prefer using this component for page layout. Achieve grid layout by nesting Row (row) and Col (column).
• Grid: Used for displaying, paginating, filtering, sorting, and directly modifying large-scale data.
• Form: Used for data entry and validation, providing rich form options, Form and FormItemmust be used together.
• Input: Used for single-line or multi-line text input.
• Icon: TinyVue's icon usage differs from industry practice. The icons are allfunctions(such as IconEdit()), and must be executed in the component before they can be rendered.

Directory Structure

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

Usage

According to the task type, consult the corresponding rule documents and strictly follow the standards:

Rule Document	Applicable Scenarios
project-setting	Installing TinyVue, importing components, configuring internationalization, themes, dark mode
component-use	Looking up component API documentation and example code source code, looking up directive example code

Important Constraints

• Strictly follow project documentation and component API specifications
• It is strictly prohibited to guess TinyVue component usage based on information from other open-source libraries
• Looking up component information must be done in order: component name → API documentation → example code
• When referencing components in Vue templates, the component name prefix uses tiny-, for example <tiny-button> </tiny-button>
• Do not use business components