docs(skills): 添加 AWS 服务技能文档和配置文件

- 添加 RDS 管理相关文档，包括参数组、选项组、备份管理等功能
- 添加 CloudWatch 告警和指标监控的详细配置说明
- 添加 Cognito 认证流程和 OAuth 集成文档
- 添加 IAM 安全最佳实践指南
- 配置 .gitignore 文件以忽略临时文件和环境文件
- 包含数据库管理和云监控的实用命令示例

bundles/3d-threejs.yaml

@@ -0,0 +1,42 @@
+id: 3d-threejs
+title: 3D（三维 / Three.js）岗位包
+description: 面向 Three.js 场景搭建、交互、性能优化与资源加载的常用技能组合。
+tags: [3d, threejs, webgl, performance]
+recommended:
+  platforms: [cursor, claude, codex, trae]
+  scope: project
+skills:
+  - name: threejs-fundamentals
+    repo: threejs-skills
+  - name: threejs-loaders
+    repo: threejs-skills
+  - name: threejs-lighting
+    repo: threejs-skills
+  - name: threejs-shaders
+    repo: threejs-skills
+  - name: threejs-postprocessing
+    repo: threejs-skills
+  - name: threejs-interaction
+    repo: threejs-skills
+prompts:
+  - title: 创建基础场景
+    prompt: |
+      Use threejs-fundamentals.
+      帮我创建一个基础 Three.js 场景（renderer/camera/resize/animation loop），并渲染一个旋转立方体。
+  - title: 加载 GLTF 并播放动画
+    prompt: |
+      Use threejs-loaders.
+      加载一个 GLTF 模型（包含动画），创建 AnimationMixer 播放动画，并处理加载失败与资源释放。
+  - title: 灯光与阴影
+    prompt: |
+      Use threejs-lighting.
+      给我的场景添加真实感灯光与阴影（阴影参数建议、性能注意事项、调试 helper）。
+  - title: 自定义 Shader 效果
+    prompt: |
+      Use threejs-shaders.
+      写一个 ShaderMaterial 实现 Fresnel 边缘光效果，并说明 uniform 与坐标空间注意点。
+  - title: 后期效果链
+    prompt: |
+      Use threejs-postprocessing.
+      用 EffectComposer 添加 bloom + FXAA，并解释如何与透明物体/性能做平衡。
+

bundles/frontend-vue.yaml

@@ -0,0 +1,37 @@
+id: frontend-vue
+title: 前端（Vue）岗位包
+description: 面向 Vue 3 前端开发的常用技能组合（Vue/Pinia/Vite/测试/工程化）。
+tags: [frontend, vue, typescript, testing]
+recommended:
+  platforms: [cursor, claude, codex, trae]
+  scope: project
+skills:
+  - name: vue3
+  - name: pinia
+  - name: vite
+  - name: vitest
+  - name: jest
+  - name: webpack
+  - name: rspack
+prompts:
+  - title: 新建 Vue 3 页面
+    prompt: |
+      Use vue3 skill.
+      帮我用 Vue 3 + TypeScript 写一个可复用的表格组件，支持排序、分页、空状态，并给出示例用法。
+  - title: 修复 Vue 类型报错
+    prompt: |
+      Use vue3 skill.
+      我在 <template> 里访问 props 的字段时报 TS 报错，请给出正确的 props 定义与模板写法，并解释原因。
+  - title: Pinia 状态设计
+    prompt: |
+      Use pinia skill.
+      设计一个 Pinia store 管理用户登录态（token、profile、刷新、退出），并提供单测示例。
+  - title: Vite 构建优化
+    prompt: |
+      Use vite skill.
+      我的 Vite 项目首屏慢，请给出可操作的优化清单（分包、预构建、懒加载、资源压缩）并说明验证方法。
+  - title: 组件测试
+    prompt: |
+      Use vitest skill.
+      给这个 Vue 组件写 Vitest 单元测试，覆盖 props、事件、异步请求与快照（如适用）。
+

bundles/qa-testing.yaml

