mcpField
N
naive-ui

naive-ui

github.com/sepushDevelopment24431 installsUpdated 35w ago
Repository

About naive-ui

A reference skill for developers building Vue 3 applications with Naive UI. Its 33 prioritized rules cover component work, configuration, customization, and troubleshooting.

Key features

  1. 0133 rules across eight categories
  2. 02Guidance for forms and validation
  3. 03Virtual scrolling for large datasets
  4. 04Theme and dark mode customization
  5. 05Nuxt.js, SSR, and Vite guidance

Use cases

  1. 01Creating Naive UI components in Vue 3
  2. 02Building forms with dynamic fields
  3. 03Displaying large tables or trees
  4. 04Investigating styling or usage issues

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sepush/naive-ui-skills --skill naive-ui

After installing, type/naive-uiin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

metadata.json
README.md
references/
component-button.md
component-data-display.md
component-datatable.md
component-datepicker.md
component-display.md
component-feedback-alert.md
component-feedback.md
component-form-validation.md
component-form.md
component-input.md
component-layout.md
component-menu.md
component-modal.md
component-navigation-steps.md
component-select.md
component-selection.md
component-tree.md
component-upload.md
component-virtual-list.md
core-controlled-uncontrolled.md
core-customize-theme.md
core-experimental-features.md
core-fonts.md
core-i18n.md
core-import-on-demand.md
core-installation.md
core-jsx.md
core-nuxtjs.md

Details

From the project README

Naive UI Practices

Usage guide for Naive UI and Vue 3 applications. Contains 33 rules across 8 categories, prioritized by impact to guide automated refactoring, component creation, and troubleshooting.

When to Apply

Reference these guidelines when:

  • Writing new Vue 3 components using Naive UI
  • Implementing forms and data validation
  • Handling large datasets with virtual scrolling (DataTable, Tree, Select)
  • Customizing application themes and dark mode
  • Troubleshooting Naive UI usage issues and styling conflicts

Rule Categories by Priority

PriorityCategoryImpactPrefix
1Core ConfigurationCRITICALcore-
2Form & Data InputCRITICALcomponent-
3Complex Data DisplayHIGHcomponent-
4Feedback & OverlayHIGHcomponent-
5Layout & NavigationMEDIUMcomponent-
6Basic Data DisplayMEDIUMcomponent-
7Advanced CustomizationLOW-MEDIUMcore-
8Ecosystem & TroubleshootingLOWcore-

Quick Reference

1. Core Configuration (CRITICAL)
  • core-setup - Auto-import setup, global config, providers
  • core-theme - Theme overrides, dark mode, CSS variables, useThemeVars
  • core-import-on-demand - Import on demand and tree shaking
  • core-nuxtjs - Nuxt.js integration best practices
  • core-ssr - Server-Side Rendering guidelines
  • core-style-conflict - Potential style conflict resolution
2. Form & Data Input (CRITICAL)
  • component-form-validation - Validation rules, dynamic forms, array fields
  • component-form - Layout, validation, dynamic fields, nested forms
  • component-input - Formatted input, precision, validation triggers
  • component-select - Filterable, multiple, tags, async search, custom render
  • component-datepicker - Date ranges, shortcuts, formatting, timezone
  • component-upload - Custom request, file handling, drag drop
3. Complex Data Display (HIGH)
  • component-datatable - Virtual scroll, remote data, sorting, filtering, fixed columns
  • component-tree - Async loading, checkable, controlled state, large dataset handling
  • component-virtual-list - Virtual scrolling patterns
4. Feedback & Overlay (HIGH)
  • component-modal - Form modals, draggable, focus management, async close
  • component-feedback - Programmatic API, global methods (Message, Notification)
  • component-feedback-alert - Alert, Skeleton, Spin, LoadingBar, Popconfirm
5. Layout & Navigation (MEDIUM)
  • component-layout - Layout, Grid, Flex, Space, Card, Divider
  • component-menu - Menu, Dropdown, Breadcrumb, Tabs
  • component-navigation-steps - Steps, Timeline, Pagination, Anchor, BackTop
6. Basic Data Display (MEDIUM)
  • component-data-display - Image, List, Descriptions, Calendar, Time, Countdown
  • component-display - Badge, Tag, Avatar, Progress, Statistic, Result, Empty
  • component-button - Button variants, loading, icons
  • component-selection - Radio, Checkbox, Switch, Slider, Rate, ColorPicker
7. Advanced Customization (LOW-MEDIUM)
  • core-customize-theme - Customizing theme extensively
  • core-fonts - Configuring fonts
  • core-i18n - Internationalization
  • core-controlled-uncontrolled - Controlled manner & uncontrolled manner
8. Ecosystem & Troubleshooting (LOW)
  • core-troubleshooting - Common issues and quick fixes
  • core-installation - Installation guidelines
  • core-jsx - JSX & TSX usage
  • core-umd - Using UMD build
  • core-usage-sfc - Usage in SFC
  • core-vite-ssge - Vite SSG/SSE integration
  • core-vitepress - Vitepress integration
  • core-experimental-features - Experimental features

How to Use

Read individual rule files for detailed explanations and code examples:

references/core-setup.md
references/component-datatable.md

Each rule file contains:

  • Specific implementation details
  • Code examples for Vue 3 setup script
  • Warning notes and prerequisites
  • Relevant TypeScript interfaces

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

Comments

Markdown supported