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/xobotyi/cc-foundry/vuenpx skills add xobotyi/cc-foundry --skill vuegit clone --depth 1 https://github.com/xobotyi/cc-foundryWrote 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/xobotyi/cc-foundry/vue)<a href="https://agentmods.dev/skills/xobotyi/cc-foundry/vue"><img src="https://agentmods.dev/badge/skills/xobotyi/cc-foundry/vue.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.1 | $0.00059 | $0.03536 |
| Opus 5 | $0.00030 | $0.01768 |
| Sonnet 5 | $0.00012 | $0.00707 |
| Haiku 4.5 | $0.00006 | $0.00354 |
Grade B, and why
vue scanned grade B with 1 finding 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 6d 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.
Strips warnings and disclaimersmediumAnti-refusal
Omitting safety caveats hides risk from the user and is a common jailbreak preamble.
- Don't lecture or quote the rule — state what's wrong and how to fix it. How it starts
The opening of the file, as written. The whole thing — 356 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Vue
Composition API is the default. <script setup> is the default syntax. If you reach for Options API, you need a
reason.
Vue 3 rewards explicit, composable code. Prefer ref() over reactive(), composables over mixins, and typed props over
runtime-only validation. References contain extended examples, rationale, and edge cases for each topic.
References
- Reactivity — [
${CLAUDE_SKILL_DIR}/references/reactivity.md]: Ref unwrapping, watchers, computed edge cases - SFC — [
${CLAUDE_SKILL_DIR}/references/sfc.md]: Full compiler macros catalog, scoped styles, template refs - Components — [
${CLAUDE_SKILL_DIR}/references/components.md]: Props, emits, slots, provide/inject - Composables — [
${CLAUDE_SKILL_DIR}/references/composables.md]: Design patterns, composition, restrictions - TypeScript — [
${CLAUDE_SKILL_DIR}/references/typescript.md]: Full utility types table, generic components, event typing - Performance — [
${CLAUDE_SKILL_DIR}/references/performance.md]: Update optimization, large lists, profiling
Reactivity
Choosing a Reactive Primitive
ref()— Default choice. Works with any value type.reactive()— Grouping related state when destructure is not needed.shallowRef()— Large immutable structures, external state integration.shallowReactive()— Root-level-only reactivity on objects.computed()— Derived state. Caches until dependencies change.
ref() Is the Primary API
- Works with primitives (
string,number,boolean). - Can be destructured from composable returns without losing reactivity.
- Can be reassigned (
count.value = newValue). - Consistent
.valueaccess pattern everywhere in script. - Access
.valuein script, omit in template — templates auto-unwrap top-level refs.
reactive() Limitations
- Cannot hold primitives.
- Reassignment loses reactivity —
state = reactive({...})breaks tracking. - Destructuring primitives loses reactivity — use
toRefs()if you must destructure. - Do not use
reactive()as the primary primitive. Useref().
What ships with it
7 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.
- 6d ago First seen · 356 lines · 59 tokens per session scan B d54981182a95
vue is a skill published in the GitHub repository xobotyi/cc-foundry (20 stars, last pushed 3d ago), licensed MIT. It adds 59 tokens to every session and 3,536 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it B with 1 finding (strips warnings and disclaimers). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
shadcn-svelte
Pre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-render/shadcn-svelte, adding standard UI components to a Svelte catalog, or building Svelte web UIs with shadcn-svelte + Tailwind CSS components.
create-site
Creates a new Power Pages code site (SPA) using React, Angular, Vue, or Astro. Guides through the full process from initial concept to deployed site: requirements discovery, scaffolding, component planning, design, implementation, validation, and deployment. Use when the user wants to create, build, or scaffold a new…
v3-create-crud
创建增删改查（CRUD）页面，基于 Element Plus 组件库，包含表格、搜索、分页、新增/编辑弹窗、删除确认等功能。当用户提到以下任何场景时都应触发：创建管理页面、创建列表页、创建表格页。即使用户没有明确说 CRUD，只要意图是创建带表格和表单操作的后台页面就应该使用此 Skill。使用时需提供模块名称和字段信息。.
v3-use-composables
项目内置组合式函数使用教程，涵盖设备检测、异步下拉、全屏加载、分页、路由监听、主题切换、动态标题、水印等组合式函数。当用户提到以下任何场景时都应触发：使用组合式函数、调用 Composables、判断设备类型、异步加载下拉选项、全屏 Loading、分页逻辑、监听路由变化、切换主题、设置页面标题、添加水印。即使用户没有明确说 Composables，只要意图是使用项目内置的组合式函数就应该使用此 Skill。.
markstream-vue2-cli
Integrate markstream-vue2 into a Vue 2 Vue CLI or Webpack 4 app. Use when Codex needs Webpack 4-friendly setup, CDN worker fallbacks for Mermaid or KaTeX, dist/index.css imports, Vue 2 composition-api shims, or code block choices limited to stream-diffs or plain .
markstream-svelte
Integrate the beta markstream-svelte package in Svelte 5 or SvelteKit apps. Use when Codex needs Svelte 5 runes, CSS and optional peers, smooth streaming, worker setup, renderer-local or scoped custom components, or SSR-safe boundaries. Svelte 4 is unsupported.