Latest Agent Skills

Discrete API for using message, dialog, notification, loadingBar, and modal outside setup context. Invoke when user needs to use Naive UI APIs outside Vue components in Naive UI.

Collapse component for creating expandable/collapsible content panels. Invoke when user needs to implement accordions, FAQ sections, or expandable navigation menus in Naive UI.

A checkbox component for binary and multiple selections with support for groups, indeterminate state, custom values, and grid layouts

A cascader component for displaying and selecting tree-structured data with support for single/multiple selection, async loading, filtering, and various check strategies

Carousel component for displaying rotating content like images, banners, or cards. Invoke when user needs to implement image sliders, content carousels, or card-based navigation in Naive UI.

Calendar component for displaying and selecting dates. Invoke when user needs to implement date selection, date display, or calendar-based interfaces in Naive UI.

Back Top component for scrolling back to page top. Invoke when user needs to implement a back-to-top button or scroll-to-top functionality in Naive UI.

Tooltip component for displaying contextual information on hover or focus. Invoke when user needs to show helpful hints or additional context in Naive UI.

QR Code component for generating QR codes. Invoke when user needs to generate or display QR codes for URLs, text, or data encoding in Naive UI.

Popover component for displaying floating content. Invoke when user needs to implement tooltips, dropdown menus, or floating panels in Naive UI.

Message component for displaying toast notifications and feedback. Invoke when user needs to show temporary feedback messages, loading states, or success/error notifications in Naive UI.

A mention input component for @mentions with dropdown suggestions, supporting both text and textarea modes

Marquee component for creating scrolling content animations. Invoke when user needs to display horizontally scrolling text or content in Naive UI.

Heatmap component for displaying calendar-style data visualization like GitHub contribution graphs. Invoke when user needs to visualize time-series data or activity patterns in Naive UI.

Element component that provides access to theme CSS variables. Invoke when user needs to use theme variables in custom elements or access CSS variables within the theme context.

Divider component for separating content sections. Invoke when user needs to implement horizontal or vertical dividers with optional titles in Naive UI.

Get started with Naive UI - a Vue 3 component library with comprehensive installation and setup guide

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.

A comprehensive file upload component supporting drag-and-drop, multiple files, custom requests, thumbnails, and progress tracking

A toggle switch component for binary choices in Naive UI. Supports custom values, loading states, custom colors, and various sizes with optional content labels.

A versatile slider component for selecting values within a range in Naive UI. Supports single value, range selection, marks, vertical mode, and custom handles.

A versatile select component for single and multiple selection with features like filtering, remote search, grouping, and virtual scrolling

Result component for displaying operation results or status pages. Invoke when user needs to show success, error, warning, or HTTP status pages in Naive UI.

Layout component for building page structures with header, content, footer, and sider. Invoke when user needs to implement page layouts, sidebars, or application structure in Naive UI.

Drawer component for slide-out panels and side navigation. Invoke when user needs to create slide-out panels, sidebars, or multi-level navigation drawers in Naive UI.

Dialog component for modal confirmations and user interactions. Invoke when user needs to create modal dialogs, confirmations, or async operations with user confirmation in Naive UI.

Button component with various types, sizes, and styles. Invoke when user needs to implement buttons, button groups, or customize button appearance in Naive UI.

Avatar component for displaying user profile images, icons, or text. Invoke when user needs to implement user avatars, avatar groups, or customize avatar appearance in Naive UI.

Anchor component for navigation and table of contents. Invoke when user needs to implement anchor navigation, table of contents, or scroll-based navigation highlighting in Naive UI.

Dark mode implementation and theme switching for Naive UI applications. Invoke when user needs to implement dark/light theme switching, follow system preferences, or customize dark theme variables.

A versatile component for displaying entity information with customizable sections including avatar, header, description, content, and footer.

A basic table component for rendering simple HTML tables with styling options including borders, stripes, and size variations.

Steps component for showing progress through a sequence. Invoke when user needs to implement step indicators, wizards, or progress tracking in Naive UI.

Split panel component for resizable split layouts. Invoke when user needs to implement resizable split views, pane layouts, or divider-based layouts in Naive UI.

Spacing component for consistent gaps between elements. Invoke when user needs to add spacing between components or create layouts with gaps in Naive UI.

A radio button component for single selection from a set of options in Naive UI. Supports individual radio buttons, radio groups, and button-style radio groups with various sizes and states.

Modal component for displaying dialog boxes and content overlays. Invoke when user needs to implement modal dialogs, confirmations, or floating panels in Naive UI.

A versatile input component for text, password, and textarea inputs with comprehensive features including validation, icons, and various states

Image component for displaying images with preview, lazy loading, and error handling. Invoke when user needs to implement image display, image preview, image gallery, or customize image appearance in Naive UI.

Empty component for displaying empty states. Invoke when user needs to show empty data states, no results, or placeholder content in Naive UI.

Badge component for displaying status indicators and notification counts. Invoke when user needs to show numerical badges, status dots, or custom badge content in Naive UI.

Alert component for displaying important messages and notifications. Invoke when user needs to show contextual feedback messages with different types and styles in Naive UI.

Affix component that makes content stick to fixed places when scrolling. Invoke when user needs to implement sticky positioning or fixed elements in Naive UI.

A powerful tree component for displaying hierarchical data with features like selection, checking, drag-and-drop, virtual scrolling, async loading, and search filtering.

A component for formatting and displaying time values with support for relative time, custom formats, time zones, and Unix timestamps.

Tabs component for switching content in same area. Invoke when user needs to implement tabbed interfaces, content switching, or tab navigation in Naive UI.

Spin component for displaying loading spinners. Invoke when user needs to show loading states with customizable spin indicators in Naive UI.

A rating component for collecting user feedback with customizable icons, colors, and half-star support in Naive UI. Ideal for product reviews, feedback forms, and rating systems.

Menu component for navigation and actions. Invoke when user needs to implement navigation menus, sidebars, dropdown menus, or hierarchical navigation in Naive UI.

List component for displaying structured list items with headers, footers, and dividers. Invoke when user needs to implement list layouts, item lists, or content lists in Naive UI.

Icon component for displaying SVG icons with customizable size, color, and depth. Invoke when user needs to implement icons, icon wrappers, or integrate icon libraries in Naive UI.

CSS Grid-based responsive grid system component. Invoke when user needs to implement grid layouts, responsive designs, or column-based layouts in Naive UI.

A comprehensive form component for data collection, validation, and submission in Naive UI. Provides flexible layout options, built-in validation rules, and seamless integration with various input components.

Flex layout component using CSS flexbox with gap support. Invoke when user needs to implement flexible layouts, spacing between elements, or alignment in Naive UI.

Code component for displaying syntax-highlighted code. Invoke when user needs to display code snippets with syntax highlighting in Naive UI.

Card component for displaying content in a contained, organized manner. Invoke when user needs to implement content cards, panels, or customizable containers in Naive UI.

Customize and apply themes in Naive UI including dark mode, theme variables, and creating themed components

Tag component for displaying labels, categories, or toggle options. Invoke when user needs to implement tags, labels, status indicators, or checkable tags in Naive UI.

Log component for displaying log content with syntax highlighting, lazy loading, and scroll controls. Invoke when user needs to implement log viewers, terminal output, or console displays in Naive UI.

Configure internationalization (i18n) in Naive UI with support for multiple languages and custom locales