vant-ui-skills

Vant Skills Library

AI エージェントが Vant UI フレームワークを理解し、モバイルコンポーネントを効果的に利用できるよう設計された、包括的なスキルライブラリです。

呼び出すタイミング

次の場合にこのスキルを呼び出してください。

• ユーザーが Vant コンポーネントを実装したい場合
• ユーザーが Vant の設定やセットアップについて質問した場合
• ユーザーがモバイルアプリのテーマをカスタマイズしたい場合
• ユーザーが国際化（i18n）のサポートを必要としている場合
• ユーザーがモバイルファーストのデザインパターンについて質問した場合
• ユーザーが Vant コンポーネントで問題に遭遇した場合
• ユーザーがモバイル Web アプリケーションまたはハイブリッドアプリを開発している場合

スキルライブラリの概要

Vant は軽量で信頼性の高いモバイルコンポーネントライブラリです。このライブラリには、以下のカテゴリに分類された 102 個のスキル が含まれています。

カテゴリ	数	説明	パスの形式
基本コンポーネント	10	必須の UI コンポーネント	./components/van-{name}/SKILL.md
フォームコンポーネント	19	フォーム入力と検証	./components/van-{name}/SKILL.md
アクションコンポーネント	12	ユーザー操作用コンポーネント	./components/van-{name}/SKILL.md
表示コンポーネント	26	データ表示コンポーネント	./components/van-{name}/SKILL.md
ナビゲーションコンポーネント	10	ナビゲーションとルーティング	./components/van-{name}/SKILL.md
ビジネスコンポーネント	9	ビジネス固有のコンポーネント	./components/van-{name}/SKILL.md
コンポーザブル	11	Vue 3 Composition API ユーティリティ	./composables/use-{name}/SKILL.md
基盤スキル	5	コアのセットアップと設定	./vant-{name}/SKILL.md

スキルの場所を確認する方法

1. コンポーネントスキル（86 個）

すべてのコンポーネントスキルは van-{component-name} という命名規則に従い、components/ ディレクトリに配置されています。

パスの形式：

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

例：

• ボタン：./components/van-button/SKILL.md
• フォーム：./components/van-form/SKILL.md
• リスト：./components/van-list/SKILL.md
• ポップアップ：./components/van-popup/SKILL.md

2. コンポーザブルスキル（11 個）

コンポーザブルは、一般的なモバイルのパターン向けに Vue 3 Composition API ユーティリティを提供します。

パスの形式：

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

例：

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

3. 基盤スキル（6 個）

基盤スキルでは、コアのセットアップと設定について説明します。

スキル名	パス	説明
クイックスタート	./vant-quickstart/SKILL.md	インストールとセットアップ
テーマ設定	./vant-theming/SKILL.md	テーマのカスタマイズ
i18n	./vant-i18n/SKILL.md	国際化
高度な使い方	./vant-advanced-usage/SKILL.md	高度なパターン
コンポーネント	./vant-components/SKILL.md	コンポーネント概要のインデックス
コンポーザブル	./vant-composables/SKILL.md	コンポーザブル概要のインデックス

スキルの呼び出しガイド

ステップ 1：ユーザーの意図を特定する

ユーザーのリクエストを分析して、必要なスキルのカテゴリを判断します。

ユーザーリクエストのパターン	スキルカテゴリ	スキルの例
「ボタン／フォーム／リストを作成する…」	コンポーネント	van-button、van-form、van-list
「Vant のセットアップ方法」	基盤	vant-quickstart
「テーマカラーをカスタマイズする」	基盤	vant-theming
「多言語対応を追加する」	基盤	vant-i18n
「カウントダウンタイマーを使う」	コンポーザブル	use-count-down
「遅延読み込みを実装する」	コンポーザブル	use-lazy-render

ステップ 2：スキルファイルを見つける

上記のパスパターンを使って、適切なスキルファイルを見つけます。

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

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

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

