vant-ui-skills

Name: vant-ui-skills
Author: jiaiyan

github.com/jiaiyan开发040 次安装32 周前更新

代码仓库

关于 vant-ui-skills

vant-ui-skills 是帮助 AI Agent 使用 Vant 移动端 UI 组件的技能库。它按组件、Vue 3 组合式函数和配置主题等内容组织指南，面向移动 Web 与混合应用开发者。

主要功能

01提供 Vant 组件指南
02涵盖表单、交互、展示和导航技能
03提供 Vue 3 组合式函数指南
04包含配置、主题和 i18n 技能
05提供组件 API 与用法示例

适用场景

01在移动应用中实现 Vant 组件
02配置 Vant 或自定义主题
03为 Vant 项目添加国际化
04排查 Vant 组件问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jiaiyan/vant-ui-skills --skill vant-ui-skills

安装后在 Claude Code 中输入/vant-ui-skills确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE

README.md

README_CN.md

AGENTS.md

详细介绍

Vant 技能库

一个全面的 Vant UI 框架技能库，旨在帮助 AI Agent 理解并有效使用 Vant 移动端组件。

何时调用

在以下情况下调用此技能：

用户需要实现任何 Vant 组件
用户询问 Vant 配置或设置
用户想要为移动应用自定义主题
用户需要国际化（i18n）支持
用户询问移动优先的设计模式
用户遇到 Vant 组件相关问题
用户正在构建移动端 Web 应用或混合应用

技能库概览

Vant 是一个轻量、可靠的移动端组件库。此库包含 102 项技能，按以下类别组织：

类别	数量	描述	路径格式
基础组件	10	基础 UI 组件	`./components/van-{name}/SKILL.md`
表单组件	19	表单输入和验证	`./components/van-{name}/SKILL.md`
操作组件	12	用户交互组件	`./components/van-{name}/SKILL.md`
展示组件	26	数据展示组件	`./components/van-{name}/SKILL.md`
导航组件	10	导航和路由	`./components/van-{name}/SKILL.md`
业务组件	9	特定业务组件	`./components/van-{name}/SKILL.md`
组合式函数	11	Vue 3 组合式 API 工具	`./composables/use-{name}/SKILL.md`
基础技能	5	核心设置和配置	`./vant-{name}/SKILL.md`

如何查找技能

1. 组件技能（86 项）

所有组件技能都遵循 van-{component-name} 命名规范，并位于 components/ 目录中。

路径格式：

./components/van-{component-name}/SKILL.md

示例：

Button：./components/van-button/SKILL.md
Form：./components/van-form/SKILL.md
List：./components/van-list/SKILL.md
Popup：./components/van-popup/SKILL.md

2. 组合式函数技能（11 项）

组合式函数提供 Vue 3 组合式 API 工具，用于实现常见的移动端模式。

路径格式：

./composables/use-{name}/SKILL.md

示例：

useCountDown：./composables/use-count-down/SKILL.md
useLazyRender：./composables/use-lazy-render/SKILL.md
useRect：./composables/use-rect/SKILL.md

3. 基础技能（6 项）

基础技能涵盖核心设置和配置。

技能名称	路径	描述
快速入门	`./vant-quickstart/SKILL.md`	安装和设置
主题设置	`./vant-theming/SKILL.md`	主题自定义
i18n	`./vant-i18n/SKILL.md`	国际化
高级用法	`./vant-advanced-usage/SKILL.md`	高级模式
组件	`./vant-components/SKILL.md`	组件概览索引
组合式函数	`./vant-composables/SKILL.md`	组合式函数概览索引

技能调用指南

第 1 步：识别用户意图

分析用户的请求，确定需要哪种技能类别：

用户请求模式	技能类别	技能示例
“创建按钮／表单／列表……”	组件	`van-button`、`van-form`、`van-list`
“如何设置 Vant”	基础	`vant-quickstart`
“自定义主题颜色”	基础	`vant-theming`
“添加多语言支持”	基础	`vant-i18n`
“使用倒计时器”	组合式	`use-count-down`
“实现懒加载”	组合式	`use-lazy-render`

第 2 步：定位技能文件

使用上述路径模式定位相应的技能文件：

# For component skills
./components/van-{component-name}/SKILL.md

# For composables skills
./composables/use-{name}/SKILL.md

# For foundation skills
./vant-{name}/SKILL.md

第 3 步：阅读并应用技能内容

每个技能文件包含：

调用时机：使用该技能的具体条件
功能：组件能力和选项
API 参考：属性、事件、插槽、暴露项
用法示例：常见模式的代码片段
最佳实践：推荐的实现指南

组件技能索引

基础组件（10）

