vant-ui-skills

Vant Skills Library

A comprehensive skill library for Vant UI framework, designed for AI agents to understand and utilize Vant mobile components effectively.

When to Invoke

Invoke this skill when:

User needs to implement any Vant component
User asks about Vant configuration or setup
User wants to customize themes for mobile apps
User needs internationalization (i18n) support
User asks about mobile-first design patterns
User encounters issues with Vant components
User is building mobile web applications or hybrid apps

Skill Library Overview

Vant is a lightweight, reliable mobile component library. This library contains 102 skills organized into the following categories:

Category	Count	Description	Path Pattern
Basic Components	10	Essential UI components	`./components/van-{name}/SKILL.md`
Form Components	19	Form input and validation	`./components/van-{name}/SKILL.md`
Action Components	12	User interaction components	`./components/van-{name}/SKILL.md`
Display Components	26	Data display components	`./components/van-{name}/SKILL.md`
Navigation Components	10	Navigation and routing	`./components/van-{name}/SKILL.md`
Business Components	9	Business-specific components	`./components/van-{name}/SKILL.md`
Composables	11	Vue 3 composition API utilities	`./composables/use-{name}/SKILL.md`
Foundation Skills	5	Core setup and configuration	`./vant-{name}/SKILL.md`

How to Locate Skills

1. Component Skills (86 skills)

All component skills follow the naming convention van-{component-name} and are located in the components/ directory.

Path Pattern:

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

Examples:

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. Composables Skills (11 skills)

Composables provide Vue 3 composition API utilities for common mobile patterns.

Path Pattern:

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

Examples:

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

3. Foundation Skills (6 skills)

Foundation skills cover core setup and configuration.

Skill Name	Path	Description
Quickstart	`./vant-quickstart/SKILL.md`	Installation and setup
Theming	`./vant-theming/SKILL.md`	Theme customization
i18n	`./vant-i18n/SKILL.md`	Internationalization
Advanced Usage	`./vant-advanced-usage/SKILL.md`	Advanced patterns
Components	`./vant-components/SKILL.md`	Component overview index
Composables	`./vant-composables/SKILL.md`	Composables overview index

Skill Invocation Guide

Step 1: Identify User Intent

Analyze the user's request to determine which skill category is needed:

User Request Pattern	Skill Category	Example Skill
"Create a button/form/list..."	Component	`van-button`, `van-form`, `van-list`
"How to set up Vant"	Foundation	`vant-quickstart`
"Customize theme colors"	Foundation	`vant-theming`
"Add multi-language support"	Foundation	`vant-i18n`
"Use countdown timer"	Composable	`use-count-down`
"Implement lazy loading"	Composable	`use-lazy-render`

Step 2: Locate the Skill File

Use the path patterns above to locate the appropriate skill file:

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

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

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

Step 3: Read and Apply Skill Content

Each skill file contains:

When to Invoke: Specific conditions for using the skill
Features: Component capabilities and options
API Reference: Attributes, events, slots, exposes
Usage Examples: Code snippets for common patterns
Best Practices: Recommended implementation guidelines

Component Skill Index

Basic Components (10)

Component	Skill Path	Description
Button	`./components/van-button/SKILL.md`	Buttons
Cell	`./components/van-cell/SKILL.md`	Cell items
CellGroup	`./components/van-cell-group/SKILL.md`	Cell groups
ConfigProvider	`./components/van-config-provider/SKILL.md`	Global config
Icon	`./components/van-icon/SKILL.md`	Icons
Image	`./components/van-image/SKILL.md`	Images
Layout	`./components/van-layout/SKILL.md`	Layout system
Popup	`./components/van-popup/SKILL.md`	Popup overlay
Toast	`./components/van-toast/SKILL.md`	Toast messages
Transition	`./components/van-transition/SKILL.md`	Transitions

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

Business Components (9)

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
Card	`./components/van-card/SKILL.md`	Card
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
Coupon	`./components/van-coupon/SKILL.md`	Coupon
SubmitBar	`./components/van-submit-bar/SKILL.md`	Submit bar

Composables Index (11)

Composable	Skill Path	Description
useCountDown	`./composables/use-count-down/SKILL.md`	Countdown timer
useCustomFieldValue	`./composables/use-custom-field-value/SKILL.md`	Custom field value
useEventListener	`./composables/use-event-listener/SKILL.md`	Event listener
useId	`./composables/use-id/SKILL.md`	Unique ID generator
useLazyRender	`./composables/use-lazy-render/SKILL.md`	Lazy rendering
usePageVisibility	`./composables/use-page-visibility/SKILL.md`	Page visibility
useRect	`./composables/use-rect/SKILL.md`	Element rect
useRelation	`./composables/use-relation/SKILL.md`	Component relation
useResetState	`./composables/use-reset-state/SKILL.md`	Reset state
useRtl	`./composables/use-rtl/SKILL.md`	RTL support
useWindowSize	`./composables/use-window-size/SKILL.md`	Window size

