shelbeely/m3-web-vue
skills/m3-web-vue/SKILL.md
Implement Material Design 3 in Vue.js using Vuetify 3 with M3-aligned theming, dynamic color, and component library. Covers theme setup, components, dark mode, and design tokens. Use this when building M3-styled Vue.js applications.
$ install --global
skillsauthnpx skillsauth add shelbeely/shelbeely-agent-skills m3-web-vueInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 14, 2026, 2:09 AM10.4s1 file scanned
SKILL.md
- name:
- m3-web-vue
- description:
- Implement Material Design 3 in Vue.js using Vuetify 3 with M3-aligned theming, dynamic color, and component library. Covers theme setup, components, dark mode, and design tokens. Use this when building M3-styled Vue.js applications.
- license:
- Apache-2.0
Material Design 3 — Vue / Vuetify 3
Overview
Vuetify 3 is the leading Material Design library for Vue.js with strong M3 support. Dynamic color theming, M3-aligned components, design tokens, and accessibility are built in.
Keywords: Material Design 3, M3, Vue, Vuetify, Vuetify 3, Vue.js, dynamic color, theming
When to Use
- Vue.js projects
- Enterprise-ready M3 with excellent documentation
- When you need a large, well-maintained component library for Vue
Install
npm install vuetify
Theme Setup
// plugins/vuetify.js
import { createVuetify } from 'vuetify';
import 'vuetify/styles';
export default createVuetify({
theme: {
defaultTheme: 'light',
themes: {
light: {
colors: {
primary: '#6750A4',
secondary: '#625B71',
'surface-variant': '#E7E0EC',
error: '#B3261E',
background: '#FEF7FF',
surface: '#FEF7FF',
},
},
dark: {
colors: {
primary: '#D0BCFF',
secondary: '#CCC2DC',
background: '#141218',
surface: '#141218',
},
},
},
},
});
Component Examples
Buttons
<template>
<v-btn color="primary">Filled</v-btn>
<v-btn variant="outlined">Outlined</v-btn>
<v-btn variant="text">Text</v-btn>
<v-btn variant="tonal">Tonal</v-btn>
<v-btn variant="elevated">Elevated</v-btn>
</template>
Cards
<template>
<v-card elevation="1" rounded="lg">
<v-card-title>Card Title</v-card-title>
<v-card-text>Card content following M3 specs</v-card-text>
<v-card-actions>
<v-btn variant="text">Action</v-btn>
</v-card-actions>
</v-card>
</template>
Text Fields
<template>
<v-text-field label="Email" variant="outlined" />
<v-text-field label="Name" variant="filled" />
</template>
Navigation
<template>
<v-bottom-navigation v-model="value">
<v-btn value="home">
<v-icon>mdi-home</v-icon>
Home
</v-btn>
<v-btn value="search">
<v-icon>mdi-magnify</v-icon>
Search
</v-btn>
</v-bottom-navigation>
<v-navigation-drawer>
<v-list>
<v-list-item title="Home" prepend-icon="mdi-home" />
<v-list-item title="Settings" prepend-icon="mdi-cog" />
</v-list>
</v-navigation-drawer>
</template>
Dialogs
<template>
<v-dialog v-model="dialog" max-width="400">
<v-card>
<v-card-title>Dialog Title</v-card-title>
<v-card-text>Dialog content</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn variant="text" @click="dialog = false">Cancel</v-btn>
<v-btn color="primary" @click="dialog = false">Confirm</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
Checklist
- [ ] Vuetify plugin configured with M3 color tokens
- [ ] Both light and dark themes defined
- [ ] Components use Vuetify's
color,variant, androundedprops - [ ] Typography inherits from Vuetify's type system
- [ ] Navigation components use proper M3 patterns
Resources
- Vuetify: https://vuetifyjs.com/
- Vuetify Theming: https://vuetifyjs.com/en/features/theme/
- M3 adaptation: https://store.vuetifyjs.com/blogs/vuetify-blog/material-design-3-how-to-adapt-to-the-next-generation-of-interfaces
Related Skills
shelbeely/skill-creator
tools
VerifiedTrustedCommunity
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
2SKILL.mdUpdated Apr 14, 2026
shelbeely/material-theme-builder
development
VerifiedTrustedCommunity
Generate Material Design 3 color themes programmatically from a source color using @material/material-color-utilities, the same engine that powers the Material Theme Builder. Use this when the user asks to generate an M3 color palette, create a custom theme from a brand color, or export M3 tokens to CSS, JSON, or framework configs.
2SKILL.mdUpdated Apr 14, 2026
shelbeely/material-design-3-typography
testing
VerifiedTrustedCommunity
Applies Material Design 3 Expressive typography principles including variable fonts, type scales, and hierarchy. Use this when working on text styling, type hierarchy, readable interfaces, or when the user asks to apply Material Design 3 typography guidelines.
2SKILL.mdUpdated Apr 14, 2026
shelbeely/material-design-3-shape
testing
VerifiedTrustedCommunity
Applies Material Design 3 Expressive shape and containment principles including rounded corners, morphing shapes, and container design. Use this when working on component shapes, borders, containment, or when the user asks to apply Material Design 3 shape guidelines.
2SKILL.mdUpdated Apr 14, 2026