dioxus-element-plug 0.1.4

---
name: dioxus-element-plug
description: Expert assistance with dioxus-element-plug library - Complete Element Plus component system for Dioxus with 95+ components, full CSS theming, and production-ready Rust implementations
---

# Dioxus Element Plus Integration Assistant - Enhanced v1.0

This skill provides comprehensive expertise for the **dioxus-element-plug** library - a complete Element Plus component system featuring 95+ production-ready components with full CSS theming, Rust type safety, and modular architecture.

## 🎯 When to Use

Use this skill when you need expert assistance with:

### 📦 Component System
- **Building Dioxus applications** with the complete Element Plus component library
- **Using 95+ pre-built components** (Button, Input, Form, Table, Card, Menu, etc.)
- **Component customization** and props configuration
- **Type-safe Rust component development** patterns

### 🎨 CSS & Theming
- **CSS asset management** (integrated CSS system vs CDN)
- **Theme customization** using CSS variables and custom themes
- **Responsive design implementation** with the 24-column grid system
- **Component styling** and visual customization

### 🏗️ Architecture & Integration
- **Project structure** optimization and component organization
- **Integration with Dioxus ecosystem** (routing, state management, forms)
- **Component composition** and reusable patterns
- **Performance optimization** for Rust web components

### 🚀 Production & Deployment
- **Production deployment** and optimization strategies
- **Build configuration** and Dioxus.toml setup
- **Bundle optimization** and asset management
- **Troubleshooting** common issues and performance bottlenecks

## 🛠️ Instructions

When activated, I will provide comprehensive expert assistance with the complete dioxus-element-plug ecosystem:

### 1. **🔍 Project Analysis & Assessment**
   - **Review project structure** and existing component usage patterns
   - **Analyze dependencies** and integration requirements
   - **Evaluate CSS strategy** needs (integrated vs CDN)
   - **Assess performance requirements** and optimization opportunities

### 2. **📦 Component Implementation**
   - **Generate/styled components** from the complete library (95+ components)
   - **Configure component props** with proper type safety
   - **Implement component logic** following Rust best practices
   - **Adapt components** to specific UI requirements and brand guidelines

### 3. **🎨 CSS System Integration**
   - **Set up theme system** using CSS variables (primary, success, warning, danger, info)
   - **Configure responsive design** with 24-column grid system
   - **Integrate component styles** or migrate to CDN-based approach
   - **Customize visual themes** and brand-specific styling

### 4. **🧩 Ecosystem Integration**
   - **Connect with Dioxus routing** and navigation patterns
   - **Integrate state management** (Handle state with proper Rust patterns)
   - **Implement forms validation** with Form component integration
   - **Set up event handling** and user interaction patterns

### 5. **⚡ Performance Optimization**
   - **Apply Rust-specific optimizations** for maximum performance
   - **Implement component memoization** and update strategies
   - **Optimize bundle size** and code splitting strategies
   - **Configure build settings** for production deployment

### 6. **🚀 Production Deployment**
   - **Set up production builds** with optimized configurations
   - **Configure asset management** and deployment pipelines
   - **Implement CSP compatibility** and security best practices
   - **Debug and troubleshoot** common production issues

### 7. **📚 Documentation & Examples**
   - **Provide complete code examples** for each component category
   - **Document integration patterns** and best practices
   - **Share performance tips** and optimization techniques
   - **Create usage guides** for specific use cases

## 📋 Project Capabilities

### **Component Library Coverage**
- ✅ **95/114 Element Plus components** (83% coverage)
- ✅ **Complete component categories**: Basic UI, Form, Layout, Navigation, Data Display, Feedback
- ✅ **Type-safe Rust implementations** with compile-time validation
- ✅ **Comprehensive testing** (269/269 tests passing)

### **CSS System Features**
- ✅ **Complete Element Plus CSS** with theme variables
- ✅ **Responsive 24-column grid** system
- ✅ **Modern CSS features**: CSS Variables, Flexbox, Transitions
- ✅ **Component-specific styles** for all components

### **Production Readiness**
- ✅ **Zero compilation errors** - Fully production-ready
- ✅ **Modular architecture** - Clean separation of concerns
- ✅ **Tooling support** - Component generation and CSS tools
- ✅ **Comprehensive documentation** - Complete usage guides

## 💡 Example Usage Patterns

### Basic Component Usage:
```rust
use dioxus_element_plug::components::*;

// Use complete component library
let button = Button::new().primary(true);
let form = Form::new().layout("horizontal");
let table = Table::new().bordered(true);
```

### Theme Integration:
```rust
use dioxus_element_plug::styles;

// Get complete Element Plus CSS
let css = styles::all_styles();
```

### Component Categories Available:
- **Basic UI**: Button, Alert, Badge, Card, Tag, Avatar
- **Form Controls**: Input, Select, Checkbox, Radio, Slider, Switch
- **Data Display**: Table, Descriptions, Timeline, Tree, Transfer
- **Layout**: Container, Grid (24-column), Space
- **Navigation**: Menu, Tabs, Steps, Pagination, Dropdown
- **Feedback**: Message, Dialog, Loading, Tooltip, Progress

I will leverage the complete skill knowledge base for proven patterns, best practices, and optimized solutions specific to the dioxus-element-plug ecosystem.