Vuetify Skilld

What it does

This skill provides access to Vuetify, a Vue Material Component Framework. It allows AI agents to understand and interact with Vuetify components and APIs, enabling rapid implementation of pre-built UI elements and improved design based on Material Design principles. The skill includes information about API changes across different versions (v1, v2, v3, and the latest version 4) including breaking changes and new features.

When to use it

• When needing to quickly implement common user interface components in a Vue.js application using Vuetify.
• To understand and address issues related to specific versions of Vuetify (e.g., debugging problems caused by API changes).
• For assistance with adopting new features or understanding breaking changes introduced in recent Vuetify releases.
• When needing information about experimental components like VAvatarGroup and VCommandPalette.

Key capabilities

• Provides access to documentation, issue trackers, and discussion forums for Vuetify.
• Details API changes across various Vuetify versions (v1-stable, v2-stable, next, dev, v3-stable, latest).
• Information on breaking changes related to grid layouts (VRow, VCol), typography, elevation levels, button defaults, and form slots.
• Details new features like VSnackbarQueue, VRow gap prop, VAvatarGroup (experimental), and VCommandPalette (experimental).

Example prompts

• "What are the breaking changes in Vuetify 4.0.1 related to grid layouts?"
• "How do I use the new VRow gap property in Vuetify?"
• "Explain the changes to button defaults in Vuetify and how they affect styling."

Tips & gotchas

• Be aware of version-specific API changes when working with different versions of Vuetify.
• The VAvatarGroup and VCommandPalette are experimental components, so their behavior might change.
• When using the useHotkey composable, prefer using 'cmd' for cross-platform compatibility instead of hardcoding 'ctrl'.