TinyVue is a UI component library for building web interfaces with Vue.js 2 or Vue.js 3 on desktop and mobile. It is intended for developers creating applications with reusable interface components, and its catalogue add-ons help coding agents understand and use TinyVue.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/opentiny/tiny-vue/skillsnpx skills add opentiny/tiny-vue --skill skillsgit clone --depth 1 https://github.com/opentiny/tiny-vueWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/opentiny/tiny-vue/skills)<a href="https://agentmods.dev/skills/opentiny/tiny-vue/skills"><img src="https://agentmods.dev/badge/skills/opentiny/tiny-vue/skills.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00012 | $0.00689 |
| Opus 5 | $0.00006 | $0.00345 |
| Sonnet 5 | $0.00002 | $0.00138 |
| Haiku 4.5 | $0.00001 | $0.00069 |
Grade A, and why
tinyvue-develop-spec scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 39 lines — stays where its author put it; the contents beside it link to each section on GitHub.
使用时机
在当前仓库进行组件的开发,主题开发,国际化开发,测试脚本开发时,必须遵守以下规范。
适用场景
- 新增 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.md |
e2e测试和单元测试 |
| 文档开发 | examples/sites/demos/pc/app/** |
./vue.skill.md |
每一个组件的 api 和 demo 的开发 |
What ships with it
11 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 39 lines · 12 tokens per session scan A 6c85368cdd8b
tinyvue-develop-spec is a skill published in the GitHub repository opentiny/tiny-vue (2,275 stars, last pushed 3d ago), licensed MIT. It adds 12 tokens to every session and 689 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
admin-net-frontend
Use when building Vue 3 admin dashboard frontends with dynamic routing, permission-based menus, and CRUD page generation. Admin.NET Frontend: Vue 3 + Vite + TypeScript admin UI for Admin.NET backend.
kline-blur-regression
Use this skill when users report K-line/canvas blur after opening DevTools, resizing viewport, or under non-integer DPR. Focus on commit-bounded regression analysis and minimal, reversible rendering fixes.
commit-message-generator
生成遵循 Conventional Commits 规范的提交信息.
vue
Vue 3 - Progressive JavaScript framework with Composition API, reactivity system, single-file components, Vite integration, TypeScript support.
codereview
Use when reviewing code for code smells and architecture problems, especially state consistency, layer boundaries, model contracts, and change propagation.
update-version
升级组件库发布包版本.