HTML Slides

Create presentations as pure HTML. No build tools, no frameworks — just HTML, CSS, and the widget aesthetic system.

How it works: The entire presentation is a single HTML file output as a widget code block. All slides are <section> elements inside one document, sharing the same theme (aesthetic, fonts, CSS). The frontend renders the widget inline in chat with built-in navigation. This is the default and primary output mode — no CLI tools needed.

Deploy is optional. Only deploy to rebyte.pro when the user explicitly asks for a shareable URL. See references/deploy.md.

For Non-Technical Users

IMPORTANT: This skill is designed for non-technical users.

DO NOT explain commands or show bash/terminal syntax to the user
DO NOT ask the user to run commands themselves
DO NOT give technical instructions like "run this command"
JUST EXECUTE and show results directly
Keep responses focused on outcomes, not technical steps

Common Mistakes to Avoid

Showing dev server output: Never show "localhost:3000" or similar - the user can't access it and doesn't care
Running npm run dev: Don't start dev servers and show the output. Export/build instead.
Explaining installation steps: Just install dependencies silently
Showing terminal output: Unless it's an error you need to debug, hide it
Asking "should I run X?": Just run it

Authentication

IMPORTANT: All API requests require authentication. Get your auth token and API URL by running:

AUTH_TOKEN=$(/home/user/.local/bin/rebyte-auth)
API_URL=$(python3 -c "import json; print(json.load(open('/home/user/.rebyte.ai/auth.json'))['sandbox']['relay_url'])")

Include the token in all API requests as a Bearer token, and use $API_URL as the base for all API endpoints.

Directory structure:

SKILL_DIR: The directory containing this SKILL.md
Working directory: /code/ (where presentation projects are created)

Aesthetic Direction (MANDATORY)

Pick ONE aesthetic. Set data-aesthetic="name" on <html>. The frontend resolves to actual colors — never hardcode hex colors.

Aesthetic	Feel	Best for
`editorial`	Serif, generous whitespace, earth tones + gold	Keynotes, narratives
`blueprint`	Technical drawing, slate/blue palette	Architecture, system talks
`paper-ink`	Warm cream, terracotta/sage	Tutorials, creative pitches
`mono-terminal`	Green/amber on dark, CRT feel	Technical demos
`data-dense`	Tight spacing, maximum information	Data presentations
`warm`	Peach/cream, friendly	General purpose
`dracula`	Purple-heavy, Dracula IDE scheme	Developer talks
`nord`	Cool arctic blues, minimalist	Clean, minimal decks

Constrained aesthetics (editorial, blueprint, paper-ink, mono-terminal) produce more distinctive results.

Font Pairing (MANDATORY)

Pick ONE font pair. Set data-font="name" on <html>.

Name	Body font	Code font	Voice
`dm-sans`	DM Sans	Fira Code	Clean, modern
`instrument-serif`	Instrument Serif	JetBrains Mono	Literary, editorial
`ibm-plex`	IBM Plex Sans	IBM Plex Mono	Technical, precise
`bricolage`	Bricolage Grotesque	Fragment Mono	Bold, contemporary
`jakarta`	Plus Jakarta Sans	Azeret Mono	Friendly, rounded
`outfit`	Outfit	Space Mono	Geometric, clean
`sora`	Sora	IBM Plex Mono	Modern, geometric
`crimson-pro`	Crimson Pro	Noto Sans Mono	Classic serif
`fraunces`	Fraunces	Source Code Pro	Warm, ornamental
`red-hat`	Red Hat Display	Red Hat Mono	Distinctive
`libre-franklin`	Libre Franklin	Inconsolata	Neutral, versatile
`playfair`	Playfair Display	Roboto Mono	Elegant, high-contrast

Recommended pairings:

editorial → instrument-serif, crimson-pro, playfair, fraunces
blueprint → ibm-plex, dm-sans, sora
paper-ink → crimson-pro, fraunces, libre-franklin
mono-terminal → ibm-plex
data-dense → ibm-plex, dm-sans, libre-franklin

NEVER use Inter, Roboto, or Arial.

CSS Variable Contract

Always use these. NEVER hardcode colors.

Variable	Purpose
`--widget-bg-primary`	Slide background
`--widget-bg-secondary`	Card background
`--widget-bg-tertiary`	Code blocks, inputs
`--widget-text-primary`	Headings, body
`--widget-text-secondary`	Descriptions
`--widget-text-muted`	Captions, labels
`--widget-accent`	Highlights, decorations
`--widget-accent-fg`	Accent text color
`--widget-accent-text`	Text on accent bg
`--widget-border`	Borders
`--widget-border-radius`	Border radius (12px)
`--widget-shadow-sm` / `--widget-shadow-md`	Shadows
`--widget-font-sans`	Body font
`--widget-font-mono`	Code, data values
`--widget-chart-1` … `--widget-chart-8`	Chart colors

Creating Slides

The entire presentation is one widget code block containing all slides as <section> elements.

Output Format

