Naive UI Skills

Naive UI Skills Library

A comprehensive skill library for Naive UI framework, designed for AI agents to understand and utilize Naive UI components effectively.

When to Invoke

Invoke this skill when:

• User needs to implement any Naive UI component
• User asks about Naive UI configuration or setup
• User wants to customize themes or use dark mode
• User needs internationalization (i18n) support
• User asks about design specifications (colors, borders, typography)
• User encounters issues with Naive UI components

Skill Library Overview

This library contains 107 skills organized into the following categories:

How to Locate Skills

1. Component Skills (95 skills)

All component skills follow the naming convention n-{component-name} and are located in the components/ directory.

Path Pattern:

./components/n-{component-name}/SKILL.md

Examples:

• Button: ./components/n-button/SKILL.md
• Form: ./components/n-form/SKILL.md
• DataTable: ./components/n-data-table/SKILL.md
• Dialog: ./components/n-dialog/SKILL.md

2. Design Specification Skills (5 skills)

Design skills provide guidance on Naive UI design system.

3. Foundation Skills (6 skills)

Foundation skills cover core setup and configuration.

Skill Invocation Guide

Step 1: Identify User Intent

Analyze the user's request to determine which skill category is needed:

Step 2: Locate the Skill File

Use the path patterns above to locate the appropriate skill file:

# For component skills
./components/n-{component-name}/SKILL.md

# For design skills
./naive-ui-design-{name}/SKILL.md

# For foundation skills
./naive-ui-{name}/SKILL.md

Step 3: Read and Apply Skill Content

Each skill file contains:

• When to Invoke: Specific conditions for using the skill
• Features: Component capabilities and options
• API Reference: Attributes, events, slots, exposes
• Usage Examples: Code snippets for common patterns
• Best Practices: Recommended implementation guidelines

Component Skill Index

Common Components (15)

Data Input Components (21)

Data Display Components (21)

Navigation Components (9)

Feedback Components (16)

Layout Components (6)

Config Components (3)

Utility Components (4)

Usage Examples

Example 1: User asks about button implementation

User Request: "How do I create a primary button with loading state?"

Agent Action:

1. Identify intent: Component skill - Button
2. Locate skill: ./components/n-button/SKILL.md
3. Read skill content
4. Provide response with API reference and code example

Response:

<template>
  <n-button type="primary" :loading="loading" @click="handleClick">
    {{ loading ? 'Loading...' : 'Submit' }}
  </n-button>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)

const handleClick = async () => {
  loading.value = true
  try {
    await submitData()
  } finally {
    loading.value = false
  }
}
</script>

Example 2: User asks about form validation

User Request: "How do I create a form with validation?"

Agent Action:

1. Identify intent: Component skill - Form
2. Locate skill: ./components/n-form/SKILL.md
3. Read skill content
4. Provide response with validation example

Response:

<template>
  <n-form ref="formRef" :model="form" :rules="rules">
    <n-form-item label="Name" path="name">
      <n-input v-model:value="form.name" />
    </n-form-item>
    <n-form-item>
      <n-button type="primary" @click="submitForm">Submit</n-button>
    </n-form-item>
  </n-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formRef = ref()
const form = reactive({
  name: ''
})

const rules = {
  name: [
    { required: true, message: 'Please input name', trigger: 'blur' }
  ]
}

const submitForm = async () => {
  await formRef.value?.validate()
  // Submit logic
}
</script>

Example 3: User asks about theme customization

User Request: "How do I customize Naive UI theme colors?"

Agent Action:

1. Identify intent: Foundation skill - Theming
2. Locate skill: ./naive-ui-theming/SKILL.md
3. Read skill content
4. Provide response with theme override example

Response:

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <App />
  </n-config-provider>
</template>

<script setup>
const themeOverrides = {
  common: {
    primaryColor: '#18a058',
    primaryColorHover: '#36ad6a',
    primaryColorPressed: '#0c7a43'
  },
  Button: {
    textColor: '#18a058'
  }
}
</script>

Example 4: User asks about dark mode

User Request: "How do I implement dark mode in Naive UI?"

Agent Action:

1. Identify intent: Foundation skill - Dark Mode
2. Locate skill: ./naive-ui-dark-mode/SKILL.md
3. Read skill content
4. Provide response with implementation example

Response:

<template>
  <n-config-provider :theme="isDark ? darkTheme : null">
    <App />
  </n-config-provider>
</template>

<script setup>
import { ref } from 'vue'
import { darkTheme } from 'naive-ui'

const isDark = ref(false)
</script>

Configuration Requirements

Prerequisites

Before using this skill library, ensure:

1. Vue 3.0+ is installed
2. Naive UI 2.44+ is installed
3. Node.js 18+ for development

Installation

npm install naive-ui
# or
pnpm add naive-ui

TypeScript Support

Naive UI is written in TypeScript and provides full type definitions out of the box.

Input Parameters

When invoking skills, consider these parameters:

Output Format

Each skill provides:

1. API Reference: Complete attributes, events, slots, exposes
2. Code Examples: Working code snippets
3. Best Practices: Recommended implementation patterns
4. Common Issues: Troubleshooting tips
5. Component Interactions: How to use with other components

Important Notes

1. Skill Priority

When multiple skills could apply, prioritize in this order:

1. Component-specific skills (most specific)
2. Foundation skills (configuration)
3. Design specification skills (guidelines)

2. Cross-References

Many skills reference related skills. Always check:

• Related components in the same category
• Foundation skills for configuration
• Design skills for styling guidelines

3. Version Compatibility

This skill library is based on Naive UI 2.44+. Some features may not be available in earlier versions.

4. Naming Conventions

• Component skills use n-{name} format (matches Vue component tags)
• Foundation skills use naive-ui-{name} format
• Design skills use naive-ui-design-{name} format

5. File Structure

naive-ui-skills/
├── SKILL.md                          # This file (main entry)
├── README.md                         # English documentation
├── README_CN.md                      # Chinese documentation
├── AGENTS.md                         # Agents documentation
├── LICENSE                           # MIT License
├── components/                       # 95 component skills
│   ├── n-button/
│   │   └── SKILL.md
│   ├── n-form/
│   │   └── SKILL.md
│   └── ...
├── naive-ui-quickstart/              # Foundation skills
├── naive-ui-theming/
├── naive-ui-i18n/
├── naive-ui-dark-mode/
├── naive-ui-ssr/
├── naive-ui-components/
├── naive-ui-design-border/           # Design skills
├── naive-ui-design-color/
├── naive-ui-design-layout/
├── naive-ui-design-typography/
└── naive-ui-design-overview/

Best Practices for Agents

1. Always start with this file when user mentions Naive UI
2. Locate the specific skill based on user intent
3. Read the complete skill file before responding
4. Provide code examples from the skill documentation
5. Reference related skills when applicable
6. Include best practices from the skill content
7. Mention common issues if relevant to user's context

Related Resources

• Naive UI Documentation
• Vue 3 Documentation
• Naive UI GitHub