Vue DevUI Design System

Generate, modify, and review Vue 3 pages that follow the Vue DevUI component library and design tokens.

When to use this skill

• Create a new DEVUI-styled page (list, form, detail, dashboard, etc.).
• Refactor an existing page to use DEVUI components.
• Choose the right DEVUI component for a UI pattern.
• Look up component props, events, slots, or type definitions.
• Apply design tokens (color, font, shadow, radius, z-index) consistently.
• Set up or configure a DEVUI project with themes and icons.

Quick start

Use references/getting-started.md for the canonical setup and references/on-demand.md for tree-shaking / manual imports.

Typical project bootstrap:

npm create vite my-app -- --template vue-ts
npm i vue-devui @devui-design/icons devui-theme

// src/main.ts
import { createApp } from 'vue';
import DevUI from 'vue-devui';
import 'vue-devui/style.css';
import '@devui-design/icons/icomoon/devui-icon.css';
import { ThemeServiceInit, infinityTheme } from 'devui-theme';
import App from './App.vue';

ThemeServiceInit({ infinityTheme }, 'infinityTheme');
createApp(App).use(DevUI).mount('#app');

Component tag prefix is d- (e.g. <d-button>, <d-table>).

Component selection

1. Open references/component-catalog.md to see all 79 components grouped by category (general, navigation, feedback, data-entry, data-display, layout). It marks complex components, deprecated components, and whether a detailed API doc is available locally.
2. If a local API doc exists in references/components/<name>.md, read it for props, events, slots, and types.
3. If no local doc exists, read the official docs at https://vue-devui.github.io/components/<name>/ or read the component source in packages/devui-vue/devui/<name>/src/.

Commonly used components for admin pages:

• Layout: layout, grid, splitter
• Navigation: menu, breadcrumb, tabs, pagination
• Data entry: form, input, select, radio, checkbox, switch, textarea, date-picker, date-picker-pro, time-picker, tag-input, upload
• Data display: table, card, tag, badge, avatar, tree, statistic, list
• Feedback: modal, drawer, alert, message, notification, loading, tooltip
• General: button, icon

Page templates

Use the Vue SFC templates in assets/templates/ as starting points:

• admin-list-page.vue — search form + table + pagination + actions
• admin-form-page.vue — horizontal form with validation
• admin-detail-page.vue — read-only info cards + related table
• admin-dashboard-page.vue — statistic cards + chart placeholder + todo list + recent data

Copy a template, replace TODO comments, and adjust components based on the actual API docs.

Design tokens

Design tokens live in references/theme/ as SCSS variables. Key files:

• _color.scss — brand, text, background, status, form, list, disabled, overlay colors
• _font.scss — font sizes and weights
• _shadow.scss — shadow lengths for cards, overlays, feedback layers
• _corner.scss — border radius tokens
• _z-index.scss — z-index scale
• _animation.scss — animation timing and easing
• _size.scss — sizing/spacing tokens
• _basic.scss — base color palette

Use the CSS custom properties in styles when needed, e.g. var(--devui-brand), var(--devui-text), var(--devui-border-radius).

Theming

See references/theme-guide.md for theme customization. Built-in themes:

• infinityTheme (default)
• provenceTheme
• sweetTheme
• deepTheme
• galaxyTheme

Switch themes at runtime with themeService.applyTheme(...).

Output guidelines

• Prefer DEVUI components over custom markup.
• Use d-grid/d-row/d-col for layout instead of arbitrary CSS.
• Use design tokens for colors, fonts, shadows, and spacing rather than hard-coded values.
• Keep forms inside d-form with d-form-item and use rules for validation.
• Use d-table with d-column for tabular data; use field/header props.
• Use d-modal/d-drawer for overlays; avoid native alert()/confirm().
• Add lang="ts" and strong types for page data models.
• For components not in the local docs, consult the official docs link in the catalog.