```widget
<html data-aesthetic="editorial" data-font="instrument-serif" data-slides="true">
  <head>...</head>
  <body>
    <div class="deck" id="deck">
      <section class="slide slide--title">...</section>
      <section class="slide slide--content">...</section>
      <section class="slide slide--closing">...</section>
    </div>
    <script>/* navigation engine */</script>
  </body>
</html>
```

Do NOT save as files. Output the widget directly in your response.

Size limit: Under 5 MB.

HTML Architecture

One HTML document, one theme, all slides as sections. See references/css-patterns.md for the complete CSS, navigation JS, and layout classes. See references/slide-template.md for the base template.

<!DOCTYPE html>
<html lang="en" data-aesthetic="editorial" data-font="instrument-serif" data-slides="true">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=...&display=swap" rel="stylesheet">
  <style>
    :root { /* Fallback CSS vars matching chosen aesthetic */ }
    /* Slide engine + layout classes from css-patterns.md */
  </style>
</head>
<body tabindex="0">
  <div class="slide-progress" id="progress"></div>
  <div class="deck" id="deck">
    <section class="slide slide--title">...</section>
    <section class="slide slide--content">...</section>
    <section class="slide slide--closing">...</section>
  </div>
  <div class="slide-controls">
    <button class="ctrl-btn" id="prev-btn">&#9664;</button>
    <span class="slide-counter" id="counter">1 / N</span>
    <button class="ctrl-btn" id="next-btn">&#9654;</button>
  </div>
  <script>/* Navigation engine from css-patterns.md */</script>
</body>
</html>

CRITICAL rules:

Include <link> for Google Fonts (needed for standalone rendering)
Set fallback CSS vars in :root matching your chosen aesthetic
Design for 1920x1080 internal canvas (16:9)
Include tabindex="0" on <body> for keyboard focus in iframe
Copy the navigation engine JS verbatim from references/css-patterns.md

Navigation (built into JS engine)

Space / Right arrow / Enter: next slide
Left arrow / Backspace: previous slide
Home / End: first / last slide
F: toggle fullscreen
Touch swipe: left/right (50px threshold)
On-screen buttons: prev/next + counter (hover to reveal)

Transitions

Set data-transition on .deck: slide (default), fade, none

Deploying as a Standalone URL (only when user asks)

See references/deploy.md. Save the widget HTML as index.html and run rebyte deploy. Do NOT attempt deployment unless the user explicitly requests a shareable URL.

Slide Types

Use these layout classes on <section class="slide slide--TYPE">:

Class	When	Key elements
`slide--title`	First slide	`.label`, `h1` (with `<em>` for accent), `.subtitle`, `.divider`
`slide--section`	Section divider	`.section-number`, `h2`
`slide--content`	Main slides	`h2`, `ul > li`
`slide--two-col`	Comparisons	`h2`, `.col-grid > .col-card` (`.accent-bar`, `h3`, `p`)
`slide--stat`	Key metrics	`.label`, `.stat-grid > .stat-item` (`.big-number`, `.stat-label`)
`slide--quote`	Citations	`.quote-mark`, `blockquote`, `.attribution`
`slide--code`	Technical	`h2`, `pre` (`.keyword`, `.string`, `.comment`)
`slide--closing`	Last slide	`h2`, `.cta`, `.footer-text`

Typography Scale (at 1920x1080)

Title h1:        80px  weight 400  line-height 1.1
Section h2:      64px  weight 400  line-height 1.2
Content h2:      52px  weight 400  line-height 1.2
Card h3:         28px  weight 400
Body/bullets:    26px  weight 400  line-height 1.7
Subtitle:        28px  secondary color
Big number:      96px  monospace   accent color
Label:           14px  monospace   uppercase  letter-spacing 0.15em
Caption:         16px  muted color

CDN Libraries (for charts/diagrams)

Library	CDN URL	Use for
Chart.js 4	`https://cdn.jsdelivr.net/npm/chart.js@4.4.1`	Charts
D3 v7	`https://cdn.jsdelivr.net/npm/d3@7`	Custom visualizations
Mermaid	`https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js`	Diagrams
anime.js	`https://cdn.jsdelivr.net/npm/animejs@3.2.2/lib/anime.min.js`	Animations

Design Rules

One idea per slide — no walls of text
8-12 slides default
Use <em> in headings for italic accent words
Generous padding — 100px top/bottom, 140px sides
Accent bar decorations — small colored bars above card content
Monospace for data — numbers, stats, code use var(--widget-font-mono)
Compositional variety — alternate centered, left-aligned, and grid layouts

Quality Gates

All colors use var(--widget-*) — no hardcoded hex
Typography hierarchy clear (title > heading > body > caption)
No horizontal overflow
Fallback CSS vars match chosen aesthetic
All slides in one HTML document — one widget, not multiple
Navigation JS included

Anti-Patterns (NEVER)

Emoji section headers
Uniform card grids on every slide
Three-dot macOS window chrome
Gradient text headings
Glowing box-shadows
Generic placeholder images

Reference Files

File	Description
`references/slide-template.md`	Base HTML template for slides
`references/css-patterns.md`	CSS layout classes and navigation JS
`references/deploy.md`	How to deploy slides as a standalone URL

Slide

Cloud-native skill

Documentation