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 GitHubpartme-ai/full-stack-skills
development-skills-utils
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/partme-ai/full-stack-skills/blob/main/skills/vant-vue3/SKILL.md -a claude-code --skill vant-vue3Installation paths:
.claude/skills/vant-vue3/## 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