@@ -0,0 +1,39 @@
+id: qa-testing
+title: 测试（QA / 自动化）岗位包
+description: 面向单测/集成测试/E2E/移动端自动化的常用技能组合。
+tags: [qa, testing, e2e, automation]
+recommended:
+  platforms: [cursor, claude, codex, trae]
+  scope: project
+skills:
+  - name: pytest
+  - name: junit
+  - name: jest
+  - name: vitest
+  - name: cypress
+  - name: playwright
+  - name: selenium
+  - name: appium
+  - name: detox
+prompts:
+  - title: Python 单测与夹具
+    prompt: |
+      Use pytest skill.
+      给这个 Python 模块补齐 pytest 单测：包含 fixture、参数化、mock 外部依赖，并说明最佳实践。
+  - title: Java 单测
+    prompt: |
+      Use junit skill.
+      给这个 Java Service 写 JUnit5 单测，覆盖异常、边界条件，并提供合理的测试命名与结构。
+  - title: Web E2E（Playwright）
+    prompt: |
+      Use playwright skill.
+      给登录-下单-支付流程写 Playwright E2E，用 Page Object 模式组织，并在 CI 中稳定运行。
+  - title: Web E2E（Cypress）
+    prompt: |
+      Use cypress skill.
+      设计一套 Cypress 测试覆盖关键路径与回归点，并给出 flaky case 的治理方法。
+  - title: 移动端自动化
+    prompt: |
+      Use appium skill.
+      我需要对 iOS/Android 做跨端自动化测试，给出 Appium 的工程结构、capabilities 配置与稳定性策略。
+

skills/ant-design-vue/api/components.md

@@ -0,0 +1,101 @@
+# Components API | 组件 API
+
+## API Reference
+
+Ant Design Vue component APIs and props.
+
+### Common Props
+
+Most components share common props:
+- `class`: Additional CSS class
+- `style`: Inline style object
+- `disabled`: Disabled state
+- `loading`: Loading state
+- `size`: Component size (large, middle, small)
+
+### Button API
+
+**Props:**
+- `type`: Button type (primary, default, dashed, text, link)
+- `size`: Button size (large, middle, small)
+- `shape`: Button shape (default, round, circle)
+- `icon`: Icon component slot
+- `loading`: Loading state
+- `disabled`: Disabled state
+- `onClick`: Click handler
+
+### Form API
+
+**Props:**
+- `model`: Data object of form
+- `rules`: Validation rules
+- `layout`: Form layout (horizontal, vertical, inline)
+- `labelCol`: Label layout
+- `wrapperCol`: Input wrapper layout
+- `onFinish`: Submit handler
+- `onFinishFailed`: Failed submit handler
+
+**Form.Item Props:**
+- `name`: Field name
+- `label`: Field label
+- `rules`: Validation rules
+- `required`: Required indicator
+- `hasFeedback`: Display feed icon
+
+### Table API
+
+**Props:**
+- `columns`: Column definitions
+- `dataSource`: Table data
+- `pagination`: Pagination config
+- `rowSelection`: Row selection config
+- `loading`: Loading state
+- `onChange`: Table change handler
+
+**Column Props:**
+- `title`: Column title
+- `dataIndex`: Data field name
+- `key`: Unique key
+- `sorter`: Sort function
+- `customRender`: Custom render function (slot name or function)
+
+### Input API
+
+**Props:**
+- `value`: Input value (v-model:value)
+- `placeholder`: Placeholder text
+- `size`: Input size
+- `prefix`: Prefix element slot
+- `suffix`: Suffix element slot
+- `allowClear`: Allow clear content
+- `onChange`: Change handler
+
+### Select API
+
+**Props:**
+- `value`: Selected value (v-model:value)
+- `options`: Data of the select options
+- `mode`: Selection mode (multiple, tags)
+- `showSearch`: Enable search
+- `filterOption`: Filter option logic
+- `onChange`: Change handler
+
+### Modal API
+
+**Props:**
+- `open`: Modal visibility (v-model:open)
+- `title`: Modal title
+- `onOk`: OK button handler
+- `onCancel`: Cancel button handler
+- `footer`: Custom footer
+- `width`: Modal width
+
+**Static Methods:**
+- `Modal.info()`, `Modal.success()`, `Modal.error()`, `Modal.warning()`, `Modal.confirm()`
+
+### Key Points
+
+- Use `v-model:value` for most input components in V4 (changed from `v-model` in V2)
+- Use `v-model:open` for Modal/Drawer visibility (changed from `visible`)
+- Use `v-model:checked` for Checkbox/Switch
+- Use `v-model:fileList` for Upload

skills/ant-design-vue/api/config-provider.md

