⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

Arco Design React UI 组件库 - 字节跳动企业级前端开发框架 | 中文文档与最佳实践

arco-design by arco-design/arco-design-skill

53 周安装量

12 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/arco-design/arco-design-skill --skill arco-design

UI组件库开发 React

🇨🇳中文介绍

Arco Design React — 技能参考

@arco-design/web-react — 字节跳动出品的企业级 React UI 组件库。

关键约定

编写 Arco Design 代码时请始终遵循以下规则：

导入 : import { Button, Table, Form } from '@arco-design/web-react' — 始终从包根目录导入，切勿从子路径如 @arco-design/web-react/es/Button 导入
图标 : import { IconSearch, IconPlus } from '@arco-design/web-react/icon'
类型 : import type { TableProps, FormInstance } from '@arco-design/web-react'
样式 : import '@arco-design/web-react/dist/css/arco.css' (完整) 或配置按需加载

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

967,300 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

302,300 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

242,900 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

172,600 周安装

日期库 : dayjs (非 moment.js)

受控模式 : value + onChange; 非受控 : defaultValue

子组件 : 通过 Component.Sub 模式访问 — Form.Item, Select.Option, Menu.SubMenu, Input.Search, Input.TextArea, Grid.Row, Grid.Col

Form.Item 使用 field 属性 (不像 Ant Design 那样使用 name)

Form 中的 Switch 需要 triggerPropName="checked"

加载下方相关文件以获取完整的 API 参考、代码示例和最佳实践。

主题	文件	何时使用
安装	getting-started.md	安装 `@arco-design/web-react`，导入样式，配置 tree-shaking 或 babel-plugin-import
全局配置	config-provider.md	通过 `<ConfigProvider>` 设置全局组件尺寸、主题、语言环境、默认属性
主题定制	theming.md	自定义主题颜色、CSS 变量覆盖、Less 变量、深色模式切换
国际化	internationalization.md	切换语言、添加语言包、自定义本地化文本
架构	architecture.md	理解受控/非受控模式、属性合并、ref 转发、CSS 命名

组件	文件	用途
按钮	button.md	按钮、按钮组、图标按钮、加载状态
图标	icon.md	内置图标 (`IconXxx`)、自定义 SVG 图标、IconFont
排版	typography.md	标题、段落、文本省略、可复制/可编辑文本
链接	link.md	带图标的超链接、悬停状态
分割线	divider.md	水平/垂直分割线、带文本的分割线

组件	文件	用途
栅格	grid.md	24 列 `Row`/`Col` 栅格系统、响应式断点 (xs/sm/md/lg/xl/xxl)、间距
布局	layout.md	页面骨架：`Header`、`Sider`、`Content`、`Footer`、可折叠侧边栏
间距	space.md	元素间一致的间距、水平/垂直、换行

组件	文件	用途
菜单	menu.md	侧边栏导航、顶部导航栏、子菜单、菜单组、可折叠
标签页	tabs.md	标签页切换、卡片式标签页、可编辑/可关闭标签页、额外内容
下拉菜单	dropdown.md	下拉菜单、上下文菜单、按钮下拉菜单
面包屑	breadcrumb.md	导航层级路径、路由面包屑
分页	pagination.md	页面导航、尺寸选择器、简洁/迷你模式
步骤条	steps.md	分步工作流、垂直/点状步骤、错误状态
固钉	affix.md	滚动时将元素固定在视口中
锚点	anchor.md	页面内锚点导航、滚动到指定区域
页头	page-header.md	页面标题 + 返回按钮 + 面包屑 + 操作项

组件	文件	用途
表单	form.md	表单构建、验证、`Form.Item` (使用 `field` 属性)、`Form.List`、`useForm` 钩子
输入框	input.md	文本输入框、`Input.Password`、`Input.Search`、`Input.TextArea`、前缀/后缀
选择器	select.md	下拉选择器、多选、搜索、远程搜索、`Select.Option`、虚拟滚动
日期选择器	date-picker.md	日期/范围选择器 (`RangePicker`)、周/月/季度/年、禁用日期 (dayjs)
时间选择器	time-picker.md	时间选择、范围选择、12小时制、步进间隔
数字输入框	input-number.md	数字输入框、步进器、精度、最小值/最大值
复选框	checkbox.md	多选、`Checkbox.Group`、全选 / 半选
单选框	radio.md	单选、`Radio.Group`、按钮式单选框
开关	switch.md	切换开关、加载状态、文本标签 (在 Form 中使用 `triggerPropName="checked"`)
滑动输入条	slider.md	范围滑块、标记点、垂直方向、步进、工具提示格式
评分	rate.md	星级评分、半星、只读、自定义字符
级联选择器	cascader.md	多级级联选择 (省/市)、远程加载、搜索
树选择器	tree-select.md	从树结构中选择、可勾选、可搜索、异步加载
穿梭框	transfer.md	在两个列表间转移项目、搜索、简洁模式
自动完成	auto-complete.md	输入框自动完成、搜索建议
提及	mentions.md	在文本输入框中 @提及用户/主题
标签输入框	input-tag.md	标签输入框、添加/移除标签、拖拽排序
上传	upload.md	文件上传、拖拽上传、带预览的图片上传
颜色选择器	color-picker.md	颜色选择 (hex/rgb/hsl)
验证码	verification-code.md	OTP / 验证码输入框

