主题
Skill: Ant Design Vue Next
Antdv Next Skills 是面向 AI Agent 的 Ant Design Vue Next 组件库知识包,用于让 Claude Code、Codex、GitHub Copilot 等 AI 客户端更准确地理解和使用 Antdv Next。
作用说明
Agent Skills 是一种可复用的、基于文件系统的能力扩展。它把组件文档、示例、工作流和最佳实践沉淀为本地资源,让通用 AI Agent 在处理特定任务时按需变成领域专家。
与一次性提示词不同,Skill 安装后可以在多轮对话和多个项目中重复使用,无需每次都重新描述组件库规则。
Antdv Next Skills 的主要价值:
- 专业化 AI: 为 Antdv Next 组件开发提供专用上下文
- 减少重复说明: 创建或安装一次,后续按需自动加载
- 组合能力: 可与 Vue、TypeScript、项目规范等 Skills 配合使用
- 减少幻觉: 通过真实文档和示例避免生成不存在的 Props、Events、Slots
- 离线可用: 文档与示例被本地化到
references/,不依赖临时访问外部链接
适用于使用 Antdv Next / Ant Design Vue(Vue 3 版本) 的前端项目。
工作原理
Antdv Next Skills 利用 AI Agent 的文件系统环境工作。Skill 本质上是一个目录,其中包含入口说明、组件文档、示例代码、设计 Token 和结构化参考资料。
它采用渐进式加载机制,只在需要时读取对应内容,避免一次性占用过多上下文:
- 第 1 级:元数据: Agent 启动时加载
SKILL.md前置数据中的name和description,成本约 100 tokens - 第 2 级:指令: Skill 被触发时加载
SKILL.md主体说明与工作流,通常小于 5k tokens - 第 3 级:资源: 按需读取
references/下的组件文档、示例、Token、语义结构,成本按实际内容计算
例如用户要求「使用 Button 组件」时,AI 先通过描述判断应触发 antdv-next,再读取 Button 相关文档和示例；未涉及的组件不会被加载。
安装
官方推荐通过 Skills CLI 安装:
bash
npx skills add antdv-next/skills官方文档还建议不要只单独使用 Antdv Next Skill。对于 Vue 项目,可以配合 Antfu Skills 集合 中的 vue 等相关 Skills,让 AI 同时掌握 Vue 3、组合式 API、工程约定和组件库用法,减少输出偏差。
使用方法
安装后,AI Agent 会在与 Antdv Next 组件相关的请求中自动使用 Skill。为了让触发更稳定,建议在提示词前显式声明:
text
use antdv-next skill, <你的需求>使用示例
基础组件开发:
text
use antdv-next skill, 创建一个包含表单验证的登录页面复杂交互:
text
use antdv-next skill, 实现一个带搜索、分页和筛选功能的数据表格组件定制:
text
use antdv-next skill, 根据 AGENTS.md 规范重构 Button 组件,确保 Props/Emits/Slots 定义正确问题诊断:
text
use antdv-next skill, 为什么我的 Form 组件验证不生效?Skill 结构
Antdv Next Skills 遵循标准 Skill 结构:
yaml
---
name: antdv-next
description: Antdv Next 组件库开发专家...
---
# Antdv Next 组件开发
## 快速开始
[组件开发工作流]
## API 约定
[Props/Emits/Slots 规范]
## 示例
有关具体组件用法,请参阅 references/components/常见目录内容:
text
antdv-next/
├── SKILL.md
└── references/
├── components/
│ ├── button/
│ │ ├── docs.md
│ │ ├── demo/
│ │ └── token.md
│ └── form/
├── docs/vue/
├── global-token.md
├── llms-semantic.md
└── llms-semantic.json生成流程
Antdv Next Skills 由官方脚本从组件库文档生成,大致流程如下:
- 文档提取: 从 playground 提取组件文档 markdown
- 示例转换: 将 Vue SFC 示例转换为 markdown 资源
- 内容聚合: 把文档、示例、Token 等复制到
references/ - 元数据生成: 创建 YAML 前置数据和主指令
- 离线优化: 确保核心内容本地可用,降低外链依赖
生成脚本支持按语言输出,以减少 Skill 体积:
bash
pnpm run generate:en # 生成英文版本
pnpm run generate:zh # 生成中文版本支持平台
Antdv Next Skills 作为自定义 Skills,可用于多个 AI 平台或客户端:
- Claude Code
- Codex
- GitHub Copilot
- Cursor
- Antigravity
具体支持程度取决于对应客户端是否实现了自定义 Skills 加载机制。
与 Vue 基础 Skill 的关系
- vue: 提供 Vue 3、Composition API、Vite、TypeScript 等通用约定
antdv-next: 补充 Antdv Next 组件 API、示例、主题 Token 和语义结构
在 Antdv Next 项目中,两者通常配合使用。
常见问题
Skill 没被触发?
优先在提示词中显式写出:
text
use antdv-next skill, ...同时确认 SKILL.md 的 description 描述了明确触发场景,例如组件名、Props、Events、Slots、Token、主题定制等关键词。
为什么要本地化文档?
本地化后的 references/ 可以让 AI 按需读取真实 API 与示例,减少联网失败、文档变更或凭印象生成旧 API 的风险。
多版本如何处理?
在 SKILL.md 顶部明确写出适用版本,例如 Antdv Next / Vue 3,避免混入 Ant Design Vue 1.x 或 2.x 的旧写法。
参考链接
- Antdv Next Skills 中文文档: https://antdv-next.cn/docs/vue/skills-cn
- Antdv Next 官方: https://antdv-next.cn
- Antfu Skills 集合: https://github.com/antfu/skills
- Skills CLI: https://www.npmjs.com/package/skills