@@ -0,0 +1,38 @@
+# ConfigProvider API | 全局配置 API
+
+## ConfigProvider
+
+Provides a uniform configuration for all components.
+
+### Props
+
+- `locale`: Language package setting
+- `theme`: Theme configuration (V4 Design Token)
+- `componentSize`: Config size for all components
+- `prefixCls`: Set prefix class name
+- `getPopupContainer`: To set the container of the popup element
+
+### Design Token (Theme)
+
+Customize the theme via `theme` prop.
+
+```typescript
+const theme = {
+  token: {
+    colorPrimary: '#00b96b',
+    borderRadius: 2,
+    fontSize: 14,
+  },
+  algorithm: theme.darkAlgorithm, // or defaultAlgorithm, compactAlgorithm
+}
+```
+
+### Usage
+
+```vue
+<template>
+  <a-config-provider :theme="theme" :locale="locale">
+    <App />
+  </a-config-provider>
+</template>
+```

skills/ant-design-vue/examples/advanced/internationalization.md

@@ -0,0 +1,41 @@
+# Internationalization | 国际化
+
+## Configuration
+
+Ant Design Vue provides a React component `ConfigProvider` for global configuration of internationalization.
+
+```vue
+<template>
+  <a-config-provider :locale="locale">
+    <App />
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import enUS from 'ant-design-vue/es/locale/en_US';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
+
+const locale = ref(zhCN);
+
+const switchLocale = () => {
+  locale.value = locale.value.locale === 'en' ? zhCN : enUS;
+  dayjs.locale(locale.value.locale === 'en' ? 'en' : 'zh-cn');
+};
+</script>
+```
+
+## Supported Languages
+
+Ant Design Vue supports many languages. Import from `ant-design-vue/es/locale/`.
+
+Examples:
+- `zh_CN`: Simplified Chinese
+- `zh_TW`: Traditional Chinese
+- `en_US`: English
+- `ja_JP`: Japanese
+- `ko_KR`: Korean

skills/ant-design-vue/examples/advanced/theme-customization.md

@@ -0,0 +1,76 @@
+# Theme Customization | 主题定制
+
+Ant Design Vue V4 uses Design Tokens for theming.
+
+## Basic Usage
+
+Pass `theme` prop to `ConfigProvider`.
+
+```vue
+<template>
+  <a-config-provider
+    :theme="{
+      token: {
+        colorPrimary: '#00b96b',
+        fontSize: 16,
+        borderRadius: 4,
+      },
+    }"
+  >
+    <a-button type="primary">Custom Button</a-button>
+  </a-config-provider>
+</template>
+```
+
+## Dark Mode
+
+Use `algorithm` to switch to dark mode.
+
+```vue
+<script setup lang="ts">
+import { theme } from 'ant-design-vue';
+</script>
+
+<template>
+  <a-config-provider
+    :theme="{
+      algorithm: theme.darkAlgorithm,
+    }"
+  >
+    <App />
+  </a-config-provider>
+</template>
+```
+
+## Compact Mode
+
+```vue
+<script setup lang="ts">
+import { theme } from 'ant-design-vue';
+</script>
+
+<template>
+  <a-config-provider
+    :theme="{
+      algorithm: theme.compactAlgorithm,
+    }"
+  >
+    <App />
+  </a-config-provider>
+</template>
+```
+
+## Design Tokens
+
+Commonly used tokens:
+
+- `colorPrimary`: Brand color
+- `colorSuccess`: Success state color
+- `colorWarning`: Warning state color
+- `colorError`: Error state color
+- `colorInfo`: Info state color
+- `colorTextBase`: Base text color
+- `colorBgBase`: Base background color
+- `fontFamily`: Font family
+- `fontSize`: Base font size
+- `borderRadius`: Base border radius

skills/ant-design-vue/examples/components/data-display.md

