home / skills / opentiny / agent-skills / tiny-vue-skill

tiny-vue-skill skill

needs review

This skill helps you generate and implement TinyVue components with strict API constraints, docs, and examples for rapid, compliant development.

npx playbooks add skill opentiny/agent-skills --skill tiny-vue-skill

Review the files below or copy the command above to add this skill to your agents.

Files (3982)

SKILL.md

1.7 KB

---
name: tiny-vue-skill
description: TinyVue 组件库代码的**生成**和**实施指导**，在分析、规划或生成组件时使用。本技能提供严格的 API 约束、文档和示例的查找流程以及代码规范。
license: MIT
metadata:
  author: opentiny
  version: '3.28.1'
---

# TinyVue 组件库开发助手

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

## 使用时机

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

## 目录结构

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

## 使用方法

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

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

## 重要约束

- 严格遵循工程文档和组件 API 规范
- 严禁使用其他开源库信息猜测 TinyVue 组件用法
- 查找组件信息必须按顺序进行：组件名 → API 文档 → 示例代码

Overview

This skill generates and guides implementation of TinyVue component library code with strict API constraints, docs lookup flows, and coding norms. It helps create components, fetch matching API docs and examples, and configures project-level settings like i18n and themes. The focus is on producing compliant, production-ready Vue code that follows TinyVue conventions.

How this skill works

The skill inspects a component name, then follows a defined lookup sequence: menus → apis → demos to collect the authoritative API, props, events, slots, types, and example usages. It enforces repository rules and project settings, applies code conventions, and can generate component scaffolding, usage snippets, and configuration steps for installation, theming, and internationalization. Generation always references the canonical docs and example source to avoid guessing.

When to use it

When scaffolding a new TinyVue component or wrapper
When implementing UI consistent with TinyVue API and conventions
When you need authoritative API docs, props, events, slots, and types
When configuring project-level settings: install, i18n, themes, dark mode
When searching for example implementations or demo code to copy or adapt

Best practices

Always follow the ordered lookup: component name → API doc → example demo source
Do not infer behavior from other libraries; use only TinyVue docs and demos
Keep generated components small and typed; map props and events to explicit interfaces
Include concise usage examples and link to the exact demo source used
Run linting and formatting rules from the project-setting guide before PRs

Example use cases

Generate a reusable DatePicker wrapper using TinyVue API and provide example usage and tests
Add a theme switcher and dark-mode support configured via the project-setting docs
Translate component labels and messages using the i18n setup from webdoc
Refactor an existing form to use TinyVue inputs by mapping props and events to your app interfaces
Produce a demo file that demonstrates component composition exactly matching the library examples

FAQ

Can the skill use outside libraries as references?

No. It must rely only on TinyVue project docs, API files, and demos. Other libraries must not be used to infer TinyVue behavior.

What lookup order should I follow when researching a component?

Always follow the strict sequence: menus (component index) → apis (API documentation) → demos (example source) to ensure accuracy and compliance.