docs(agents): add design references

.agents/skills/arco-design-vue/references/overview/architecture.md

@@ -0,0 +1,86 @@
+---
+name: arco-vue-architecture
+description: "Arco Design Vue 架构和编码约定。用于 Vue 3 SFC 结构、Composition API、全局/局部注册、导入、属性、事件、插槽和 v-model。"
+user-invocable: false
+---
+
+# 架构约定
+
+把需求转换为使用 Arco Design Vue 的 Vue 3 代码时使用本参考。
+
+## 推荐 SFC 结构
+
+```vue
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { Message } from '@arco-design/web-vue';
+
+const form = reactive({
+  name: '',
+});
+
+const handleSubmit = () => {
+  Message.success(`提交：${form.name}`);
+};
+</script>
+
+<template>
+  <a-form :model="form" layout="vertical" @submit-success="handleSubmit">
+    <a-form-item field="name" label="名称" required>
+      <a-input v-model="form.name" placeholder="请输入名称" />
+    </a-form-item>
+    <a-button type="primary" html-type="submit">提交</a-button>
+  </a-form>
+</template>
+```
+
+## 组件注册
+
+完整注册：
+
+```ts
+app.use(ArcoVue);
+```
+
+局部导入：
+
+```ts
+import { Button, Space } from '@arco-design/web-vue';
+```
+
+示例和小型应用可以使用完整注册。生产项目应跟随仓库已有的导入策略。
+
+## 属性、事件、插槽
+
+- 模板属性使用 kebab-case：`show-jumper`、`row-selection`、`popup-container`。
+- 动态属性使用 `:`：`:columns="columns"`、`:data="rows"`。
+- 事件使用 `@`：`@change`、`@page-change`、`@ok`、`@cancel`。
+- 插槽使用 `#`：`#title`、`#extra`、`#cell="{ record, column }"`。
+
+## v-model
+
+组件主值使用普通 `v-model`。
+
+```vue
+<a-input v-model="keyword" />
+<a-select v-model="status" :options="options" />
+```
+
+组件文档声明命名绑定时，使用命名 `v-model`。
+
+```vue
+<a-modal v-model:visible="visible" title="编辑">
+  ...
+</a-modal>
+```
+
+## 避免 React 模式
+
+不要使用：
+
+- `Form.useForm()`
+- JSX 子节点访问方式
+- `Component.Sub` 子组件语法
+- 直接复制 React 的 `value` / `onChange` 示例
+
+应使用本 skill 中的 Vue 参考。

.agents/skills/arco-design-vue/references/overview/config-provider.md

@@ -0,0 +1,45 @@
+---
+name: arco-vue-config-provider-overview
+description: "Arco Design Vue ConfigProvider 和全局配置指南。用于 `<a-config-provider>`、语言、组件前缀、尺寸、弹出容器、层级、滚动更新和应用级配置。"
+user-invocable: false
+---
+
+# ConfigProvider 与全局配置
+
+插件级全局设置使用 `app.use(ArcoVue, options)`；渲染树范围内的配置使用 `<a-config-provider>`。
+
+## 插件配置
+
+```ts
+import { createApp } from 'vue';
+import ArcoVue from '@arco-design/web-vue';
+import '@arco-design/web-vue/dist/arco.css';
+
+const app = createApp(App);
+app.use(ArcoVue, {
+  componentPrefix: 'a',
+});
+```
+
+默认组件前缀是 `a`，对应 `<a-button>`、`<a-table>` 等标签。
+
+## 语言配置
+
+```vue
+<template>
+  <a-config-provider :locale="enUS">
+    <a-pagination :total="50" show-total show-jumper show-page-size />
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
+</script>
+```
+
+## 使用建议
+
+- 如果配置影响整个应用，把 `<a-config-provider>` 放在应用根部附近。
+- 如果只有某个页面或模块需要特殊语言或配置，只包裹对应子树。
+- 弹出层容器优先查看具体组件的 popup container 相关属性，不要先写全局绕过逻辑。
+- 全局组件前缀保持一致，避免在同一项目中混用 `<a-*>` 和自定义前缀。

.agents/skills/arco-design-vue/references/overview/getting-started.md