@@ -0,0 +1,218 @@
+# Data Display Components (数据展示)
+
+## Table (表格)
+A table displays rows of data.
+
+```vue
+<template>
+  <a-table :dataSource="dataSource" :columns="columns" />
+</template>
+<script setup lang="ts">
+const columns = [
+  { title: 'Name', dataIndex: 'name', key: 'name' },
+  { title: 'Age', dataIndex: 'age', key: 'age' },
+  { title: 'Address', dataIndex: 'address', key: 'address' },
+];
+const dataSource = [
+  { key: '1', name: 'Mike', age: 32, address: '10 Downing Street' },
+];
+</script>
+```
+
+## List (列表)
+Simple List.
+
+```vue
+<a-list item-layout="horizontal" :data-source="data">
+  <template #renderItem="{ item }">
+    <a-list-item>
+      <a-list-item-meta description="Ant Design, a design language">
+        <template #title><a href="https://www.antdv.com/">{{ item.title }}</a></template>
+        <template #avatar><a-avatar src="..." /></template>
+      </a-list-item-meta>
+    </a-list-item>
+  </template>
+</a-list>
+```
+
+## Card (卡片)
+Simple rectangular container.
+
+```vue
+<a-card title="Default size card" style="width: 300px">
+  <template #extra><a href="#">more</a></template>
+  <p>card content</p>
+</a-card>
+```
+
+## Image (图片)
+Previewable image.
+
+```vue
+<a-image :width="200" src="https://aliyuncdn.antdv.com/logo.png" />
+```
+
+## Avatar (头像)
+Avatars can be used to represent people or objects.
+
+```vue
+<a-avatar size="large">User</a-avatar>
+<a-avatar-group>
+  <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />
+  <a-avatar style="background-color: #f56a00">K</a-avatar>
+</a-avatar-group>
+```
+
+## Badge (徽标数)
+Badge normally appears in proximity to another object or user interface element.
+
+```vue
+<a-badge :count="5">
+  <a-avatar shape="square" size="large" />
+</a-badge>
+<a-badge dot>
+  <NotificationOutlined />
+</a-badge>
+```
+
+## Calendar (日历)
+Container for displaying data in calendar form.
+
+```vue
+<a-calendar v-model:value="value" @panelChange="onPanelChange" />
+```
+
+## Carousel (走马灯)
+A carousel component for displaying multiple images or cards.
+
+```vue
+<a-carousel autoplay>
+  <div><h3>1</h3></div>
+  <div><h3>2</h3></div>
+  <div><h3>3</h3></div>
+  <div><h3>4</h3></div>
+</a-carousel>
+```
+
+## Collapse (折叠面板)
+A content area which can be collapsed and expanded.
+
+```vue
+<a-collapse v-model:activeKey="activeKey">
+  <a-collapse-panel key="1" header="This is panel header 1">
+    <p>{{ text }}</p>
+  </a-collapse-panel>
+</a-collapse>
+```
+
+## Descriptions (描述列表)
+Display multiple read-only fields in groups.
+
+```vue
+<a-descriptions title="User Info">
+  <a-descriptions-item label="UserName">Zhou Maomao</a-descriptions-item>
+  <a-descriptions-item label="Telephone">1810000000</a-descriptions-item>
+  <a-descriptions-item label="Live">Hangzhou, Zhejiang</a-descriptions-item>
+</a-descriptions>
+```
+
+## Empty (空状态)
+Empty state placeholder.
+
+```vue
+<a-empty />
+<a-empty description="No Data" />
+```
+
+## Popover (气泡卡片)
+The floating card popped by clicking or hovering.
+
+```vue
+<a-popover title="Title">
+  <template #content>
+    <p>Content</p>
+  </template>
+  <a-button type="primary">Hover me</a-button>
+</a-popover>
+```
+
+## QRCode (二维码)
+QRCode component.
+
+```vue
+<a-qrcode value="https://www.antdv.com" />
+```
+
+## Segmented (分段控制器)
+Segmented Controls.
+
+```vue
+<a-segmented v-model:value="value" :options="['Daily', 'Weekly', 'Monthly']" />
+```
+
+## Statistic (统计数值)
+Display statistic numbers.
+
+```vue
+<a-statistic title="Active Users" :value="112893" />
+<a-statistic-countdown title="Countdown" :value="deadline" format="HH:mm:ss" />
+```
+
+## Tabs (标签页)
+Tabs make it easy to switch between different views.
+
+```vue
+<a-tabs v-model:activeKey="activeKey">
+  <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
+  <a-tab-pane key="2" tab="Tab 2" force-render>Content of Tab Pane 2</a-tab-pane>
+  <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
+</a-tabs>
+```
+
+## Tag (标签)
+Tag for categorizing or markup.
+
+```vue
+<a-tag color="success">success</a-tag>
+<a-tag color="processing">processing</a-tag>
+<a-tag color="error">error</a-tag>
+```
+
+## Timeline (时间轴)
+Vertical display timeline.
+
+```vue
+<a-timeline>
+  <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
+  <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
+</a-timeline>
+```
+
+## Tooltip (文字提示)
+Simple text pop-up tip.
+
+```vue
+<a-tooltip title="prompt text">
+  <span>Tooltip will show on mouse enter.</span>
+</a-tooltip>
+```
+
+## Tour (漫游式引导)
+A guide to introduce the application's functions.
+
+```vue
+<a-tour :open="open" :steps="steps" @close="handleClose" />
+```
+
+## Tree (树形控件)
+A hierarchical list structure component.
+
+```vue
+<a-tree
+  v-model:expandedKeys="expandedKeys"
+  v-model:selectedKeys="selectedKeys"
+  v-model:checkedKeys="checkedKeys"
+  checkable
+  :tree-data="treeData"
+/>
+```

