English | 中文

Arco Design React — AI Skills

A complete skill set for @arco-design/web-react, enabling AI agents to accurately use Arco Design when building React applications.

What is this?

A collection of skill files covering the Arco Design React component library:

• 70 components — API reference, code examples, and best practices for every component
• 5 overview guides — Installation, global config, theming, i18n, architecture patterns
• 5 pattern guides — Forms, tables, modals, controlled/uncontrolled, responsive design
• 2 hooks references — useVerificationCode, useWatermark

When writing code with Arco Design, AI agents automatically load the relevant skill to get accurate API info and best practices.

Directory Structure

skills/
└── arco-design/
    ├── SKILL.md                           # Entry point (auto-loaded by agents)
    └── references/                        # All referenced skill files
        ├── overview/                      # Setup & configuration
        │   ├── getting-started.md         #   Install, import, on-demand loading
        │   ├── config-provider.md         #   ConfigProvider global settings
        │   ├── theming.md                 #   CSS variables, Less, dark mode
        │   ├── internationalization.md    #   i18n locale switching
        │   └── architecture.md            #   Component patterns, controlled/uncontrolled, ref
        ├── components/                    # Component skills (by category)
        │   ├── general/                   #   Button, Icon, Typography, Link, Divider
        │   ├── layout/                    #   Grid, Layout, Space
        │   ├── navigation/               #   Menu, Tabs, Breadcrumb, Dropdown, Pagination...
        │   ├── data-entry/                #   Form, Input, Select, DatePicker, Upload...
        │   ├── data-display/              #   Table, List, Card, Tree, Tooltip...
        │   ├── feedback/                  #   Modal, Message, Notification, Drawer...
        │   └── other/                     #   Portal, Trigger, BackTop, Watermark, ResizeBox
        ├── patterns/                      # Common patterns & best practices
        │   ├── form-patterns.md           #   Dynamic forms, validation, async submit
        │   ├── table-patterns.md          #   Remote data, editable rows, virtual scroll
        │   ├── modal-patterns.md          #   Form-in-modal, confirmation, nested drawers
        │   ├── controlled-uncontrolled.md #   Controlled vs uncontrolled patterns
        │   └── responsive-design.md       #   Grid breakpoints, adaptive layout
        └── hooks/
            ├── use-verification-code.md   #   useVerificationCode hook
            └── use-watermark.md           #   useWatermark hook

Skill File Structure

Each component skill file follows a consistent format:

1. YAML Frontmatter — name, description (English, scenario-based), user-invocable: false
2. Basic Usage — Runnable TSX code examples
3. API Tables — Complete Props, Events, Methods reference
4. Common Patterns — Real-world code snippets
5. Best Practices — Usage tips and pitfalls to avoid

Entry Point

skills/arco-design/SKILL.md is the main entry skill, automatically loaded by agents. It contains:

• Critical conventions — Import patterns, controlled mode, sub-component access, Arco-specific differences from Ant Design
• Component index — Categorized tables with "Use for" descriptions for every component
• Pattern references — Links to detailed guides for complex scenarios

All sub-skills have user-invocable: false — agents load them automatically based on description matching.

Component Index

General

Component	File	Description
Button	button.md	Buttons, button groups, icon buttons, loading state
Icon	icon.md	Built-in icons, custom SVG, IconFont
Typography	typography.md	Headings, paragraphs, ellipsis, copyable/editable text
Link	link.md	Hyperlinks with icon and hover states
Divider	divider.md	Horizontal/vertical dividers with text

Layout

Component	File	Description
Grid	grid.md	24-column Row/Col grid, responsive breakpoints
Layout	layout.md	Page skeleton: Header, Sider, Content, Footer
Space	space.md	Consistent spacing between elements

Navigation

