New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Vue Comment

by wot-ui in wot-ui/wot-ui

统一 Vue 与 wot-ui 组件源码中的注释和命名规范。用户要求规范组件 Props 注释、函数命名、类型说明、变量命名或在创建组件后补齐代码注释时调用；不负责 Demo、测试和文档迁移。

MITAuto-check passedFrontend & Design

Install Vue Comment

skills CLI
$ npx skills add wot-ui/wot-ui --skill vue-comment -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install wot-ui/wot-ui vue-comment --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/wot-ui/wot-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vue-comment .claude/skills/vue-comment && rm -rf skills-src

Use ~/.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/

Facts

Skill name
vue-comment
GitHub stars
386
Token cost
~965 tokens
SKILL.md length
252 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

统一 Vue 与 wot-ui 组件源码中的注释和命名规范。用户要求规范组件 Props 注释、函数命名、类型说明、变量命名或在创建组件后补齐代码注释时调用；不负责 Demo、测试和文档迁移。

  • Works in 3 steps: 命名规范 → 注释规范 → 示例集合
  • Frontend & Design work in your project
  • SKILL.md covers 职责边界, 使用场景, 1. 命名规范 and 2. 注释规范, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Vue Comment is an agent skill from wot-ui/wot-ui. 统一 Vue 与 wot-ui 组件源码中的注释和命名规范。用户要求规范组件 Props 注释、函数命名、类型说明、变量命名或在创建组件后补齐代码注释时调用；不负责 Demo、测试和文档迁移。

Its SKILL.md is about 970 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Vue.js. The repository describes itself as: 一个轻量、美观、AI友好的 uni-app 组件库。 The licence is MIT.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/vue-comment”

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. 命名规范
  2. 注释规范
  3. 示例集合

What it can do on your machine

Read from SKILL.md and the folder at commit 486d06d. 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 (its code samples are typescript).

    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 Comment loads about 965 tokens when it runs. Until then it costs about 27 tokens; SKILL.md has 252 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~27
When it runs · the whole SKILL.md, loaded when a task matches
~965

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 wot-ui/wot-ui at commit 486d06d, republished under its MIT licence (© wot-ui). 252 words, ~965 tokens.

