SkillsAdd

jiaiyan/element-plus-skills

element-plus-design-overview

Overview of all Element Plus components organized by category. Invoke when user needs a quick reference to all available components or wants to explore the component library.

First seen Jul 2, 2026

Installation

$ npx skills add jiaiyan/element-plus-skills --skill element-plus-design-overview
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from jiaiyan/element-plus-skills · top by installs.

npx skills add jiaiyan/element-plus-skills
element-plus-skills 404 el-pagination 5 el-dialog 5 el-upload 5 el-form 5 element-plus-quickstart 5 element-plus-design-layout 5 el-menu 5 el-table 5 element-plus-theming 5

Browse all from jiaiyan/element-plus-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 25
License LICENSE
Default branch main
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.0.0
More metadata
author
jiaiyan
version
1.0.0

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 5,267 B
  • docs SUMMARY.md 210 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 5 installs

SKILL.md

Element Plus Component Overview

Quick reference to all Element Plus components organized by category.

When to Use

  • Exploring available components
  • Quick component reference
  • Understanding component categories
  • Planning UI implementation

Component Categories

Basic Components (14)

Component Description
Affix Fixes elements to a specific visible area
Anchor Anchor navigation for page sections
Avatar User avatars with images, icons, or characters
Backtop Back-to-top button
Badge Numbers or status marks on elements
Breadcrumb Page location display
Button Basic button with various types
Card Information in card containers
Carousel Image/text carousels
Collapse Expandable panels
Divider Content separation lines
Icon SVG icons
Link Text hyperlinks
Text Styled text display

Form Components (24)

Component Description
Autocomplete Input suggestions
Cascader Hierarchical selection
Checkbox Multiple selection
ColorPicker Color selection
ColorPickerPanel Color picker panel
DatePicker Date selection
DatePickerPanel Date picker panel
DateTimePicker Date and time selection
Form Form management and validation
Input Text input
InputNumber Numeric input
InputTag Tag input
Mention @mentions in inputs
Radio Single selection
Rate Star rating
Select Dropdown selection
SelectV2 Virtualized select
Slider Range slider
Switch Toggle switch
TimePicker Time selection
TimeSelect Fixed time options
Transfer Dual-column selection
TreeSelect Tree-based selection
Upload File upload

Data Display Components (17)

Component Description
Avatar User avatars
Badge Status marks
Calendar Date display
Card Card containers
Carousel Carousels
Descriptions Key-value displays
Empty Empty state placeholder
Image Images with preview
Pagination Page navigation
Progress Progress indicators
Scrollbar Custom scrollbars
Segmented Segmented control
Skeleton Loading placeholders
Statistic Numerical statistics
Table Data tables
TableV2 Virtualized tables
Tag Labels and tags
Timeline Chronological events
Tree Hierarchical data
TreeV2 Virtualized tree

Navigation Components (8)

Component Description
Affix Sticky elements
Anchor Page navigation
Breadcrumb Location display
Dropdown Dropdown menus
Menu Navigation menu
PageHeader Page headers
Steps Step guide
Tabs Tabbed content

Feedback Components (12)

Component Description
Alert Alert messages
Dialog Modal dialogs
Drawer Slide-out panels
Loading Loading indicators
Message Toast messages
MessageBox Modal alerts
Notification Corner notifications
Popconfirm Confirmation dialogs
Popover Rich popups
Result Result pages
Tooltip Hover tooltips
Tour Product tours

Layout Components (4)

Component Description
Container Layout containers
Divider Content separation
Space Element spacing
Splitter Resizable panels

Utility Components (5)

Component Description
ConfigProvider Global configuration
InfiniteScroll Infinite scrolling
Scrollbar Custom scrollbars
Tour Product tours
Watermark Watermarks

Design Resources

Resource Description
Border Border styles, radius, shadows
Color Color palette and semantics
Layout 24-column grid system
Typography Font conventions

Related Skills

Skill Description
[element-plus-components](./element-plus-components/SKILL.md) Detailed component index with navigation
[element-plus-quickstart](./element-plus-quickstart/SKILL.md) Installation and configuration
[element-plus-theming](./element-plus-theming/SKILL.md) Theme customization
[element-plus-i18n](./element-plus-i18n/SKILL.md) Internationalization

Quick Navigation

For detailed component documentation, navigate to:

./components/el-{name}/SKILL.md

For design specifications, navigate to:

./element-plus-design-{name}/SKILL.md