Develop Vue 3 components with Pinia stores and ECharts charts.
npx skills add https://github.com/alongor666/daylyreport --skill vue-component-dev
Please help me install this Agent Skill. Skill: vue-component-dev Source: https://github.com/alongor666/daylyreport/tree/main/.claude/skills/vue-component-dev Command: npx skills add https://github.com/alongor666/daylyreport --skill vue-component-dev
This Skill provides standardized guidelines for developing Vue 3 components for the vehicle insurance data analysis platform. It covers component structure, communication, Pinia state management, ECharts integration, and performance optimization, ensuring consistent, maintainable, and high-quality frontend development.
<script setup>, Props, Emits, and lifecycle hooks.appStore, filterStore, dataStore) with clear responsibilities and usage规范.computed vs watch, v-show vs v-if, and avoiding complex template expressions.dataStore and allows user interaction. This skill provides the component template, Pinia integration pattern, and styling guidelines to build it efficiently and correctly.Create a new Vue 3 component 'SalesOverview.vue' that fetches data from the dataStore and displays it using an ECharts bar chart.
High-intent search queries and answers about installing and using this skill.
Build Vue 3 components with Pinia by using `<script setup>` syntax, defining typed Props and Emits, and connecting to Pinia stores for cross-component state sharing. The Skill provides standard templates and store patterns for `appStore`, `filterStore`, and `dataStore` to manage state consistently across your dashboard.
Integrate ECharts into Vue 3 components using a standard template that handles responsive sizing, data updates, and applies eye-care color palettes. The Skill provides the integration pattern and emphasizes updating chart data reactively when store state changes.
Structure Vue 3 component communication by using Props for parent-to-child data flow, Emits for child-to-parent events, and Pinia stores for cross-component state sharing. The Skill enforces PascalCase naming, scoped CSS with CSS variables, and clear responsibility separation across three core stores.
Yes, use Pinia with ECharts to build data dashboards by storing chart data in Pinia stores and reactively updating ECharts components when store state changes. This pattern isolates business logic, maintains consistent data across multiple charts, and simplifies performance optimization.
Optimize Vue 3 component performance by choosing `computed` over `watch` for derived state, using `v-show` instead of `v-if` for frequently toggled elements, and avoiding complex expressions in templates. The Skill provides specific guidance for dashboard widgets handling large datasets from the `dataStore`.
Yes, follow PascalCase naming for components, use scoped CSS with CSS variables for styling, and apply typed Props and Emits. The Skill enforces these standards to ensure maintainability and consistency across the vehicle insurance analytics platform.
ElderEvilCreate type-safe Vue 3 stores with Pinia's defineStore.
vamseeachantaBuild interactive well production dashboards with a Flask REST API and multi-format exports.
endlessblinkGenerate Vue 3 components with TypeScript and Pinia integration.
mgd34msuManage Vue.js application state with Pinia stores, getters, actions, and plugins.