Vant Ui Skills

Vant Action Bar Component

Action bar component used to provide convenient interaction for page-related operations, commonly used at the bottom of product detail pages.

When to Invoke

Invoke this skill when:

• User needs to implement a bottom action bar with icons and buttons
• User wants to create e-commerce product detail page actions
• User needs to add shopping cart, favorite, and buy buttons
• User wants to show badges on action bar icons
• User asks about action bar layout or safe area adaptation

Features

• Icon Buttons: Support multiple icon buttons with text and badges
• Action Buttons: Support primary, warning, and danger type buttons
• Badge Support: Show dot or number badges on icons
• Custom Colors: Customize icon and button colors
• Safe Area: Automatic bottom safe area adaptation
• Placeholder: Optional placeholder element for fixed positioning
• Router Support: Navigate to routes or URLs

API Reference

ActionBar Props

ActionBarIcon Props

ActionBarButton Props

ActionBarIcon Slots

ActionBarButton Slots

Types

import type {
  ActionBarProps,
  ActionBarIconProps,
  ActionBarButtonProps,
} from 'vant';

Usage Examples

Basic Usage

<template>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="Chat" @click="onClickIcon" />
    <van-action-bar-icon icon="cart-o" text="Cart" @click="onClickIcon" />
    <van-action-bar-icon icon="shop-o" text="Shop" @click="onClickIcon" />
    <van-action-bar-button type="danger" text="Buy Now" @click="onClickButton" />
  </van-action-bar>
</template>

<script setup>
import { showToast } from 'vant';

const onClickIcon = () => showToast('Click Icon');
const onClickButton = () => showToast('Click Button');
</script>

Icon Badge

<template>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="Chat" dot />
    <van-action-bar-icon icon="cart-o" text="Cart" badge="5" />
    <van-action-bar-icon icon="shop-o" text="Shop" badge="12" />
    <van-action-bar-button type="warning" text="Add to Cart" />
    <van-action-bar-button type="danger" text="Buy Now" />
  </van-action-bar>
</template>

Custom Icon Color

<template>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="Chat" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="Cart" />
    <van-action-bar-icon icon="star" text="Collected" color="#ff5000" />
    <van-action-bar-button type="warning" text="Add to Cart" />
    <van-action-bar-button type="danger" text="Buy Now" />
  </van-action-bar>
</template>

Custom Button Color

<template>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="Chat" />
    <van-action-bar-icon icon="shop-o" text="Shop" />
    <van-action-bar-button color="#be99ff" type="warning" text="Add to Cart" />
    <van-action-bar-button color="#7232dd" type="danger" text="Buy Now" />
  </van-action-bar>
</template>

With Loading State

<template>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="Chat" />
    <van-action-bar-icon icon="cart-o" text="Cart" badge="5" />
    <van-action-bar-button 
      type="danger" 
      text="Buy Now" 
      :loading="loading"
      @click="handleBuy"
    />
  </van-action-bar>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';

const loading = ref(false);

const handleBuy = async () => {
  loading.value = true;
  try {
    await new Promise(resolve => setTimeout(resolve, 2000));
    showToast('Purchase successful');
  } finally {
    loading.value = false;
  }
};
</script>

Best Practices

1. Use appropriate button types: Use danger for primary actions like "Buy Now", warning for secondary actions like "Add to Cart" 2. Show badges for cart items: Display the cart item count using the badge prop 3. Limit icon buttons: Keep the number of icon buttons to 3-4 for better UX 4. Safe area adaptation: Enable safe-area-inset-bottom for iOS devices 5. Loading states: Use loading prop during async operations to prevent duplicate submissions 6. Custom colors: Use brand colors for buttons to match your application theme

Vant UI Skills Library

一个全面的 Vant UI 移动端组件库技能库，专为 AI 智能体理解和运用 Vant 组件而设计。

[English Version](./README.md)

***

📖 简介

Vant UI 是一个轻量、可靠的移动端组件库，于 2017 年开源，目前是 Vue 移动端组件库中 Star 数量最高的项目。

本技能库为全部 Vant 技能提供结构化文档和使用指南，包括：

• 86 个组件技能 - 单个组件文档及 API 参考
• 11 个 Composable 技能 - Vue 3 Composition API 工具函数
• 6 个基础技能 - 快速开始、主题定制、国际化、组件总览、Composables 总览、高级用法

✨ 功能特性

• 完整的 API 文档 - 包含属性、事件、方法和插槽
• 使用示例 - 基础和进阶用法模式
• 最佳实践 - 推荐的实现指南
• 移动端优化 - 针对移动端场景的最佳实践
• Vue 3 Composition API - 完整的 Composables 支持
• 跨平台兼容 - 适用于任何智能体环境

📁 目录结构