skills/ant-design-vue/examples/components/data-entry.md

@@ -0,0 +1,178 @@
+# Data Entry Components (数据录入)
+
+## Form (表单)
+High performance Form component with data scope management.
+
+```vue
+<template>
+  <a-form :model="formState" @finish="onFinish">
+    <a-form-item
+      label="Username"
+      name="username"
+      :rules="[{ required: true, message: 'Please input your username!' }]"
+    >
+      <a-input v-model:value="formState.username" />
+    </a-form-item>
+    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+      <a-button type="primary" html-type="submit">Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+<script setup lang="ts">
+import { reactive } from 'vue';
+const formState = reactive({ username: '' });
+const onFinish = values => { console.log('Success:', values); };
+</script>
+```
+
+## Input (输入框)
+A basic widget for getting the user input.
+
+```vue
+<a-input v-model:value="value" placeholder="Basic usage" />
+<a-textarea v-model:value="value" :rows="4" />
+<a-input-password v-model:value="value" />
+```
+
+## Select (选择器)
+Select component to select value from options.
+
+```vue
+<a-select
+  v-model:value="value"
+  style="width: 120px"
+  :options="[{ value: 'jack', label: 'Jack' }, { value: 'lucy', label: 'Lucy' }]"
+/>
+```
+
+## DatePicker (日期选择框)
+To select or input a date.
+
+```vue
+<a-date-picker v-model:value="value" />
+<a-range-picker v-model:value="value" />
+```
+
+## AutoComplete (自动完成)
+Input with auto-complete function.
+
+```vue
+<a-auto-complete
+  v-model:value="value"
+  :options="options"
+  placeholder="input here"
+  @search="handleSearch"
+/>
+```
+
+## Cascader (级联选择)
+Cascade selection box.
+
+```vue
+<a-cascader v-model:value="value" :options="options" placeholder="Please select" />
+```
+
+## Checkbox (多选框)
+Checkbox.
+
+```vue
+<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
+<a-checkbox-group v-model:value="value" :options="plainOptions" />
+```
+
+## InputNumber (数字输入框)
+Enter a number within certain range.
+
+```vue
+<a-input-number v-model:value="value" :min="1" :max="10" />
+```
+
+## Mentions (提及)
+Mention component.
+
+```vue
+<a-mentions v-model:value="value" :options="options" prefix="#" />
+```
+
+## Radio (单选框)
+Radio.
+
+```vue
+<a-radio-group v-model:value="value">
+  <a-radio value="a">Hangzhou</a-radio>
+  <a-radio value="b">Shanghai</a-radio>
+</a-radio-group>
+```
+
+## Rate (评分)
+Rate component.
+
+```vue
+<a-rate v-model:value="value" />
+```
+
+## Slider (滑动输入条)
+A Slider component for displaying current value and intervals in range.
+
+```vue
+<a-slider v-model:value="value" />
+<a-slider v-model:value="rangeValue" range />
+```
+
+## Switch (开关)
+Switching Selector.
+
+```vue
+<a-switch v-model:checked="checked" />
+```
+
+## TimePicker (时间选择框)
+To select or input a time.
+
+```vue
+<a-time-picker v-model:value="value" />
+```
+
+## Transfer (穿梭框)
+Double column transfer choice box.
+
+```vue
+<a-transfer
+  v-model:targetKeys="targetKeys"
+  :dataSource="dataSource"
+  :render="item => item.title"
+/>
+```
+
+## TreeSelect (树选择)
+Tree selection control.
+
+```vue
+<a-tree-select
+  v-model:value="value"
+  show-search
+  style="width: 100%"
+  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+  placeholder="Please select"
+  allow-clear
+  tree-default-expand-all
+  :tree-data="treeData"
+/>
+```
+
+## Upload (上传)
+Upload file control.
+
+```vue
+<a-upload
+  v-model:file-list="fileList"
+  name="file"
+  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+  @change="handleChange"
+>
+  <a-button>
+    <upload-outlined />
+    Click to Upload
+  </a-button>
+</a-upload>
+```

skills/ant-design-vue/examples/components/feedback.md