组件	技能路径	描述
Button	`./components/van-button/SKILL.md`	按钮
Cell	`./components/van-cell/SKILL.md`	单元格项
CellGroup	`./components/van-cell-group/SKILL.md`	单元格组
ConfigProvider	`./components/van-config-provider/SKILL.md`	全局配置
Icon	`./components/van-icon/SKILL.md`	图标
Image	`./components/van-image/SKILL.md`	图片
Layout	`./components/van-layout/SKILL.md`	布局系统
Popup	`./components/van-popup/SKILL.md`	弹出层
Toast	`./components/van-toast/SKILL.md`	轻提示消息
Transition	`./components/van-transition/SKILL.md`	过渡效果

Form Components (19)

Component	Skill Path	Description
AddressEdit	`./components/van-address-edit/SKILL.md`	Address editor
AddressList	`./components/van-address-list/SKILL.md`	Address list
Area	`./components/van-area/SKILL.md`	Area picker
Calendar	`./components/van-calendar/SKILL.md`	Calendar
Cascader	`./components/van-cascader/SKILL.md`	Cascading selection
Checkbox	`./components/van-checkbox/SKILL.md`	Checkboxes
ContactCard	`./components/van-contact-card/SKILL.md`	Contact card
ContactEdit	`./components/van-contact-edit/SKILL.md`	Contact editor
ContactList	`./components/van-contact-list/SKILL.md`	Contact list
DatePicker	`./components/van-date-picker/SKILL.md`	Date picker
Field	`./components/van-field/SKILL.md`	Input fields
Form	`./components/van-form/SKILL.md`	Form management
NumberKeyboard	`./components/van-number-keyboard/SKILL.md`	Number keyboard
PasswordInput	`./components/van-password-input/SKILL.md`	Password input
Picker	`./components/van-picker/SKILL.md`	Picker
Radio	`./components/van-radio/SKILL.md`	Radio buttons
Rate	`./components/van-rate/SKILL.md`	Star rating
Search	`./components/van-search/SKILL.md`	Search bar
Slider	`./components/van-slider/SKILL.md`	Slider
Stepper	`./components/van-stepper/SKILL.md`	Stepper
Switch	`./components/van-switch/SKILL.md`	Toggle switch
TimePicker	`./components/van-time-picker/SKILL.md`	Time picker
Uploader	`./components/van-uploader/SKILL.md`	File uploader

Action Components (12)

Component	Skill Path	Description
ActionSheet	`./components/van-action-sheet/SKILL.md`	Action sheet
Dialog	`./components/van-dialog/SKILL.md`	Dialog modal
DropdownMenu	`./components/van-dropdown-menu/SKILL.md`	Dropdown menu
FloatingBubble	`./components/van-floating-bubble/SKILL.md`	Floating bubble
FloatingPanel	`./components/van-floating-panel/SKILL.md`	Floating panel
Loading	`./components/van-loading/SKILL.md`	Loading indicator
Notify	`./components/van-notify/SKILL.md`	Notification
Overlay	`./components/van-overlay/SKILL.md`	Overlay
PickerGroup	`./components/van-picker-group/SKILL.md`	Picker group
PullRefresh	`./components/van-pull-refresh/SKILL.md`	Pull to refresh
ShareSheet	`./components/van-share-sheet/SKILL.md`	Share sheet
SwipeCell	`./components/van-swipe-cell/SKILL.md`	Swipe cell

Display Components (26)

Component	Skill Path	Description
Badge	`./components/van-badge/SKILL.md`	Badge
Collapse	`./components/van-collapse/SKILL.md`	Collapse
CountDown	`./components/van-count-down/SKILL.md`	Countdown
Divider	`./components/van-divider/SKILL.md`	Divider
Empty	`./components/van-empty/SKILL.md`	Empty state
Grid	`./components/van-grid/SKILL.md`	Grid
ImagePreview	`./components/van-image-preview/SKILL.md`	Image preview
Lazyload	`./components/van-lazyload/SKILL.md`	Lazy loading
List	`./components/van-list/SKILL.md`	Infinite list
Loading	`./components/van-loading/SKILL.md`	Loading
Marquee	`./components/van-marquee/SKILL.md`	Marquee
NoticeBar	`./components/van-notice-bar/SKILL.md`	Notice bar
Pagination	`./components/van-pagination/SKILL.md`	Pagination
PasswordInput	`./components/van-password-input/SKILL.md`	Password input
Picker	`./components/van-picker/SKILL.md`	Picker
Progress	`./components/van-progress/SKILL.md`	Progress bar
RollingText	`./components/van-rolling-text/SKILL.md`	Rolling text
Skeleton	`./components/van-skeleton/SKILL.md`	Skeleton
Slider	`./components/van-slider/SKILL.md`	Slider
Step	`./components/van-step/SKILL.md`	Steps
Sticky	`./components/van-sticky/SKILL.md`	Sticky positioning
Swipe	`./components/van-swipe/SKILL.md`	Swipe carousel
Tag	`./components/van-tag/SKILL.md`	Tag
TextEllipsis	`./components/van-text-ellipsis/SKILL.md`	Text ellipsis
TreeSelect	`./components/van-tree-select/SKILL.md`	Tree select
Watermark	`./components/van-watermark/SKILL.md`	Watermark