@@ -0,0 +1,133 @@
+---
+name: arco-vue-getting-started
+description: "Arco Design Vue 安装与接入指南。用于安装 `@arco-design/web-vue`、注册 ArcoVue、引入 CSS 或 Less 样式、配置 Vite 按需加载、图标和 TypeScript。"
+user-invocable: false
+---
+
+# 快速开始
+
+来源文档：
+- 上游 `packages/web-vue/README.zh-CN.md`
+- 上游 `packages/arco-vue-docs/docs/start.zh-CN.md`
+
+## 版本
+
+Arco Design Vue 面向 Vue 3。当前提供的源码包版本是 `@arco-design/web-vue@2.58.0-beta.1`，peer dependency 声明 Vue `>=3.1.0`，官方快速上手文档建议 Vue `>=3.2.0`。
+
+Vue 3 不再支持 IE，Arco Design Vue 也不支持 IE。
+
+## 安装
+
+```bash
+npm install @arco-design/web-vue
+yarn add @arco-design/web-vue
+pnpm add @arco-design/web-vue
+```
+
+## 完整引入
+
+```ts
+import { createApp } from 'vue';
+import ArcoVue from '@arco-design/web-vue';
+import '@arco-design/web-vue/dist/arco.css';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(ArcoVue);
+app.mount('#app');
+```
+
+完整注册后，默认使用 `a-` 前缀的全局组件标签。
+
+```vue
+<template>
+  <a-space>
+    <a-button type="primary">提交</a-button>
+    <a-input v-model="keyword" placeholder="搜索" />
+  </a-space>
+</template>
+```
+
+## 全局配置
+
+`app.use(ArcoVue, options)` 可以接收全局配置对象。通过 `componentPrefix` 可修改全局组件前缀。
+
+```ts
+app.use(ArcoVue, {
+  componentPrefix: 'arco',
+});
+```
+
+设置后，`<a-button>` 会变成 `<arco-button>`。同一个应用中不要混用多个前缀。
+
+## 按需加载
+
+模板开发场景优先使用 `unplugin-vue-components` 和 `ArcoResolver`。
+
+```ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ArcoResolver } from 'unplugin-vue-components/resolvers';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ArcoResolver()],
+    }),
+    Components({
+      resolvers: [
+        ArcoResolver({
+          sideEffect: true,
+        }),
+      ],
+    }),
+  ],
+});
+```
+
+如果在 `<script>` 中手动导入组件或服务，也需要手动导入对应样式。
+
+```ts
+import { Message } from '@arco-design/web-vue';
+import '@arco-design/web-vue/es/message/style/css.js';
+```
+
+## Arco Vite 插件
+
+也可以使用 `@arco-plugins/vite-vue` 完成按需加载和组件库样式配置。
+
+```ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { vitePluginForArco } from '@arco-plugins/vite-vue';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vitePluginForArco({
+      style: 'css',
+    }),
+  ],
+});
+```
+
+## 组件和图标导入
+
+组件和全局服务从根包导入。
+
+```ts
+import { Button, Table, Form, Message, Modal } from '@arco-design/web-vue';
+```
+
+图标从图标入口导入。
+
+```ts
+import { IconSearch, IconPlus } from '@arco-design/web-vue/es/icon';
+```
+
+## TypeScript
+
+组件库使用 TypeScript 编写。业务代码中优先使用有类型的 `ref`、`reactive`、`computed`、`defineProps` 和 `defineEmits`。

.agents/skills/arco-design-vue/references/overview/internationalization.md

@@ -0,0 +1,52 @@
+---
+name: arco-vue-internationalization
+description: "Arco Design Vue 国际化指南。用于语言包、ConfigProvider 语言切换和支持的地区编码。"
+user-invocable: false
+---
+
+# 国际化
+
+Arco Design Vue 的组件内置文案通过 `<a-config-provider :locale="...">` 配置。
+
+## 基本用法
+
+```vue
+<template>
+  <a-config-provider :locale="enUS">
+    <a-pagination :total="50" show-total show-jumper show-page-size />
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
+</script>
+```
+
+## 支持语言
+
+| 语言 | 编码 |
+|---|---|
+| 简体中文 | zh-CN |
+| 英文 | en-US |
+| 日文 | ja-JP |
+| 繁体中文（中国台湾） | zh-TW |
+| 葡萄牙语 | pt-PT |
+| 西班牙语 | es-ES |
+| 印度尼西亚语 | id-ID |
+| 法语 | fr-FR |
+| 德语 | de-DE |
+| 韩语 | ko-KR |
+| 意大利语 | it-IT |
+| 马来语 | ms-MY |
+| 泰语 | th-TH |
+| 越南语 | vi-VN |
+| 高棉语 | km-KH |
+| 阿拉伯语 | ar-EG |
+| 俄语 | ru-RU |
+| 荷兰语 | nl-NL |
+
+## 使用建议
+
+- 把 `<a-config-provider>` 放在所有需要本地化文案的组件之上。
+- 应用自身语言状态和 Arco 语言对象分开维护，再把应用语言编码映射到 Arco locale import。
+- 只有应用确实支持运行时切换语言时，才需要懒加载语言包。

.agents/skills/arco-design-vue/references/overview/theming.md

@@ -0,0 +1,92 @@
+---
+name: arco-vue-theming
+description: "Arco Design Vue 主题指南。用于 CSS 引入、Less 变量定制、组件 token、Vite/Webpack `modifyVars`、主题包和暗黑模式。"
+user-invocable: false
+---
+
+# 主题定制
+
+来源文档：
+- 上游 `packages/arco-vue-docs/docs/theme.zh-CN.md`
+- 上游 `packages/arco-vue-docs/docs/dark.zh-CN.md`
+
+## 样式引入
+
+完整 CSS 引入最简单：
+
+```ts
+import '@arco-design/web-vue/dist/arco.css';
+```
+
+需要定制 Less 变量时，引入 Less 样式：
+
+```ts
+import '@arco-design/web-vue/dist/arco.less';
+```
+
+手动按需引入组件样式：
+
+```ts
+import '@arco-design/web-vue/es/button/style/css.js';
+```
+
+## Less 变量
+
+全局变量位于 `@arco-design/web-vue/es/style/theme/global.less`，组件级 token 位于类似 `@arco-design/web-vue/es/button/style/token.less` 的路径。
+
+Vite 示例：
+
+```ts
+export default {
+  css: {
+    preprocessorOptions: {
+      less: {
+        modifyVars: {
+          'arcoblue-6': '#f85959',
+        },
+        javascriptEnabled: true,
+      },
+    },
+  },
+};
+```
+
+Webpack 示例：
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.less$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'less-loader',
+            options: {
+              lessOptions: {
+                modifyVars: {
+                  'arcoblue-6': '#f85959',
+                },
+                javascriptEnabled: true,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+## 暗黑模式
+
+Arco Design Vue 通过 `body` 上的 `arco-theme` 属性切换主题。
+
+```ts
+document.body.setAttribute('arco-theme', 'dark');
+document.body.removeAttribute('arco-theme');
+```
+
+把主题状态集中在布局 store 或 `useTheme` composable 中，不要让多个无关组件直接修改 `body` 属性。