docs(agents): add design references

.agents/skills/arco-design-vue/references/components/layout/divider.md

@@ -0,0 +1,131 @@
+---
+name: arco-vue-divider
+description: "Arco Design Vue 分割线 Divider 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-divider>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 分割线 Divider
+
+## 简介
+
+对不同章节的文本段落进行分割，默认为水平分割线，可在中间加入文字。
+
+## 基本用法
+
+```vue
+<template>
+  <div class="divider-demo">
+    <p>A design is a plan or specification for the construction of an object.</p>
+    <a-divider />
+    <p>A design is a plan or specification for the construction of an object.</p>
+    <a-divider dashed />
+    <p>A design is a plan or specification for the construction of an object.</p>
+    <a-divider :size="2" style="border-bottom-style: dotted" />
+    <p>A design is a plan or specification for the construction of an object.</p>
+  </div>
+  <div class="divider-demo" style="marginTop: 48px">
+    <div class="flex-box">
+      <span class="avatar"><IconImage /></span>
+      <div class="content">
+        <a-typography-title :heading="6">Image</a-typography-title>
+        May 4, 2010
+      </div>
+    </div>
+    <a-divider class="half-divider" />
+    <div class="flex-box">
+      <span class="avatar"><IconUser /></span>
+      <div class="content">
+        <a-typography-title :heading="6">Avatar</a-typography-title>
+        May 4, 2010
+      </div>
+    </div>
+    <a-divider class="half-divider" />
+    <div class="flex-box">
+      <span class="avatar"><IconPen /></span>
+      <div class="content">
+        <a-typography-title :heading="6">Icon</a-typography-title>
+        May 4, 2010
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  IconImage,
+  IconUser,
+  IconPen,
+} from '@arco-design/web-vue/es/icon';
+
+export default {
+  components: {
+    IconImage,
+    IconUser,
+    IconPen,
+  },
+};
+</script>
+
+<style scoped>
+.divider-demo {
+  box-sizing: border-box;
+  width: 560px;
+  padding: 24px;
+  border: 30px solid rgb(var(--gray-2));
+}
+.half-divider {
+  left: 55px;
+  width: calc(100% - 55px);
+  min-width: auto;
+  margin: 16px 0;
+}
+.flex-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.flex-box .avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 16px;
+  color: var(--color-text-2);
+  font-size: 16px;
+  background-color: var(--color-fill-3);
+  border-radius: 50%;
+}
+.flex-box .content {
+  flex: 1;
+  color: var(--color-text-2);
+  font-size: 12px;
+  line-height: 20px;
+}
+</style>
+```
+
+## API
+
+### `<divider>` 属性
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|direction|分割线的方向，是水平还是竖直|`'horizontal' \| 'vertical'`|`'horizontal'`||
+|orientation|分割线文字的位置|`'left' \| 'center' \| 'right'`|`'center'`||
+|type|分割线样式类型|`'solid' \| 'dashed' \| 'dotted' \| 'double'`|`-`|2.35.0|
+|size|分割线宽度/高度|`number`|`-`|2.35.0|
+|margin|分割线上下 margin (垂直方向时为左右 margin)|`number \| string`|`-`|2.35.0|
+
+## 常用模式
+
+- **带有文字的分割线**：通过 `orientation` 为分割线添加描述文字。
+- **竖直分割线**：指定 `direction` 为 `vertical` 即可使用竖直分割线。竖直分割线不能带文字。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 布局组件只处理结构和间距，不在其中承载业务状态。
+- 响应式页面优先组合 `a-grid`、`a-row`、`a-col` 和 `a-space`。