Get the FREE Ultimate OpenClaw Setup Guide →

ant-design-vue

Scanned
npx machina-cli add skill partme-ai/full-stack-skills/ant-design-vue --openclaw
Files (1)
SKILL.md
2.9 KB

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)

Source

git clone https://github.com/partme-ai/full-stack-skills/blob/main/skills/ant-design-vue/SKILL.mdView on GitHub

Overview

Provides comprehensive guidance for Ant Design Vue (AntDV) on Vue 3, covering installation, usage, API reference, templates, and all component categories. This skill helps engineers build enterprise-class UIs with consistency and speed.

How This Skill Works

The skill follows the official documentation structure: start with Getting Started/Installation, map user needs to component categories, consult API references, and apply templates for common patterns. It also covers advanced topics like Theme customization and internationalization to align with design tokens and localization needs.

When to Use It

  • When you mention Ant Design Vue, AntDV, or Ant Design of Vue
  • When building Vue 3 apps that use Ant Design components
  • When you need Button, Table, Form, Modal, or Menu usage in a Vue context
  • When asked about Ant Design Vue 4.x / AntDV 4
  • When requesting API references, config, or component implementation guidance

Quick Start

  1. Step 1: Install Ant Design Vue for Vue 3 and set up your project (Vite, main.ts, App.vue)
  2. Step 2: Import and register required components (Button, Table, Form, Modal) as needed
  3. Step 3: Explore API docs (api/components.md, api/config-provider.md) and apply templates for common patterns

Best Practices

  • Start with Getting Started/Installation to ensure a solid setup
  • Follow the 1:1 mapping of component categories to locate relevant examples
  • Leverage API references (api/components.md and api/config-provider.md) for props and events
  • Use Templates (templates/component-template.md) for patterns like Basic, Form, and Modal
  • Customize themes and localization using Theme Customization and Internationalization

Example Use Cases

  • Build a data-entry form using Form, Input, and validation with AntDV
  • Create an enterprise dashboard using Layout, Card, Table, and Navigation components
  • Implement a modal workflow with Modal and Drawer components
  • Customize the app theme via Design Tokens in Theme Customization
  • Internationalize UI using the Internationalization guidance

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