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 jiushiwon/wg-skills --skill vue-theme-skillgit clone --depth 1 https://github.com/jiushiwon/wg-skillsWrote 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/jiushiwon/wg-skills/vue-theme-skill)<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/vue-theme-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/vue-theme-skill/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/jiushiwon/wg-skills/vue-theme-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/vue-theme-skill.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.00130 | $0.03653 |
| Opus 5 | $0.00065 | $0.01826 |
| Sonnet 5 | $0.00026 | $0.00731 |
| Haiku 4.5 | $0.00013 | $0.00365 |
Grade A, and why
vue-theme-skill 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 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.
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 — 373 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Vue Theme Skill（Vue 设计 Token 层）
⚠️ 边界声明（绝不可越界）
| 能力 | 状态 |
|---|---|
| 设计 Token 体系（颜色 / 尺寸 / 圆角 / 阴影） | ✅ 负责 |
| 多主题色阶（HSL 算法 50-950） | ✅ 负责 |
| CSS 变量导出 | ✅ 负责 |
| 主题切换（运行时 / 构建时） | ✅ 负责 |
| 组件库 | ❌ 不做（由 vue-base-skill 负责） |
| Dark Mode | ❌ 不做 |
| Z-Index / Motion / Transition | ❌ 不做 |
| JS Bridge / 主题持久化 | ❌ 不做（由业务层处理） |
| TypeScript 类型生成 | ❌ 不做 |
| Figma 对接 / A11y 校验 | ❌ 不做 |
⚠️ 严格依赖对齐
本 Skill 的命名体系完全对齐 uniapp-theme-skill：
| 维度 | 命名规范 |
|---|---|
| 颜色 | --color-primary-{50~950} + --color-primary |
| 间距 | --space-2 / --space-3 / --space-4 ... |
| 字体 | --font-{2xs,xs,sm,base,lg,xl,2xl,3xl} |
| 圆角 | --radius-{sm,md,lg,xl,full} |
| 高度 | --height-{button,input,card}-{sm,md,lg} |
| 图标 | --icon-{xs,sm,md,lg,xl} |
When to Use
- "vue 项目配置主题色"
- "vue 设计变量"
- "vue 多主题切换"
- "vue CSS 变量系统"
- "vue 色阶生成"
Not for：
- ❌ 组件库（→ vue-base-skill）
- ❌ 工程化骨架（→ vue-generate-skill）
- ❌ uniapp 项目（→ uniapp-theme-skill）
三大核心能力
能力 1：主题色（HSL 算法 50-950）
9 级色阶
--color-primary-50: hsl(211, 100%, 96%);
--color-primary-100: hsl(211, 100%, 92%);
--color-primary-200: hsl(211, 100%, 86%);
--color-primary-300: hsl(211, 100%, 76%);
--color-primary-400: hsl(211, 100%, 66%); /* 浅色 hover */
--color-primary-500: hsl(211, 100%, 56%); /* 主色（= --color-primary） */
--color-primary-600: hsl(211, 100%, 48%); /* 主色按下 */
--color-primary-700: hsl(211, 100%, 40%);
--color-primary-800: hsl(211, 100%, 32%);
--color-primary-950: hsl(211, 100%, 16%); /* 深色文本 */
为什么用 HSL 而不是 RGB 混合？
- ✅ 色相绝对稳定（hue 不变）
- ✅ 调整饱和度 / 亮度即可生成色阶
- ✅ 与 Tailwind / Material 等业界方案对齐
8 套预设主题
| 主题 | 主色 HSL | 命名 |
|---|---|---|
| 蓝（默认） | hsl(211, 100%, 56%) | blue |
| 绿 | hsl(152, 69%, 45%) | green |
| 紫 | hsl(262, 83%, 58%) | purple |
| 红 | hsl(0, 84%, 60%) | red |
| 橙 | hsl(33, 100%, 56%) | orange |
| 青 | hsl(180, 77%, 47%) | cyan |
| 粉 | hsl(330, 81%, 60%) | pink |
| 灰 | hsl(220, 9%, 46%) | slate |
What ships with it
6 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 Changed · +35 lines 4dfe36f59e8f
- 9d ago First seen · 338 lines · 130 tokens per session scan A 0f49ee04308b
vue-theme-skill is a skill published in the GitHub repository jiushiwon/wg-skills (100 stars, last pushed 2d ago), licensed Apache-2.0. It adds 130 tokens to every session and 3,653 once invoked, about $0.0006 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-09-03.
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
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-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.
moai-domain-uiux
UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns. Use when working on design systems, WCAG compliance, ARIA patterns, or dark mode theming.
moai-domain-frontend
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.