vant-skills/
├── components/                    # 86 个组件技能
│   ├── van-button/
│   ├── van-cell/
│   ├── van-form/
│   ├── van-list/
│   ├── van-popup/
│   ├── van-swipe/
│   └── ...
├── composables/                   # 11 个 组合式 API 技能
│   ├── use-click-away/
│   ├── use-count-down/
│   ├── use-rect/
│   ├── use-window-size/
│   └── ...
├── vant-components/               # 组件总览索引
├── vant-composables/              # 组合式 API 总览索引
├── vant-quickstart/               # 快速开始指南
├── vant-theming/                  # 主题定制
├── vant-i18n/                     # 国际化
├── vant-advanced-usage/           # 进阶用法
├── AGENTS.md                      # 智能体文档
├── SKILL.md                       # 主技能入口
├── README.md                      # 英文说明
└── README_CN.md                   # 中文说明

🚀 安装

前置条件

• Node.js 16+
• Vue 3.2+
• Vant 4.0+

安装步骤

# 安装 Vant
npm install vant

# 或使用 yarn
yarn add vant

# 或使用 pnpm
pnpm add vant

安装 Vant UI Skills 技能库

将 Vant UI Skills 技能库添加到您的项目中，以便 AI 智能体能够理解和使用 Vant 组件：

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

📚 使用方法

适用于 AI 智能体

每个技能文件遵循统一的格式：

---
name: "van-button"
description: "按钮组件描述..."
metadata:
  author: jiaiyan
  version: "1.0.0"
---

技能分类

快速引用

# 访问组件技能
./components/van-{name}/SKILL.md

# 访问 Composable 技能
./composables/use-{name}/SKILL.md

# 访问基础技能
./vant-{name}/SKILL.md

🔧 组件示例

基础用法

<template>
  <van-button type="primary">主要按钮</van-button>
  <van-field v-model="value" placeholder="请输入内容" />
  <van-cell-group>
    <van-cell title="单元格" value="内容" />
    <van-cell title="单元格" value="内容" is-link />
  </van-cell-group>
</template>

带验证的表单

<template>
  <van-form @submit="onSubmit">
    <van-field
      v-model="username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

列表加载

<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @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>

Composable 使用示例

<template>
  <div>
    <p>窗口尺寸: {{ width }} x {{ height }}</p>
    <button @click="toggle()">{{ show ? '隐藏' : '显示' }}</button>
  </div>
</template>

<script setup>
import { useWindowSize, useToggle } from '@vant/use';

const { width, height } = useWindowSize();
const [show, toggle] = useToggle();
</script>

📊 技能统计

🤝 贡献指南

欢迎参与贡献！请遵循以下步骤：

1. Fork 本仓库 2. 创建特性分支 (git checkout -b feature/new-skill) 3. 提交更改 (git commit -m 'Add new skill') 4. 推送到分支 (git push origin feature/new-skill) 5. 创建 Pull Request

技能文件规范

每个技能文件应包含：

• name: 唯一标识符（如 van-button）
• description: 清晰的描述及调用条件
• metadata: 作者和版本信息
• 内容章节:
• 使用场景 (When to Invoke)
• 基础用法 (Basic Usage)
• API 参考 (API Reference)
• 常见模式 (Common Patterns)
• 最佳实践 (Best Practices)

📋 技能文件模板

---
name: "van-{component-name}"
description: "组件描述。当用户需要...时调用"
metadata:
  author: your-name
  version: "1.0.0"
---

# 组件名称

组件描述和概述。

## When to Invoke

- 场景 1
- 场景 2

## Basic Usage

