Standardize Vue SSR UI with Vuetify 4 components for feedback and loading patterns.
npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-components
Please help me install this Agent Skill. Skill: vuetify-components Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vuetify-components Command: npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-components
Vuetify SSR apps often need consistent, reusable UI building blocks for display, dialogs, notifications, tooltips, and loading states without duplicating patterns across pages.
Use the vuetify-components skill to generate a Vue component that displays a v-card containing a v-list with v-avatar items and shows a v-skeleton-loader while data loads, then presents errors via v-alert and success messages via v-snackbar.
High-intent search queries and answers about installing and using this skill.
To build consistent Vuetify UI components for Vue 3 SSR apps, standardize reusable display blocks like v-card, v-list, and v-dialog to avoid duplicating patterns. This ensures uniform feedback and loading UX across auth, contact, and dashboard routes.
Implement a Promise-based confirmation dialog in Vue 3 by using v-dialog with v-model, max-width, and persistent properties. You expose the dialog trigger via defineExpose to handle confirmation flows cleanly within your component logic.
The best way to show loading states in Vuetify is conditionally rendering v-skeleton-loader versus actual v-card content while data loads. You can also display deterministic progress indicators using v-progress-linear and v-progress-circular for skeleton-first rendering.
Display toast notifications and inline alerts in a Vue SSR application by using v-snackbar for actionable toast-style messages and v-alert for inline error messaging. This provides consistent user feedback patterns across data-driven dashboards and contact flows.
Yes, this Vuetify component approach works for data-driven dashboards and auth pages by applying consistent feedback and loading UX patterns. It standardizes structured lists, confirmation modals, and loading indicators across various application routes.
e-xodeConfigure Vuetify 4 light/dark themes and design tokens in Vue SSR applications.
e-xodeImplement Vuetify data table pagination with custom row cell rendering.
IntelliTectAudit and remediate accessibility gaps in Vuetify components for WCAG compliance.
SandroBeatzGenerate Vue/Quasar component structures with TypeScript interfaces and barrel exports.