@@ -0,0 +1,138 @@
+# Feedback Components (反馈)
+
+## Modal (对话框)
+Modal dialogs.
+
+```vue
+<template>
+  <a-button type="primary" @click="showModal">Open Modal</a-button>
+  <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
+    <p>Some contents...</p>
+  </a-modal>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const open = ref(false);
+const showModal = () => { open.value = true; };
+const handleOk = e => { open.value = false; };
+</script>
+```
+
+## Message (全局提示)
+Display global messages as feedback in response to user operations.
+
+```vue
+<script setup lang="ts">
+import { message } from 'ant-design-vue';
+const info = () => {
+  message.info('This is a normal message');
+};
+</script>
+```
+
+## Notification (通知提醒框)
+Display a notification message globally.
+
+```vue
+<script setup lang="ts">
+import { notification } from 'ant-design-vue';
+const openNotification = () => {
+  notification.open({
+    message: 'Notification Title',
+    description: 'This is the content of the notification.',
+  });
+};
+</script>
+```
+
+## Spin (加载中)
+A spinner for displaying loading state of a page or a section.
+
+```vue
+<a-spin />
+<a-spin size="large" />
+```
+
+## Alert (警告提示)
+Alert component for feedback.
+
+```vue
+<a-alert message="Success Text" type="success" />
+<a-alert message="Info Text" type="info" />
+<a-alert message="Warning Text" type="warning" />
+<a-alert message="Error Text" type="error" />
+```
+
+## Drawer (抽屉)
+A panel which slides in from the edge of the screen.
+
+```vue
+<a-drawer
+  v-model:open="open"
+  class="custom-class"
+  root-class-name="root-class-name"
+  :root-style="{ color: 'blue' }"
+  style="color: red"
+  title="Basic Drawer"
+  placement="right"
+  @after-open-change="afterOpenChange"
+>
+  <p>Some contents...</p>
+</a-drawer>
+```
+
+## Popconfirm (气泡确认框)
+A simple and compact confirmation dialog of an action.
+
+```vue
+<a-popconfirm
+  title="Are you sure delete this task?"
+  ok-text="Yes"
+  cancel-text="No"
+  @confirm="confirm"
+  @cancel="cancel"
+>
+  <a href="#">Delete</a>
+</a-popconfirm>
+```
+
+## Progress (进度条)
+Display the current progress of an operation flow.
+
+```vue
+<a-progress :percent="30" />
+<a-progress type="circle" :percent="75" />
+```
+
+## Result (结果)
+Used to feed back the results of a series of operational tasks.
+
+```vue
+<a-result
+  status="success"
+  title="Successfully Purchased Cloud Server ECS!"
+  sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
+>
+  <template #extra>
+    <a-button key="console" type="primary">Go Console</a-button>
+    <a-button key="buy">Buy Again</a-button>
+  </template>
+</a-result>
+```
+
+## Skeleton (骨架屏)
+Provide a placeholder while waiting for content to load.
+
+```vue
+<a-skeleton active />
+<a-skeleton avatar :paragraph="{ rows: 4 }" />
+```
+
+## Watermark (水印)
+Add specific text or patterns to the page.
+
+```vue
+<a-watermark content="Ant Design Vue">
+  <div style="height: 500px" />
+</a-watermark>
+```

skills/ant-design-vue/examples/components/general.md

@@ -0,0 +1,39 @@
+# General Components (通用)
+
+## Button (按钮)
+To trigger an operation.
+
+```vue
+<a-button type="primary">Primary</a-button>
+<a-button>Default</a-button>
+<a-button type="dashed">Dashed</a-button>
+<a-button type="text">Text</a-button>
+<a-button type="link">Link</a-button>
+```
+
+## Icon (图标)
+Semantic vector graphics.
+Note: Icons are strictly separated from 4.0.
+
+```bash
+npm install @ant-design/icons-vue
+```
+
+```vue
+<template>
+  <step-forward-outlined />
+</template>
+<script setup>
+import { StepForwardOutlined } from '@ant-design/icons-vue';
+</script>
+```
+
+## Typography (排版)
+Basic text writing, including headings, body text, lists, and more.
+
+```vue
+<a-typography-title>Introduction</a-typography-title>
+<a-typography-paragraph>
+  In the process of internal desktop applications development...
+</a-typography-paragraph>
+```

skills/ant-design-vue/examples/components/layout.md