Navigation Components (10)

Component	Skill Path	Description
BackTop	`./components/van-back-top/SKILL.md`	Back to top
Grid	`./components/van-grid/SKILL.md`	Grid navigation
IndexBar	`./components/van-index-bar/SKILL.md`	Index bar
NavBar	`./components/van-nav-bar/SKILL.md`	Navigation bar
Pagination	`./components/van-pagination/SKILL.md`	Pagination
Sidebar	`./components/van-sidebar/SKILL.md`	Sidebar
Tab	`./components/van-tab/SKILL.md`	Tabs
Tabbar	`./components/van-tabbar/SKILL.md`	Tab bar
TreeSelect	`./components/van-tree-select/SKILL.md`	Tree select

业务组件（9）

组件	技能路径	描述
AddressEdit	`./components/van-address-edit/SKILL.md`	地址编辑器
AddressList	`./components/van-address-list/SKILL.md`	地址列表
Area	`./components/van-area/SKILL.md`	地区选择器
Card	`./components/van-card/SKILL.md`	卡片
ContactCard	`./components/van-contact-card/SKILL.md`	联系人卡片
ContactEdit	`./components/van-contact-edit/SKILL.md`	联系人编辑器
ContactList	`./components/van-contact-list/SKILL.md`	联系人列表
Coupon	`./components/van-coupon/SKILL.md`	优惠券
SubmitBar	`./components/van-submit-bar/SKILL.md`	提交栏

组合式函数索引（11）

组合式函数	技能路径	描述
useCountDown	`./composables/use-count-down/SKILL.md`	倒计时器
useCustomFieldValue	`./composables/use-custom-field-value/SKILL.md`	自定义字段值
useEventListener	`./composables/use-event-listener/SKILL.md`	事件监听器
useId	`./composables/use-id/SKILL.md`	唯一 ID 生成器
useLazyRender	`./composables/use-lazy-render/SKILL.md`	懒渲染
usePageVisibility	`./composables/use-page-visibility/SKILL.md`	页面可见性
useRect	`./composables/use-rect/SKILL.md`	元素矩形
useRelation	`./composables/use-relation/SKILL.md`	组件关系
useResetState	`./composables/use-reset-state/SKILL.md`	重置状态
useRtl	`./composables/use-rtl/SKILL.md`	RTL 支持
useWindowSize	`./composables/use-window-size/SKILL.md`	窗口大小

使用示例

示例 1：用户询问按钮实现方式

用户请求：“如何创建一个带加载状态的主要按钮？”

Agent 操作：

确定意图：组件技能 - Button
查找技能：./components/van-button/SKILL.md
阅读技能内容
提供包含 API 参考和代码示例的回复

回复：

<template>
  <van-button type="primary" :loading="loading" @click="handleClick">
    {{ loading ? 'Loading...' : 'Submit' }}
  </van-button>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)

const handleClick = async () => {
  loading.value = true
  try {
    await submitData()
  } finally {
    loading.value = false
  }
}
</script>

示例 2：用户询问表单验证

用户请求：“如何创建带验证的表单？”

Agent 操作：

确定意图：组件技能 - Form
查找技能：./components/van-form/SKILL.md
阅读技能内容
提供包含验证示例的回复

回复：

<template>
  <van-form @submit="onSubmit">
    <van-field
      v-model="username"
      name="username"
      label="Username"
      placeholder="Username"
      :rules="[{ required: true, message: 'Please input username' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="Password"
      placeholder="Password"
      :rules="[{ required: true, message: 'Please input password' }]"
    />
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        Submit
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('')
const password = ref('')

const onSubmit = (values) => {
  console.log('submit', values)
}
</script>

示例 3：用户询问无限列表

用户请求：“如何实现无限滚动列表？”

Agent 操作：

确定意图：组件技能 - List
查找技能：./components/van-list/SKILL.md
阅读技能内容
提供包含列表示例的回复

回复：

<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="No more data"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</template>

<script setup>
import { ref } from 'vue'

const list = ref([])
const loading = ref(false)
const finished = ref(false)

const onLoad = () => {
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1)
    }
    loading.value = false
    
    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}
</script>

示例 4：用户询问倒计时器

用户请求：“如何实现倒计时器？”

Agent 操作：

确定意图：组合式函数技能 - useCountDown
查找技能：./composables/use-count-down/SKILL.md
阅读技能内容
提供包含组合式函数示例的回复

回复：

<template>
  <van-count-down :time="time" />
</template>

