skills.rest
chrysaliscat
chrysaliscatCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Expert

Guide Vue.js 2.x and Element UI development within the RuoYi-Vue framework.

1|Updated Jan 27, 2026
Search Tags:#debugging#web development#frontend#vue.js#ruoyi-vue#element-ui
One-click install
npx skills add https://github.com/chrysaliscat/designgraduation --skill frontend-expert-chrysaliscat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Expert
Source: https://github.com/chrysaliscat/designgraduation/tree/main/.agent/skills/frontend-expert
Command: npx skills add https://github.com/chrysaliscat/designgraduation --skill frontend-expert-chrysaliscat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines frontend development within the RuoYi-Vue framework by providing expert guidance on Vue.js 2.x and Element UI, ensuring adherence to best practices and conventions.

Core Features & Use Cases

  • Component Development: Guidance on creating reusable Vue components.
  • RuoYi Conventions: Enforces specific patterns for API calls, modal usage, and file downloads.
  • Element UI Best Practices: Promotes robust form validation and data table implementation.
  • Debugging: Assists in identifying and resolving common rendering and data issues.
  • Use Case: When developing a new product listing page, this Skill ensures all images are correctly prefixed, form inputs are validated before submission, and API errors are gracefully handled.

Quick Start

Use the Frontend Expert skill to help refactor the ProductForm.vue component to adhere to RuoYi conventions.

Frequently Asked Questions about Frontend Expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure Vue.js 2.x components to follow RuoYi-Vue conventions?▼

Implement Vue.js 2.x components in RuoYi-Vue by following its specific conventions for API requests, modal interactions, and file downloads to ensure architectural consistency.

What is the best way to handle Element UI form validation in a RuoYi-Vue project?▼

The best way to handle Element UI form validation is to implement robust validation rules before submission, ensuring inputs are validated and API errors are gracefully handled during data display.

Why does my RuoYi-Vue component fail to render data correctly?▼

RuoYi-Vue components fail to render data correctly due to common data reactivity issues, which can be identified and resolved by debugging Vue.js rendering cycles and ensuring proper API response handling.

How do I prefix images and handle file downloads in Element UI?▼

Handle file downloads and prefix images in Element UI by adhering to RuoYi's specific conventions for file handling, ensuring all static assets and document downloads are correctly routed and processed.

Can I use this approach to refactor existing Vue.js 2.x pages for product listings?▼

Yes, you can refactor existing Vue.js 2.x product listing pages by applying component-driven architecture conventions to ensure images are prefixed, forms are validated, and API errors are managed.

Related Skills

Explore More Software Engineering Skills→
Prorise-coolProrise-cool
24

ruoyi-framework

Guide development and deployment of RuoYi-Vue applications with Java, Spring Boot, and Vue.js.

Community
Advanced
wfvuewfvue

ruoyi-ai-generator

Generate Java backend and Vue3 frontend code from GenTable structures.

Community
Advanced
Renzo-TognellaRenzo-Tognella

PerfectJob Backend Development

Configure Spring Boot projects with Java 21 and Spring Data JPA.

Community
Advanced
ariesanhthuariesanhthu

vue-expert

Diagnose Vue 3 reactivity issues and optimize Nuxt.js performance.

Community
Advanced