accelr8-deck-builder

📁 patonchain/accelr8-deck-builder 📅 7 days ago

总安装量

周安装量

#53827

全站排名

安装命令

npx skills add https://github.com/patonchain/accelr8-deck-builder --skill accelr8-deck-builder

Agent 安装分布

opencode 3

openclaw 2

codex 2

gemini-cli 2

replit 1

Skill 文档

ACCELR8 Deck Builder

Create slide decks as standalone HTML files. Share as a link. Export as PDF with one click.

Quick Start

Create a new HTML file using the template below
Add slides using the layout classes
Generate images with nanobanana if needed
Open in browser to present or export

Template

Every deck starts with this structure. Copy it exactly:

<!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>

The full template with all CSS and JS is in references/template.html. Copy that file to start a new deck.

Slide Layouts

Each slide is a <section class="slide slide--TYPE">. Available types:

Title Slide

<section class="slide slide--title">
    <p class="label">Category</p>
    <h1>Main Title</h1>
    <p>Subtitle text</p>
</section>

Content Slide

<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>

Bullets Slide (Large)

<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>

Split Slide (Text + Image)

<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>

Quote Slide

<section class="slide slide--quote">
    <blockquote>
        "Quote text here."
        <cite>â Attribution</cite>
    </blockquote>
</section>

Image Slide (Full Bleed)

<section class="slide slide--image">
    <img src="hero.png" alt="Description" crossorigin="anonymous">
    <figcaption>Optional caption</figcaption>
</section>

Section Divider

<section class="slide slide--section">
    <p class="label">Part One</p>
    <h2>Section Title</h2>
</section>

Code Slide

<section class="slide slide--code">
    <h2>Example</h2>
    <pre><code>const x = 1;</code></pre>
</section>

End Slide

<section class="slide slide--end">
    <h2>Thank You</h2>
    <p>contact@example.com</p>
</section>

Components

Use inside any slide:

<!-- 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>

Generating Images

Use nanobanana when slides need images:

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 2K

Prompt tips:

Always include “16:9 aspect ratio” for slide images
Add “minimal, professional” for business decks
Be specific: “warm”, “corporate”, “energetic”, “calm”

Features

Present button â Fullscreen mode (or press P)
Export PDF â Downloads PDF automatically, each slide = one page
Arrow keys â Navigate in presentation mode
Escape â Exit presentation

Design Rules

One idea per slide
Maximum 6 bullet points
Images for emotion, text for information
Section dividers every 3-4 slides
End with clear call to action

Sharing

The deck is a static HTML file. Share by:

Hosting anywhere (Vercel, Netlify, GitHub Pages)
Sending the file directly
Dropping in shared folder

Read references/template.html for the complete working template with all styles and scripts.

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台