yzlnew/infra-skills/material-you-slides

Name: material-you-slides
Author: yzlnew

Claude Code and agent skill by yzlnew/infra-skills

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

Create presentation slides using Material You (Material Design 3) style. Generates 1280x720 HTML slides with M3 color tokens, Roboto typography, rounded cards, flow diagrams, metric cards, code blocks, and structured layouts. Use when the user asks to create slides, presentations, or decks and wants a clean, modern Material Design 3 aesthetic.

Install

npx vskill@latest install yzlnew/infra-skills/material-you-slides

SKILL.md

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

M3 Color Tokens - Use CSS custom properties following Material Design 3 naming (--md-sys-color-*).
Roboto Typography - Import from Google Fonts. Use weights 300 (light/subtitle), 400 (body), 500 (medium), 600 (semibold headings), 700 (bold), 800-900 (display/hero).
Rounded Shapes - Four tiers of corner radius: small (8px), medium (12px), large (16px), extra-large (28px).
Surface Hierarchy - Use surface, surface-container-low, surface-container, surface-container-high for layered depth without drop shadows.
Container Colors - Cards use *-container / on-*-container pairs for accessible contrast.
No Drop Shadows - Rely on surface tones and subtle borders for elevation.
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-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: none; position: relative;
}
.card.primary { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.card.secondary { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.card.tertiary { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.card.outlined { background: transparent; border: 1px solid var(--md-sys-color-outline-variant); }
.card-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.card-text { font-size: 22px; line-height: 1.5; opacity: 0.9; }

Layouts

css

.columns { display: flex; gap: 32px; flex: 1; min-height: 0; }
.column { flex: 1; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.col-60 { flex: 3; }
.col-40 { flex: 2; }

Lists

Styled with primary-colored bullet dots, no default list-style.

css

ul { list-style: none; padding: 0; }
ul li {
  font-size: 24px; line-height: 1.5;
  padding: 6px 0 6px 32px; position: relative;
  color: var(--md-sys-color-on-surface);
}
ul li::before {
  content: "\2022"; position: absolute; left: 8px;
  color: var(--md-sys-color-primary); font-weight: 900; font-size: 24px;
}

Tables

Rounded-corner tables with surface-container header background.

css

table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large); overflow: hidden;
}
table th {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  padding: 12px 20px; text-align: left; font-weight: 700; font-size: 20px;
}
table td {
  padding: 12px 20px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface); font-size: 20px;
}

Tags / Chips

html

<span class="tag">Default</span>
<span class="tag blue">Blue</span>
<span class="tag green">Green</span>
<span class="tag red">Red</span>

css

.tag {
  display: inline-flex; align-items: center;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  font-size: 16px; font-weight: 500;
  padding: 6px 14px; border-radius: 8px; margin-right: 8px;
}
.tag.blue { background: #D8E2FF; color: #001A41; }
.tag.green { background: #C4EED0; color: #072111; }
.tag.red { background: #FFDAD6; color: #410002; }

Flow Diagrams

Horizontal process flows with bordered boxes and arrow connectors.

html

<div class="flow-row">
  <div class="flow-box dark">Step 1</div>
  <div class="flow-arrow">&rarr;</div>
  <div class="flow-box">Step 2</div>
  <div class="flow-arrow">&rarr;</div>
  <div class="flow-box dark" style="background:var(--accent-teal);">Step 3</div>
</div>

css

.flow-row { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 16px 0; }
.flow-box {
  background: var(--md-sys-color-surface);
  border: 2px solid var(--md-sys-color-primary);
  border-radius: 16px; padding: 12px 20px;
  text-align: center; min-width: 120px; font-weight: 600; font-size: 18px;
}
.flow-box.dark { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border: none; }
.flow-arrow { color: var(--md-sys-color-outline); font-size: 24px; }

Metric Cards

Large numeric KPI displays in a row.

html

<div class="metric-row">
  <div class="metric-card">
    <div class="val">42%</div>
    <div class="label">Description</div>
  </div>
</div>

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingmaterial-you-slides/SKILL.md

Popularity

Repository stars: 100
Repository forks: 6
7-day trend score: 23

Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 3 Apr 2026, 7 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/yzlnew/infra-skills/material-you-slides/badge)](https://verified-skill.com/skills/yzlnew/infra-skills/material-you-slides)

Something wrong with this skill or its page? Tell us.

Install

SKILL.md

Material You Slides Skill

When to Use

Design Principles

CSS Foundation

Slide Types

1. Title Slide (.slide-title)

2. Section Divider (.slide-section)

3. Content Slide (.slide-content)

Component Library

Cards

Layouts

Lists

Tables

Tags / Chips

Flow Diagrams

Metric Cards

Security

Quality evaluation

Source

Popularity

Works with

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

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

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