ステップ 3：スキルの内容を読み、適用する

各スキルファイルには、以下の内容が含まれています。

• 呼び出すタイミング：スキルを使用する具体的な条件
• 機能：コンポーネントの機能とオプション
• API リファレンス：属性、イベント、スロット、公開項目
• 使用例：一般的なパターンのコードスニペット
• ベストプラクティス：推奨される実装ガイドライン

コンポーネントスキル一覧

基本コンポーネント（10）

コンポーネント	スキルパス	説明
ボタン	./components/van-button/SKILL.md	ボタン
セル	./components/van-cell/SKILL.md	セル項目
セルグループ	./components/van-cell-group/SKILL.md	セルグループ
ConfigProvider	./components/van-config-provider/SKILL.md	グローバル設定
アイコン	./components/van-icon/SKILL.md	アイコン
画像	./components/van-image/SKILL.md	画像
レイアウト	./components/van-layout/SKILL.md	レイアウトシステム
ポップアップ	./components/van-popup/SKILL.md	ポップアップオーバーレイ
トースト	./components/van-toast/SKILL.md	トーストメッセージ
トランジション	./components/van-transition/SKILL.md	トランジション

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

ビジネスコンポーネント（9）

コンポーネント	スキルパス	説明
AddressEdit	./components/van-address-edit/SKILL.md	住所エディター
AddressList	./components/van-address-list/SKILL.md	住所一覧
Area	./components/van-area/SKILL.md	エリア選択
Card	./components/van-card/SKILL.md	カード
ContactCard	./components/van-contact-card/SKILL.md	連絡先カード
ContactEdit	./components/van-contact-edit/SKILL.md	連絡先エディター
ContactList	./components/van-contact-list/SKILL.md	連絡先一覧
Coupon	./components/van-coupon/SKILL.md	クーポン
SubmitBar	./components/van-submit-bar/SKILL.md	送信バー

コンポーザブル一覧（11）

コンポーザブル	スキルパス	説明
useCountDown	./composables/use-count-down/SKILL.md	カウントダウンタイマー
useCustomFieldValue	./composables/use-custom-field-value/SKILL.md	カスタムフィールド値
useEventListener	./composables/use-event-listener/SKILL.md	イベントリスナー
useId	./composables/use-id/SKILL.md	一意の ID 生成
useLazyRender	./composables/use-lazy-render/SKILL.md	遅延レンダリング
usePageVisibility	./composables/use-page-visibility/SKILL.md	ページの表示状態
useRect	./composables/use-rect/SKILL.md	要素の矩形
useRelation	./composables/use-relation/SKILL.md	コンポーネント間の関係
useResetState	./composables/use-reset-state/SKILL.md	状態のリセット
useRtl	./composables/use-rtl/SKILL.md	RTL 対応
useWindowSize	./composables/use-window-size/SKILL.md	ウィンドウサイズ

使用例

例 1：ユーザーがボタンの実装について質問

ユーザーのリクエスト：「読み込み状態のプライマリボタンを作成するにはどうすればよいですか？」

エージェントの動作：

1. 意図を特定：コンポーネントスキル - Button
2. スキルを特定：./components/van-button/SKILL.md
3. スキルの内容を読む
4. API リファレンスとコード例を添えて回答する

回答：

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

例 2：ユーザーがフォームの検証について質問

ユーザーのリクエスト：「検証機能付きのフォームを作成するにはどうすればよいですか？」

エージェントの動作：

1. 意図を特定：コンポーネントスキル - Form
2. スキルを特定：./components/van-form/SKILL.md
3. スキルの内容を読む
4. 検証の例を添えて回答する

回答：

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

例 3：ユーザーが無限リストについて質問

ユーザーのリクエスト：「無限スクロールリストを実装するにはどうすればよいですか？」

エージェントの動作：

1. 意図を特定：コンポーネントスキル - List
2. スキルを特定：./components/van-list/SKILL.md
3. スキルの内容を読む
4. リストの例を添えて回答する

