File contents 使用时机
在当前仓库进行组件的开发，主题开发，国际化开发，测试脚本开发时，必须遵守以下规范。
适用场景
新增 UI 组件
修改现有组件逻辑
重构组件架构
理解 Renderless 模式
重要术语
跨端模板： 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.mde2e测试和单元测试
文档开发
examples/sites/demos/pc/app/**./vue.skill.md每一个组件的 api 和 demo 的开发
1 --- 2 name: tinyvue-develop-spec 3 description: tinyvue组件库开发规范 4 --- 5 6 ## 使用时机 7 8 在当前仓库进行组件的开发，主题开发，国际化开发，测试脚本开发时，必须遵守以下规范。 9 10 ## 适用场景 11 12 - 新增 UI 组件 13 - 修改现有组件逻辑 14 - 重构组件架构 15 - 理解 Renderless 模式 16 17 ### 重要术语 18 19 1. 跨端模板： tiny vue组件库中，同一个组件可以有2种组件模板， 其中`pc.vue` 面向家用PC浏览器的场景， `mobile-first.vue`是移动优先的浏览器场景（可以兼容用户使用手机或PC浏览器）。 20 21 2. 无渲染逻辑层: tiny vue组件库遵从模板和逻辑分离的原则进行开发。模板层只负责绑定变量和函数，所有的业务逻辑（data 处理、状态计算等）都要放在无渲染逻辑层 `packages/renderless` 目录 22 23 ## 组件库的架构 24 25 | 模块名称 | 代码目录 | 参考规范 | 说明 | 26 | --------------- | ----------------------------------------------------------------------------- | -------------------------- | -------------------------------------------- | 27 | 模板层 | `packages/vue` | `./vue.skill.md` | 每个组件的模板，必须在相应的组件目录 | 28 | 无渲染逻辑层 | `packages/renderless` | `./renderless.skill.md` | 每个组件的逻辑，必须在相应的组件目录 | 29 | 样式层 | `packages/theme` | `./theme.skill.md` | 每个组件的样式，必须在相应的组件目录 | 30 | 设计规范层 | `packages/design` | `./design.skill.md` | 交互规范、默认 props、图标与 renderless 扩展 | 31 | 适配Vue2/Vue3层 | `packages/vue-common` | `./common.skill.md` | 非必要不修改适配层代码 | 32 | 图标库 | `packages/vue-icon` | `./icon.skill.md` | 图标库 | 33 | 国际化层 | `packages/vue-locale` | `./i18n-workflow.skill.md` | 组件的国际化 | 34 | 公用hooks | `packages/vue-hooks` | `./hooks.skill.md` | 跨组件可以复用的hooks函数 | 35 | 公用指令 | `packages/vue-directive` | `./directive.skill.md` | 跨组件可以复用的指令 | 36 | utils | `packages/utils` | `./utils.skill.md` | 公用函数 | 37 | 组件测试 | `examples/sites/demos/pc/app/**/*.spec.ts` 或 `packages/vue/src/**/__tests__` | `./testing-guide.skill.md` | e2e测试和单元测试 | 38 | 文档开发 | `examples/sites/demos/pc/app/**` | `./vue.skill.md` | 每一个组件的 api 和 demo 的开发 |
commit c7fe4d36fc
Frequently asked questions How do I install the Tinyvue Develop Spec skill? Run npx skillmds@latest add opentiny/tinyvue-develop-spec in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Tinyvue Develop Spec skill do? tinyvue组件库开发规范 It is listed under Coding & Dev Tools on SkillMD.
Is Tinyvue Develop Spec safe to use? This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Tinyvue Develop Spec? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Tinyvue Develop Spec free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Tinyvue Develop Spec? opentiny (@opentiny) published this skill. Their other Agent Skills are listed on their SkillMD profile.
opentiny