vuetify
Enforces style and architectural standards for Vuetify 4, including buttons, dialogs, and form validation.
Install
mkdir -p .claude/skills/vuetify && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18118" && unzip -o skill.zip -d .claude/skills/vuetify && rm skill.zipInstalls to .claude/skills/vuetify
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Esposter Vuetify 4 conventions — StyledButton for primary actions, @click navigateTo navigation (Vuetify :to lint-banned), v-prefixed auto-imported composables (useVDisplay/useVTheme), global defaults never repeated, v-btn tooltips, mergeProps for nested activators, typed SelectItemCategoryDefinition for selects/lists/menus (clearable banned), enum-value-as-display-title, dialog form validity (StyledFormDialog vs StyledEditFormDialog), StyledList, useVRules form validation, StyledAvatar, CSS custom properties over SASS variables, and scrollspy sub-nav. Apply when writing or reviewing Vuetify components, dialogs, selects, forms, or lists.Key capabilities
- →Apply StyledButton for primary actions
- →Implement navigation via navigateTo
- →Use v-prefixed auto-imported composables
- →Manage nested activators with mergeProps
- →Standardize dialog form validity
How it works
The skill enforces architectural patterns and naming conventions for Vuetify 4 components, including specific button styling and navigation handling.
Inputs & outputs
When to use vuetify
- →Reviewing Vuetify component implementation
- →Standardizing dialog forms and list layouts
- →Implementing consistent button styling and navigation
About vuetify
Provides naming conventions and architectural patterns for Vuetify 4. It ensures consistent use of components like StyledButton, StyledAvatar, and form validation logic.
Esposter Vuetify 4 conventions — v-btn tooltips, typed SelectItemCategoryDefinition for selects/lists/menus, enum-value-as-display-title pattern, dialog form validity, StyledAvatar for user avatars, and keyboard shortcut components. Apply when writing Vuetify components or dialogs.
When not to use it
- →Never use raw color='primary' v-btn
- →Never use :to for router navigation
- →Never stack multiple v-binds for activators
Prerequisites
Limitations
- →Bans :to for router navigation
- →Requires specific activator slot ordering
- →Requires StyledButton for primary actions
How it compares
This approach mandates global defaults and specific composable usage to prevent inconsistent component behavior across the application.
Compared to similar skills
vuetify side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vuetify (this skill) | 0 | 1mo | No flags | Intermediate |
| scroll-experience | 101 | 7mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 7mo | No flags | Intermediate |
| infographic-structure-creator | 1 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Esposter
View all by Esposter →You might also like
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
anthropic-frontend-design
chaibuilder
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
infographic-structure-creator
antvis
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
logo-with-variants
crafter-station
Create logo components with multiple variants (icon, wordmark, logo) and light/dark modes. Use when the user provides logo SVG files and wants to create a variant-based logo component following the Clerk pattern in the Elements project.
design-context
WellApp-ai
Refresh UI/UX context from design system, Storybook, and codebase
threejs-postprocessing
CloudAI-X
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.