Download SKILL.mdSave it as .claude/skills/vue-comment/SKILL.md (or your agent's skills folder).
name
vue-comment
description
统一 Vue 与 wot-ui 组件源码中的注释和命名规范。用户要求规范组件 Props 注释、函数命名、类型说明、变量命名或在创建组件后补齐代码注释时调用；不负责 Demo、测试和文档迁移。

Vue 项目注释与命名规范

本 Skill 旨在统一 Vue 项目中的代码注释格式与命名约定，建立标准化的开发规范。不仅涵盖组件 Props，还包括函数、变量、类型定义以及文件目录的命名规则。

默认遵循 wot-ui-component-baseline 中的共享约束。

职责边界

  • 本 Skill 只负责源码层面的命名与注释规范。
  • 不负责创建组件骨架，相关工作交给 create-component。
  • 不负责 Demo 页编排，相关工作交给 create-demo-page。
  • 不负责 Markdown 文档迁移与 API 表维护，相关工作交给 migrate-component-doc。

使用场景

  1. 代码维护: 统一现有代码库的风格，提高可读性。
  2. 新功能开发: 确保新增组件和逻辑符合团队规范。
  3. Code Review: 作为代码审查的标准依据。
  4. 组件补注释: 在新建组件后补齐 types.ts、公共函数和类型定义注释。

1. 命名规范

遵循 "约定优于配置" 原则，保持命名的一致性与语义化。

1.1 文件与目录
  • 组件文件: 使用 kebab-case (短横线连接)，如 my-component.vue, user-profile.vue。
  • 普通 TS/JS 文件: 使用 kebab-case，如 date-utils.ts, api-client.ts。
  • 目录: 使用 kebab-case，如 components/, utils/, user-center/。
1.2 变量与常量
  • 普通变量: 使用 camelCase (小驼峰)，如 userInfo, isLoading。
    • 布尔类型建议以 is, has, should 开头，如 isVisible。
  • 常量: 使用 UPPER_SNAKE_CASE (大写下划线)，通常用于全局配置或某些固定值，如 MAX_RETRY_COUNT, DEFAULT_THEME。
  • 私有变量: 即使在 TS 中有 private 关键字，Vue 3 组合式 API 中内部变量仍建议保持 camelCase，不强制加下划线前缀，除非团队有特殊约定。
1.3 函数
  • 函数名: 使用 camelCase (小驼峰)。
  • 命名动词: 建议使用动词开头，如 get, set, fetch, handle, on, render 等。
    • handle: 用于事件处理，如 handleClick。
    • fetch/request: 用于异步请求，如 fetchUserData。
    • get: 用于获取数据或计算结果，如 getFormattedDate。
1.4 类与类型
  • 类 (Class): 使用 PascalCase (大驼峰)，如 User, HttpClient。
  • 接口 (Interface) / 类型别名 (Type): 使用 PascalCase (大驼峰)，如 UserProps, TableColumn。
  • 枚举 (Enum): 使用 PascalCase，成员使用 UPPER_SNAKE_CASE (视团队习惯，也可 PascalCase)。

2. 注释规范

所有注释应简洁明了，使用中文（除非项目强制全英文），并保持语意通顺。

2.1 组件 Props 注释

组件 Props 注释是源码可读性与 API 提示的重要来源。

基本格式:

typescript
/**
 * 属性简短描述
 * 类型: xxx
 * 可选值: A | B | C
 * 默认值: xxx
 */

规则:

  1. 使用多行 JSDoc (/** ... */)。
  2. 描述: 第一行简述作用。
  3. 类型: 如果使用了复杂类型或需要明确说明，使用 类型: TypeName。
  4. 可选值: 枚举类型必填，格式 可选值: 'a' | 'b'。
  5. 默认值: 必填，格式 默认值: value。若是继承属性，写 默认值: 继承自 xxx。
2.2 函数/方法注释

关键业务逻辑函数、公共工具函数必须添加 JSDoc 注释。

基本格式:

typescript
/**
 * 函数功能简述
 * @param {Type} paramName 参数说明
 * @returns {Type} 返回值说明
 */

规则:

  1. 简单的一行函数可省略注释或用单行注释。
  2. 复杂逻辑或公共接口使用 JSDoc。
  3. @param: 描述参数名、类型及含义。
  4. @returns: 描述返回值类型及含义 (如果是 void 可省略)。
2.3 变量注释

规则:

  1. 普通变量: 简单变量可不注，或使用单行注释 // ... 放在变量声明行上方或右侧。
  2. 关键状态: 涉及复杂业务状态的变量，建议使用 JSDoc 或详细的单行注释。
2.4 类型定义 (Types/Interfaces) 注释

规则:

  1. 接口/类型说明: 使用 JSDoc 说明该 Type/Interface 的用途。
  2. 属性说明: 建议使用 JSDoc (/** ... */) 以便编辑器提示，或使用单行注释。

3. 示例集合

3.1 综合示例 (组件内部)
typescript
// types.ts
/**
 * 用户信息接口
 */
export interface UserInfo {
  /** 用户 ID */
  id: number
  /** 用户名 */
  name: string
  /**
   * 用户角色
   * 可选值: 'admin' | 'editor' | 'guest'
   */
  role: 'admin' | 'editor' | 'guest'
}

// my-component.vue (Script Setup)
import { defineProps } from 'vue'
import type { UserInfo } from './types'

// 常量定义
const MAX_ITEM_COUNT = 10

export const myComponentProps = {
  /**
   * 绑定的值
   * 类型: string | number
   * 默认值: ''
   */
  modelValue: {
    type: [String, Number],
    default: ''
  },
  /**
   * 按钮类型
   * 可选值: 'primary' | 'success' | 'warning'
   * 默认值: 'primary'
   */
  type: {
    type: String,
    default: 'primary'
  },
  /**
   * 是否禁用
   * 默认值: false
   */
  disabled: Boolean
}

// 变量定义
const isVisible = ref(false)

/**
 * 处理点击事件，提交用户信息
 * @param {UserInfo} user 当前操作的用户
 * @returns {Promise<void>}
 */
const handleSubmit = async (user: UserInfo) => {
  if (user.role === 'guest') {
    return
  }
  // ... logic
}

输出解释

执行此技能后，代码将符合上述规范：

  • 命名: 文件、变量、函数严格遵守大小写约定。
  • 注释: Props、函数、类型定义拥有清晰、标准化的 JSDoc 注释。
  • 一致性: 整个项目源码风格统一，便于维护与审查。

© wot-ui, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/vue-comment of wot-ui/wot-ui.

Open the folder on GitHubat commit 486d06d

Compare with similar skills

Vue Comment 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.

Vue Comment compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Vue Comment this skillwot-ui/wot-ui386—~965Automated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
GSAP Core Animationgreensock/gsap-skills16k4 repos~3.7kAutomated safety check: PassMIT
GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills16k4 repos~2.6kAutomated safety check: PassMIT
Vuetify Playgroundvuetifyjs/vuetify41k—~730Automated safety check: PassCustom licence
Boneyard0xGF/boneyard7.5k—~2.2kAutomated safety check: NotesMIT

Similar skills

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 4 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • GSAP in Vue, Nuxt and Svelte

    greensock/gsap-skills

    Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.

    16k GitHub starsUsed in 4 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Vuetify Playground

    vuetifyjs/vuetify

    Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.

    41k GitHub stars~730 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Boneyard

    0xGF/boneyard

    Use boneyard-js to add, configure, debug, or rebuild skeleton screens.

    7.5k GitHub stars~2.2k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: notes

  • Buefy Vue UI Components

    buefy/buefy

    Rules for writing Vue 3 templates with Buefy components on Bulma CSS: install options, prop conventions, b-field wrapping, tables, theming and dialogs.

    9.5k GitHub stars~8.2k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

More from wot-ui/wot-ui

All 10 skills in this repo

  • Create Component

    wot-ui/wot-ui

    在 wot-ui 项目中创建新组件骨架与必要注册点。用户要求从零创建组件源码、补齐 types.vue.scss 结构或注册全局组件类型时调用；不负责 Demo 页、测试和文档迁移。

    386 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Create Demo Page

    wot-ui/wot-ui

    为组件创建演示页面并统一组织结构。用户要求新建/重构组件 Demo、统一展示顺序或用 demo-group 与 demo-group-item 编排时调用。

    386 GitHub stars~547 tokensUpdated today
    Auto-check passed

  • Generate Scss Variables

    wot-ui/wot-ui

    为新组件或新特性快速生成符合设计系统规范的 SCSS 变量定义代码，或检查现有变量是否合规. An agent skill from wot-ui/wot-ui.

    386 GitHub stars~906 tokensUpdated today
    Auto-check passed

  • Generate Theme

    wot-ui/wot-ui

    为 wot-ui 生成单文件主题 SCSS，并在 App.vue 中挂载语义变量. An agent skill from wot-ui/wot-ui.

    386 GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Optimize Page Styles

    wot-ui/wot-ui

    优化 subPages 演示页面中的样式，将硬编码的颜色、字号、间距、圆角等替换为 wot-ui 设计系统语义变量。允许直接使用已全局注入的 variable.scss Sass 变量，也允许使用 CSS 自定义属性；不需要额外引入 variable.scss。消除手写的暗色模式覆盖块，统一使用语义变量实现自适应主题。同时将 class 命名统一为 BEM 规范。

    386 GitHub stars~4.9k tokensUpdated today
    Auto-check passed

  • Migrate Component Doc

    wot-ui/wot-ui

    迁移组件 Markdown 文档到新规范。用户明确要求迁移文档结构、重排 Demo 章节、合并 Attributes/Options 列、迁移最低版本标记或升级旧文档格式时调用；不用于仅做一致性核对。

    386 GitHub stars~610 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Vue Comment

What does Vue Comment do?

统一 Vue 与 wot-ui 组件源码中的注释和命名规范。用户要求规范组件 Props 注释、函数命名、类型说明、变量命名或在创建组件后补齐代码注释时调用；不负责 Demo、测试和文档迁移。. Vue Comment is an agent skill from wot-ui/wot-ui.

When should I use Vue Comment?

Vue Comment fits situations like: frontend & Design work in your project.

How do I install Vue Comment in Claude Code?

Run `npx skills add wot-ui/wot-ui --skill vue-comment -a claude-code`. Or copy the skill folder (.agents/skills/vue-comment in wot-ui/wot-ui) into .claude/skills/vue-comment in your project. Claude Code loads it when a task matches its description.

How do I install Vue Comment in Codex?

Run `npx skills add wot-ui/wot-ui --skill vue-comment -a codex`. Or copy the skill folder (.agents/skills/vue-comment in wot-ui/wot-ui) into .agents/skills/vue-comment in your project. Codex loads it when a task matches its description.

Can I use Vue Comment 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 wot-ui/wot-ui --skill vue-comment -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-comment, .gemini/skills/vue-comment, .github/skills/vue-comment and .opencode/skills/vue-comment in your project.

What does Vue Comment need to run?

SKILL.md names no scripts, command-line tools or credentials: Vue Comment is instructions for the agent only.

Does Vue Comment 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 Comment 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 Comment use?

Vue Comment is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vue Comment use?

About 965 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Vue Comment?

Skills that share tags, products or a category with Vue Comment: Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), GSAP Core Animation (greensock/gsap-skills, 16k stars), GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars) and Vuetify Playground (vuetifyjs/vuetify, 41k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vue Comment?

wot-ui (a GitHub organization) maintains it in wot-ui/wot-ui, which has 386 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 9, 2026.

Source: wot-ui/wot-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.