element-plus-skills

Element Plus Skills Library - A comprehensive skill library for AI agents to understand and utilize Element Plus UI components. Invoke when user needs to work with Element Plus components, theming, i18n, dark mode, or design specifications.

Affix component for fixing elements to a specific visible area. Invoke when user needs to create sticky navigation, fixed headers, or elements that remain visible while scrolling.

Alert component for displaying important alert messages. Invoke when user needs to show non-dismissible notifications, status messages, or important information that requires user attention.

Anchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections.

Autocomplete component for input suggestions. Invoke when user needs to provide input suggestions, autocomplete functionality, or search-as-you-type features.

Avatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations.

Backtop component for back-to-top button. Invoke when user needs to provide quick navigation back to the top of a long page.

Badge component for displaying numbers or status marks on buttons and icons. Invoke when user needs to show notification counts, status indicators, or attention markers.

Breadcrumb component for displaying the location of the current page. Invoke when user needs to show navigation paths, page hierarchy, or enable easier browsing back.

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

Calendar component for displaying dates. Invoke when user needs to display a calendar view, select dates, or show scheduled events.

Card component for integrating information in a card container. Invoke when user needs to display grouped content, dashboard cards, or content sections with headers.

Carousel component for looping images or texts in limited space. Invoke when user needs to display image sliders, content carousels, or rotating banners.

Cascader component for hierarchical option selection. Invoke when user needs to select from multi-level data like regions, categories, or organizational structures.

Checkbox component for multiple choice selection. Invoke when user needs to allow users to select multiple options from a list, create check-all functionality, or toggle between states.

Collapse component for storing expandable content. Invoke when user needs to create accordion panels, FAQ sections, or collapsible content areas.

ColorPickerPanel is the core panel component of ColorPicker for custom color selection UI. Invoke when user needs to build custom color picker interfaces without the dropdown wrapper.

ColorPicker component for color selection. Invoke when user needs to select colors, set theme colors, or customize color values.

ConfigProvider component for global configuration. Invoke when user needs to configure global settings, i18n, theme, or component defaults.

Container components for scaffolding basic page structure with header, aside, main, and footer sections. Invoke when user needs to create page layouts.

DatePickerPanel is the core panel component of DatePicker for custom date selection UI. Invoke when user needs to build custom date picker interfaces without the dropdown wrapper.

DatePicker component for date input. Invoke when user needs to select dates, date ranges, months, years, or datetime values.

DateTimePicker component for selecting date and time together. Invoke when user needs to select both date and time in a single picker.

Descriptions component for displaying multiple fields in list form. Invoke when user needs to display detailed information, product specifications, or profile data.

Dialog modal component for displaying content in a layer above the page. Invoke when user needs modal dialogs, confirmations, or form popups.

Divider component for separating content. Invoke when user needs to create visual separation between content sections, add horizontal or vertical dividers.

Drawer component for displaying content in a slide-out panel. Invoke when user needs to create side panels, slide-out menus, or form drawers.

Dropdown component for toggleable menus displaying lists of links and actions. Invoke when user needs to create dropdown menus, action menus, or context menus.

Empty component for placeholder hints in empty states. Invoke when user needs to display empty data states, no results found, or placeholder content.

Form component for data collection, validation, and submission. Invoke when user needs to create forms, implement validation, or handle form data.

Icon component for displaying SVG icons. Invoke when user needs to display icons, customize icon sizes and colors, or use Element Plus icon collection.

Image component with lazy load, placeholder, and preview features. Invoke when user needs to display images with loading states, error handling, or preview functionality.

InfiniteScroll directive for loading more data when scrolling to bottom. Invoke when user needs to implement infinite scrolling, lazy loading, or pagination on scroll.

InputNumber component for numeric input with controls. Invoke when user needs to input numbers with increment/decrement buttons, set numeric ranges, or enforce numeric input.

Input component for text entry with multiple types, validation, and formatting. Invoke when user needs to implement text input, textarea, or password input.

InputTag component for adding content as tags. Invoke when user needs to create tag inputs, multi-value inputs, or keyword/tag entry fields.

Link component for text hyperlinks. Invoke when user needs to create text links, navigation links, or styled anchor elements.

Loading component for showing animation while loading data. Invoke when user needs to display loading states, async operation feedback, or data fetching indicators.

Mention component for mentioning users or items in input. Invoke when user needs to implement @mentions, user tagging, or item references in text inputs.

Menu component for website navigation with horizontal and vertical modes. Invoke when user needs to create navigation menus, sidebars, or dropdown menus.