Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/jiushiwon/wg-skillsnpx agentmods add skills/jiushiwon/wg-skills/vue-card-skillWrote 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-card-skill)<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/vue-card-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/vue-card-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-card-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/vue-card-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.00170 | $0.03496 |
| Opus 5 | $0.00085 | $0.01748 |
| Sonnet 5 | $0.00034 | $0.00699 |
| Haiku 4.5 | $0.00017 | $0.00350 |
Grade A, and why
vue-card-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 — 242 lines — stays where its author put it; the contents beside it link to each section on GitHub.
vue-card-skill
基于「一切皆容器」思想的 Vue 卡片组件技能。双层架构：
base-card（L0 根容器）+base-wg-card（L1 业务卡片），二者严格分层、互不替代。本技能严格镜像 uniapp-card-skill，命名 100% 对齐。
零样式标签铁律：实现代码仅使用
<div>/<span>+ CSS3，禁止<p><h1~h6><header><footer><section><article><aside><nav><main><button><table><input><select><form><label><fieldset><option><img><strong><em>等带默认样式的标签。图片用<div>+background-image实现，图标用<div>+ CSS mask data URI。
核心组件
| 组件 | 层级 | 角色 | 文档 |
|---|---|---|---|
| base-card | L0 | 根容器（6 维度参数矩阵） | ../../base-card.md |
| base-wg-card | L1 | 业务卡片组件（11 种 variant） | base-wg-card.md |
职责划分：
base-card：定义容器的"形"（圆角 / 内边距 / 阴影 / 边框 / 色调 / 加载态），不关心容器内放什么base-wg-card：定义卡片的"意"（基础 / 商品 / 个人中心 / 好友 / 设置 / VIP / 九宫格 / 功能网格 / 图片流 / 通知 / 评论），必须内部包裹 base-card
11 种业务卡片 variant
| # | variant | 风格 | 触发词 |
|---|---|---|---|
| 1 | basic |
标题 + 描述 + 操作 | "做一个基础卡片" |
| 2 | product |
封面 + 名称 + 价格 + 操作 | "做一个商品卡片" |
| 3 | profile |
封面 + 头像 + 昵称 + 统计 | "做一个个人中心卡片" |
| 4 | friend |
头像 + 昵称 + 签名 + 箭头 | "做一个好友卡片" |
| 5 | set |
图标 + 标签 + 开关/箭头（列表） | "做一个设置卡片" |
| 6 | vip |
渐变 + 头像 + 等级 + 权益 | "做一个 VIP 卡片" |
| 7 | menu |
九宫格图标 + 标签 | "做一个九宫格菜单" |
| 8 | grid |
N 列功能网格 | "做一个功能网格卡片" |
| 9 | image |
大图 + 标题 + 描述 + 底部 | "做一个图片卡片" |
| 10 | notify |
图标 + 标题 + 描述 + 时间 + 徽标 | "做一个通知卡片" |
| 11 | comment |
头像 + 昵称 + 时间 + 内容 + 点赞（支持嵌套回复） | "做一个评论卡片" |
命名对齐矩阵（与 uniapp-card-skill 完全对齐）
vue-card-skill ← uniapp-card-skill
base-card ← base-card
base-wg-card ← base-wg-card
variant=basic ← variant=basic
variant=product ← variant=product
variant=profile ← variant=profile
variant=friend ← variant=friend
variant=set ← variant=set
variant=vip ← variant=vip
variant=menu ← variant=menu
variant=grid ← variant=grid
variant=image ← variant=image
variant=notify ← variant=notify
variant=comment ← variant=comment
What ships with it
9 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.
- base-wg-card.md 26 KB
- demo-components/base-card/html/00-showcase.html 19 KB
- demo-components/base-card/html/01-base-card.html 19 KB
- demo-components/base-card/html/02-layout-cards.html 30 KB
- demo-components/base-card/html/03-flow-cards.html 30 KB
- demo-components/shared/demo.css 21 KB
- demo-components/shared/icons.css 22 KB
- demo-components/shared/tokens.css 1.8 KB
- README.md 1.8 KB
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 · +151 lines · +117 tokens per session c9b4dab2b111
- 9d ago First seen · 91 lines · 53 tokens per session scan A 509521dfd7e3
vue-card-skill is a skill published in the GitHub repository jiushiwon/wg-skills (100 stars, last pushed 2d ago), licensed Apache-2.0. It adds 170 tokens to every session and 3,496 once invoked, about $0.0009 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-vue
Manages shadcn-vue components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-vue, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for…
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.
figma-codegen
Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a…
component-template-generator
Generates starter component code using design tokens. Creates React/Vue/Svelte components with proper token usage, variants, and accessibility built in.
native-app-designer
Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic. Expert in SwiftUI, React animations, physics-based motion, and human-crafted design. Use for iOS/Mac app UI, React/Vue animations, native-feel web apps, physics-based motion design. Activate on "SwiftUI", "iOS app", "native app", "React…