shelbeely/m3-web-svelte
skills/m3-web-svelte/SKILL.md
Implement Material Design 3 in Svelte using SMUI (Svelte Material UI) or @material/web directly. Covers component usage, theming, and Svelte 5 compatibility. Use this when building M3-styled Svelte or SvelteKit applications.
$ install --global
skillsauthnpx skillsauth add shelbeely/shelbeely-agent-skills m3-web-svelteInstall 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 AM24.9s1 file scanned
SKILL.md
- name:
- m3-web-svelte
- description:
- Implement Material Design 3 in Svelte using SMUI (Svelte Material UI) or @material/web directly. Covers component usage, theming, and Svelte 5 compatibility. Use this when building M3-styled Svelte or SvelteKit applications.
- license:
- Apache-2.0
Material Design 3 — Svelte / SMUI
Overview
SMUI (Svelte Material UI) wraps Google's MDC-Web foundation logic in Svelte-native components. Evolving towards M3 with MDC v10 integration. Svelte 5 compatible (v8+). Alternatively, use @material/web directly — Svelte has excellent Custom Elements support.
Keywords: Material Design 3, M3, Svelte, SMUI, Svelte Material UI, SvelteKit, web components, MDC
When to Use
- Svelte or SvelteKit projects
- When you want Svelte-native Material components
- Projects that can also use
@material/webdirectly (Svelte handles Custom Elements well)
Install (SMUI)
npm install svelte-material-ui
Individual packages:
npm install @smui/button @smui/card @smui/textfield @smui/top-app-bar
Install (@material/web — alternative)
npm install @material/web
SMUI Component Examples
Buttons
<script>
import Button from '@smui/button';
</script>
<Button variant="raised">Filled</Button>
<Button variant="outlined">Outlined</Button>
<Button>Text</Button>
Cards
<script>
import Card from '@smui/card';
</script>
<Card>
<div class="card-content">
<h2>Card Title</h2>
<p>Card content</p>
</div>
</Card>
Text Fields
<script>
import Textfield from '@smui/textfield';
</script>
<Textfield variant="outlined" label="Email" />
<Textfield variant="filled" label="Name" />
Using @material/web in Svelte
Svelte handles web components natively:
<script>
import '@material/web/button/filled-button.js';
import '@material/web/textfield/outlined-text-field.js';
import '@material/web/checkbox/checkbox.js';
</script>
<md-filled-button>Click me</md-filled-button>
<md-outlined-text-field label="Email"></md-outlined-text-field>
<md-checkbox></md-checkbox>
Theme via CSS custom properties in your global stylesheet:
:root {
--md-sys-color-primary: #6750A4;
--md-sys-color-on-primary: #FFFFFF;
--md-ref-typeface-brand: 'Roboto';
}
Checklist
- [ ] Choose between SMUI and @material/web based on project needs
- [ ] M3 color tokens applied via CSS custom properties or SMUI theming
- [ ] Components use M3-aligned variants
- [ ] Both light and dark themes supported
- [ ] Svelte 5 compatibility verified (SMUI v8+)
Resources
- SMUI: https://sveltematerialui.com/
- SMUI GitHub: https://github.com/hperrin/svelte-material-ui
- @material/web (works in Svelte): https://material-web.dev/
- @material/web GitHub: https://github.com/material-components/material-web
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