Back to Skills

vant-vue3

verified

Provides comprehensive guidance for Vant Vue 3 mobile component library including mobile components, themes, and best practices. Use when the user asks about Vant, needs to build mobile applications with Vue 3, or implement mobile UI components.

View on GitHub

Marketplace

full-stack-skills

partme-ai/full-stack-skills

Plugin

development-skills-utils

Repository

partme-ai/full-stack-skills
39stars

skills/vant-vue3/SKILL.md

Last Verified

February 1, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/partme-ai/full-stack-skills/blob/main/skills/vant-vue3/SKILL.md -a claude-code --skill vant-vue3

Installation paths:

Claude
.claude/skills/vant-vue3/
Powered by add-skill CLI

Instructions

## When to use this skill

Use this skill whenever the user wants to:
- Build mobile Vue 3 applications with Vant components
- Use Vant UI components (Button, Cell, Form, Dialog, Toast, etc.)
- Create mobile-friendly interfaces
- Customize Vant theme
- Implement internationalization with Vant
- Use Vant with TypeScript
- Handle mobile gestures and interactions
- Implement mobile navigation patterns
- Use mobile form components
- Create mobile data display components

## How to use this skill

This skill is organized to match the Vant Vue 3.0 official documentation structure (https://vant-ui.github.io/vant/#/zh-CN). When working with Vant:

1. **Identify the topic** from the user's request:
   - Getting started/快速开始 → `examples/getting-started/installation.md` or `examples/getting-started/basic-usage.md`
   - Button/按钮 → `examples/components/button.md`
   - Cell/单元格 → `examples/components/cell.md`
   - Form/表单 → `examples/components/form.md`
   - Dialog/对话框 → `examples/components/dialog.md`
   - Toast/提示 → `examples/components/toast.md`
   - Popup/弹出层 → `examples/components/popup.md`
   - Theme/主题 → `examples/advanced/theme-customization.md`

2. **Load the appropriate example file** from the `examples/` directory:

   **Getting Started (快速开始) - `examples/getting-started/`**:
   - `examples/getting-started/installation.md` - Installing Vant and basic setup
   - `examples/getting-started/basic-usage.md` - Basic component usage

   **Components (组件) - `examples/components/`**:
   - `examples/components/button.md` - Button component
   - `examples/components/cell.md` - Cell component
   - `examples/components/icon.md` - Icon component
   - `examples/components/image.md` - Image component
   - `examples/components/popup.md` - Popup component
   - `examples/components/toast.md` - Toast component
   - `examples/components/dialog.md` - Dialog component
   - `examples/components/form.md` - Form component
   - `examples/components/field.md` - Field component
   - `examples/com

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
6332 chars