메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Help choose an appropriate software/open-source license (e.g., MIT, Apache-2.0, GPL-3.0, AGPL-3.0, MPL-2.0, BSD) based on the user's goals and constraints; explain tradeoffs (permissive vs copyleft, patent grants, SaaS/network copyleft); check for dependency-driven constraints; and generate or update LICENSE files and short license headers. Use when a user asks what license to pick, whether licenses are compatible, or to add a LICENSE file to a repo.
Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
Comprehensive guide to Material Design 3 components — from baseline Material You through M3 Expressive. Covers action, containment, communication, navigation, selection, and text input components with specifications, states, and implementation guidelines. Use this when building or styling UI components following Material Design 3 guidelines.
Master guide for Material Design 3 — covering the full specification from Material You foundations through M3 Expressive. Explains when to use each Material Design 3 skill subset (color, motion, typography, shape, layout, components, icons). Use this when starting a Material Design 3 project, when you need to understand which M3 skill to apply, or when the user asks about Material Design 3 in general.
Applies Material Design 3 Expressive motion and animation principles to create natural, intuitive, and engaging user experiences. Use this when implementing animations, transitions, micro-interactions, or when the user asks to apply Material Design 3 motion guidelines.
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.
| 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 |
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
@material/web directly (Svelte handles Custom Elements well)npm install svelte-material-ui
Individual packages:
npm install @smui/button @smui/card @smui/textfield @smui/top-app-bar
npm install @material/web
<script>
import Button from '@smui/button';
</script>
<Button variant="raised">Filled</Button>
<Button variant="outlined">Outlined</Button>
<Button>Text</Button>
<script>
import Card from '@smui/card';
</script>
<Card>
<div class="card-content">
<h2>Card Title</h2>
<p>Card content</p>
</div>
</Card>
<script>
import Textfield from '@smui/textfield';
</script>
<Textfield variant="outlined" label="Email" />
<Textfield variant="filled" label="Name" />
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';
}