chore: add naive-ui and web-design-reviewer skills

Add 12 Naive UI skill modules (components, dark mode, design tokens, i18n, SSR, theming, quickstart) and web-design-reviewer skill.
2026-05-24 17:09:06 +08:00
parent 0e063c3abb
commit 02d64bf206
14 changed files with 4563 additions and 0 deletions
@@ -0,0 +1,420 @@
+---
+name: "naive-ui-components"
+description: "Comprehensive overview of all Naive UI components organized by category. Invoke when user needs to discover available components, understand component categories, or find the right component for their use case."
+metadata:
+  author: jiaiyan
+  version: "1.0.0"
+---
+
+# Naive UI Components Overview
+
+Naive UI is a Vue 3 component library with over 90 components. All components are tree-shakable, written in TypeScript, and fully themeable. This skill provides a comprehensive index of all available components organized by category.
+
+## When to Use
+
+Use this skill when:
+- **Component discovery**: Finding the right component for a specific use case
+- **Project planning**: Understanding available UI building blocks
+- **Component selection**: Choosing between similar components
+- **Learning Naive UI**: Getting an overview of the component library
+- **Migration planning**: Understanding component equivalents from other libraries
+
+## When to Invoke
+
+Invoke this skill when:
+- User asks what components are available in Naive UI
+- User needs to find a component for a specific UI pattern
+- User wants to understand component categories
+- User is new to Naive UI and needs an overview
+- User asks about component count or coverage
+
+## Prerequisites
+
+- Naive UI installed (`npm install naive-ui`)
+- Vue 3 application setup
+- Basic understanding of Vue 3 composition API
+
+## Component Library Overview
+
+| Metric | Value |
+|--------|-------|
+| Total Components | 90+ |
+| Tree-shakable | Yes |
+| TypeScript | Full support |
+| Theme System | Built-in CSS-in-JS |
+| SSR Support | Yes |
+
+## Component Categories
+
+### 1. Common Components (18)
+
+Basic UI elements used throughout applications.
+
+| Component | Tag | Description | Skill Path |
+|-----------|-----|-------------|------------|
+| Button | `n-button` | Buttons with various types and states | [n-button](../components/n-button/SKILL.md) |
+| Button Group | `n-button-group` | Button group container | [n-button-group](../components/n-button-group/SKILL.md) |
+| Icon | `n-icon` | Icon wrapper component | [n-icon](../components/n-icon/SKILL.md) |
+| Icon Wrapper | `n-icon-wrapper` | Icon with background | [n-icon-wrapper](../components/n-icon-wrapper/SKILL.md) |
+| Tag | `n-tag` | Tags and labels | [n-tag](../components/n-tag/SKILL.md) |
+| Badge | `n-badge` | Badges and marks | [n-badge](../components/n-badge/SKILL.md) |
+| Avatar | `n-avatar` | User avatars | [n-avatar](../components/n-avatar/SKILL.md) |
+| Avatar Group | `n-avatar-group` | Avatar group display | [n-avatar-group](../components/n-avatar-group/SKILL.md) |
+| Card | `n-card` | Card containers | [n-card](../components/n-card/SKILL.md) |
+| Divider | `n-divider` | Dividing lines | [n-divider](../components/n-divider/SKILL.md) |
+| Collapse | `n-collapse` | Collapsible panels | [n-collapse](../components/n-collapse/SKILL.md) |
+| Collapse Transition | `n-collapse-transition` | Collapse animation | [n-collapse-transition](../components/n-collapse-transition/SKILL.md) |
+| Ellipsis | `n-ellipsis` | Text ellipsis | [n-ellipsis](../components/n-ellipsis/SKILL.md) |
+| Typography | `n-typography` | Typography components | [n-typography](../components/n-typography/SKILL.md) |
+| Gradient Text | `n-gradient-text` | Gradient text effect | [n-gradient-text](../components/n-gradient-text/SKILL.md) |
+| Thing | `n-thing` | Thing container | [n-thing](../components/n-thing/SKILL.md) |
+| Element | `n-element` | Element wrapper | [n-element](../components/n-element/SKILL.md) |
+| Code | `n-code` | Code display | [n-code](../components/n-code/SKILL.md) |
+
+### 2. Data Input Components (26)
+
+Form controls and input components.
+
+| Component | Tag | Description | Skill Path |
+|-----------|-----|-------------|------------|
+| Input | `n-input` | Text input | [n-input](../components/n-input/SKILL.md) |
+| Input Number | `n-input-number` | Number input | [n-input-number](../components/n-input-number/SKILL.md) |
+| Input OTP | `n-input-otp` | OTP input | [n-input-otp](../components/n-input-otp/SKILL.md) |
+| Auto Complete | `n-auto-complete` | Input with suggestions | [n-auto-complete](../components/n-auto-complete/SKILL.md) |
+| Select | `n-select` | Dropdown select | [n-select](../components/n-select/SKILL.md) |
+| Tree Select | `n-tree-select` | Tree select | [n-tree-select](../components/n-tree-select/SKILL.md) |
+| Cascader | `n-cascader` | Cascading selection | [n-cascader](../components/n-cascader/SKILL.md) |
+| Checkbox | `n-checkbox` | Checkboxes | [n-checkbox](../components/n-checkbox/SKILL.md) |
+| Radio | `n-radio` | Radio buttons | [n-radio](../components/n-radio/SKILL.md) |
+| Switch | `n-switch` | Toggle switch | [n-switch](../components/n-switch/SKILL.md) |
+| Slider | `n-slider` | Slider input | [n-slider](../components/n-slider/SKILL.md) |
+| Rate | `n-rate` | Star rating | [n-rate](../components/n-rate/SKILL.md) |
+| Color Picker | `n-color-picker` | Color picker | [n-color-picker](../components/n-color-picker/SKILL.md) |
+| Date Picker | `n-date-picker` | Date picker | [n-date-picker](../components/n-date-picker/SKILL.md) |
+| Time Picker | `n-time-picker` | Time picker | [n-time-picker](../components/n-time-picker/SKILL.md) |
+| Form | `n-form` | Form management | [n-form](../components/n-form/SKILL.md) |
+| Dynamic Input | `n-dynamic-input` | Dynamic input fields | [n-dynamic-input](../components/n-dynamic-input/SKILL.md) |
+| Dynamic Tags | `n-dynamic-tags` | Dynamic tags input | [n-dynamic-tags](../components/n-dynamic-tags/SKILL.md) |
+| Mention | `n-mention` | Mention input | [n-mention](../components/n-mention/SKILL.md) |
+| Transfer | `n-transfer` | Transfer panels | [n-transfer](../components/n-transfer/SKILL.md) |
+| Upload | `n-upload` | File upload | [n-upload](../components/n-upload/SKILL.md) |
+| QR Code | `n-qr-code` | QR code generator | [n-qr-code](../components/n-qr-code/SKILL.md) |
+| Float Button | `n-float-button` | Floating button | [n-float-button](../components/n-float-button/SKILL.md) |
+| Float Button Group | `n-float-button-group` | Floating button group | [n-float-button-group](../components/n-float-button-group/SKILL.md) |
+
+### 3. Data Display Components (20)
+
+Components for presenting data.
+
+| Component | Tag | Description | Skill Path |
+|-----------|-----|-------------|------------|
+| DataTable | `n-data-table` | Advanced data table | [n-data-table](../components/n-data-table/SKILL.md) |
+| Table | `n-table` | Basic table | [n-table](../components/n-table/SKILL.md) |
+| Tree | `n-tree` | Tree view | [n-tree](../components/n-tree/SKILL.md) |
+| List | `n-list` | List container | [n-list](../components/n-list/SKILL.md) |
+| Descriptions | `n-descriptions` | Description list | [n-descriptions](../components/n-descriptions/SKILL.md) |
+| Statistic | `n-statistic` | Statistics display | [n-statistic](../components/n-statistic/SKILL.md) |
+| Number Animation | `n-number-animation` | Animated numbers | [n-number-animation](../components/n-number-animation/SKILL.md) |
+| Countdown | `n-countdown` | Countdown timer | [n-countdown](../components/n-countdown/SKILL.md) |
+| Time | `n-time` | Time display | [n-time](../components/n-time/SKILL.md) |
+| Timeline | `n-timeline` | Timeline display | [n-timeline](../components/n-timeline/SKILL.md) |
+| Calendar | `n-calendar` | Calendar view | [n-calendar](../components/n-calendar/SKILL.md) |
+| Image | `n-image` | Image with preview | [n-image](../components/n-image/SKILL.md) |
+| Empty | `n-empty` | Empty state | [n-empty](../components/n-empty/SKILL.md) |
+| Result | `n-result` | Result page | [n-result](../components/n-result/SKILL.md) |
+| Skeleton | `n-skeleton` | Loading skeleton | [n-skeleton](../components/n-skeleton/SKILL.md) |
+| Progress | `n-progress` | Progress bar | [n-progress](../components/n-progress/SKILL.md) |
+| Spin | `n-spin` | Loading spinner | [n-spin](../components/n-spin/SKILL.md) |
+| Log | `n-log` | Log display | [n-log](../components/n-log/SKILL.md) |
+| Heatmap | `n-heatmap` | Heatmap visualization | [n-heatmap](../components/n-heatmap/SKILL.md) |
+| Equation | `n-equation` | Math equation | [n-equation](../components/n-equation/SKILL.md) |
+
+### 4. Navigation Components (12)
+
+Navigation and wayfinding components.
+
+| Component | Tag | Description | Skill Path |
+|-----------|-----|-------------|------------|
+| Menu | `n-menu` | Navigation menu | [n-menu](../components/n-menu/SKILL.md) |
+| Tabs | `n-tabs` | Tabs | [n-tabs](../components/n-tabs/SKILL.md) |
+| Breadcrumb | `n-breadcrumb` | Breadcrumb navigation | [n-breadcrumb](../components/n-breadcrumb/SKILL.md) |
+| Anchor | `n-anchor` | Anchor navigation | [n-anchor](../components/n-anchor/SKILL.md) |
+| Dropdown | `n-dropdown` | Dropdown menu | [n-dropdown](../components/n-dropdown/SKILL.md) |
+| Popselect | `n-popselect` | Popover select | [n-popselect](../components/n-popselect/SKILL.md) |
+| Steps | `n-steps` | Steps guide | [n-steps](../components/n-steps/SKILL.md) |
+| Pagination | `n-pagination` | Pagination | [n-pagination](../components/n-pagination/SKILL.md) |
+| Affix | `n-affix` | Sticky positioning | [n-affix](../components/n-affix/SKILL.md) |
+| Back Top | `n-back-top` | Back to top button | [n-back-top](../components/n-back-top/SKILL.md) |
+| Page Header | `n-page-header` | Page header | [n-page-header](../components/n-page-header/SKILL.md) |
+
+### 5. Feedback Components (11)
+
+User feedback and notification components.
+
+| Component | Tag | Description | Skill Path |
+|-----------|-----|-------------|------------|
+| Dialog | `n-dialog` | Modal dialog | [n-dialog](../components/n-dialog/SKILL.md) |
+| Modal | `n-modal` | Modal container | [n-modal](../components/n-modal/SKILL.md) |
+| Drawer | `n-drawer` | Drawer panel | [n-drawer](../components/n-drawer/SKILL.md) |
+| Message | `n-message` | Toast message | [n-message](../components/n-message/SKILL.md) |
+| Notification | `n-notification` | Notification | [n-notification](../components/n-notification/SKILL.md) |
+| Popconfirm | `n-popconfirm` | Popconfirm | [n-popconfirm](../components/n-popconfirm/SKILL.md) |
+| Popover | `n-popover` | Popover | [n-popover](../components/n-popover/SKILL.md) |
+| Tooltip | `n-tooltip` | Tooltip | [n-tooltip](../components/n-tooltip/SKILL.md) |
+| Alert | `n-alert` | Alert messages | [n-alert](../components/n-alert/SKILL.md) |
+| Loading Bar | `n-loading-bar` | Loading bar | [n-loading-bar](../components/n-loading-bar/SKILL.md) |
+| Discrete | `n-discrete` | Discrete API | [n-discrete](../components/n-discrete/SKILL.md) |
+
+### 6. Layout Components (9)
+
+Page structure and layout components.
+
+| Component | Tag | Description | Skill Path |
+|-----------|-----|-------------|------------|
+| Layout | `n-layout` | Layout container | [n-layout](../components/n-layout/SKILL.md) |
+| Grid | `n-grid` | Grid system | [n-grid](../components/n-grid/SKILL.md) |
+| Legacy Grid | `n-legacy-grid` | Legacy grid | [n-legacy-grid](../components/n-legacy-grid/SKILL.md) |
+| Flex | `n-flex` | Flex container | [n-flex](../components/n-flex/SKILL.md) |
+| Space | `n-space` | Spacing | [n-space](../components/n-space/SKILL.md) |
+| Split | `n-split` | Split panels | [n-split](../components/n-split/SKILL.md) |
+| Carousel | `n-carousel` | Image carousel | [n-carousel](../components/n-carousel/SKILL.md) |
+| Marquee | `n-marquee` | Marquee animation | [n-marquee](../components/n-marquee/SKILL.md) |
+
+### 7. Utility Components (8)
+
+Helper and configuration components.
+
+| Component | Tag | Description | Skill Path |
+|-----------|-----|-------------|------------|
+| Config Provider | `n-config-provider` | Global config | [n-config-provider](../components/n-config-provider/SKILL.md) |
+| Scrollbar | `n-scrollbar` | Custom scrollbar | [n-scrollbar](../components/n-scrollbar/SKILL.md) |
+| Virtual List | `n-virtual-list` | Virtual scroll list | [n-virtual-list](../components/n-virtual-list/SKILL.md) |
+| Infinite Scroll | `n-infinite-scroll` | Infinite scroll | [n-infinite-scroll](../components/n-infinite-scroll/SKILL.md) |
+| Watermark | `n-watermark` | Watermark | [n-watermark](../components/n-watermark/SKILL.md) |
+| Global Style | `n-global-style` | Global styles | [n-global-style](../components/n-global-style/SKILL.md) |
+| Highlight | `n-highlight` | Code highlight | [n-highlight](../components/n-highlight/SKILL.md) |
+
+## Basic Usage
+
+### Importing Components
+
+Naive UI supports both global and on-demand imports:
+
+```ts
+// Global import
+import naive from 'naive-ui'
+app.use(naive)
+
+// On-demand import (tree-shakable)
+import { NButton, NInput, NCard } from 'naive-ui'
+
+app.component('NButton', NButton)
+app.component('NInput', NInput)
+app.component('NCard', NCard)
+```
+
+### Using Components in Templates
+
+```vue
+<template>
+  <n-space vertical>
+    <n-card title="Welcome">
+      <n-input v-model:value="text" placeholder="Type something" />
+      <n-button type="primary" @click="handleClick">
+        Submit
+      </n-button>
+    </n-card>
+  </n-space>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const text = ref('')
+
+const handleClick = () => {
+  console.log(text.value)
+}
+</script>
+```
+
+## Common Patterns
+
+### Form with Validation
+
+```vue
+<template>
+  <n-form ref="formRef" :model="model" :rules="rules">
+    <n-form-item label="Name" path="name">
+      <n-input v-model:value="model.name" />
+    </n-form-item>
+    <n-form-item label="Email" path="email">
+      <n-input v-model:value="model.email" />
+    </n-form-item>
+    <n-form-item>
+      <n-button type="primary" @click="submit">Submit</n-button>
+    </n-form-item>
+  </n-form>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const formRef = ref()
+const model = reactive({ name: '', email: '' })
+const rules = {
+  name: [{ required: true, message: 'Name required' }],
+  email: [{ required: true, type: 'email', message: 'Valid email required' }]
+}
+
+const submit = async () => {
+  await formRef.value?.validate()
+}
+</script>
+```
+
+### Data Table with Actions
+
+```vue
+<template>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+  />
+</template>
+
+<script setup>
+import { h } from 'vue'
+import { NButton, useMessage } from 'naive-ui'
+
+const message = useMessage()
+
+const columns = [
+  { title: 'Name', key: 'name' },
+  { title: 'Age', key: 'age' },
+  {
+    title: 'Actions',
+    key: 'actions',
+    render(row) {
+      return h(NButton, {
+        size: 'small',
+        onClick: () => message.info(`Edit ${row.name}`)
+      }, { default: () => 'Edit' })
+    }
+  }
+]
+
+const data = [
+  { name: 'John', age: 30 },
+  { name: 'Jane', age: 25 }
+]
+
+const pagination = { pageSize: 10 }
+</script>
+```
+
+### Modal Dialog
+
+```vue
+<template>
+  <n-button @click="showModal = true">Open Modal</n-button>
+  
+  <n-modal v-model:show="showModal" preset="dialog" title="Confirm">
+    <p>Are you sure you want to proceed?</p>
+    <template #action>
+      <n-button @click="showModal = false">Cancel</n-button>
+      <n-button type="primary" @click="confirm">Confirm</n-button>
+    </template>
+  </n-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const showModal = ref(false)
+
+const confirm = () => {
+  showModal.value = false
+}
+</script>
+```
+
+## Component Selection Guide
+
+### When to Use Which Component
+
+| Use Case | Recommended Component |
+|----------|----------------------|
+| Primary action | `n-button` with `type="primary"` |
+| Text input | `n-input` |
+| Selection from list | `n-select` |
+| Boolean toggle | `n-switch` or `n-checkbox` |
+| Date selection | `n-date-picker` |
+| Form layout | `n-form` with `n-form-item` |
+| Data grid | `n-data-table` |
+| Navigation | `n-menu` or `n-tabs` |
+| Modal content | `n-modal` or `n-dialog` |
+| User feedback | `n-message` or `n-notification` |
+| Page layout | `n-layout` with `n-layout-header`, `n-layout-content` |
+| Card container | `n-card` |
+| Loading state | `n-spin` or `n-skeleton` |
+
+## Best Practices
+
+1. **Use on-demand imports**: Import only needed components for smaller bundles
+   ```ts
+   import { NButton, NInput } from 'naive-ui'
+   ```
+
+2. **Wrap app with n-config-provider**: Configure theme, locale, and defaults globally
+   ```vue
+   <n-config-provider :theme="theme">
+     <App />
+   </n-config-provider>
+   ```
+
+3. **Use n-global-style with themes**: Sync global styles when using dark mode
+   ```vue
+   <n-config-provider :theme="theme">
+     <n-global-style />
+     <App />
+   </n-config-provider>
+   ```
+
+4. **Leverage provider components**: Use message, dialog, notification providers
+   ```vue
+   <n-message-provider>
+     <n-dialog-provider>
+       <n-notification-provider>
+         <App />
+       </n-notification-provider>
+     </n-dialog-provider>
+   </n-message-provider>
+   ```
+
+5. **Use TypeScript**: Take advantage of full type definitions
+   ```ts
+   import type { DataTableColumns, FormRules } from 'naive-ui'
+   ```
+
+6. **Follow naming conventions**: Use `n-` prefix in templates
+   ```vue
+   <n-button>Click</n-button>
+   ```
+
+7. **Use composition API**: Components work best with Vue 3 composition API
+   ```vue
+   <script setup>
+   import { ref } from 'vue'
+   const value = ref('')
+   </script>
+   ```
+
+## Related Skills
+
+- [naive-ui-quickstart](../naive-ui-quickstart/SKILL.md): Installation and setup
+- [naive-ui-theming](../naive-ui-theming/SKILL.md): Theme customization
+- [naive-ui-dark-mode](../naive-ui-dark-mode/SKILL.md): Dark mode implementation
+- [naive-ui-ssr](../naive-ui-ssr/SKILL.md): Server-side rendering
+- [n-config-provider](../components/n-config-provider/SKILL.md): Global configuration