@@ -0,0 +1,46 @@
+# Layout Components (布局)
+
+## Divider (分割线)
+A divider line separates different content.
+
+```vue
+<a-divider />
+<a-divider>With Text</a-divider>
+<a-divider type="vertical" />
+```
+
+## Grid (栅格)
+24 Grids System.
+
+```vue
+<a-row>
+  <a-col :span="12">col-12</a-col>
+  <a-col :span="12">col-12</a-col>
+</a-row>
+<a-row :gutter="16">
+  <a-col :span="8">col-8</a-col>
+  <a-col :span="8">col-8</a-col>
+  <a-col :span="8">col-8</a-col>
+</a-row>
+```
+
+## Layout (布局)
+Handling the overall layout of a page.
+
+```vue
+<a-layout>
+  <a-layout-header>Header</a-layout-header>
+  <a-layout-content>Content</a-layout-content>
+  <a-layout-footer>Footer</a-layout-footer>
+</a-layout>
+```
+
+## Space (间距)
+Set components spacing.
+
+```vue
+<a-space>
+  <a-button>Button</a-button>
+  <a-button>Button</a-button>
+</a-space>
+```

skills/ant-design-vue/examples/components/navigation.md

@@ -0,0 +1,93 @@
+# Navigation Components (导航)
+
+## Anchor (锚点)
+Hyperlinks to scroll on one page.
+
+```vue
+<template>
+  <a-anchor :items="items" />
+</template>
+<script setup lang="ts">
+const items = [
+  {
+    key: 'part-1',
+    href: '#part-1',
+    title: 'Part 1',
+  },
+  {
+    key: 'part-2',
+    href: '#part-2',
+    title: 'Part 2',
+  },
+];
+</script>
+```
+
+## Breadcrumb (面包屑)
+Indicates the current page's location within a navigational hierarchy.
+
+```vue
+<a-breadcrumb>
+  <a-breadcrumb-item>Home</a-breadcrumb-item>
+  <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
+  <a-breadcrumb-item>An Application</a-breadcrumb-item>
+</a-breadcrumb>
+```
+
+## Dropdown (下拉菜单)
+A dropdown list.
+
+```vue
+<a-dropdown>
+  <a class="ant-dropdown-link" @click.prevent>
+    Hover me <DownOutlined />
+  </a>
+  <template #overlay>
+    <a-menu>
+      <a-menu-item>
+        <a href="javascript:;">1st menu item</a>
+      </a-menu-item>
+    </a-menu>
+  </template>
+</a-dropdown>
+```
+
+## Menu (导航菜单)
+Navigation menu.
+
+```vue
+<template>
+  <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
+</template>
+<script setup lang="ts">
+import { ref, h } from 'vue';
+import { MailOutlined } from '@ant-design/icons-vue';
+const current = ref(['mail']);
+const items = ref([
+  {
+    key: 'mail',
+    icon: () => h(MailOutlined),
+    label: 'Navigation One',
+    title: 'Navigation One',
+  },
+]);
+</script>
+```
+
+## Pagination (分页)
+A long list can be divided into several pages.
+
+```vue
+<a-pagination v-model:current="current" :total="50" show-less-items />
+```
+
+## Steps (步骤条)
+Navigation bar that guides the user through the steps of a task.
+
+```vue
+<a-steps :current="1">
+  <a-step title="Finished" description="This is a description." />
+  <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
+  <a-step title="Waiting" description="This is a description." />
+</a-steps>
+```

skills/ant-design-vue/examples/components/other.md

@@ -0,0 +1,63 @@
+# Other Components (其他)
+
+## ConfigProvider (全局化配置)
+Global configuration context, such as internationalization.
+
+```vue
+<a-config-provider :locale="locale">
+  <App />
+</a-config-provider>
+```
+
+## Affix (固钉)
+Wrap Affix around another component to make it stick the viewport.
+
+```vue
+<a-affix :offset-top="top">
+  <a-button type="primary" @click="top += 10">Affix top</a-button>
+</a-affix>
+```
+
+## App (包裹组件)
+Wrap components to provide global context (message/modal/notification).
+Recommended in v4 to replace global static methods.
+
+```vue
+<template>
+  <a-app>
+    <MyPage />
+  </a-app>
+</template>
+
+<!-- In child component -->
+<script setup lang="ts">
+import { App } from 'ant-design-vue';
+const { message, modal, notification } = App.useApp();
+const showMessage = () => {
+  message.success('Success!');
+};
+</script>
+```
+
+## FloatButton (悬浮按钮)
+Floating button, usually for global operations.
+
+```vue
+<a-float-button onClick={() => console.log('click')} />
+<a-float-button-group trigger="hover" type="primary" :style="{ right: '24px' }">
+  <template #icon><CustomerServiceOutlined /></template>
+  <a-float-button />
+  <a-float-button>
+    <template #icon><CommentOutlined /></template>
+  </a-float-button>
+</a-float-button-group>
+```
+
+## BackTop (回到顶部)
+Makes it easy to go back to the top of the page.
+
+```vue
+<a-back-top />
+<!-- Or using FloatButton.BackTop in v4 -->
+<a-float-button-back-top />
+```

