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-dropdown-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-dropdown-skill)<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/vue-dropdown-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/vue-dropdown-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-dropdown-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/vue-dropdown-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.00229 | $0.03464 |
| Opus 5 | $0.00114 | $0.01732 |
| Sonnet 5 | $0.00046 | $0.00693 |
| Haiku 4.5 | $0.00023 | $0.00346 |
Grade A, and why
vue-dropdown-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 — 238 lines — stays where its author put it; the contents beside it link to each section on GitHub.
vue-dropdown-skill
基于「一个组件 5 种 mode」思想的 Vue 万能浮层组件技能。base-dropdown 是核心，融合 5 种浮层形态（dropdown / popover / select / multi-select / menu），单组件 + mode 切换。
本技能严格镜像 uniapp-dropdown-skill，命名 100% 对齐。
容器铁律：所有 panel 必须由 base-card 容器承载。
零样式标签铁律：模板内仅使用
<div>/<span>，禁止<p><h1~h6><header><footer><section><article><aside><nav><main><button><table><input><select><form><label><fieldset><option><img><strong><em><ul><ol><li><a>等带默认样式的标签。图标用<div>+ CSS mask data URI。
核心组件
| 组件 | 层级 | 角色 | 文档 |
|---|---|---|---|
| base-card | L0 | 根容器（panel 内部必包） | ../base-card.md |
| base-dropdown | L1 | 万能浮层（5 mode × 12 position × 5 trigger = 300+ 组合） | base-dropdown.md |
5 种 mode 速查
| # | mode | 替代 | 关键能力 |
|---|---|---|---|
| 1 | dropdown |
操作下拉 / 筛选菜单 | click trigger · 菜单项分组 / 分隔线 / danger |
| 2 | popover |
tooltip / 详情预览 | hover/focus trigger · 12 位置 · 箭头 · 富内容 |
| 3 | select |
原生 <select> |
click trigger · v-model · 搜索 / 清空 / 远程 / 虚拟滚动 |
| 4 | multi-select |
多选 <select> |
click trigger · v-model array · tag pill · max 限制 |
| 5 | menu |
contextmenu | 右键 trigger · 鼠标定位 · 快捷键后缀 |
维度矩阵
| 维度 | 入参 | 默认 | 可选值 |
|---|---|---|---|
| 模式 | mode |
dropdown |
dropdown / popover / select / multi-select / menu |
| 位置 | position |
bottom-start |
bottom-start/end/bottom / top-start/end/top / left-start/end/left / right-start/end/right |
| 触发 | trigger |
随 mode | click / hover / focus / manual / contextmenu |
| 尺寸 | size |
md |
sm / md / lg |
| 色调 | tone |
neutral |
neutral / primary / success / warning / danger |
5 × 12 × 5 × 3 × 5 = 4500+ 种组合。
能力清单（select / multi-select 专属）
| 能力 | prop | 默认 | 说明 |
|---|---|---|---|
| 本地搜索 | searchable |
false |
关键字高亮过滤 |
| 一键清空 | clearable |
false |
trigger 内显示 × 按钮 |
| 多选 | multiple 或 mode='multi-select' |
false |
tag pill 展示 |
| 最多选几项 | max |
Infinity |
multi-select 用 |
| 远程搜索 | remote |
false |
配合 remote-function |
| 防抖 | debounce |
300 |
ms |
| 虚拟滚动 | virtual |
false |
> 100 选项建议开启 |
| 虚拟行高 | rowHeight |
36 |
px |
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 Changed · +218 lines · +186 tokens per session ea35e2a6d95d
- 9d ago First seen · 20 lines · 43 tokens per session scan A 158ec4fb4d78
vue-dropdown-skill is a skill published in the GitHub repository jiushiwon/wg-skills (100 stars, last pushed 2d ago), licensed Apache-2.0. It adds 229 tokens to every session and 3,464 once invoked, about $0.0011 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.