Loading...
Loading...
Create beautiful slide decks as shareable webpages. Use when asked to make presentations, pitch decks, or slides. Exports to PDF. Generates images with nanobanana.
npx skill4agent add patonchain/accelr8-deck-builder accelr8-deck-builder<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DECK TITLE HERE</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
<div class="deck" id="deck">
<!-- SLIDES GO HERE -->
</div>
<div class="controls">
<button class="btn-secondary" onclick="present()">Present (P)</button>
<button class="btn-primary" id="exportBtn" onclick="exportPDF()">Export PDF</button>
</div>
<div class="export-progress" id="exportProgress">
<p id="exportStatus">Exporting slides...</p>
<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
</div>
</body>
</html>references/template.html<section class="slide slide--TYPE"><section class="slide slide--title">
<p class="label">Category</p>
<h1>Main Title</h1>
<p>Subtitle text</p>
</section><section class="slide slide--content">
<h2>Slide Title</h2>
<p>Body text here.</p>
<ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
</ul>
</section><section class="slide slide--bullets">
<h2>Key Points</h2>
<ul>
<li>First major point</li>
<li>Second major point</li>
<li>Third major point</li>
</ul>
</section><section class="slide slide--split">
<div>
<p class="label">Label</p>
<h2>Title</h2>
<p>Description text.</p>
</div>
<div>
<img src="image.png" alt="Description" crossorigin="anonymous">
</div>
</section><section class="slide slide--quote">
<blockquote>
"Quote text here."
<cite>— Attribution</cite>
</blockquote>
</section><section class="slide slide--image">
<img src="hero.png" alt="Description" crossorigin="anonymous">
<figcaption>Optional caption</figcaption>
</section><section class="slide slide--section">
<p class="label">Part One</p>
<h2>Section Title</h2>
</section><section class="slide slide--code">
<h2>Example</h2>
<pre><code>const x = 1;</code></pre>
</section><section class="slide slide--end">
<h2>Thank You</h2>
<p>contact@example.com</p>
</section><!-- Two columns -->
<div class="columns">
<div>Left</div>
<div>Right</div>
</div>
<!-- Three columns -->
<div class="columns-3">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- Card -->
<div class="card">
<h3>Title</h3>
<p>Content</p>
</div>
<!-- Numbered step -->
<div class="icon-row">
<span class="badge">1</span>
<div>
<h3>Step</h3>
<p>Description</p>
</div>
</div>uv run ~/.codex/skills/nano-banana-pro/scripts/generate_image.py \
--prompt "abstract gradient, warm orange to purple, minimal, 16:9 aspect ratio" \
--filename "hero.png" \
--resolution 2Kreferences/template.html