vuetify

Vuetify Material Design component framework for Vue. Use for Vue UI.

7 stars

byG1Joshi

View on GitHub Installation ↓

Best use case

vuetify is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Vuetify Material Design component framework for Vue. Use for Vue UI.

Teams using vuetify should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/vuetify/SKILL.md --create-dirs "https://raw.githubusercontent.com/G1Joshi/Agent-Skills/main/skills/frameworks/vuetify/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/vuetify/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How vuetify Compares

Feature / Agent	vuetify	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Vuetify Material Design component framework for Vue. Use for Vue UI.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Vuetify

Vuetify is the comprehensive UI toolkit for Vue. v3 (Titan) is built for **Vue 3** and Vite, offering massive performance improvements over v2.

## When to Use

- **Enterprise Dashboards**: The `VDataTable` is feature-rich.
- **Material Design**: Strict adherence to MD3 (Material Design 3).
- **Speed**: Rapid prototyping with pre-built components.

## Core Concepts

### Layout System

`v-app`, `v-main`, `v-container`. Essential for structure.

### Slots

Extensive use of slots for customization (`<template v-slot:append>`).

### Defaults

Global configuration of component default props.

## Best Practices (2025)

**Do**:

- **Use `Vite`**: Webpack is legacy.
- **Use Tree-shaking**: Import only what you use (automatic in v3).
- **Use SASS/SCSS Variables**: For theming.

**Don't**:

- **Don't mix with other UI libs**: Vuetify is invasive (global styles).

## References

- [Vuetify Documentation](https://vuetifyjs.com/)