material-you-slides

What this skill does

# 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

Every generated deck MUST include this CSS foundation in a `<style>` block. You may add component-specific styles but must not remove or override these base tokens.

```css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@page { size: 1280px 720px; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* M3 Color Palette - Blue Theme */
  --md-sys-color-primary: #005AC1;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D8E2FF;
  --md-sys-color-on-primary-container: #001A41;

  --md-sys-color-secondary: #575E71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #DBE2F9;
  --md-sys-color-on-secondary-container: #141B2C;

  --md-sys-color-tertiary: #715573;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FBD7FC;
  --md-sys-color-on-tertiary-container: #29132D;

  --md-sys-color-error: #BA1A1A;
  --md-sys-color-error-container: #FFDAD6;

  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;

  --md-sys-color-outline: #74777F;
  --md-sys-color-outline-variant: #C4C6CF;

  /* Custom Accents */
  --accent-blue: #005AC1;
  --accent-teal: #006D5B;
  --accent-gold: #735C00;

  /* Shape */
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-small: 8px;

  /* Typography */
  --font-heading: 'Roboto', -apple-system, sans-serif;
  --font-body: 'Roboto', -apple-system, sans-serif;
}

body {
  font-family: var(--font-body);
  background: #fff;
  color: var(--md-sys-color-on-surface);
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
}
```

## Slide Types

### 1. Title Slide (`.slide-title`)

Full-bleed primary-color background with radial gradient accents. Used for the opening and closing slides.

```html
<div class="slide slide-title">
  <div class="brand-line"></div>
  <h1>Presentation Title</h1>
  <div class="subtitle">A concise tagline or description</div>
  <div class="meta-info">
    <div class="author">Author / Team Name</div>
  </div>
</div>
```

**CSS:**
```css
.slide-title {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  justify-content: center;
  align-items: flex-start;
  padding-left: 100px;
  background-image: radial-gradient(circle at 90% 10%, rgba(255,255,255,0.1) 0%, transparent 40%),
                    radial-gradient(circle at 80% 90%, rgba(255,255,255,0.05) 0%, transparent 30%);
}
.slide-title .brand-line {
  width: 80px; height: 10px;
  background: var(--md-sys-color-tertiary-container);
  border-radius: 5px; margin-bottom: 40px;
}
.slide-title h1 {
  font-family: var(--font-heading);
  font-size: 96px; font-weight: 800;
  letter-spacing: -2px; line-height: 1.1; margin-bottom: 24px;
}
.slide-title .subtitle {
  font-size: 40px; font-weight: 300;
  opacity: 0.9; margin-bottom: 80px; max-width: 900px;
}
.slide-title .meta-info { display: flex; gap: 40px; align-items: center; }
.slide-title .author {
  font-size: 24px; font-weight: 500;
  background: rgba(255,255,255,0.15);
  padding: 16px 32px; border-radius: 50px;
}
```

### 2. Section Divider (`.slide-section`)

Light surface background with a left-edge primary color bar and a large translucent section number.

```html
<div class="slide slide-section">
  <div class="section-num">01</div>
  <h2>Section Title</h2>
  <div class="section-sub">Subtitle or English tagline</div>
</div>
```

**CSS:**
```css
.slide-section {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  justify-content: center;
  position: relative;
}
.slide-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 24px;
  background: var(--md-sys-color-primary);
}
.slide-section .section-num {
  font-size: 180px; font-weight: 900;
  color: var(--md-sys-color-primary-container);
  position: absolute; top: -30px; right: 60px; opacity: 0.5;
}
.slide-section h2 { font-size: 72px; font-weight: 700; line-height: 1.2; z-index: 1; position: relative; }
.slide-section .section-sub {
  font-size: 32px; color: var(--md-sys-color-secondary);
  margin-top: 32px; font-weight: 400; z-index: 1;
}
```

### 3. Content Slide (`.slide-content`)

The workhorse slide with a header (tag + title) and a flexible body area.

```html
<div class="slide slide-content">
  <div class="header">
    <div class="header-top">
      <div class="header-tag">TAG</div>
    </div>
    <h3>Slide Title</h3>
  </div>
  <div class="body">
    <!-- Content goes here -->
  </div>
  <div class="page-num">3</div>
</div>
```

**CSS:**
```css
.slide {
  width: 1280px; height: 720px;
  page-break-after: always; position: relative; overflow: hidden;
  padding: 24px 48px; display: flex; flex-direction: column;
  background-color: var(--md-sys-color-surface);
}
.slide:last-child { page-break-after: avoid; }

.slide-content .header {
  display: flex; flex-direction: column; align-items: flex-start;
  margin-bottom: 20px; gap: 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding-bottom: 16px; flex-shrink: 0;
}
.slide-content .header-top {
  display: flex; align-items: center; width: 100%; justify-content: space-between;
}
.slide-content .header-tag {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: 16px; font-weight: 600;
  padding: 6px 20px; border-radius: 100px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.slide-content .header h3 {
  font-size: 42px; font-weight: 600;
  color: var(--md-sys-color-on-surface); letter-spacing: -0.5px; line-height: 1.2;
}
.slide-content .body { flex: 1; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.page-num {
  position: absolute; bottom: 24px; right: 40px;
  font-size: 16px; color: var(--md-sys-color-outline); font-variant-numeric: tabular-nums;
}
```

## Component Library

### Cards

Use M3 container color pairs. Variants: `primary`, `secondary`, `tertiary`, `outlined`.

```html
<div class="card">Default surface card</div>
<div class="card primary">Primary container card</div>
<div class="card secondary">Secondary container card</div>
<div class="card tertiary">Tertiary container card</div>
<div class="card outlined">Outlined card (transparent bg, border)</div>
```

```css
.card {
  background: var(--md-sys-color-su