tiny-vue-skill

Name: tiny-vue-skill
Author: opentiny

180installs2forks

How to install tiny-vue-skill?

opentiny/agent-skills/tiny-vue-skill

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

Installs into the current project.

Summary

当使用 TinyVue 组件库(@opentiny/vue)进行开发时或者配置 TinyVue 工程的国际化，主题配置，表单校验说明，自动导入组件等，一定要阅读本技能。本技能提供严格的 API 文档和示例，以及如何查找流程以及代码规范。

Files · 1

View on GitHub

SKILL.md

1	# TinyVue 组件库开发助手
2
3	本技能提供 TinyVue 组件库的完整开发资源，包括组件目录、API 文档、示例代码和工程配置指南，帮助用户快速生成符合规范的代码。
4
5	- 组件库对应的依赖包为`@opentiny/vue`
6	- 图标库对应的依赖包为`@opentiny/vue-icon`
7	- 组件库的样式依赖包为 `@opentiny/vue-theme`
8	- 组件库的公共逻辑包为 `@opentiny/vue-renderless`
9	- 组件库的公共函数包为 `@opentiny/utils`
10	- 组件库的公共 hook 包为 `@opentiny/vue-hooks`
11	- 组件库的公共指令包为 `@opentiny/vue-directive`
12	- 组件库的国际化包为： `@opentiny/vue-locale`
13
14	## 使用时机
15
16	- 使用 TinyVue 组件库开发应用
17	- 配置项目主题、国际化等工程设置
18	- 查询组件 API 文档和示例代码
19	- 编写符合 TinyVue 最佳实践的代码
20
21	## 核心组件概览
22
23	- Layout (布局): 优先使用该组件进行页面布局。通过嵌套 `Row` (行) 和 `Col` (列) 实现栅格布局。
24	- Grid (表格): 用于大规模数据的展示、分页、过滤、排序及直接修改。
25	- Form (表单): 用于数据录入和校验，提供丰富的表单选项, `Form` 和 `FormItem`要配合使用。
26	- Input (输入框): 用于单行或多行的文本输入。
27	- Icon (图标): TinyVue 的图标使用方式与业界不同。图标均为函数（如 `IconEdit()`），需在组件中执行后方能渲染。
28
29	## 目录结构
30
31	```
32	./menu.md - 所有组件的名称索引和指令名称索引
33	./webdoc/ - 工程配置文档（安装、引入、i18n、主题等）
34	./apis/ - 组件 API 文档（属性、事件、插槽、类型）
35	./demos/ - 组件示例代码源码
36	./rules/ - 查找和使用规范
37	```
38
39	## 使用方法
40
41	根据任务类型，查阅对应的规则文档并严格遵循规范：
42
43	\| 规则文档 \| 适用场景 \|
44	\| ------------------------------------------- \| -------------------------------------------------- \|
45	\| [project-setting](rules/project-setting.md) \| 安装 TinyVue、引入组件、配置国际化、主题、深色模式 \|
46	\| [component-use](rules/component-use.md) \| 查找组件 API 文档和示例代码源码，查找指令的示例代码 \|
47
48	## 重要约束
49
50	- 严格遵循工程文档和组件 API 规范
51	- 严禁使用其他开源库信息猜测 TinyVue 组件用法
52	- 查找组件信息必须按顺序进行：组件名 → API 文档 → 示例代码
53	- 在 Vue 的模板中引用组件时，组件名前缀使用 `tiny-`，比如 `<tiny-button> </tiny-button>`
54	- 不要使用业务组件

People who liked this also viewed

6 picks

Type

tiny-vue-skill

180installs2forks

View on GitHub

How to install tiny-vue-skill?

opentiny/agent-skills/tiny-vue-skill

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# TinyVue 组件库开发助手
2
3	本技能提供 TinyVue 组件库的完整开发资源，包括组件目录、API 文档、示例代码和工程配置指南，帮助用户快速生成符合规范的代码。
4
5	- 组件库对应的依赖包为`@opentiny/vue`
6	- 图标库对应的依赖包为`@opentiny/vue-icon`
7	- 组件库的样式依赖包为 `@opentiny/vue-theme`
8	- 组件库的公共逻辑包为 `@opentiny/vue-renderless`
9	- 组件库的公共函数包为 `@opentiny/utils`
10	- 组件库的公共 hook 包为 `@opentiny/vue-hooks`
11	- 组件库的公共指令包为 `@opentiny/vue-directive`
12	- 组件库的国际化包为： `@opentiny/vue-locale`
13
14	## 使用时机
15
16	- 使用 TinyVue 组件库开发应用
17	- 配置项目主题、国际化等工程设置
18	- 查询组件 API 文档和示例代码
19	- 编写符合 TinyVue 最佳实践的代码
20
21	## 核心组件概览
22
23	- Layout (布局): 优先使用该组件进行页面布局。通过嵌套 `Row` (行) 和 `Col` (列) 实现栅格布局。
24	- Grid (表格): 用于大规模数据的展示、分页、过滤、排序及直接修改。
25	- Form (表单): 用于数据录入和校验，提供丰富的表单选项, `Form` 和 `FormItem`要配合使用。
26	- Input (输入框): 用于单行或多行的文本输入。
27	- Icon (图标): TinyVue 的图标使用方式与业界不同。图标均为函数（如 `IconEdit()`），需在组件中执行后方能渲染。
28
29	## 目录结构
30
31	```
32	./menu.md - 所有组件的名称索引和指令名称索引
33	./webdoc/ - 工程配置文档（安装、引入、i18n、主题等）
34	./apis/ - 组件 API 文档（属性、事件、插槽、类型）
35	./demos/ - 组件示例代码源码
36	./rules/ - 查找和使用规范
37	```
38
39	## 使用方法
40
41	根据任务类型，查阅对应的规则文档并严格遵循规范：
42
43	\| 规则文档 \| 适用场景 \|
44	\| ------------------------------------------- \| -------------------------------------------------- \|
45	\| [project-setting](rules/project-setting.md) \| 安装 TinyVue、引入组件、配置国际化、主题、深色模式 \|
46	\| [component-use](rules/component-use.md) \| 查找组件 API 文档和示例代码源码，查找指令的示例代码 \|
47
48	## 重要约束
49
50	- 严格遵循工程文档和组件 API 规范
51	- 严禁使用其他开源库信息猜测 TinyVue 组件用法
52	- 查找组件信息必须按顺序进行：组件名 → API 文档 → 示例代码
53	- 在 Vue 的模板中引用组件时，组件名前缀使用 `tiny-`，比如 `<tiny-button> </tiny-button>`
54	- 不要使用业务组件

People who liked this also viewed

6 picks

Type