メニュー
Implement Material Design 3 using only vanilla CSS custom properties and semantic classes. Zero dependencies. Use this when building M3-styled static sites, simple web apps, or when you need full control over every design token without a framework.
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-vanilla |
| description | Implement Material Design 3 using only vanilla CSS custom properties and semantic classes. Zero dependencies. Use this when building M3-styled static sites, simple web apps, or when you need full control over every design token without a framework. |
| license | Apache-2.0 |
Implement Material Design 3 using only CSS custom properties and semantic classes. No framework dependency. This is the canonical approach used by all other M3 skills in this repository.
Keywords: Material Design 3, M3, vanilla CSS, CSS custom properties, design tokens, Beer CSS, CSS framework, no framework
Define M3 tokens as CSS custom properties:
/* m3-tokens.css */
:root {
/* Color tokens */
--md-sys-color-primary: #6750A4;
--md-sys-color-on-primary: #FFFFFF;
--md-sys-color-primary-container: #EADDFF;
--md-sys-color-on-primary-container: #21005D;
--md-sys-color-secondary: #625B71;
--md-sys-color-on-secondary: #FFFFFF;
--md-sys-color-tertiary: #7D5260;
--md-sys-color-on-tertiary: #FFFFFF;
--md-sys-color-error: #B3261E;
--md-sys-color-on-error: #FFFFFF;
--md-sys-color-surface: #FEF7FF;
--md-sys-color-on-surface: #1D1B20;
--md-sys-color-surface-variant: #E7E0EC;
--md-sys-color-on-surface-variant: #49454F;
--md-sys-color-outline: #79747E;
--md-sys-color-outline-variant: #CAC4D0;
/* Shape tokens */
--md-sys-shape-corner-none: 0px;
--md-sys-shape-corner-extra-small: 4px;
--md-sys-shape-corner-small: 8px;
--md-sys-shape-corner-medium: 12px;
--md-sys-shape-corner-large: 16px;
--md-sys-shape-corner-extra-large: 28px;
--md-sys-shape-corner-full: 9999px;
/* Typography tokens */
--md-sys-typescale-label-large-font: 'Roboto', sans-serif;
--md-sys-typescale-label-large-size: 14px;
--md-sys-typescale-label-large-weight: 500;
--md-sys-typescale-label-large-tracking: 0.1px;
--md-sys-typescale-body-medium-font: 'Roboto', sans-serif;
--md-sys-typescale-body-medium-size: 14px;
--md-sys-typescale-body-medium-weight: 400;
--md-sys-typescale-title-medium-font: 'Roboto', sans-serif;
--md-sys-typescale-title-medium-size: 16px;
--md-sys-typescale-title-medium-weight: 500;
}
/* Dark theme */
[data-theme="dark"] {
--md-sys-color-primary: #D0BCFF;
--md-sys-color-on-primary: #381E72;
--md-sys-color-surface: #141218;
--md-sys-color-on-surface: #E6E0E9;
--md-sys-color-surface-variant: #49454F;
--md-sys-color-on-surface-variant: #CAC4D0;
--md-sys-color-outline: #938F99;
}
.md3-button-filled {
background: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
border: none;
border-radius: var(--md-sys-shape-corner-full);
padding: 10px 24px;
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
cursor: pointer;
min-height: 40px;
position: relative;
overflow: hidden;
}
.md3-button-filled:hover::before {
content: '';
position: absolute;
inset: 0;
background: var(--md-sys-color-on-primary);
opacity: 0.08;
}
.md3-button-filled:disabled {
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
cursor: default;
}
.md3-card-elevated {
background: var(--md-sys-color-surface);
border-radius: var(--md-sys-shape-corner-medium);
padding: 16px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
}
.md3-card-filled {
background: var(--md-sys-color-surface-variant);
border-radius: var(--md-sys-shape-corner-medium);
padding: 16px;
}
.md3-card-outlined {
background: var(--md-sys-color-surface);
border: 1px solid var(--md-sys-color-outline-variant);
border-radius: var(--md-sys-shape-corner-medium);
padding: 16px;
}
.md3-text-field-outlined {
position: relative;
border: 1px solid var(--md-sys-color-outline);
border-radius: var(--md-sys-shape-corner-extra-small);
padding: 16px;
font-family: var(--md-sys-typescale-body-medium-font);
font-size: var(--md-sys-typescale-body-medium-size);
background: transparent;
color: var(--md-sys-color-on-surface);
}
.md3-text-field-outlined:focus {
border-color: var(--md-sys-color-primary);
border-width: 2px;
outline: none;
}
<button class="md3-button-filled">Click me</button>
<div class="md3-card-elevated">
<h3 style="font-family: var(--md-sys-typescale-title-medium-font)">Title</h3>
<p style="font-family: var(--md-sys-typescale-body-medium-font)">Content</p>
</div>
<input class="md3-text-field-outlined" placeholder="Email" />
If you want M3 styling without writing all the CSS yourself:
beercss): First CSS framework fully based on M3. Zero dependencies, semantic HTML, very small bundle. https://www.beercss.com/[data-theme="dark"] or prefers-color-schemem3-tokens.css — Complete M3 token foundation (color, shape, typography, motion, spacing, elevation) included in this skill's directory. Copy into your project as a starting point.material-theme-builder skill — Generate a custom token set from any source color.