Vuetify agent skills for Claude Code, Cursor and RevampKey

5 ready-made playbooks that teach an AI agent how to do real Vuetify work: which tools to call, what to check first, and when to stop and ask you.

Download RevampKey, free I have it: connect Vuetify

Connect Vuetify once and all 5 skills install themselves and stay up to date. Mac, Windows and Linux.

All 5 Vuetify skills

Each skill is one job. You ask in plain words and the agent loads the skill that matches, then follows its steps.

Start hereAsks before writing19 Vuetify tools

Use Vuetify MCP well and safely

Gives an AI assistant guidance on connecting Vuetify MCP, choosing between the docs-only and Vuetify One endpoints, and handling version checks and blocked results. It asks before creating any bin, playground, link or bug report.

Use it when

Connecting Vuetify MCP to a new editor or chat client for the first time
Deciding whether a question needs the Vuetify One login or just the docs endpoint
Checking which Vuetify version an answer applies to before writing code

Tools it uses

get_component_api_by_version
get_directive_api_by_version
get_release_notes_by_version
get_exposed_exports
get_installation_guide
get_upgrade_guide
get_v4_breaking_changes
get_feature_guide
get_feature_guides
get_frequently_asked_questions
get_bin
get_playground
get_all_bins
get_all_links
get_all_playgrounds
create_bug_report
create_vuetify_bin
create_vuetify_link
create_vuetify_playground

Example

I want my AI assistant to answer Vuetify questions. Which MCP URL do I add, and do I need to log in?

Add https://mcp.vuetifyjs.com/mcp for docs, APIs and install or upgrade guides. It needs no login. You only need the /one endpoint if you have a Vuetify One subscription and want ecosystem sites. Tell me which Vuetify version your project uses so I answer for that version.

Use in RevampKeyRead the full skill →

Read-only5 Vuetify tools

Look up Vuetify component APIs for your exact version

Answers questions about a Vuetify component's or directive's props, events and slots for the version your project uses, and flags where versions differ. It reads the version first and does not change your files.

Use it when

You need the props and events of a Vuetify component for the version in your project.
You are unsure whether a prop was renamed or removed between Vuetify 3 and 4.
You want code written against the directive or component API your app actually uses.

Tools it uses

get_component_api_by_version
get_directive_api_by_version
get_exposed_exports
get_v4_breaking_changes
get_upgrade_guide

Example

Which props and events does v-data-table take in my Vuetify version, and did any change from v3 to v4?

Your project pins Vuetify 3.7. v-data-table takes items, headers and item-value, and emits update:options. I checked the v4 changes: the sort-by prop changed shape, so the v3 usage you have will need updating before a v4 move. Nothing has been edited.

Use in RevampKeyRead the full skill →

Asks before writing15 Vuetify tools

Build a minimal Vuetify reproduction and bug report with AI

Strips a suspected Vuetify bug down to a minimal, shareable reproduction and drafts a clean bug report with pinned versions. It asks before creating any bin, playground or link, or submitting anything public.

Use it when

You hit a Vuetify behaviour you think is a bug and want a repro to file
A component works in a playground but breaks in your own project
You need to check whether a reported change is documented for your Vuetify version

Tools it uses

get_component_api_by_version
get_directive_api_by_version
get_release_notes_by_version
get_frequently_asked_questions
get_feature_guide
get_playground
get_all_playgrounds
create_vuetify_playground
create_vuetify_bin
create_vuetify_link
get_bin
get_all_bins
get_all_links
create_bug_report
get_upgrade_guide

Example

My v-data-table loses its selection after sorting on Vuetify 3.7. Can you make a minimal repro I can share?

I pinned Vuetify 3.7.2 and Vue 3.4 from your lockfile, then cut the table to two literal rows and no custom styles. The selection still drops after sorting, while 3.6.x keeps it. I found an existing bin that shows the same prop usage. I have not created anything yet: shall I create a private bin with this repro, and then draft the bug report for you to submit?

Use in RevampKeyRead the full skill →

Read-only3 Vuetify tools

