playbooks

home / skills / partme-ai / full-stack-skills / ant-design-vue

ant-design-vue skill

/skills/ant-design-vue

This skill helps you learn and implement Ant Design Vue 3 components efficiently with comprehensive guidance on setup, API usage, and theming.

npx playbooks add skill partme-ai/full-stack-skills --skill ant-design-vue

Review the files below or copy the command above to add this skill to your agents.

Files (17)
SKILL.md
2.9 KB
---
name: ant-design-vue
description: Provides comprehensive guidance for Ant Design Vue (AntDV) component library for Vue 3. Covers installation, usage, API reference, templates, and all component categories. Use when building enterprise-class UI with Vue 3 and Ant Design.
license: Complete terms in LICENSE.txt
---

## When to use this skill

**ALWAYS use this skill when the user mentions:**
- "Ant Design Vue", "AntDV", "Ant Design of Vue"
- Building Vue 3 applications with Ant Design
- Using UI components like Button, Table, Form, Modal, Menu in a Vue context
- "Ant Design Vue 4.x", "AntDV 4"
- Requests to "implement a [component] with Ant Design Vue"
- Requests for Ant Design Vue API or configuration

## How to use this skill

This skill is organized to match the Ant Design Vue official documentation structure.

### 1. Identify the User's Need

- **Getting Started/Setup** → `examples/getting-started/installation.md` or `templates/project-setup.md`
- **Component Usage** → See Component Categories below
- **API Reference** → `api/components.md` or `api/config-provider.md`
- **Theme/i18n** → `examples/advanced/`
- **Templates** → `templates/component-template.md`

### 2. Component Categories (One-to-One Mapping)

**通用 (General)**
- **Contains**: Button, Icon, Typography
- **File**: `examples/components/general.md`

**布局 (Layout)**
- **Contains**: Divider, Grid, Layout, Space
- **File**: `examples/components/layout.md`

**导航 (Navigation)**
- **Contains**: Anchor, Breadcrumb, Dropdown, Menu, Pagination, Steps
- **File**: `examples/components/navigation.md`

**数据录入 (Data Entry)**
- **Contains**: AutoComplete, Cascader, Checkbox, DatePicker, Form, Input, InputNumber, Mentions, Radio, Rate, Select, Slider, Switch, TimePicker, Transfer, TreeSelect, Upload
- **File**: `examples/components/data-entry.md`

**数据展示 (Data Display)**
- **Contains**: Avatar, Badge, Calendar, Card, Carousel, Collapse, Descriptions, Empty, Image, List, Popover, QRCode, Segmented, Statistic, Table, Tabs, Tag, Timeline, Tooltip, Tour, Tree
- **File**: `examples/components/data-display.md`

**反馈 (Feedback)**
- **Contains**: Alert, Drawer, Message, Modal, Notification, Popconfirm, Progress, Result, Skeleton, Spin, Watermark
- **File**: `examples/components/feedback.md`

**其他 (Other)**
- **Contains**: Affix, App, BackTop, ConfigProvider, FloatButton
- **File**: `examples/components/other.md`

### 3. API & Advanced Topics

- **Components API**: `api/components.md` (Props, Events for common components)
- **ConfigProvider API**: `api/config-provider.md` (Global config, Theme)
- **Theme Customization**: `examples/advanced/theme-customization.md` (Design Token)
- **Internationalization**: `examples/advanced/internationalization.md`

### 4. Templates

- **Component Templates**: `templates/component-template.md` (Basic, Form, Modal patterns)
- **Project Setup**: `templates/project-setup.md` (Vite, Main.ts, App.vue setup)

Overview

This skill provides comprehensive guidance for using Ant Design Vue (AntDV) with Vue 3. It covers installation, component usage, API details, theming, internationalization, and ready-made templates for common UI patterns. Use it to build enterprise-grade interfaces quickly and consistently.

How this skill works

The skill maps typical developer needs to focused guidance: setup and project scaffolding, per-component usage and API reference, theming and i18n, plus component and project templates. It inspects the requested component or topic and returns concise usage examples, prop/event notes, common patterns, and troubleshooting tips. It also recommends layout and composition patterns for enterprise scenarios.

When to use it

  • When starting a Vue 3 project that will use Ant Design Vue components
  • When you need usage examples or API details for a specific AntDV component (Button, Table, Form, Modal, etc.)
  • When configuring global options like theme tokens or ConfigProvider
  • When implementing common UI patterns: forms, data tables, modals, dashboards
  • When you need templates or project setup guidance for Vite / main.ts / App.vue

Best practices

  • Prefer composition API patterns with AntDV for Vue 3 to keep logic modular
  • Use ConfigProvider to centralize theme, locale, and component defaults for large apps
  • Compose small components (forms, inputs) and reuse templates for consistency
  • Follow accessibility patterns: proper labels, keyboard focus, and ARIA where applicable
  • Optimize tables and lists with pagination, virtual scroll, and proper keying

Example use cases

  • Set up a new Vue 3 + Ant Design Vue project with Vite and global theming
  • Implement a complex form: validation, dynamic fields, and modal submission
  • Build a data-heavy admin table with sorting, filters, pagination, and row actions
  • Create a multilingual dashboard using ConfigProvider locale and token-based theming
  • Implement reusable component templates: modal form, CRUD table, and card list

FAQ

Does this skill support Ant Design Vue 4.x and Vue 3?

Yes. Guidance is focused on AntDV 4.x patterns and Vue 3 (Composition API) usage.

Will I get prop and event details for components?

Yes. The skill provides concise API notes for props, events, slots, and common usage patterns for each component.