skills/ant-design-vue/examples/getting-started/installation.md

@@ -0,0 +1,55 @@
+# Installation
+
+## Using npm or yarn
+
+We recommend using npm or yarn for development.
+
+```bash
+$ npm install ant-design-vue@4.x --save
+# or
+$ yarn add ant-design-vue@4.x
+```
+
+## Import
+
+### Global Import
+
+```typescript
+import { createApp } from 'vue';
+import Antd from 'ant-design-vue';
+import App from './App.vue';
+import 'ant-design-vue/dist/reset.css';
+
+const app = createApp(App);
+
+app.use(Antd).mount('#app');
+```
+
+### On-demand Import (Recommended)
+
+Use `unplugin-vue-components` for auto-importing components.
+
+```bash
+npm install unplugin-vue-components -D
+```
+
+`vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+import Components from 'unplugin-vue-components/vite';
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
+
+export default defineConfig({
+  plugins: [
+    // ...
+    Components({
+      resolvers: [
+        AntDesignVueResolver({
+          importStyle: false, // css in js
+        }),
+      ],
+    }),
+  ],
+});
+```

skills/ant-design-vue/examples/getting-started/usage.md

@@ -0,0 +1,33 @@
+# Basic Usage
+
+## Button Example
+
+```vue
+<template>
+  <a-button type="primary">Primary Button</a-button>
+</template>
+<script setup lang="ts">
+// Components are auto-imported if unplugin-vue-components is configured
+// Otherwise: import { Button as AButton } from 'ant-design-vue';
+</script>
+```
+
+## Internationalization
+
+```vue
+<template>
+  <a-config-provider :locale="locale">
+    <App />
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
+const locale = ref(zhCN);
+</script>
+```

skills/ant-design-vue/templates/component-template.md

@@ -0,0 +1,89 @@
+# Component Template | 组件模板
+
+## Basic Component Usage
+
+```vue
+<template>
+  <a-component-name
+    v-model:value="value"
+    prop1="value1"
+    @change="handleChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const value = ref('');
+const handleChange = (val) => {
+  console.log(val);
+};
+</script>
+```
+
+## Component in Form
+
+```vue
+<template>
+  <a-form :model="formState" @finish="onFinish">
+    <a-form-item
+      name="field"
+      label="Label"
+      :rules="[{ required: true, message: 'Please input!' }]"
+    >
+      <a-component-name v-model:value="formState.field" />
+    </a-form-item>
+    <a-form-item>
+      <a-button type="primary" html-type="submit">Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+
+interface FormState {
+  field: string;
+}
+
+const formState = reactive<FormState>({
+  field: '',
+});
+
+const onFinish = (values: FormState) => {
+  console.log('Success:', values);
+};
+</script>
+```
+
+## Modal/Drawer Template
+
+```vue
+<template>
+  <div>
+    <a-button type="primary" @click="showModal">Open</a-button>
+    <a-modal
+      v-model:open="open"
+      title="Title"
+      @ok="handleOk"
+    >
+      <p>Content...</p>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const open = ref<boolean>(false);
+
+const showModal = () => {
+  open.value = true;
+};
+
+const handleOk = (e: MouseEvent) => {
+  console.log(e);
+  open.value = false;
+};
+</script>
+```

skills/ant-design-vue/templates/project-setup.md

@@ -0,0 +1,66 @@
+# Project Setup Template | 项目配置模板
+
+## Vite Setup with Auto Import
+
+`vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import Components from 'unplugin-vue-components/vite';
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [
+        AntDesignVueResolver({
+          importStyle: false, // css in js
+        }),
+      ],
+    }),
+  ],
+});
+```
+
+## Main Entry (main.ts)
+
+```typescript
+import { createApp } from 'vue';
+import App from './App.vue';
+import 'ant-design-vue/dist/reset.css'; // Important for V4
+
+const app = createApp(App);
+app.mount('#app');
+```
+
+## Global Config Layout (App.vue)
+
+```vue
+<template>
+  <a-config-provider :locale="locale" :theme="theme">
+    <a-app>
+      <router-view />
+    </a-app>
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import { theme as antdTheme } from 'ant-design-vue';
+
+dayjs.locale('zh-cn');
+
+const locale = ref(zhCN);
+const theme = {
+  algorithm: antdTheme.defaultAlgorithm,
+  token: {
+    colorPrimary: '#1890ff',
+  },
+};
+</script>
+```