Usage Examples

Example 1: User asks about button implementation

User Request: "How do I create a primary button with loading state?"

Agent Action:

Identify intent: Component skill - Button
Locate skill: ./components/van-button/SKILL.md
Read skill content
Provide response with API reference and code example

Response:

<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>

Example 2: User asks about form validation

User Request: "How do I create a form with validation?"

Agent Action:

Identify intent: Component skill - Form
Locate skill: ./components/van-form/SKILL.md
Read skill content
Provide response with validation example

Response:

<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>

Example 3: User asks about infinite list

User Request: "How do I implement an infinite scroll list?"

Agent Action:

Identify intent: Component skill - List
Locate skill: ./components/van-list/SKILL.md
Read skill content
Provide response with list example

Response:

<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>

Example 4: User asks about countdown timer

User Request: "How do I implement a countdown timer?"

Agent Action:

Identify intent: Composable skill - useCountDown
Locate skill: ./composables/use-count-down/SKILL.md
Read skill content
Provide response with composable example

Response:

<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>

Example 5: User asks about theme customization

User Request: "How do I customize Vant theme colors?"

Agent Action:

Identify intent: Foundation skill - Theming
Locate skill: ./vant-theming/SKILL.md
Read skill content
Provide response with CSS variables example

Response:

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

Configuration Requirements

Prerequisites

Before using this skill library, ensure:

Vue 3.3+ is installed
Vant 4+ is installed
Node.js 18+ for development

Installation

npm install vant

TypeScript Support

Add to tsconfig.json:

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

Import Styles

import 'vant/lib/index.css'

On-Demand Import (Recommended)

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

Input Parameters

When invoking skills, consider these parameters:

Parameter	Type	Description	Required
component	string	Component name (e.g., "button", "form")	Yes
feature	string	Specific feature needed (e.g., "validation", "loading")	No
context	object	Additional context (framework, TypeScript usage)	No

Output Format

Each skill provides:

API Reference: Complete attributes, events, slots, exposes
Code Examples: Working code snippets
Best Practices: Recommended implementation patterns
Common Issues: Troubleshooting tips
Component Interactions: How to use with other components

Important Notes

1. Skill Priority

When multiple skills could apply, prioritize in this order:

Component-specific skills (most specific)
Composable skills (composition API utilities)
Foundation skills (configuration)

2. Cross-References

Many skills reference related skills. Always check:

Related components in the same category
Foundation skills for configuration
Composables for common patterns

3. Version Compatibility

This skill library is based on Vant 4+. Some features may not be available in earlier versions.

4. Naming Conventions

Component skills use van-{name} format (matches Vue component tags)
Composables use use-{name} format (matches Vue composition API naming)
Foundation skills use vant-{name} format

5. File Structure

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. Mobile-First Design

Vant is designed for mobile devices. Key considerations:

Touch-friendly interactions
Responsive layouts
Performance optimization for mobile
Native-like UI patterns

Best Practices for Agents

Always start with this file when user mentions Vant
Locate the specific skill based on user intent
Read the complete skill file before responding
Provide code examples from the skill documentation
Reference related skills when applicable
Include best practices from the skill content
Mention common issues if relevant to user's context
Consider mobile-first patterns in all recommendations

About this skill

When to Invoke

Skill Library Overview

How to Locate Skills

1. Component Skills (86 skills)

2. Composables Skills (11 skills)

3. Foundation Skills (6 skills)

Skill Invocation Guide

Step 1: Identify User Intent

Step 2: Locate the Skill File

Step 3: Read and Apply Skill Content

Component Skill Index

Basic Components (10)

Form Components (19)

Action Components (12)

Display Components (26)

Navigation Components (10)

Business Components (9)

Composables Index (11)

Usage Examples

Example 1: User asks about button implementation

Example 2: User asks about form validation

Example 3: User asks about infinite list

Example 4: User asks about countdown timer

Example 5: User asks about theme customization

Configuration Requirements

Prerequisites

Installation

TypeScript Support

Import Styles

On-Demand Import (Recommended)

Input Parameters

Output Format

Important Notes

1. Skill Priority

2. Cross-References

3. Version Compatibility

4. Naming Conventions

5. File Structure

6. Mobile-First Design

Best Practices for Agents

Related Resources