docs(agents): add design references

.agents/skills/arco-design-vue/references/patterns/modal-patterns.md

@@ -0,0 +1,64 @@
+---
+name: arco-vue-modal-patterns
+description: "Arco Design Vue 弹窗与反馈模式。用于 `a-modal`、`v-model:visible`、确认流程、弹窗表单、Message、Notification 和 Drawer。"
+user-invocable: false
+---
+
+# 弹窗与反馈模式
+
+详细 API 参考 [modal.md](../components/feedback/modal.md)、[drawer.md](../components/feedback/drawer.md) 和 [message.md](../components/feedback/message.md)。
+
+## 受控弹窗
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const visible = ref(false);
+</script>
+
+<template>
+  <a-button type="primary" @click="visible = true">打开</a-button>
+  <a-modal v-model:visible="visible" title="编辑">
+    <p>内容</p>
+  </a-modal>
+</template>
+```
+
+## 弹窗内表单
+
+```vue
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { Message } from '@arco-design/web-vue';
+
+const visible = ref(false);
+const form = reactive({ name: '' });
+
+const handleBeforeOk = async () => {
+  if (!form.name) {
+    Message.error('请输入名称');
+    return false;
+  }
+  Message.success('保存成功');
+  return true;
+};
+</script>
+
+<template>
+  <a-modal v-model:visible="visible" title="编辑" :on-before-ok="handleBeforeOk">
+    <a-form :model="form" layout="vertical">
+      <a-form-item field="name" label="名称" required>
+        <a-input v-model="form.name" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+```
+
+## 使用要点
+
+- 弹窗和抽屉的可见性使用 `v-model:visible`。
+- 异步确认、表单校验、关闭拦截使用文档中的 `on-before-ok` 或关闭前钩子。
+- 轻量结果反馈使用 `Message`；需要标题、正文或更复杂内容时使用 `Notification`。
+- `Message` 和 `Notification` 是全局服务 API，不是 `<a-message>` 或 `<a-notification>` 组件标签。