<script setup>
import { useCountDown } from '@vant/use'

const countDown = useCountDown({
  time: 24 * 60 * 60 * 1000,
  autostart: true,
})

const time = countDown.current
</script>

示例 5：用户询问主题自定义

用户请求：“如何自定义 Vant 主题颜色？”

Agent 操作：

确定意图：基础技能 - 主题
查找技能：./vant-theming/SKILL.md
阅读技能内容
提供包含 CSS 变量示例的回复

回复：

:root {
  --van-primary-color: #1989fa;
  --van-success-color: #07c160;
  --van-danger-color: #ee0a24;
  --van-warning-color: #ff976a;
  --van-info-color: #1989fa;
}

配置要求

先决条件

使用此技能库前，请确保：

已安装 Vue 3.3+
已安装 Vant 4+
开发环境使用 Node.js 18+

安装

npm install vant

TypeScript 支持

添加到 tsconfig.json：

{
  "compilerOptions": {
    "types": ["vant/global"]
  }
}

导入方式

import 'vant/lib/index.css'

按需导入（推荐）

import { Button, Cell, Form } from 'vant'

输入参数

调用技能时，请考虑以下参数：

参数	类型	描述	必填
component	string	组件名称（例如，“button”“form”）	是
feature	string	所需的特定功能（例如，“validation”“loading”）	否
context	object	补充上下文（框架、TypeScript 用法）	否

输出格式

每项技能都提供：

API 参考：完整的属性、事件、插槽和暴露项
代码示例：可运行的代码片段
最佳实践：推荐的实现模式
常见问题：故障排除提示
组件交互：如何与其他组件配合使用

重要说明

1. 技能优先级

当多项技能都适用时，请按以下顺序优先选择：

特定组件的技能（最具体）
组合式技能（组合式 API 工具）
基础技能（配置）

2. 交叉引用

许多技能会引用相关技能。请务必查看：

同一类别中的相关组件
用于配置的基础技能
常见模式对应的组合式技能

3. 版本兼容性

此技能库基于 Vant 4+。某些功能可能在较早版本中不可用。

4. 命名约定

组件技能使用 van-{name} 格式（与 Vue 组件标签一致）
组合式技能使用 use-{name} 格式（与 Vue 组合式 API 命名一致）
基础技能使用 vant-{name} 格式

5. 文件结构

vant-skills/
├── SKILL.md                          # This file (main entry)
├── README.md                         # English documentation
├── README_CN.md                      # Chinese documentation
├── AGENTS.md                         # Agents documentation
├── components/                       # 86 component skills
│   ├── van-button/
│   │   └── SKILL.md
│   ├── van-form/
│   │   └── SKILL.md
│   └── ...
├── composables/                      # 11 composable skills
│   ├── use-count-down/
│   │   └── SKILL.md
│   ├── use-lazy-render/
│   │   └── SKILL.md
│   └── ...
├── vant-quickstart/                  # Foundation skills
├── vant-theming/
├── vant-i18n/
├── vant-advanced-usage/
└── vant-components/

6. 移动优先设计

Vant 专为移动设备设计。需要注意以下几点：

便于触控的交互
响应式布局
针对移动设备的性能优化
原生风格的 UI 模式

面向 Agent 的最佳实践

当用户提到 Vant 时，始终从此文件开始
根据用户意图找到对应的技能
回答前阅读完整的技能文件
提供技能文档中的代码示例
适用时引用相关技能
纳入技能内容中的最佳实践
与用户上下文相关时提及常见问题
在所有建议中考虑移动优先模式

基本信息

作者: jiaiyan
仓库: jiaiyan/vant-ui-skills
分类: 开发
安装次数: 40
GitHub Stars: 0

报告问题

vant-ui-skills

关于 vant-ui-skills

主要功能

适用场景

安装

包含的文件

详细介绍

Vant 技能库

何时调用

技能库概览

如何查找技能

1. 组件技能（86 项）

2. 组合式函数技能（11 项）

3. 基础技能（6 项）

技能调用指南

第 1 步：识别用户意图

第 2 步：定位技能文件

第 3 步：阅读并应用技能内容

组件技能索引

基础组件（10）

Form Components (19)

Action Components (12)

Display Components (26)

Navigation Components (10)

业务组件（9）

组合式函数索引（11）

使用示例

示例 1：用户询问按钮实现方式

示例 2：用户询问表单验证

示例 3：用户询问无限列表

示例 4：用户询问倒计时器

示例 5：用户询问主题自定义

配置要求

先决条件

安装

TypeScript 支持

导入方式

按需导入（推荐）

输入参数

输出格式

重要说明

1. 技能优先级

2. 交叉引用

3. 版本兼容性

4. 命名约定

5. 文件结构

6. 移动优先设计

面向 Agent 的最佳实践

相关资源

评论