\`\`\`vue
<template>
  <van-component />
</template>
\`\`\`

## API Reference

### Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| prop | 描述 | type | default |

### Events

| Name | Description | Parameters |
|------|-------------|------------|
| event | 描述 | params |

### Slots

| Name | Description |
|------|-------------|
| slot | 描述 |

## Best Practices

1. 实践 1
2. 实践 2

📄 许可证

MIT License

Copyright (c) 2024 Vant UI Skills Library

特此免费授予任何获得本软件副本和相关文档文件（"软件"）的人不受限制地处置该软件的权利，包括不受限制地使用、复制、修改、合并、发布、分发、再授权和/或出售该软件副本，以及再授权以配备了上述权利的人员使用该软件。

上述版权声明和本许可声明应包含在该软件的所有副本或实质性成分中。

本软件按"原样"提供，不提供任何形式的担保，包括但不限于适销性、特定用途适用性和非侵权性担保。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，无论这些追责基于合同、侵权或其他行为，还是产生于、源于或有关于本软件以及本软件的使用或其他处置。

🔗 相关资源

• Vant 官方文档
• Vue 3 官方文档
• Vant GitHub
• Vant 示例项目

📞 支持

如有问题和需要支持：

• 在 GitHub 上提交 Issue
• 查阅官方文档
• 加入 Vant 社区

Vant UI Skills Library

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

[中文版本](./README_CN.md)

***

📖 Introduction

Vant UI is a lightweight, reliable mobile component library. This skill library provides structured documentation and usage guidelines for Vant components, including:

• 86 Component Skills - Individual component documentation with API reference
• 11 Composable Skills - Vue 3 Composition API utilities
• 6 Foundation Skills - Quickstart, Theming, i18n, Components Overview, Composables Overview, Advanced Usage

Vant is specifically designed for mobile web applications, offering excellent performance and user experience on mobile devices.

✨ Features

• Complete API Documentation - Props, events, slots, and methods for each component
• Mobile-First Design - Optimized for mobile web applications
• Usage Examples - Basic and advanced usage patterns
• Best Practices - Recommended implementation guidelines for mobile scenarios
• Vue 3 Composition API - Full Composables support
• Cross-Platform Compatibility - Works in any agent environment
• Lightweight - Minimal bundle size with tree-shaking support

📁 Directory Structure

vant-skills/
├── components/                    # 86 Component Skills
│   ├── van-button/
│   ├── van-cell/
│   ├── van-field/
│   ├── van-form/
│   ├── van-nav-bar/
│   ├── van-tabbar/
│   ├── van-toast/
│   ├── van-dialog/
│   └── ...
├── composables/                   # 11 Composable API Skills
│   ├── use-click-away/
│   ├── use-count-down/
│   ├── use-rect/
│   ├── use-window-size/
│   └── ...
├── vant-components/               # Component Overview Index
├── vant-composables/              # Composables API Overview Index
├── vant-quickstart/               # Quick Start Guide
├── vant-theming/                  # Theme Customization
├── vant-i18n/                     # Internationalization
├── vant-advanced-usage/           # Advanced Usage
├── AGENTS.md                      # Agents Documentation
├── SKILL.md                       # Main Skill Entry
├── README.md                      # English README
└── README_CN.md                   # Chinese README

🚀 Installation

Prerequisites

• Node.js 16+
• Vue 3.2+
• Vant 4.0+

Setup

# Install Vant
npm install vant

# Install icons (optional)
npm install @vant/icons

Install Vant UI Skills Library

Add the Vant UI Skills library to your project, enabling AI agents to understand and utilize Vant components:

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

📚 Usage

For AI Agents

Each skill file follows a consistent format:

---
name: "van-button"
description: "Button component description..."
metadata:
  author: jiaiyan
  version: "1.0.0"
---

Skill Categories

Quick Reference

# Access component skill
./components/van-{name}/SKILL.md

# Access composable skill
./composables/use-{name}/SKILL.md

# Access foundation skill
./vant-{name}/SKILL.md

🔧 Component Examples

Basic Usage

<template>
  <van-button type="primary">Primary Button</van-button>
  <van-field v-model="value" placeholder="Please input" />
  <van-cell-group>
    <van-cell title="Cell" value="Content" />
  </van-cell-group>
</template>

Form with Validation

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

Navigation Bar

<template>
  <van-nav-bar
    title="Title"
    left-text="Back"
    left-arrow
    @click-left="onClickLeft"
  />
</template>

<script setup>
import { showToast } from 'vant';

const onClickLeft = () => {
  showToast('Back');
};
</script>

Toast and Dialog

<template>
  <van-button @click="showToast">Show Toast</van-button>
  <van-button @click="showDialog">Show Dialog</van-button>
</template>

<script setup>
import { showToast, showDialog } from 'vant';

const showToast = () => {
  showToast('This is a toast message');
};

const showDialog = () => {
  showDialog({
    title: 'Title',
    message: 'This is a dialog message',
  });
};
</script>

Composable Usage

<template>
  <div>
    <p>Window size: {{ width }} x {{ height }}</p>
    <button @click="toggle()">{{ show ? 'Hide' : 'Show' }}</button>
  </div>
</template>

<script setup>
import { useWindowSize, useToggle } from '@vant/use';

const { width, height } = useWindowSize();
const [show, toggle] = useToggle();
</script>

📊 Skills Statistics

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository 2. Create a feature branch (git checkout -b feature/new-skill) 3. Commit your changes (git commit -m 'Add new skill') 4. Push to the branch (git push origin feature/new-skill) 5. Open a Pull Request

Skill File Guidelines

Each skill file should include:

• name: Unique identifier (e.g., van-button)
• description: Clear description with invocation criteria
• metadata: Author and version information
• Content Sections:
• When to Invoke
• Basic Usage
• API Reference
• Common Patterns
• Best Practices

📋 Skill File Template

---
name: "van-{component-name}"
description: "Component description. Invoke when user needs to..."
metadata:
  author: your-name
  version: "1.0.0"
---

# Component Name

Component description and overview.

## When to Invoke

- Use case 1
- Use case 2

## Basic Usage

\`\`\`vue
<template>
  <van-component />
</template>
\`\`\`

## API Reference

### Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| prop | Description | type | default |

### Events

| Name | Description | Parameters |
|------|-------------|------------|
| event | Description | params |

### Slots

| Name | Description |
|------|-------------|
| slot | Description |

## Best Practices

1. Practice 1
2. Practice 2

📄 License

MIT License

Copyright (c) 2024 Vant UI Skills Library

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

🔗 Related Resources

• Vant Documentation
• Vue 3 Documentation
• Vant GitHub
• Vant Demo

📞 Support

For questions and support:

• Open an issue on GitHub
• Check the documentation
• Join the Vant community