组件	文件	用途
表格	table.md	数据表格、排序、筛选、分页、固定列/表头、虚拟滚动、行选择、可展开行
列表	list.md	数据列表、分页、虚拟滚动、网格布局
卡片	card.md	卡片容器、封面、`Card.Grid`、`Card.Meta`、操作项
树	tree.md	树形结构、可勾选、可拖拽、虚拟滚动、异步加载
文字提示	tooltip.md	悬停文字提示 (富内容请使用 Popover)
气泡卡片	popover.md	点击/悬停弹出富内容卡片
头像	avatar.md	用户头像、头像组、图片/文本/图标头像
徽标数	badge.md	数字徽标、状态点、计数指示器
标签	tag.md	状态标签、可关闭、`Tag.CheckableTag`、彩色标签
走马灯	carousel.md	图片轮播、幻灯片
折叠面板	collapse.md	可折叠面板、手风琴模式、常见问题解答
描述列表	descriptions.md	键值对详情展示、带边框、响应式列数
日历	calendar.md	日历视图、事件标记
评论	comment.md	评论展示、嵌套回复、操作项
空状态	empty.md	空状态占位符
图片	image.md	图片展示、预览、懒加载、`Image.PreviewGroup`
统计数值	statistic.md	数值展示、倒计时、趋势指示器
时间轴	timeline.md	时间轴、活动流、变更日志

组件	文件	用途
模态框	modal.md	模态对话框、`Modal.confirm()`、`useModal` 钩子、表单内嵌模态框
全局提示	message.md	全局轻提示：`Message.success()`、`error()`、`warning()`、`loading()`
通知提醒框	notification.md	带标题 + 内容 + 操作项的富通知提醒框
抽屉	drawer.md	侧滑面板、表单编辑、嵌套抽屉
警告提示	alert.md	内联警告横幅 (信息/成功/警告/错误)、横幅模式
进度条	progress.md	线性/环形进度条、步骤进度
气泡确认框	popconfirm.md	删除/提交前的轻量级确认气泡框
结果页	result.md	结果页面 (成功/失败/403/404/500)
骨架屏	skeleton.md	带动画的加载骨架屏占位符
加载中	spin.md	包裹内容的加载旋转器

组件	文件	用途
回到顶部	back-top.md	滚动到顶部按钮
传送门	portal.md	将子节点渲染到不同的 DOM 节点
缩放框	resize-box.md	可调整大小的容器、分割面板
触发器	trigger.md	基础弹层定位 (Tooltip/Popover/Dropdown 的底层实现)
水印	watermark.md	覆盖在页面内容上的文本/图片水印

模式与最佳实践

主题	文件	何时使用
表单模式	form-patterns.md	动态表单、联动验证、嵌套表单、异步提交、复杂布局
表格模式	table-patterns.md	远程数据、可编辑行、虚拟滚动大数据量、自定义筛选器
模态框模式	modal-patterns.md	表单内嵌模态框、确认流程、嵌套抽屉、全局消息
受控与非受控	controlled-uncontrolled.md	选择 `value`+`onChange` 还是 `defaultValue` 模式
响应式设计	responsive-design.md	栅格断点、自适应布局、移动端友好设计

从 @arco-design/web-react/hooks 导入。仅当需要完全自定义 UI 时才使用这些无头钩子 — 否则请优先使用相应的组件。

钩子	文件	用途
useVerificationCode	use-verification-code.md	自定义 OTP 输入框，支持焦点、粘贴、键盘导航
useWatermark	use-watermark.md	动态画布水印，带防篡改保护

🇺🇸English

Arco Design React — Skills Reference

@arco-design/web-react — An enterprise-level React UI component library by ByteDance.

Critical Conventions

Always follow these rules when writing Arco Design code:

