Standardize Vuetify 4 configuration and component selection for Vue SSR Starter Kit.
npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-overview
Please help me install this Agent Skill. Skill: vuetify-overview Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vuetify-overview Command: npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-overview
It prevents inconsistent Vuetify usage by centralizing the project-wide rules for component selection, default props, semantic colors, and SSR-safe initialization in the Vue SSR Starter Kit.
src/plugins/vuetify.js defaults (variants, rounding, density, and tonal styles).createApplicationVuetify(ssr) to ensure hydration correctness and rely on useDisplay() for breakpoint-aware layout behavior.Ask an assistant: "When should I use v-snackbar vs v-alert, what are the default v-btn and v-card settings, and how do I set up Vuetify for SSR with the correct ssr flag?"
High-intent search queries and answers about installing and using this skill.
To configure Vuetify for SSR safely, instantiate Vuetify using createApplicationVuetify(true) on the server and createApplicationVuetify(false) on the client to ensure proper hydration and consistent rendering.
Use v-snackbar for transient toast notifications and v-alert for persistent inline messages within the UI, following the component selection decision tree to map specific UI needs to the correct Vuetify component.
Standardize global Vuetify default props by configuring variants, rounding, density, and tonal styles inside the src/plugins/vuetify.js file to apply consistent UI styles across the entire application.
Handle responsive breakpoints in a Vue SSR app by relying on the useDisplay composable provided by Vuetify to ensure breakpoint-aware layout behavior that works correctly during server-side rendering.
Use semantic color tokens by referencing their designated names in your Vuetify configuration to standardize theming and avoid inconsistent UI color usage across the Vue application.
Your Vuetify UI looks inconsistent because global default props are not centralized; applying project-wide rules for variants, density, and tonal styles in src/plugins/vuetify.js ensures consistent component styling.
e-xodeConfigure Vuetify 4 light/dark themes and design tokens in Vue SSR applications.
VYRE-StudiosDesign responsive, accessible UI components with semantic HTML and WCAG AA compliance.
a35506322Fix Pinia state management errors in Vue 3 applications.
vishiriScaffold Vue 3 and Quasar UI with layouts, pages, router, and Pinia stores.