Plan a Vuetify upgrade with AI

Turns the official Vuetify upgrade guide, release notes and v4 breaking changes into a risk-ranked migration checklist matched to your codebase. It checks the repository before claiming anything is unaffected and asks before changing any files.

Use it when

Moving a project from Vuetify 3 to Vuetify 4
Planning a minor version bump that may change defaults
Working out which breaking changes actually touch your components

Tools it uses

get_upgrade_guide
get_v4_breaking_changes
get_release_notes_by_version

Example

We're on Vuetify 3.7 and want to go to 4.0. Give me a phased upgrade plan for our app, ordered by risk.

This is a major-version hop, so I'll treat it as a project. I pulled the 4.0 upgrade guide and the v4 breaking changes, then searched the repo. Eleven items touch our code: six are renamed imports that will fail the build, four change defaults and need tests, and one is a theme variable rename that needs a visual check. Two wrapper components re-expose Vuetify props, so they need the new names too.

Use in RevampKeyRead the full skill →

Read-only5 Vuetify tools

Review Vuetify0 adoption with AI

Checks whether the headless Vuetify0 library fits a feature, grades each requirement as covered, partial or not covered, and lists the work that remains. It checks exports against the version in use before recommending them.

Use it when

Deciding whether a custom selection or navigation widget should use Vuetify0
Finding which Vuetify0 composable fits a headless state need
Estimating what adopting Vuetify0 would still require the team to write

Tools it uses

get_vuetify0_component_list
get_vuetify0_composable_list
get_vuetify0_exports_list
get_vuetify0_component_guide
get_vuetify0_composable_guide

Example

Should our tag picker use Vuetify0? It needs multi-select, arrow-key navigation and a saved order.

Two of the three requirements are covered: multi-select state and arrow-key navigation both match a Vuetify0 composable. Saved order is partial, since the library holds the selection but not persistence, so your app store still owns that. I confirmed both exports exist in your pinned version. Your team still writes the markup, styles and the persistence layer.

Use in RevampKeyRead the full skill →

Get all 5 without copying a file

RevampKey adds the skills when you connect Vuetify, updates them for you and removes them when you disconnect.

Download RevampKey

How Vuetify skills work

Connect Vuetify
The Vuetify MCP server gives the agent its tools.
Ask in plain words
“Which props and events does v-data-table take in my Vuetify version, and did any change from v3 to v4?” Each SKILL.md says when it applies, so only the one that fits is loaded.
Approve any change
The agent calls the tools in order, checks its work, and shows you any change before it makes it.

How to install Vuetify skills

In RevampKey the skills install themselves when you connect Vuetify. In other tools each skill is one folder with a SKILL.md file, and you also need the Vuetify MCP server connected there.

About 1 minute · nothing to copy

Download RevampKey for Mac, Windows or Linux and sign in.
Open Connectors and connect Vuetify. All 5 skills come with it and stay up to date; they go away when you remove the connector.
Ask in plain language, for example “Which props and events does v-data-table take in my Vuetify version, and did any change from v3 to v4?”
Download RevampKeyConnect Vuetify · 1 click
Get RevampKey to connect Vuetify
RevampKey is a free desktop app for Mac, Windows and Linux. Install it, sign in, and Vuetify is one click away with its skills already attached.
Download RevampKey
Not now? Use the skills in your current tool
for s in essentials vuetify-component-api-lookup vuetify-reproduction-bin vuetify-upgrade-plan vuetify0-adoption-review; do curl -fsSL --create-dirs -o .claude/skills/vuetify-mcp-$s/SKILL.md https://revampkey.com/marketplace/vuetify-mcp/skills/$s/SKILL.md done
Other tools

Into this project’s .claude/skills folder

Connect the Vuetify MCP server in Claude Code.

Run this in your project folder to add all 5 skills:

for s in essentials vuetify-component-api-lookup vuetify-reproduction-bin vuetify-upgrade-plan vuetify0-adoption-review; do
  curl -fsSL --create-dirs -o .claude/skills/vuetify-mcp-$s/SKILL.md https://revampkey.com/marketplace/vuetify-mcp/skills/$s/SKILL.md
