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:

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

Step 1: Identify User Intent

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

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)

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

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

Agent Action:

1. Identify intent: Component skill - Button
2. Locate skill: ./components/van-button/SKILL.md
3. Read skill content
4. 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:

1. Identify intent: Component skill - Form
2. Locate skill: ./components/van-form/SKILL.md
3. Read skill content
4. 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 => {
  console.log('submit', values)
}
</script>

Example 3: User asks about infinite list

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

Agent Action:

1. Identify intent: Component skill - List
2. Locate skill: ./components/van-list/SKILL.md
3. Read skill content
4. 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 => {
  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:

1. Identify intent: Composable skill - useCountDown
2. Locate skill: ./composables/use-count-down/SKILL.md
3. Read skill content
4. 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:

1. Identify intent: Foundation skill - Theming
2. Locate skill: ./vant-theming/SKILL.md
3. Read skill content
4. 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:

1. Vue 3.3+ is installed
2. Vant 4+ is installed
3. 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:

Output Format

Each skill provides:

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

Important Notes

1. Skill Priority

When multiple skills could apply, prioritize in this order:

1. Component-specific skills (most specific)
2. Composable skills (composition API utilities)
3. 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

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

Related Resources

• Vant Documentation
• Vue 3 Documentation
• Vant GitHub
• Vant Icons