Frontend UI Foundry
jiushiwon/wg-skills
A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…
Vue 3 expert skill for writing production-grade code. An agent skill from cigery-useio/useio-skills.
Install Vue Mastery
$ npx skills add cigery-useio/useio-skills --skill vue-mastery -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install cigery-useio/useio-skills vue-mastery --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/vue-mastery .claude/skills/vue-mastery && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "vue-mastery" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/vue-mastery into .claude/skills/vue-mastery/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-mastery", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/cigery-useio/useio-skills/tree/main/vue-masteryType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add cigery-useio/useio-skills --skill vue-mastery -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install cigery-useio/useio-skills vue-mastery --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/vue-mastery .agents/skills/vue-mastery && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vue-mastery" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/vue-mastery into .agents/skills/vue-mastery/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-mastery", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add cigery-useio/useio-skills --skill vue-mastery -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install cigery-useio/useio-skills vue-mastery --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/vue-mastery .cursor/skills/vue-mastery && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "vue-mastery" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/vue-mastery into .cursor/skills/vue-mastery/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-mastery", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/cigery-useio/useio-skills.git --path vue-mastery--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add cigery-useio/useio-skills --skill vue-mastery -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install cigery-useio/useio-skills vue-mastery --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/vue-mastery .gemini/skills/vue-mastery && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "vue-mastery" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/vue-mastery into .gemini/skills/vue-mastery/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-mastery", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install cigery-useio/useio-skills vue-masteryInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add cigery-useio/useio-skills --skill vue-mastery -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/vue-mastery .github/skills/vue-mastery && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "vue-mastery" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/vue-mastery into .github/skills/vue-mastery/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-mastery", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add cigery-useio/useio-skills --skill vue-mastery -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install cigery-useio/useio-skills vue-mastery --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/cigery-useio/useio-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/vue-mastery .opencode/skills/vue-mastery && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "vue-mastery" agent skill from https://github.com/cigery-useio/useio-skills/tree/main/vue-mastery into .opencode/skills/vue-mastery/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vue-mastery", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
vue-mastery- GitHub stars
- 104
- Token cost
- ~1.8k tokens
- SKILL.md length
- 553 words
- Files
- 9 (incl. references)
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- MIT
At a glance
Vue 3 expert skill for writing production-grade code. An agent skill from cigery-useio/useio-skills.
- Works in 7 steps: 确认架构 → 设计组件边界 → 实现核心 → …
- Tasks that involve State management
- SKILL.md covers 核心原则, 工作流, 版本适配与防幻觉策略 and 反模式速查表, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Vue Mastery is an agent skill from cigery-useio/useio-skills. Vue 3 expert skill for writing production-grade code. Covers Composition API, script setup, reactivity, component architecture, state management, testing, performance, Tailwind, and Nuxt. Compatible with Vue 3.3+. Load for any Vue, .vue, Pinia, Vue Router, or Nuxt work. ALWAYS use Composition API with <script setup lang="ts" unless the project explicitly requires otherwise.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `references/built-in-components.md`, `references/component-architecture.md` and `references/nuxt-patterns.md`).
It sits in Frontend & Design, covering State management and CSS and styling. It works with Vue.js, Nuxt and Tailwind CSS. The licence is MIT.
When your agent uses it
- Tasks that involve State management
- Tasks that involve CSS and styling
Example prompts
- “/vue-mastery”
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 558d635. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Vue Mastery loads about 1.8k tokens when it runs, and up to ~13k if it reads all its reference files. Until then it costs about 98 tokens; SKILL.md has 553 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from cigery-useio/useio-skills at commit 558d635, republished under its MIT licence (© cigery-useio). 553 words, ~1,840 tokens.
Download SKILL.mdSave it as
.claude/skills/vue-mastery/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.- name
- vue-mastery
- description
- Vue 3 expert skill for writing production-grade code. Covers Composition API, script setup, reactivity, component architecture, state management, testing, performance, Tailwind, and Nuxt. Compatible with Vue 3.3+. Load for any Vue, .vue, Pinia, Vue Router, or Nuxt work. ALWAYS use Composition API with `<script setup lang="ts">` unless the project explicitly requires otherwise.
- license
- MIT
- version
- 1.0.0
Vue Mastery
基于 Vue 3.5+，向下兼容 3.3+/3.4+。始终使用 Composition API +
<script setup lang="ts">。版本敏感的 API 在 references 中标注最低版本要求，使用前确认项目版本。
核心原则
- 单一数据源，其余皆派生。 保持状态最小化（
ref/reactive），用computed派生其余一切。watcher 仅用于副作用。 - Props 向下，Events 向上。 通过
defineProps/defineEmits建立显式、类型安全的契约。v-model仅用于真正的双向绑定。 - 组件小而专注。 每个组件只做一件事。当组件有 3+ 个独立 UI 区域、重复的模板块、或混合了编排逻辑与展示层时，必须拆分。
- 逻辑放 composables，不放组件。 将复用、有状态、或副作用重的逻辑提取到
useXxx()composable 中。组件只负责渲染和交互。 - 性能优化是功能完成后的步骤。 核心行为验证通过之前不要优化。
- 测试行为，不测实现。 优先断言可观察的输入/输出。
wrapper.vm仅作为最后手段。 - 全面使用 TypeScript。 为 props、emits、composables、stores 强类型标注。优先显式类型而非推断。
工作流
按以下步骤顺序执行。仅当任务范围明确不需要某步骤时可跳过。
Step 1: 确认架构
- 默认技术栈：Vue 3 + Composition API +
<script setup lang="ts">。 - 如果项目明确使用 Options API 或 JSX，适配项目约定——不要未经询问就切换。
- 加载
references/component-architecture.md— 任何非简单组件工作都必读，整个任务期间保持活跃上下文。
Step 2: 设计组件边界
编码任何非简单功能前，先创建简要的组件地图：
- 用一句话定义每个组件的单一职责。
- 保持入口/根组件和路由级 view 作为组合层（应用外壳、provider 接线、功能组合）。不要在入口/根/view 组件中放置完整功能实现。
- 为每个子组件定义 props/emits 契约。
- 添加 2+ 个组件时，优先使用功能文件夹布局（
components/<feature>/...、composables/use<Feature>.ts）。
满足以下任一条件时必须拆分组件：
- 同时拥有编排/状态管理 AND 多个区域的展示性模板。
- 有 3+ 个独立 UI 区域（如：表单、筛选器、列表、底部栏/状态）。
- 存在重复的或可复用的模板块（列表行、卡片、列表项）。
对于 CRUD/列表功能（todo、table、catalog、inbox），至少拆分为：容器组件、输入/表单组件、列表/项组件、底部/操作组件。仅允许在极小的临时 demo 中使用单文件实现——若选择此方案，需明确说明为何不需要拆分。
Step 3: 实现核心
应用 references/component-architecture.md（Step 1 已加载）中的基础规范：
- SFC 区域顺序：
<script setup>→<template>→<style scoped>。 - 保持状态最小化，用
computed派生。避免在模板中重复计算昂贵逻辑。 - 保持模板声明式；将分支/派生逻辑移到 script 中。
- 应用 Vue 模板安全规则（
v-html、列表渲染、条件渲染选择）。 - 加载
references/reactivity-system.md— 涉及 ref、watcher、computed 或 Vue 3.5 API 时。
Step 4: 添加可选特性（仅当需求明确需要时）
不要默认添加。仅当需求存在时加载对应 reference：
| 需求 | Reference |
|---|---|
| Slots、fallthrough attrs、KeepAlive、Teleport、Suspense、Transition/TransitionGroup、指令、异步组件、render 函数、plugins | references/built-in-components.md |
| 全局/共享状态、Pinia stores、provide/inject、Vue Router | references/state-management.md |
| Tailwind CSS、scoped styles、响应式/暗色模式 | references/styling-guide.md |
| Nuxt SSR、auto-imports、useAsyncData、server routes | references/nuxt-patterns.md |
Step 5: 编写测试
加载 references/testing-strategies.md — 创建或审查测试时。
- 每个测试只测一个行为。
- 优先断言可观察的输入/输出（渲染文本、emit 的事件、store 状态变化）。
- 组件测试用
createTestingPinia；纯 store 测试用createPinia()。 wrapper.vm仅当 DOM/emit/prop/store 断言都无法表达行为时才使用。
Step 6: 性能优化（行为正确之后）
加载 references/performance-optimization.md — 仅当识别到或可能出现性能问题时：
- 大列表渲染瓶颈 → 虚拟化。
- 静态子树不必要重渲染 →
v-once/v-memo。 - 热列表路径中过度抽象 → 扁平化组件树。
- 昂贵的更新触发过于频繁 → 优化
updatedhook。
Step 7: 自检
- 核心行为正常且符合需求。
- 状态最小化且可预测；派生值使用
computed。 - SFC 结构遵循
<script setup>→<template>→<style>顺序。 - 组件专注且拆分合理；拆分决策有据可依。
- 入口/根和路由 view 组件保持为组合层。
- 数据流契约显式且类型安全（
defineProps、defineEmits）。 - 复用/复杂度合理时使用 composables；状态/副作用已移出组件。
- 可选特性仅在需求明确时使用。
- 测试断言行为而非实现细节。
- 性能优化仅在功能完成后进行。
版本适配与防幻觉策略
版本检测
编码前先检查项目的 Vue 版本（package.json 中的 vue 依赖），根据版本确定可用 API。本技能覆盖 Vue 3.3+ 到 3.5+，references 中标注了 3.4+ 和 3.5+ 新 API 的最低版本要求，使用前确认项目版本满足要求。
版本差异速查表
| API | 最低版本 | 不满足时的降级方案 |
|---|---|---|
defineModel() | 3.4+ | modelValue prop + update:modelValue emit |
| 响应式 props 解构 | 3.5+ | props.xxx 访问或 toRefs() |
useTemplateRef() | 3.5+ | ref() + ref="xxx" 模板属性 |
onWatcherCleanup() | 3.5+ | watcher 回调的 onCleanup 参数 |
useId() | 3.5+ | 自定义 ID 生成（crypto.randomUUID() 或计数器） |
watch deep: N | 3.5+ | deep: true（无深度限制） |
watch once: true | 3.4+ | 手动调用返回的 stop() |
watch/watchEffect pause/resume | 3.5+ | 手动控制（条件变量 + stop()） |
defineOptions() | 3.3+ | 额外的 <script> 块声明选项 |
defineSlots() | 3.3+ | 无类型提示，直接使用 $slots |
泛型组件 generic | 3.3+ | 用 any 或函数式类型推断 |
toValue() | 3.3+ | unref() + 手动判断 getter |
Teleport defer | 3.5+ | nextTick() 后手动操作 DOM |
hydrateOnVisible() | 3.5+ | 不使用懒水合，正常水合 |
Show full SKILL.md (234 more words)Show less
查证策略
当不确定某个 API 在特定版本的行为、或不确定某个 API 是否存在时，不要凭记忆猜测，按以下优先级查证：
优先使用 Context7 MCP（如果环境可用）：
- 用
mcp__context7__resolve-library-id搜索 "Vue" 或 "Vue.js" - 用
mcp__context7__query-docs查询具体 API 的文档和示例 - 这是最权威的实时文档查询方式
- 用
使用 web_search：
- 搜索 "Vue 3.x [API名称] documentation" 或 "Vue [API名称] version support"
查看项目源码：
- 检查
node_modules/vue/package.json确认实际安装版本 - 检查
node_modules/vue/dist/*.d.ts类型定义确认 API 是否存在
- 检查
防幻觉原则
- 不确定就查证：宁可多查一步，不要凭记忆生成可能错误的 API 用法。
- 版本标注优先：references 中所有版本敏感的 API 都标注了最低版本，使用前必须确认。
- 降级方案明确：上表提供了每个 API 的降级方案，当项目版本不满足时使用替代方案。
- 代码示例验证：生成的代码如果使用了版本敏感的 API，在输出时标注所需最低版本。
反模式速查表
| 反模式 | 为什么错 | 正确做法 | 详见 |
|---|---|---|---|
v-if + v-for 同元素 | 执行顺序歧义 | 用 computed 过滤数组 | component-architecture.md |
v-for key = 数组索引 | 重排序时状态错乱 | 用稳定的数据库 ID | component-architecture.md |
| 直接修改 props | 违反单向数据流 | emit 事件或用 v-model | component-architecture.md |
reactive() 用于可替换状态 | 替换时响应性丢失 | 用 ref() | reactivity-system.md |
解构 reactive() 对象 | 解构字段失去响应性 | 用 toRefs() 或 ref() | reactivity-system.md |
watch() 解构后的 prop（Vue 3.5+） | 编译时错误 | 用 getter：watch(() => prop, ...) | reactivity-system.md |
| watcher 无清理 | 内存泄漏、竞态条件 | onWatcherCleanup() 或 watcher onCleanup | reactivity-system.md |
v-html 渲染用户内容 | XSS 漏洞 | 用 DOMPurify 消毒 | component-architecture.md |
| Vue 3 中使用 Mixins | 不透明、易冲突 | 用 composables 替代 | component-architecture.md |
| composable 中模块级副作用 | 跨实例共享 | 在 onMounted + onUnmounted 中作用域化 | component-architecture.md |
| 新 Vue 3 代码用 Options API | 生态已迁移 | 用 <script setup> | — |
| 功能未完成就优化 | 过早增加复杂度 | 行为正确后再优化 | performance-optimization.md |
| 模板引用用普通 ref（Vue 3.5+） | 无动态 ref 支持、脆弱 | 用 useTemplateRef() | reactivity-system.md |
References 索引
| 文件 | 何时加载 | 主题 |
|---|---|---|
references/component-architecture.md | 始终（任何组件工作） | SFC 结构、script setup 宏、props/emits/v-model、组件拆分触发条件、composables 设计 |
references/reactivity-system.md | 涉及 ref、watcher、computed 或 3.5 API | ref/shallowRef、computed、watch/watchEffect、effectScope、Vue 3.5 新 API |
references/built-in-components.md | 使用 Transition、Teleport、Suspense、KeepAlive、v-memo、指令、异步组件、Slots、fallthrough attrs、render 函数、plugins | 所有内置组件和指令、Slots |
references/state-management.md | 全局/共享状态、Pinia stores、provide/inject、Vue Router | 状态管理决策表、Pinia setup store、provide/inject、Vue Router |
references/testing-strategies.md | 创建或审查测试 | Vitest、Vue Test Utils、Pinia 测试、行为优先断言 |
references/performance-optimization.md | 性能优化 | 虚拟列表、v-memo/v-once、组件抽象、updated hook |
references/styling-guide.md | Tailwind 样式、scoped CSS | Tailwind 工具类、响应式、暗色模式、class 可读性 |
references/nuxt-patterns.md | Nuxt SSR 项目 | auto-imports、useAsyncData、server routes、runtime config |
相关技能
typescript— TypeScript 最佳实践在 Vue 项目中的应用accessibility— ARIA、语义化 HTML、焦点管理
© cigery-useio, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 8 other files (references) in vue-mastery of cigery-useio/useio-skills.
- SKILL.md
- references/built-in-components.md
- references/component-architecture.md
- references/nuxt-patterns.md
- references/performance-optimization.md
- references/reactivity-system.md
- references/state-management.md
- references/styling-guide.md
- references/testing-strategies.md
Open the folder on GitHubat commit 558d635
Compare with similar skills
Vue Mastery next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Vue Mastery this skillcigery-useio/useio-skills | 104 | — | ~1.8k | Automated safety check: Pass | MIT | |
| Frontend UI Foundryjiushiwon/wg-skills | 114 | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Dokan Frontend Devgetdokan/dokan | 288 | — | ~1.9k | Automated safety check: Pass | None | |
| Tailwindcss Developmentanonaddy/anonaddy | 4.9k | 10 repos | ~865 | Automated safety check: Pass | MIT | |
| Kill AI Slopyetone/kill-ai-slop | 1.3k | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Dokan Frontend Dev
getdokan/dokan
Add or modify Dokan frontend code (React, TypeScript, Vue, Tailwind).
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
Kill AI Slop
yetone/kill-ai-slop
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
Uithing
BayBreezy/ui-thing
Manages UI Thing components, prose, blocks, themes, shortcuts, docs, and MCP-driven workflows in Nuxt projects and in the UI Thing source repo.
More from cigery-useio/useio-skills
All 10 skills in this repoRights Prep
cigery-useio/useio-skills
帮普通人把"权益受损类事务"的原始材料（聊天记录、转账凭证、单据、平台通知、官方查询结果等）整理成可提交的文书与证据册。流程为：先定性并锁定救济路径与法定期限，再把用户的口述拆成待证要件，接着筛选与核查证据、识别有害表述，然后成文、编证据清单、排版打印，最后按期限交付并留存提交凭证。产出文书草稿、证据清单、可打印证据册及提交指引。
HTML Ppt Creator
cigery-useio/useio-skills
HTML 幻灯片制作技能，生成专业级静态 HTML 演示文稿。内置 36 套主题、15 套完整 deck 模板、31 种页面布局、47 个动效，以及演讲者模式（逐字稿提词器+计时器）。最终通过 bundle.js 打包为单 HTML 文件，可拷贝发送给他人。当用户要求做 PPT、幻灯片、演讲稿、分享 slides、pitch deck、小红书图文等时触发。
Ppt Creator
cigery-useio/useio-skills
PPT 制作技能，支持创建和修改 PowerPoint 演示文稿。包含嵌入式 Python（Windows x64，约 25MB），支持企业内网环境零依赖运行。支持标题页、内容页、双栏页、表格页、图片页、章节页、图表页等多种布局。默认 16:9 宽高比，支持模板创建和修改前自动备份。
Browser Automation
cigery-useio/useio-skills
浏览器自动化技能，通过 browseraction 工具控制 Chrome 浏览器执行多步骤网页操作任务。支持页面导航、元素点击与输入、页面状态提取、截图分析、控制台错误与网络请求监控查询等。适用于网页数据采集、表单自动填写、网页信息查询、多步骤网页交互等场景。
Debugger Pro
cigery-useio/useio-skills
系统性调试技能，通过证据驱动的6阶段工作流精准定位和修复bug。以五大核心原则为防护链，确保诊断有证据、修复有评估、验证有回归。支持问题分级（P0-P3）、修复风险评估与门控、Context7文档查询降级策略，输出含分级清单和风险报告的完整调试报告。
Knowledge Extractor
cigery-useio/useio-skills
UseIO 元技能，用于从当前对话内容中提取有价值的知识条目并保存到知识库。当用户要求"提取知识""保存为知识""记录到知识库"时触发，引导 agent 分析对话内容，调用 saveknowledge 工具完成结构化知识存储，支持用户指定分类或由 agent 自动判断。
Related
Works with
Categories
Questions about Vue Mastery
What does Vue Mastery do?
Vue 3 expert skill for writing production-grade code. An agent skill from cigery-useio/useio-skills. Vue Mastery is an agent skill from cigery-useio/useio-skills. Vue 3 expert skill for writing production-grade code.
When should I use Vue Mastery?
Vue Mastery fits situations like: tasks that involve State management; tasks that involve CSS and styling.
How do I install Vue Mastery in Claude Code?
Run `npx skills add cigery-useio/useio-skills --skill vue-mastery -a claude-code`. Or copy the skill folder (vue-mastery in cigery-useio/useio-skills) into .claude/skills/vue-mastery in your project. Claude Code loads it when a task matches its description.
How do I install Vue Mastery in Codex?
Run `npx skills add cigery-useio/useio-skills --skill vue-mastery -a codex`. Or copy the skill folder (vue-mastery in cigery-useio/useio-skills) into .agents/skills/vue-mastery in your project. Codex loads it when a task matches its description.
Can I use Vue Mastery in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add cigery-useio/useio-skills --skill vue-mastery -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vue-mastery, .gemini/skills/vue-mastery, .github/skills/vue-mastery and .opencode/skills/vue-mastery in your project.
What does Vue Mastery need to run?
SKILL.md names no scripts, command-line tools or credentials: Vue Mastery is instructions for the agent only.
Does Vue Mastery access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Vue Mastery safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Vue Mastery use?
Vue Mastery is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Vue Mastery use?
About 1.8k tokens (SKILL.md is roughly 7.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.
What are the alternatives to Vue Mastery?
Skills that share tags, products or a category with Vue Mastery: Frontend UI Foundry (jiushiwon/wg-skills, 114 stars), Dokan Frontend Dev (getdokan/dokan, 288 stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars) and Kill AI Slop (yetone/kill-ai-slop, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Vue Mastery?
cigery-useio (a GitHub user) maintains it in cigery-useio/useio-skills, which has 104 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on September 23, 2026.
Source: cigery-useio/useio-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.