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 skills add weapp-vite/weapp-vite --skill weapp-vite-vue-sfc-best-practicesgit clone --depth 1 https://github.com/weapp-vite/weapp-viteWrote 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/weapp-vite/weapp-vite/weapp-vite-vue-sfc-best-practices)<a href="https://agentmods.dev/skills/weapp-vite/weapp-vite/weapp-vite-vue-sfc-best-practices"><img src="https://agentmods.dev/badge/skills/weapp-vite/weapp-vite/weapp-vite-vue-sfc-best-practices/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/weapp-vite/weapp-vite/weapp-vite-vue-sfc-best-practices"><img src="https://agentmods.dev/badge/skills/weapp-vite/weapp-vite/weapp-vite-vue-sfc-best-practices.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.1 | $0.00107 | $0.01954 |
| Opus 5 | $0.00053 | $0.00977 |
| Sonnet 5 | $0.00021 | $0.00391 |
| Haiku 4.5 | $0.00011 | $0.00195 |
Grade A, and why
weapp-vite-vue-sfc-best-practices 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 12d 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.
Copies of this mod
1 near-identical copy found in the catalogue:
- weapp-vite-vue-sfc-best-practices — 100% identical, 0 lines differ
How it starts
The opening of the file, as written. The whole thing — 100 lines — stays where its author put it; the contents beside it link to each section on GitHub.
weapp-vite-vue-sfc-best-practices
用途
在小程序项目里用 Vue SFC 写出“编译可预测、运行时可验证、类型可跟上”的页面和组件。
何时使用
- 用户问
.vue文件应该怎么写。 - 用户问 JSON 宏和
<json>怎么选。 - 用户问
definePageMeta/ layout 怎么配。 - 用户遇到模板兼容或编译错误。
- 用户遇到
.weapp-vite类型输出、组件声明或 route type 漂移。 - 用户要在微信小程序与 Web 中使用 Wot UI、uview-plus 等 uni-app Vue SFC 组件库。
- 用户要使用纯模板
.vue、<script lang="jsx">/<script setup lang="tsx">，或处理多平台 SFC 编译差异。
不适用场景
本 skill 聚焦 SFC 编写和编译期兼容。
- 项目级构建配置：使用
weapp-vite-best-practices。 wevu生命周期和 store：使用wevu-best-practices。- 迁移规划：使用
native-to-weapp-vite-wevu-migration。 - 项目启用
weapp.react后的 React JSX/TSX：使用weapp-vite-react-best-practices。
核心流程
- 先判定问题阶段：
- 编译期：宏、模板、
usingComponents - 运行期：事件、hooks、响应式
- 工具层：Volar、
.weapp-vite、typed outputs
- 编译期：宏、模板、
- 默认使用
<script setup lang="ts">。- 纯模板 SFC 允许没有 script block；
wv prepare必须按 SFC 模板扫描，不能把模板文本误交给 JSX parser。 - Wevu JSX/TSX 与 SFC 内 JSX/TSX 归 Wevu compiler；项目级
weapp.react启用后，独立.jsx/.tsx归 React owner。
- 纯模板 SFC 允许没有 script block；
- JSON 优先走宏：
defineAppJson、definePageJson、defineComponentJson；页面元信息走definePageMeta。 - 套用模板兼容规则：
v-model只能作用于可赋值左值- 不要假设 Web Vue 的所有模板特性都可用
usingComponents走 JSON 宏 / 自动导入，不走 Web Vue 注册思路- 第三方小程序 UI 库（如 TDesign Mini Program、Vant Weapp）文档中的
TNode、slot、自定义内容通常是小程序原生 slot 或属性渲染，不要默认按 Vue scoped slot 处理 - 第三方 uni-app Vue SFC 组件库与原生小程序 UI 库不是同一路径：前者需要 resolver 返回
sourceType: 'wevu-sfc'/ 真实resolvedId，并通过weapp.uniApp.include显式允许依赖转换 - 只有存在明确 slot props（如
<template #item="{ item }">）或显式增强作用域插槽场景时，才应生成generic:scoped-slots-* - 转发
<slot />到子组件具名插槽时不要生成或建议<block slot="..."><slot /></block>；真实 DevTools 运行时会丢失转发内容。微信平台默认使用内部virtualHostwrapper，需要回到旧版真实节点行为时配置weapp.vue.template.slotFallbackWrapperStrategy: 'view'，需要自定义时优先用组件内静态属性slot-wrapper="cover-view"、slot-wrapper-footer="view"、slot-wrapper-class="..."、slot-wrapper-footer-class="..."或项目配置weapp.vue.template.slotFallbackWrapper；全局规则里component匹配模板标签名，componentName匹配子组件静态defineOptions({ name }) - 自定义 slot wrapper 必须能承载实际子内容；例如
text不适合包裹<view>，block会被编译器回退为view - Vue/Wevu 组件标签输出保持 kebab-case；可选链与空值合并必须转换成目标小程序模板可执行的表达式
- 启用
weapp.i18n时，从weapp-vite/i18n导入构建实例i18n，并用defineOptions({ behaviors: [i18n.behavior] })显式接入；逻辑层通过i18n.global访问翻译和 locale，模板可直接调用配置的t(...) - i18n 只放行配置函数的直接模板调用；
t(resolveKey())或其他嵌套调用仍回退逻辑线程，不要依赖任意函数在 WXML 中执行 - 微信目标支持 scoped CSS、默认/命名 CSS Modules、同步 setup 中的
useCssModule()与 CSSv-bind()；CSS vars 会合并到每个模板根节点已有 style :deep()/:global()/:slotted()只使用可映射到小程序选择器的形式；其他平台在对应 IDE/真机验证前按实验性处理
- 若
typed-router.d.ts、typed-components.d.ts、components.d.ts漂移，先跑wv prepare。 - 若项目有根
AGENTS.md或本地dist/docs/vue-sfc.md，SFC 写法要与其约束一致。 - 多平台 SFC 每次只验证一个
-p <platform>目标；Web runtime 用于浏览器兼容联调，不替代目标小程序 IDE/真机。
What ships with it
5 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.
- 12d ago First seen · 100 lines · 107 tokens per session scan A 1432ad197c84
weapp-vite-vue-sfc-best-practices is a skill published in the GitHub repository weapp-vite/weapp-vite (475 stars, last pushed yesterday), licensed MIT. It adds 107 tokens to every session and 1,954 once invoked, about $0.0005 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
slidev
Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.
web-development
Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.
v3-create-crud
A page generator for standard create, read, update, and delete screens, commonly called CRUD screens. It uses Element Plus, a Vue user-interface library, to build tables, searches, pagination, forms, and delete confirmations.
v3-upsert-store
A workflow for creating or updating Pinia stores, which are shared state modules in Vue applications. It requires the store name, state fields, types, initial values, persistence choices, and actions.
v3-use-composables
Documentation for reusable Vue functions in a project, covering device detection, asynchronous dropdown data, loading screens, pagination, routing, themes, page titles, and watermarks.
weapp-tailwindcss-custom-build
A programming integration for adding Tailwind CSS support to a custom build tool or advanced build pipeline for WeChat Mini Programs. It connects CSS conversion with tools such as Vite, Webpack, Rspack, Rollup, Rolldown, and Gulp, including file watching and hot updates.