Material You Slides Skill

Create presentation slide decks as single-file HTML using the Material You (Material Design 3) design language. The output is a self-contained .html file optimized for 1280x720 presentation dimensions, printable via @page rules.

When to Use

Use this skill when the user asks to create slides, presentations, or decks and wants (or would benefit from) a clean, modern Material Design 3 look. This is the default slide style unless the user explicitly requests a different theme.

Design Principles

1. M3 Color Tokens - Use CSS custom properties following Material Design 3 naming (--md-sys-color-*).
2. Roboto Typography - Import from Google Fonts. Use weights 300 (light/subtitle), 400 (body), 500 (medium), 600 (semibold headings), 700 (bold), 800-900 (display/hero).
3. Rounded Shapes - Four tiers of corner radius: small (8px), medium (12px), large (16px), extra-large (28px).
4. Surface Hierarchy - Use surface, surface-container-low, surface-container, surface-container-high for layered depth without drop shadows.
5. Container Colors - Cards use *-container / on-*-container pairs for accessible contrast.
6. No Drop Shadows - Rely on surface tones and subtle borders for elevation.
7. Generous Whitespace - Slide padding 24px 48px. Card padding 24px. Gap 16-32px between elements.

CSS Foundation