vuetify

Name: vuetify
Availability: InStock
Author: Esposter

Standardize Vuetify component patterns and accessibility guidelines in Vue apps.

23|3|Updated Jun 28, 2022

Search Tags:#accessibility #vue #frontend-patterns #ui-conventions #component-design #vuetify

Ready to run

npx skills add https://github.com/Esposter/Esposter --skill vuetify-esposter

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vuetify
Source: https://github.com/Esposter/Esposter/tree/main/.agents/skills/vuetify
Command: npx skills add https://github.com/Esposter/Esposter --skill vuetify-esposter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vuetify conventions lack a single standard for components across teams, leading to inconsistent UI and behavior.

Core Features & Use Cases

Auto-imported composables with a v- prefix and global defaults to reduce boilerplate.
Button and form consistency guidelines for dialogs, inputs, and avatars.
Guidelines for lists, selects, and keyboard navigation to improve accessibility and UX.

Quick Start

Apply these Vuetify conventions when building components to ensure consistent styling, behavior, and accessibility across your UI.

Frequently Asked Questions about vuetify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I standardize Vuetify component patterns across a large Vue app?▼

Standardizing Vuetify component patterns involves enforcing unified defaults, auto-imported composables, and accessibility guidelines across forms, lists, and dialogs. This ensures consistent UI behavior and styling without requiring external setup beyond the project's Vuetify configuration.

What is the best way to manage form validation and inline error display in Vue?▼

Managing form validation and inline error display in Vue is achieved by applying specific Vuetify conventions for inputs. These guidelines standardize error handling and ensure forms satisfy accessibility rules for consistent user feedback across the application.

Can I use auto-imported composables to reduce boilerplate in Vuetify?▼

Yes, you can use auto-imported composables with a v- prefix to reduce boilerplate in Vuetify. This approach establishes global defaults for components, streamlining UI development and ensuring unified behavior across large Vue applications.

How do I improve keyboard navigation and accessibility in Vue lists and selects?▼

Improving keyboard navigation and accessibility in Vue lists and selects requires applying specific UI conventions for these components. Following Vuetify guidelines ensures vector-friendly components and proper keyboard navigation for enhanced UX.

Does standardizing Vue UI conventions require any external dependencies?▼

Standardizing Vue UI conventions with this approach requires no external dependencies or setup beyond the project's existing Vuetify configuration. It operates entirely within the established environment to enforce CSS variable governance and component patterns.