tinyvue-develop-spec

SkillDev tools

Gives your agent coding standards and conventions for building UI with the TinyVue component library.

Available today. Use it from your connected AI after setup.

No other account needed.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the tinyvue-develop-spec skill

About this capability

tinyvue组件库开发规范

What this skill tells your AI

The instructions your AI receives, as published by opentiny/tiny-vue in .agents/skills/SKILL.md and read by ahel’s review.

在当前仓库进行组件的开发，主题开发，国际化开发，测试脚本开发时，必须遵守以下规范。

跨端模板： tiny vue组件库中，同一个组件可以有2种组件模板，其中pc.vue 面向家用PC浏览器的场景， mobile-first.vue是移动优先的浏览器场景（可以兼容用户使用手机或PC浏览器）。
无渲染逻辑层: tiny vue组件库遵从模板和逻辑分离的原则进行开发。模板层只负责绑定变量和函数，所有的业务逻辑（data 处理、状态计算等）都要放在无渲染逻辑层 packages/renderless 目录

模块名称	代码目录	参考规范	说明
模板层	`packages/vue`	`./vue.skill.md`	每个组件的模板，必须在相应的组件目录
无渲染逻辑层	`packages/renderless`	`./renderless.skill.md`	每个组件的逻辑，必须在相应的组件目录
样式层	`packages/theme`	`./theme.skill.md`	每个组件的样式，必须在相应的组件目录
设计规范层	`packages/design`	`./design.skill.md`	交互规范、默认 props、图标与 renderless 扩展
适配Vue2/Vue3层	`packages/vue-common`	`./common.skill.md`	非必要不修改适配层代码
图标库	`packages/vue-icon`	`./icon.skill.md`	图标库
国际化层	`packages/vue-locale`	`./i18n-workflow.skill.md`	组件的国际化
公用hooks	`packages/vue-hooks`	`./hooks.skill.md`	跨组件可以复用的hooks函数
公用指令	`packages/vue-directive`	`./directive.skill.md`	跨组件可以复用的指令
utils	`packages/utils`	`./utils.skill.md`	公用函数
组件测试	`examples/sites/demos/pc/app/*/.spec.ts` 或 `packages/vue/src/**/__tests__`	`./testing-guide.skill.md`	e2e测试和单元测试
文档开发	`examples/sites/demos/pc/app/**`	`./vue.skill.md`	每一个组件的 api 和 demo 的开发

Advanced