docs(agents): add design references

.agents/skills/arco-design-vue/references/components/data-display/card.md

@@ -0,0 +1,93 @@
+---
+name: arco-vue-card
+description: "Arco Design Vue 卡片 Card 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-card>`、属性、事件、插槽、示例和实现细节。"
+user-invocable: false
+---
+
+# 卡片 Card
+
+## 简介
+
+常规的内容容器，可承载文字、列表、图片、段落，常用于模块划分和内容概览。
+
+## 基本用法
+
+```vue
+<template>
+  <div :style="{ display: 'flex' }">
+    <a-card :style="{ width: '360px' }" title="Arco Card">
+      <template #extra>
+        <a-link>More</a-link>
+      </template>
+      ByteDance's core product, Toutiao ("Headlines"), is a content platform in
+      China and around the world. Toutiao started out as a news recommendation
+      engine and gradually evolved into a platform delivering content in various
+      formats.
+    </a-card>
+  </div>
+</template>
+```
+
+## API
+
+### `<card>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|bordered|是否有边框|`boolean`|`true`|
+|loading|是否为加载中|`boolean`|`false`|
+|hoverable|是否可悬浮|`boolean`|`false`|
+|size|卡片尺寸|`'medium' \| 'small'`|`'medium'`|
+|header-style|自定义标题区域样式|`CSSProperties`|`() => ({})`|
+|body-style|内容区域自定义样式|`CSSProperties`|`() => ({})`|
+|title|卡片标题|`string`|`-`|
+|extra|卡片右上角的操作区域|`string`|`-`|
+
+### `<card>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|actions|卡片底部的操作组|-|
+|cover|卡片封面|-|
+|extra|卡片右上角的操作区域|-|
+|title|卡片标题|-|
+
+### `<card-meta>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|title|标题|`string`|`-`|
+|description|描述|`string`|`-`|
+
+### `<card-meta>` 插槽
+
+|插槽名|描述|参数|
+|---|:---:|---|
+|description|描述|-|
+|title|标题|-|
+|avatar|头像|-|
+
+### `<card-grid>` 属性
+
+|参数名|描述|类型|默认值|
+|---|---|---|:---:|
+|hoverable|是否可以悬浮|`boolean`|`false`|
+
+## 常用模式
+
+- **鼠标悬浮样式**：指定 `hoverable` 来为卡片添加鼠标悬浮样式，同时你可以通过样式覆盖来自定义悬浮样式。
+- **无边框卡片**：设置 `bordered` 为 `false` 来使用无边框卡片。
+- **简洁卡片**：卡片可以只有内容区域。
+- **更灵活的内容展示**：使用 `Card.Meta` 支持更加灵活的内容（封面、头像、 标题、描述信息）
+- **栅格卡片**：在系统概览页面常常和栅格进行配合。
+- **网络型内嵌卡片**：通过 `Card.Grid` 来使用卡片内容区隔模式。
+- **内部卡片**：卡片中可以嵌套其他卡片组件。
+- **支持更多内容配置**：`actions` slot 可以用于展示底部按钮组。
+
+## 最佳实践
+
+- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
+- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
+- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
+- 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
+- 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。