Install
openclaw skills install @junwugit/slidev-antd-dashboardBuild dashboard and admin-UI slides in Slidev using ant-design-vue (the Vue 3 implementation of Ant Design). Use when creating Slidev presentations that need dashboards, admin layouts, side menus, data tables, KPI/stat cards, charts, forms, or any Ant Design components. Covers full setup, every ant-design-vue component, composition rules, menu/navigation design specs, and ready-to-paste example slides.
openclaw skills install @junwugit/slidev-antd-dashboardBuild polished dashboard / admin-console mockups inside Slidev slides using ant-design-vue.
ant-design-vue, NOT React antd. The canonical antd package is React-only and cannot be dropped into Slidev. ant-design-vue is the official Ant Design implementation for Vue 3 — same design language, same component set, near-identical API. Every example here uses it.a- prefix. After app.use(Antd), you write <a-button>, <a-table>, <a-layout-sider>, <a-menu>, <a-statistic>, etc. — not <Button>.ant-design-vue/dist/reset.css, because its global preflight overrides Slidev's slide typography. Theme via <a-config-provider> instead.vue-echarts) — see setup.md. @ant-design/charts is React-only; do not suggest it for Slidev.canvasWidth higher and/or use componentSize. See dashboard-rules.md.# in a Slidev project (npm init slidev@latest)
npm i ant-design-vue@^4.2.6 @ant-design/icons-vue
npm i echarts vue-echarts # charts (recommended)
assets/main.ts → setup/main.ts (registers antd, all icons, and <v-chart> globally).assets/AntdThemeProvider.vue.md → components/AntdThemeProvider.vue.md (ConfigProvider + dark-mode sync + sane tokens).slides.md headmatter, bump the canvas so dashboards aren't cramped:
---
canvasWidth: 1280
---
<AntdThemeProvider> and use a full layout. Paste an example from examples/ to start.Full, annotated instructions: references/setup.md.
a-layout → a-layout-sider (nav) + a-layout-header (top bar) + a-layout-content (work area). Don't hand-roll flexbox for the frame.a-row/a-col with :gutter). KPI cards = 4–6 across; never free-position.a-space instead of margin hacks.a-tag/a-badge/Statistic only to encode meaning. ≤1 primary button per region.a-skeleton/a-empty for loading/empty states in mockups.| File | Use it for |
|---|---|
| references/setup.md | Install, setup/main.ts, theming, dark mode, scaling, charts, the React-antd→ant-design-vue translation table, pitfalls. |
| references/components.md | Every ant-design-vue component, grouped, with key props + "use-in-dashboard" guidance and the a- tag name. |
| references/dashboard-rules.md | Composition rules: layout, grid, spacing, color, density, KPI cards, tables, fitting onto a slide, do/don't. |
| references/navigation.md | Menu & navigation design spec: sider vs top nav, IA depth, Menu/Breadcrumb/Tabs/Steps patterns, responsive, do/don't. |
| assets/ | Drop-in main.ts, AntdThemeProvider.vue.md, styles.css. |
| examples/ | 4 complete copy-paste dashboard slides: admin shell, analytics overview, data-table page, detail+form page. |
setup.md is in place (or add it).examples/ as a skeleton.navigation.md (sider menu is the default for admin dashboards).dashboard-rules.md; pick components from components.md.<AntdThemeProvider>, set the slide layout: full, verify it fits the canvas (npm run dev).