Imports : import { Button, Table, Form } from '@arco-design/web-react' — always from the package root, never from sub-paths like @arco-design/web-react/es/Button
Icons : import { IconSearch, IconPlus } from '@arco-design/web-react/icon'
Types : import type { TableProps, FormInstance } from '@arco-design/web-react'
Styles : import '@arco-design/web-react/dist/css/arco.css' (full) or configure on-demand loading
Date library : dayjs (NOT moment.js)
Controlled mode : value + onChange; Uncontrolled : defaultValue
Sub-components : accessed via Component.Sub pattern — Form.Item, Select.Option, Menu.SubMenu, Input.Search, Input.TextArea, Grid.Row, Grid.Col
Form.Item usesfield prop (not name like Ant Design)
Switch in Form requires triggerPropName="checked"

Skill Index

Load the relevant file below for full API reference, code examples, and best practices.

Setup & Configuration

Topic	File	When to use
Installation	getting-started.md	Install `@arco-design/web-react`, import styles, configure tree-shaking or babel-plugin-import
Global Config	config-provider.md	Set global component size, theme, locale, default props via `<ConfigProvider>`
Theming	theming.md	Custom theme colors, CSS variable overrides, Less variables, dark mode toggle
Internationalization	internationalization.md	Switch languages, add locale packs, customize locale text

General Components

Component	File	Use for
Button	button.md	Buttons, button groups, icon buttons, loading state
Icon	icon.md	Built-in icons (`IconXxx`), custom SVG icons, IconFont
Typography	typography.md	Headings, paragraphs, text ellipsis, copyable/editable text
Link	link.md	Hyperlinks with icon, hover states
Divider	divider.md

Layout

Component	File	Use for
Grid	grid.md	24-column `Row`/`Col` grid, responsive breakpoints (xs/sm/md/lg/xl/xxl), gutter
Layout	layout.md	Page skeleton: `Header`, `Sider`, `Content`, `Footer`, collapsible sidebar
Space

Navigation

Component	File	Use for
Menu	menu.md	Sidebar nav, top nav bar, sub-menus, menu groups, collapsible
Tabs	tabs.md	Tab switching, card tabs, editable/closable tabs, extra content
Dropdown	dropdown.md	Dropdown menus, context menus, button dropdowns
Breadcrumb	breadcrumb.md	Navigation hierarchy path, route breadcrumbs
Pagination	pagination.md	Page navigation, size changer, simple/mini mode

Data Entry

Component	File	Use for
Form	form.md	Form building, validation, `Form.Item` (uses `field` prop), `Form.List`, `useForm` hook
Input	input.md	Text input, `Input.Password`, `Input.Search`, `Input.TextArea`, prefix/suffix

Data Display

Component	File	Use for
Table	table.md	Data tables, sort, filter, pagination, fixed columns/header, virtual scroll, row selection, expandable rows
List	list.md	Data lists, paginated, virtual scroll, grid layout
Card	card.md	Card containers, cover, `Card.Grid`, `Card.Meta`, actions
Tree	tree.md	Tree structure, checkable, draggable, virtual scroll, async load

Feedback

Component	File	Use for
Modal	modal.md	Modal dialogs, `Modal.confirm()`, `useModal` hook, form-in-modal
Message	message.md	Global toast: `Message.success()`, `error()`, `warning()`, `loading()`
Notification

Other

Component	File	Use for
BackTop	back-top.md	Scroll-to-top button
Portal	portal.md	Render children into different DOM node
ResizeBox	resize-box.md	Resizable containers, split panes
Trigger	trigger.md	Base popup positioning (underlies Tooltip/Popover/Dropdown)
Watermark	watermark.md	Text/image watermarks over page content

Patterns & Best Practices

Topic	File	When to use
Form Patterns	form-patterns.md	Dynamic forms, linked validation, nested forms, async submit, complex layouts
Table Patterns	table-patterns.md	Remote data, editable rows, virtual scroll large data, custom filters
Modal Patterns	modal-patterns.md	Form-in-modal, confirmation flows, nested drawers, global messages
Controlled vs Uncontrolled	controlled-uncontrolled.md	Choosing `value`+`onChange` vs pattern

Hooks

Import from @arco-design/web-react/hooks. Use these headless hooks only when you need a fully custom UI — otherwise prefer the corresponding component.

Hook	File	Use for
useVerificationCode	use-verification-code.md	Custom OTP input with focus, paste, keyboard navigation
useWatermark	use-watermark.md	Dynamic canvas watermark with tamper protection

Weekly Installs

Repository

arco-design/arc…gn-skill

GitHub Stars

First Seen

Feb 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode51

gemini-cli50

amp50

github-copilot50

codex50

cursor50

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

125,600 周安装