Element Plus Skills Library

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

When to Invoke

Invoke this skill when:

• User needs to implement any Element Plus component
• User asks about Element Plus 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 Element Plus components

Skill Library Overview

This library contains 88 skills organized into the following categories:

How to Locate Skills

1. Component Skills (77 skills)

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

Path Pattern:

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

Examples:

• Button: ./components/el-button/SKILL.md
• Form: ./components/el-form/SKILL.md
• Table: ./components/el-table/SKILL.md
• Dialog: ./components/el-dialog/SKILL.md

2. Design Specification Skills (5 skills)

Design skills provide guidance on Element Plus 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/el-{component-name}/SKILL.md

# For design skills
./element-plus-design-{name}/SKILL.md

# For foundation skills
./element-plus-{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

Basic Components (14)

Form Components (24)

Data Display Components (17)

Navigation Components (8)

Feedback Components (12)

Layout Components (4)

Utility Components (5)

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/el-button/SKILL.md
3. Read skill content
4. Provide response with API reference and code example

Response:

<template>
  <el-button type="primary" :loading="loading" @click="handleClick">
    {{ loading ? 'Loading...' : 'Submit' }}
  </el-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/el-form/SKILL.md
3. Read skill content
4. Provide response with validation example

Response:

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="Name" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-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 Element Plus theme colors?"

Agent Action:

1. Identify intent: Foundation skill - Theming
2. Locate skill: ./element-plus-theming/SKILL.md
3. Read skill content
4. Provide response with CSS variables example

Response:

:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
}

Example 4: User asks about dark mode

User Request: "How do I implement dark mode in Element Plus?"

Agent Action:

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

Response:

<template>
  <el-config-provider :locale="locale" :size="size">
    <div :class="{ 'dark': isDark }">
      <App />
    </div>
  </el-config-provider>
</template>

<style>
.dark {
  color-scheme: dark;
}
</style>

Configuration Requirements

Prerequisites

Before using this skill library, ensure:

1. Vue 3.3+ is installed
2. Element Plus 2.4+ is installed
3. Node.js 18+ for development

Installation

npm install element-plus
npm install @element-plus/icons-vue

TypeScript Support

Add to tsconfig.json:

{
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}

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 Element Plus 2.4+. Some features may not be available in earlier versions.

4. Naming Conventions

• Component skills use el-{name} format (matches Vue component tags)
• Foundation skills use element-plus-{name} format
• Design skills use element-plus-design-{name} format

5. File Structure

element-plus-skills/
├── SKILL.md                          # This file (main entry)
├── README.md                         # English documentation
├── README_CN.md                      # Chinese documentation
├── AGENTS.md                         # Agents documentation
├── components/                       # 77 component skills
│   ├── el-button/
│   │   └── SKILL.md
│   ├── el-form/
│   │   └── SKILL.md
│   └── ...
├── element-plus-quickstart/          # Foundation skills
├── element-plus-theming/
├── element-plus-i18n/
├── element-plus-dark-mode/
├── element-plus-ssr/
├── element-plus-components/
├── element-plus-design-border/       # Design skills
├── element-plus-design-color/
├── element-plus-design-layout/
├── element-plus-design-typography/
└── element-plus-design-overview/

Best Practices for Agents

1. Always start with this file when user mentions Element Plus
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

• Element Plus Documentation
• Vue 3 Documentation
• Element Plus GitHub
• Element Plus Icons