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,210 @@
+---
+name: naive-ui-quickstart
+description: Get started with Naive UI - a Vue 3 component library with comprehensive installation and setup guide
+metadata:
+  author: jiaiyan
+  version: 1.0.0
+---
+
+# Naive UI Quickstart
+
+A comprehensive guide to installing and setting up Naive UI in your Vue 3 project.
+
+## When to Use
+
+Use this skill when you need to:
+- Set up Naive UI in a new Vue 3 project
+- Install Naive UI dependencies
+- Configure basic Naive UI usage
+- Understand the prerequisites for using Naive UI
+
+## Prerequisites
+
+- **Vue 3**: Naive UI only supports Vue 3. If you are using Vue 2, consider other UI libraries.
+- **Node.js**: Ensure you have Node.js installed (version 14+ recommended)
+- **Package Manager**: npm, yarn, or pnpm
+
+## Installation
+
+### Install Naive UI
+
+```bash
+npm i -D naive-ui
+```
+
+Or using yarn:
+
+```bash
+yarn add -D naive-ui
+```
+
+Or using pnpm:
+
+```bash
+pnpm add -D naive-ui
+```
+
+### Install Fonts
+
+Naive UI uses vfonts for typography:
+
+```bash
+npm i -D vfonts
+```
+
+### Install Icons (Recommended)
+
+Naive UI recommends using [xicons](https://www.xicons.org) as the icon library:
+
+```bash
+npm i -D @vicons/ionicons5
+# or other icon packs
+npm i -D @vicons/fluent
+npm i -D @vicons/antd
+```
+
+## Basic Usage
+
+### Global Registration
+
+Register Naive UI globally in your main entry file:
+
+```js
+// main.js
+import { createApp } from 'vue'
+import naive from 'naive-ui'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(naive)
+app.mount('#app')
+```
+
+### On-Demand Import
+
+Import components as needed:
+
+```vue
+<template>
+  <n-button @click="handleClick">Click Me</n-button>
+</template>
+
+<script setup>
+import { NButton } from 'naive-ui'
+
+const handleClick = () => {
+  console.log('Button clicked!')
+}
+</script>
+```
+
+### Tree-Shaking Support
+
+Naive UI supports tree-shaking out of the box. When using bundlers like Vite or webpack, only the components you import will be included in the final bundle.
+
+```js
+// This will only bundle the Button component
+import { NButton } from 'naive-ui'
+```
+
+## Configuration Options
+
+### Using Config Provider
+
+Wrap your application with `n-config-provider` for global configuration:
+
+```vue
+<template>
+  <n-config-provider>
+    <n-message-provider>
+      <n-dialog-provider>
+        <n-notification-provider>
+          <App />
+        </n-notification-provider>
+      </n-dialog-provider>
+    </n-message-provider>
+  </n-config-provider>
+</template>
+
+<script setup>
+import { 
+  NConfigProvider, 
+  NMessageProvider, 
+  NDialogProvider,
+  NNotificationProvider 
+} from 'naive-ui'
+</script>
+```
+
+### Provider Hierarchy
+
+| Provider | Purpose |
+|----------|---------|
+| `NConfigProvider` | Global configuration (theme, locale, etc.) |
+| `NMessageProvider` | Message notification context |
+| `NDialogProvider` | Dialog/Modal context |
+| `NNotificationProvider` | Notification context |
+
+## Common Patterns
+
+### Basic Application Setup
+
+```vue
+<!-- App.vue -->
+<template>
+  <n-config-provider>
+    <n-message-provider>
+      <n-dialog-provider>
+        <n-notification-provider>
+          <div class="app-container">
+            <router-view />
+          </div>
+        </n-notification-provider>
+      </n-dialog-provider>
+    </n-message-provider>
+  </n-config-provider>
+</template>
+
+<script setup>
+import { 
+  NConfigProvider,
+  NMessageProvider,
+  NDialogProvider,
+  NNotificationProvider
+} from 'naive-ui'
+</script>
+```
+
+### Using with TypeScript
+
+Naive UI is written in TypeScript and provides full type definitions:
+
+```vue
+<template>
+  <n-button type="primary" @click="handleClick">
+    Submit
+  </n-button>
+</template>
+
+<script setup lang="ts">
+import { NButton, ButtonProps } from 'naive-ui'
+
+const handleClick: ButtonProps['onClick'] = (e) => {
+  console.log('Clicked', e)
+}
+</script>
+```
+
+## Best Practices
+
+1. **Use On-Demand Imports**: Import only the components you need to reduce bundle size
+2. **Set Up Providers Early**: Configure all necessary providers at the root level of your application
+3. **Install Fonts**: Always install vfonts for consistent typography
+4. **Use TypeScript**: Leverage Naive UI's TypeScript support for better development experience
+5. **Check Browser Compatibility**: Naive UI supports modern browsers (Chrome, Firefox, Safari, Edge)
+
+## Design Resources
+
+- [Naive UI Design Library (Sketch)](https://naive-ui.oss-accelerate.aliyuncs.com/NaiveUI-Design-Library-en-US.sketch)
+- [Official Documentation](https://www.naiveui.com)
+- [GitHub Repository](https://github.com/tusen-projects/naive-ui)