Component	File	Description
Menu	menu.md	Sidebar nav, top nav, sub-menus, collapsible
Tabs	tabs.md	Tab switching, card tabs, editable tabs
Dropdown	dropdown.md	Dropdown menus, context menus
Breadcrumb	breadcrumb.md	Navigation hierarchy path
Pagination	pagination.md	Page navigation, size changer
Steps	steps.md	Step-by-step workflows
Affix	affix.md	Pin element to viewport on scroll
Anchor	anchor.md	In-page anchor navigation
PageHeader	page-header.md	Page title + back button + actions

Data Entry

Component	File	Description
Form	form.md	Form building, validation, Form.List, useForm
Input	input.md	Text, password, search, textarea, prefix/suffix
Select	select.md	Dropdown select, multi-select, remote search
DatePicker	date-picker.md	Date/range picker, week/month/year (dayjs)
TimePicker	time-picker.md	Time selection, range, 12h format
InputNumber	input-number.md	Numeric input, stepper, precision
Checkbox	checkbox.md	Multi-select, select all, indeterminate
Radio	radio.md	Single select, button-style radio
Switch	switch.md	Toggle switch, loading, text labels
Slider	slider.md	Range slider, marks, vertical
Rate	rate.md	Star rating, half-star, custom characters
Cascader	cascader.md	Multi-level cascade selection
TreeSelect	tree-select.md	Select from tree structure
Transfer	transfer.md	Transfer items between two lists
AutoComplete	auto-complete.md	Input autocomplete, search suggestions
Mentions	mentions.md	@mention users/topics
InputTag	input-tag.md	Tag input, add/remove tags
Upload	upload.md	File upload, drag-and-drop, image preview
ColorPicker	color-picker.md	Color selection (hex/rgb/hsl)
VerificationCode	verification-code.md	OTP / verification code input

Data Display

Component	File	Description
Table	table.md	Data tables, sort, filter, pagination, virtual scroll
List	list.md	Data lists, paginated, virtual scroll
Card	card.md	Card containers, cover, grid, actions
Tree	tree.md	Tree structure, checkable, draggable
Tooltip	tooltip.md	Hover text hints
Popover	popover.md	Popup cards with rich content
Avatar	avatar.md	User avatars, avatar groups
Badge	badge.md	Numeric badges, status dots
Tag	tag.md	Status tags, closable, checkable
Carousel	carousel.md	Image carousels, slideshows
Collapse	collapse.md	Collapsible panels, accordion
Descriptions	descriptions.md	Key-value detail display
Calendar	calendar.md	Calendar view, event marking
Comment	comment.md	Comments, nested replies
Empty	empty.md	Empty state placeholder
Image	image.md	Image display, preview, lazy load
Statistic	statistic.md	Numeric display, countdown
Timeline	timeline.md	Timelines, activity feeds

Feedback

Component	File	Description
Modal	modal.md	Modal dialogs, Modal.confirm(), useModal
Message	message.md	Global toast messages
Notification	notification.md	Rich notification toasts
Drawer	drawer.md	Slide-out side panels
Alert	alert.md	Inline alert banners
Progress	progress.md	Linear/circular progress bars
Popconfirm	popconfirm.md	Confirmation popup
Result	result.md	Result pages (success/fail/404)
Skeleton	skeleton.md	Loading skeleton placeholders
Spin	spin.md	Loading spinners

Other

Component	File	Description
BackTop	back-top.md	Scroll-to-top button
Portal	portal.md	Render into different DOM node
ResizeBox	resize-box.md	Resizable containers, split panes
Trigger	trigger.md	Base popup positioning
Watermark	watermark.md	Text/image watermarks

Patterns & Hooks

Topic	File	Description
Form Patterns	form-patterns.md	Dynamic forms, linked validation, async submit
Table Patterns	table-patterns.md	Remote data, editable rows, virtual scroll
Modal Patterns	modal-patterns.md	Form-in-modal, confirmation flows, nested drawers
Controlled vs Uncontrolled	controlled-uncontrolled.md	Choosing value+onChange vs defaultValue
Responsive Design	responsive-design.md	Grid breakpoints, adaptive layout
useVerificationCode	use-verification-code.md	Custom OTP input hook
useWatermark	use-watermark.md	Dynamic canvas watermark hook