回答：

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

例 4：ユーザーがカウントダウンタイマーについて質問

ユーザーのリクエスト：「カウントダウンタイマーを実装するにはどうすればよいですか？」

エージェントの動作：

1. 意図を特定：コンポーザブルスキル - useCountDown
2. スキルを特定：./composables/use-count-down/SKILL.md
3. スキルの内容を読む
4. コンポーザブルの例を添えて回答する

回答：

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

例 5：ユーザーがテーマのカスタマイズについて質問

ユーザーのリクエスト：「Vant のテーマカラーをカスタマイズするにはどうすればよいですか？」

エージェントの動作：

1. 意図を特定：基盤スキル - Theming
2. スキルを特定：./vant-theming/SKILL.md
3. スキルの内容を読む
4. CSS 変数の例を添えて回答する

回答：

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

設定要件

前提条件

このスキルライブラリを使用する前に、以下を確認してください。

1. Vue 3.3+ がインストールされていること
2. Vant 4+ がインストールされていること
3. 開発用の Node.js 18+

インストール

npm install vant

TypeScript サポート

tsconfig.json に追加します：

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

インポート形式

import 'vant/lib/index.css'

必要に応じたインポート（推奨）

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

入力パラメーター

スキルを呼び出す際は、次のパラメーターを考慮してください：

パラメーター	型	説明	必須
component	string	コンポーネント名（例：「button」、「form」）	はい
feature	string	必要な特定の機能（例：「validation」、「loading」）	いいえ
context	object	追加のコンテキスト（フレームワーク、TypeScript の使用状況）	いいえ

出力形式

各スキルでは、次の内容を提供します：

1. API リファレンス：属性、イベント、スロット、公開項目の一覧
2. コード例：動作するコードスニペット
3. ベストプラクティス：推奨される実装パターン
4. よくある問題：トラブルシューティングのヒント
5. コンポーネント間の連携：他のコンポーネントとの使用方法

重要な注意事項

1. スキルの優先順位

複数のスキルが該当する場合は、次の順序で優先してください：

1. コンポーネント固有のスキル（最も具体的）
2. コンポーザブルスキル（Composition API のユーティリティ）
3. 基盤スキル（設定）

2. 相互参照

多くのスキルでは、関連するスキルを参照しています。必ず次を確認してください：

• 同じカテゴリーの関連コンポーネント
• 設定に関する基盤スキル
• 一般的なパターンに関するコンポーザブル

3. バージョン互換性

このスキルライブラリは Vant 4 以降をベースにしています。一部の機能は、それ以前のバージョンでは利用できない場合があります。

4. 命名規則

• コンポーネントスキルは van-{name} 形式です（Vue コンポーネントタグに対応）
• コンポーザブルは use-{name} 形式です（Vue Composition API の命名規則に対応）
• 基盤スキルは vant-{name} 形式です

5. ファイル構成

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. モバイルファースト設計

Vant はモバイルデバイス向けに設計されています。次の点を考慮してください：

• タッチしやすい操作性
• レスポンシブレイアウト
• モバイル向けのパフォーマンス最適化
• ネイティブアプリのような UI パターン

エージェント向けのベストプラクティス

1. ユーザーが Vant に言及したら、必ず最初にこのファイルを確認してください
2. ユーザーの意図に基づいて、該当するスキルを見つけてください
3. 回答する前に、スキルファイルを最後まで読んでください
4. スキルのドキュメントから、コード例を提示してください
5. 該当する場合は、関連するスキルを参照してください
6. スキルの内容から、ベストプラクティスを含めてください
7. ユーザーの状況に関連する場合は、よくある問題に触れてください
8. すべての推奨事項で、モバイルファーストのパターンを考慮してください

関連リソース

• Vant のドキュメント
• Vue 3 のドキュメント
• Vant の GitHub
• Vant アイコン