material-you-slides
installsforks
How to install material-you-slides?
yzlnew/infra-skills/material-you-slides
$npx -y skills add yzlnew/infra-skills --skill material-you-slidesCreate 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
SKILL.md
| 1 | # Material You Slides Skill |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | ## When to Use |
| 6 | |
| 7 | 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. |
| 8 | |
| 9 | ## Design Principles |
| 10 | |
| 11 | 1. **M3 Color Tokens** - Use CSS custom properties following Material Design 3 naming (`--md-sys-color-*`). |
| 12 | 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). |
| 13 | 3. **Rounded Shapes** - Four tiers of corner radius: small (8px), medium (12px), large (16px), extra-large (28px). |
| 14 | 4. **Surface Hierarchy** - Use `surface`, `surface-container-low`, `surface-container`, `surface-container-high` for layered depth without drop shadows. |
| 15 | 5. **Container Colors** - Cards use `*-container` / `on-*-container` pairs for accessible contrast. |
| 16 | 6. **No Drop Shadows** - Rely on surface tones and subtle borders for elevation. |
| 17 | 7. **Generous Whitespace** - Slide padding 24px 48px. Card padding 24px. Gap 16-32px between elements. |
| 18 | |
| 19 | ## CSS Foundation |
| 20 | |
| 21 | 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. |
| 22 | |
| 23 | ```css |
| 24 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); |
| 25 | @page { size: 1280px 720px; margin: 0; } |
| 26 | * { box-sizing: border-box; margin: 0; padding: 0; } |
| 27 | |
| 28 | :root { |
| 29 | /* M3 Color Palette - Blue Theme */ |
| 30 | --md-sys-color-primary: #005AC1; |
| 31 | --md-sys-color-on-primary: #FFFFFF; |
| 32 | --md-sys-color-primary-container: #D8E2FF; |
| 33 | --md-sys-color-on-primary-container: #001A41; |
| 34 | |
| 35 | --md-sys-color-secondary: #575E71; |
| 36 | --md-sys-color-on-secondary: #FFFFFF; |
| 37 | --md-sys-color-secondary-container: #DBE2F9; |
| 38 | --md-sys-color-on-secondary-container: #141B2C; |
| 39 | |
| 40 | --md-sys-color-tertiary: #715573; |
| 41 | --md-sys-color-on-tertiary: #FFFFFF; |
| 42 | --md-sys-color-tertiary-container: #FBD7FC; |
| 43 | --md-sys-color-on-tertiary-container: #29132D; |
| 44 | |
| 45 | --md-sys-color-error: #BA1A1A; |
| 46 | --md-sys-color-error-container: #FFDAD6; |
| 47 | |
| 48 | --md-sys-color-surface: #FEF7FF; |
| 49 | --md-sys-color-on-surface: #1D1B20; |
| 50 | --md-sys-color-surface-container-low: #F7F2FA; |
| 51 | --md-sys-color-surface-container: #F3EDF7; |
| 52 | --md-sys-color-surface-container-high: #ECE6F0; |
| 53 | |
| 54 | --md-sys-color-outline: #74777F; |
| 55 | --md-sys-color-outline-variant: #C4C6CF; |
| 56 | |
| 57 | /* Custom Accents */ |
| 58 | --accent-blue: #005AC1; |
| 59 | --accent-teal: #006D5B; |
| 60 | --accent-gold: #735C00; |
| 61 | |
| 62 | /* Shape */ |
| 63 | --md-sys-shape-corner-extra-large: 28px; |
| 64 | --md-sys-shape-corner-large: 16px; |
| 65 | --md-sys-shape-corner-medium: 12px; |
| 66 | --md-sys-shape-corner-small: 8px; |
| 67 | |
| 68 | /* Typography */ |
| 69 | --font-heading: 'Roboto', -apple-system, sans-serif; |
| 70 | --font-body: 'Roboto', -apple-system, sans-serif; |
| 71 | } |
| 72 | |
| 73 | body { |
| 74 | font-family: var(--font-body); |
| 75 | background: #fff; |
| 76 | color: var(--md-sys-color-on-surface); |
| 77 | -webkit-font-smoothing: antialiased; |
| 78 | font-size: 24px; |
| 79 | } |
| 80 | ``` |
| 81 | |
| 82 | ## Slide Types |
| 83 | |
| 84 | ### 1. Title Slide (`.slide-title`) |
| 85 | |
| 86 | Full-bleed primary-color background with radial gradient accents. Used for the opening and closing slides. |
| 87 | |
| 88 | ```html |
| 89 | <div class="slide slide-title"> |
| 90 | <div class="brand-line"></div> |
| 91 | <h1>Presentation Title</h1> |
| 92 | <div class="subtitle">A concise tagline or description</div> |
| 93 | <div class="meta-info"> |
| 94 | <div class="author">Author / Team Name</div> |
| 95 | </div> |
| 96 | </div> |
| 97 | ``` |
| 98 | |
| 99 | **CSS:** |
| 100 | ```css |
| 101 | .slide-title { |
| 102 | background-color: var(--md-sys-color-primary); |
| 103 | color: var(--md-sys-color-on-primary); |
| 104 | justify-content: center; |
| 105 | align-items: flex-start; |
| 106 | padding-left: 100px; |
| 107 | background-image: radial-gradient(circle at 90% 10%, rgba(255,255,255,0.1) 0%, transparent 40%), |
| 108 | radial-gradient(circle at 80% 90%, rgba(255,255,255,0.05) 0%, transparent 30%); |
| 109 | } |
| 110 | .slide-title .brand-line { |
| 111 | width: 80px; height: 10px; |
| 112 | background: var(--md-sys-color-tertiary-container); |
| 113 | border-radius: 5px; margin-bottom: 40px; |
| 114 | } |
| 115 | .slide-title h1 { |
| 116 | font-family: var(--font-heading); |
| 117 | font-size: 96px; font-weight: 800; |
| 118 | letter-spacing: -2px; line-height: 1.1; margin-bottom: 24px; |
| 119 | } |
| 120 | .slide-title .subtitle { |
| 121 | font-size: 40px; font-weight: 300; |
| 122 | opacity: 0.9; margin-bottom: 80px; max-width: 900px; |
| 123 | } |
| 124 | .slide-title .meta-info { display: flex; gap: 40px; align-items: center; } |
| 125 | .slide-title .aut |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