done

Ask in plain language, for example “Which props and events does v-data-table take in my Vuetify version, and did any change from v3 to v4?”

Into the shared .agents/skills folder

Connect the Vuetify MCP server in Cursor.

Run this in your project folder to add all 5 skills:

for s in essentials vuetify-component-api-lookup vuetify-reproduction-bin vuetify-upgrade-plan vuetify0-adoption-review; do
  curl -fsSL --create-dirs -o .agents/skills/vuetify-mcp-$s/SKILL.md https://revampkey.com/marketplace/vuetify-mcp/skills/$s/SKILL.md
done

Ask in plain language, for example “Which props and events does v-data-table take in my Vuetify version, and did any change from v3 to v4?”

Into the shared .agents/skills folder

Connect the Vuetify MCP server in Codex.

Run this in your project folder to add all 5 skills:

for s in essentials vuetify-component-api-lookup vuetify-reproduction-bin vuetify-upgrade-plan vuetify0-adoption-review; do
  curl -fsSL --create-dirs -o .agents/skills/vuetify-mcp-$s/SKILL.md https://revampkey.com/marketplace/vuetify-mcp/skills/$s/SKILL.md
done

Ask in plain language, for example “Which props and events does v-data-table take in my Vuetify version, and did any change from v3 to v4?”

Into the shared .agents/skills folder

Connect the Vuetify MCP server in VS Code.

Run this in your project folder to add all 5 skills:

for s in essentials vuetify-component-api-lookup vuetify-reproduction-bin vuetify-upgrade-plan vuetify0-adoption-review; do
  curl -fsSL --create-dirs -o .agents/skills/vuetify-mcp-$s/SKILL.md https://revampkey.com/marketplace/vuetify-mcp/skills/$s/SKILL.md
done

Ask in plain language, for example “Which props and events does v-data-table take in my Vuetify version, and did any change from v3 to v4?”

RevampKey or copy the files?

In RevampKey

One click when you connect Vuetify
Updated for you when a skill improves
Removed when you disconnect
The MCP server is set up for you
800+ other connectors, same way

Download free

Copy into your project

One command per project
Run it again to get updates
You connect the Vuetify MCP server yourself
Works in Claude Code, Cursor, Codex and VS Code

See the command

Vuetify skills FAQ

What is a Vuetify agent skill?

A SKILL.md file: a short playbook an AI agent loads when your request matches it. Each Vuetify skill describes one job, which Vuetify tools to use in which order, what to check first and when to stop and ask you.

Do the Vuetify skills change anything on their own?

3 of the 5 only read. The others tell the agent to show you the change and wait for a yes before it creates, edits or deletes anything in Vuetify.

Which tools can use these skills?

Any agent that reads the open Agent Skills format: Claude Code, Cursor, Codex, VS Code with Copilot and RevampKey. In RevampKey they are attached when you connect Vuetify; elsewhere you copy the folders into your project or skills directory.

Do I need the Vuetify MCP server too?

Yes. The skills tell the agent how to do the work; the Vuetify MCP server gives it the tools to do it. The Vuetify MCP setup guide covers every client.

Vuetify MCP server setup · This page as Markdown

Put Vuetify’s best workflows in your agent

Download RevampKey, connect Vuetify and ask your first question in about a minute.

Download RevampKey Connect Vuetify · 1 click

All 5 Vuetify skills

Use Vuetify MCP well and safely

Use it when

Tools it uses

Look up Vuetify component APIs for your exact version

Use it when

Tools it uses

Build a minimal Vuetify reproduction and bug report with AI

Use it when

Tools it uses

Plan a Vuetify upgrade with AI

Use it when

Tools it uses

Review Vuetify0 adoption with AI

Use it when

Tools it uses

Get all 5 without copying a file

How Vuetify skills work

How to install Vuetify skills

RevampKey or copy the files?

In RevampKey

Copy into your project

Vuetify skills FAQ

Put Vuetify’s best workflows in your agent

Skills for related tools