Source from repo
Slides

AI-powered slide deck design skill for creating professional presentations with consistent visual styling.
nextlevelbuilderGitHub nextlevelbuilderSource repo Original GitHub link Publisher page
Files
Skill
n/a
Size
18.9 KB
Entrypoint
SKILL.md
Format
git-repo
Open file
references/html-template.md

Syntax-highlighted preview of this file as included in the skill package.
Rendered Source
markdown296 linesFree
references/html-template.md
1# HTML Slide Template
2 
3Complete HTML structure with navigation, tokens, and Chart.js integration.
4 
5## Base Structure
6 
7```html
8<!DOCTYPE html>
9<html lang="en">
10<head>
11    <meta charset="UTF-8">
12    <meta name="viewport" content="width=device-width, initial-scale=1.0">
13    <title>Presentation Title</title>
14    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
15    <style>
16        /* Paste embed-tokens.cjs output here */
17        :root {
18            --color-primary: #FF6B6B;
19            --color-background: #0D0D0D;
20            /* ... more tokens */
21        }
22 
23        /* Base slide styles */
24        * { margin: 0; padding: 0; box-sizing: border-box; }
25        body {
26            background: var(--color-background);
27            color: #fff;
28            font-family: var(--typography-font-body, 'Inter', sans-serif);
29            overflow: hidden;
30        }
31 
32        /* 16:9 Aspect Ratio Container (desktop) */
33        .slide-deck {
34            position: relative;
35            width: 100vw;
36            height: 100vh;
37            overflow: hidden;
38        }
39 
40        @media (min-width: 769px) {
41            .slide-deck {
42                /* Lock to 16:9 — letterbox if viewport ratio differs */
43                max-width: calc(100vh * 16 / 9);
44                max-height: calc(100vw * 9 / 16);
45                margin: auto;
46                position: absolute;
47                inset: 0;
48            }
49        }
50 
51        .slide {
52            position: absolute;
53            width: 100%; height: 100%;
54            display: flex;
55            flex-direction: column;
56            justify-content: center;
57            align-items: center;
58            text-align: center;
59            padding: 60px;
60            opacity: 0;
61            visibility: hidden;
62            transition: opacity 0.4s;
63            background: var(--color-background);
64            overflow: hidden; /* Prevent content overflow */
65        }
66 
67        .slide.active { opacity: 1; visibility: visible; }
68 
69        /* Slide inner wrapper — constrains content within safe area */
70        .slide-content {
71            width: 100%;
72            max-width: 100%;
73            max-height: 100%;
74            overflow: hidden;
75            display: flex;
76            flex-direction: column;
77            justify-content: center;
78            align-items: center;
79            gap: 16px;
80        }
81 
82        /* Typography */
83        h1, h2 { font-family: var(--typography-font-heading, 'Space Grotesk', sans-serif); }
84        .slide-title {
85            font-size: clamp(32px, 6vw, 80px);
86            background: var(--primitive-gradient-primary, linear-gradient(135deg, #FF6B6B, #FF8E53));
87            -webkit-background-clip: text;
88            -webkit-text-fill-color: transparent;
89            line-height: 1.1;
90        }
91 
92        /* ===== RESPONSIVE BREAKPOINTS ===== */
93 
94        /* Tablet (portrait) */
95        @media (max-width: 768px) {
96            .slide { padding: 32px 24px; }
97            .slide-title { font-size: clamp(28px, 5vw, 48px); }
98            h2 { font-size: clamp(20px, 4vw, 32px); }
99            p, li { font-size: clamp(14px, 2.5vw, 18px); }
100        }
101 
102        /* Mobile */
103        @media (max-width: 480px) {
104            .slide { padding: 24px 16px; }
105            .slide-title { font-size: clamp(22px, 6vw, 36px); }
106            h2 { font-size: clamp(18px, 4.5vw, 28px); }
107            p, li { font-size: clamp(12px, 3vw, 16px); }
108            .nav-controls { bottom: 16px; gap: 12px; }
109            .nav-btn { width: 32px; height: 32px; font-size: 14px; }
110        }
111 
112        /* Navigation */
113        .progress-bar {
114            position: fixed;
115            top: 0; left: 0;
116            height: 3px;
117            background: var(--color-primary);
118            transition: width 0.3s;
119            z-index: 1000;
120        }
121        .nav-controls {
122            position: fixed;
123            bottom: 30px;
124            left: 50%;
125            transform: translateX(-50%);
126            display: flex;
127            align-items: center;
128            gap: 20px;
129            z-index: 1000;
130        }
131        .nav-btn {
132            background: rgba(255,255,255,0.1);
133            border: none;
134            color: #fff;
135            width: 40px; height: 40px;
136            border-radius: 50%;
137            cursor: pointer;
138            font-size: 18px;
139        }
140        .nav-btn:hover { background: rgba(255,255,255,0.2); }
141        .slide-counter { color: rgba(255,255,255,0.6); font-size: 14px; }
142    </style>
143</head>
144<body>
145    <!-- Progress Bar -->
146    <div class="progress-bar" id="progressBar"></div>
147 
148    <!-- Slide Deck Container (16:9 on desktop) -->
149    <div class="slide-deck">
150 
151    <!-- Slides -->
152    <div class="slide active">
153        <div class="slide-content">
154            <h1 class="slide-title">Title Slide</h1>
155            <p>Subtitle or tagline</p>
156        </div>
157    </div>
158 
159    <!-- More slides... (always wrap content in .slide-content) -->
160 
161    </div><!-- /.slide-deck -->
162 
163    <!-- Navigation -->
164    <div class="nav-controls">
165        <button class="nav-btn" onclick="prevSlide()">←</button>
166        <span class="slide-counter"><span id="current">1</span> / <span id="total">9</span></span>
167        <button class="nav-btn" onclick="nextSlide()">→</button>
168    </div>
169 
170    <script>
171        let current = 1;
172        const total = document.querySelectorAll('.slide').length;
173        document.getElementById('total').textContent = total;
174 
175        function showSlide(n) {
176            if (n < 1) n = 1;
177            if (n > total) n = total;
178            current = n;
179            document.querySelectorAll('.slide').forEach((s, i) => {
180                s.classList.toggle('active', i === n - 1);
181            });
182            document.getElementById('current').textContent = n;
183            document.getElementById('progressBar').style.width = (n / total * 100) + '%';
184        }
185 
186        function nextSlide() { showSlide(current + 1); }
187        function prevSlide() { showSlide(current - 1); }
188 
189        document.addEventListener('keydown', (e) => {
190            if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
191            if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
192        });
193 
194        document.addEventListener('click', (e) => {
195            if (!e.target.closest('.nav-controls')) nextSlide();
196        });
197 
198        showSlide(1);
199    </script>
200</body>
201</html>
202```
203 
204## Chart.js Integration
205 
206```html
207<div class="chart-container" style="width: min(80%, 600px); height: clamp(200px, 40vh, 350px);">
208    <canvas id="revenueChart"></canvas>
209</div>
210 
211<script>
212new Chart(document.getElementById('revenueChart'), {
213    type: 'line', // or 'bar', 'doughnut', 'radar'
214    data: {
215        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
216        datasets: [{
217            label: 'MRR ($K)',
218            data: [5, 12, 28, 45],
219            borderColor: '#FF6B6B',
220            backgroundColor: 'rgba(255, 107, 107, 0.1)',
221            borderWidth: 3,
222            fill: true,
223            tension: 0.4
224        }]
225    },
226    options: {
227        responsive: true,
228        maintainAspectRatio: false,
229        plugins: { legend: { display: false } },
230        scales: {
231            x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } },
232            y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } }
233        }
234    }
235});
236</script>
237```
238 
239## Animation Classes
240 
241```css
242/* Fade Up */
243.animate-fade-up {
244    animation: fadeUp 0.6s ease-out forwards;
245    opacity: 0;
246}
247@keyframes fadeUp {
248    from { opacity: 0; transform: translateY(30px); }
249    to { opacity: 1; transform: translateY(0); }
250}
251 
252/* Count Animation */
253.animate-count { animation: countUp 1s ease-out forwards; }
254 
255/* Scale */
256.animate-scale {
257    animation: scaleIn 0.5s ease-out forwards;
258}
259@keyframes scaleIn {
260    from { opacity: 0; transform: scale(0.9); }
261    to { opacity: 1; transform: scale(1); }
262}
263 
264/* Stagger Children */
265.animate-stagger > * {
266    opacity: 0;
267    animation: fadeUp 0.5s ease-out forwards;
268}
269.animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
270.animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
271.animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
272.animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }
273```
274 
275## Background Images
276 
277```html
278<div class="slide slide-with-bg" style="background-image: url('https://images.pexels.com/...')">
279    <div class="overlay" style="background: linear-gradient(135deg, rgba(13,13,13,0.9), rgba(13,13,13,0.7))"></div>
280    <div class="content" style="position: relative; z-index: 1;">
281        <!-- Slide content -->
282    </div>
283</div>
284```
285 
286## CSS Variables Reference
287 
288| Variable | Usage |
289|----------|-------|
290| `--color-primary` | Brand primary (CTA, highlights) |
291| `--color-background` | Slide background |
292| `--color-secondary` | Secondary elements |
293| `--primitive-gradient-primary` | Title gradients |
294| `--typography-font-heading` | Headlines |
295| `--typography-font-body` | Body text |
296
Preparing the source view

Slides

references/html-template.md
