Implement Vuetify 4 app shells with navigation, grids, and tabs for Vue SSR pages.
npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-layout
Please help me install this Agent Skill. Skill: vuetify-layout Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vuetify-layout Command: npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-layout
This Skill solves the problem of assembling a consistent, responsive Vuetify 4 application layout in a Vue 3 SSR starter kit without reinventing navigation, grid scaffolding, and common shell patterns.
v-app, v-main, and related layout building blocks to create the overall page frame.v-container, v-row, and v-col for responsive content/side-by-side sections.v-app-bar, side navigation with v-navigation-drawer (rail/temporary behavior), and interactive UI elements like v-menu, v-tabs/v-tabs-window, and v-breadcrumbs.Create the page shell by wiring v-app-bar, v-navigation-drawer (temporary on mobile and rail on desktop), and the main content grid with v-container/v-row/v-col, then add v-menu, v-tabs/v-tabs-window, and v-breadcrumbs where needed.
High-intent search queries and answers about installing and using this skill.
You build a responsive Vuetify app shell by wiring v-app-bar and v-navigation-drawer into v-app, configuring the drawer as temporary on mobile and rail on desktop to handle responsive navigation across Vue 3 SSR pages.
Create responsive grid layouts in Vuetify 4 using the v-container, v-row, and v-col components to scaffold 12-column page structures for side-by-side content sections that adapt across viewport sizes.
The best way to switch tabbed content sections in Vuetify is combining v-tabs with v-tabs-window, allowing users to navigate between distinct content panels like profile and security settings within a single layout view.
Yes, you can use Vuetify 4 layout components together in Vue 3 by implementing v-menu activator patterns for interactive dropdowns and v-breadcrumbs for navigation trails within the same authenticated dashboard layout shell.
This Vuetify layout approach supports different navigation patterns by applying temporary drawer behavior for mobile users and rail drawer behavior for desktop users, ensuring adaptive side navigation within your Vue 3 application shell.
e-xodeConfigure Vuetify 4 light/dark themes and design tokens in Vue SSR applications.
QING-YU123Scaffold Vue 3 pages and components with Naive UI and Tailwind CSS.
christophevgMigrate Vuetify 2 components to Vuetify 3 APIs, props, events, and slots.
fgarofalo56Guide Tailwind CSS styling for responsive UI components with utility classes.