openhands-slides

Create branded reveal.js slide presentations with OpenHands styling. Generates self-contained HTML decks with warm beige/amber/dark-brown palette, flowcharts, diagram components, and PDF export.

Zur Installation springen

Repository: neubig/workflow
Letzte Quellaktivität: 10. Juli 2026 um 10:10
Erkannte Sprache von SKILL.md: Englisch
Sterne: 4
Forks: 0

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/neubig/workflow --skill openhands-slides

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

name	openhands-slides
description	Create branded reveal.js slide presentations with OpenHands styling. Generates self-contained HTML decks with warm beige/amber/dark-brown palette, flowcharts, diagram components, and PDF export.
triggers	["create slides","make a presentation","slide deck","presentation","slides"]

OpenHands Slides

Create polished reveal.js slide decks with OpenHands branding. Produces a single self-contained HTML file that can be served locally, opened in a browser, or exported to PDF.

Quick Start

Create index.html using the template below
Serve it: python3 -m http.server 12000
Customize slides using the component library

Branding & Palette

Use exactly these CSS variables — do not introduce extra colors:

Variable	Hex	Usage
`--oh-bg`	`#F9F0D9`	Warm beige slide background
`--oh-dark`	`#22150D`	Headings, primary boxes
`--oh-brown`	`#3D2B1F`	Secondary boxes, body text
`--oh-amber`	`#FFAB40`	Highlights, badges, accents
`--oh-amber-light`	`#FFD59E`	Label text on dark backgrounds
`--oh-gray`	`#595959`	Muted text, arrows, subtitles
`--oh-light`	`#EEEEEE`	Light cards, secondary backgrounds

Logo: Use the OpenHands color logo (openhands_logo_color_forwhite.png) — yellow hands on transparent background, designed for light backgrounds. Do not apply CSS filters. The logo should be placed:

Title slide: top-left at height: 44px
Content slides: bottom-left footer at height: 22px; opacity: 0.35
End slide: centered at height: 52px

If no logo file is available, omit the <img> tags rather than using a placeholder.

Full HTML Template

Copy this template and modify the slide sections. It includes the complete CSS theme and all reusable component classes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentation Title — OpenHands</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/white.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
  --oh-bg: #F9F0D9;
  --oh-dark: #22150D;
  --oh-brown: #3D2B1F;
  --oh-gray: #595959;
  : ;
  : ;
  : ;
}

 {
  : , sans-serif;
  : ;
  : (--oh-dark);
}
  { : left; }
   {
  :  ;
  : border-box;
  : ;
}
 ,  ,   {
  : , sans-serif;
  : ;
  : (--oh-dark);
  : none;
  : -;
}
  { : ; : ; }
  { : ; : ; }
  { : ; : (--oh-gray); : ; }
   { : ; : (--oh-brown); }


 {
  : flex ;
  : column;
  : center;
  : flex-start;
}
     { : ; : ; }
        { : ; : ; }
  { : ; : (--oh-gray); : ; : ; : ; }
     { : ; : ; : (--oh-gray); : ; }


 {
  : flex ;
  : column;
  : flex-start;
  :  ;
}
  { : flex; : center; : ; : ; }
   {
  : (--oh-dark);
  : (--oh-amber);
  : ;
  :  ;
  : ;
  : ;
  : uppercase;
  : ;
  : nowrap;
}


 { : flex; : center; : center; : ; :  ; : nowrap; }
  {
  : (--oh-dark); : ; : ;
  :  ; : center; : ;
  : ; : ; : ; : ;
}
   {
  : inline-block; : (--oh-amber); : (--oh-dark);
  : ; : ; : ; : ;
  : ; : ; : ;
}
  { : ; : (--oh-gray); :  ; : ; }


 { : flex; : column; : center; : ; :  ; }
  { : flex; : center; : ; : ; : center; }
  {
  : ; :  ; : ;
  : ; : center; : ; : ;
}
  { : ; : (--oh-gray); }
  { : (--oh-dark); : ; }
   { : (--oh-brown); : ; }
 { : (--oh-amber); : (--oh-dark); }
 { : (--oh-light); : (--oh-dark); }


 { : flex; : center; : center; : ; :  ; }
 {
  : ; :  ; : center;
  : ; : ; : ;
}
   { : (--oh-dark); : ; }
 { : (--oh-light); : (--oh-dark); }
 { : (--oh-amber); : (--oh-dark); }
   { : ; : ; : block; : ; : ; }
 { : ; : (--oh-gray); }


 { : grid; : fr fr; : ; :  ; }
 { : ; : ; : flex; : flex-start; : ; }
   { : ; : ; : ; }
  { : ; : ; : ; : (--oh-dark); }
   { : ; : (--oh-gray); : ; : ; : ; }


 {
  : (--oh-light); :  solid (--oh-amber);
  :    ; :  ; :  ; : ;
}
    { : ; : (--oh-dark); : ; }
  { : (--oh-gray); : ; }
  { : (--oh-brown); : underline; : (--oh-amber); : ; : ; }


 { : grid; : fr fr; : ; :  ; }
 { : ; : ; : center; }
        { : ; : ; : ; : ; }
  { : ; : ; : ; }


 { : grid; : fr fr fr; : ; :  ; }
 { : ; : ; : center; }
   { : ; : ; }
  { : ; : ; : ; }
   { : ; : ; : ; }


 { : grid; : fr fr; : ; :  ; : start; }
  { : flex; : column; }


 { : absolute; : ; : ; : flex; : center; : ; }
  { : ; : ; }


 {
  : flex ; : column;
  : center; : center; : center;
}
  { : ; : ; }
     { : center; }








  
  Presentation Title
  
    A concise description of what this presentation covers
  
  Prepared for Audience · OpenHands




  Pipeline Overview
  
    1First Step
    →
    2Second Step
    →
    3Third Step
    →
    4Fourth Step
  

  
    
      ~1K
      inputs in
    
    →
    
      500
      outputs out
    
  

  




  
    Step 1
    Analysis
  
  Key criteria for evaluation
  
    
      📊
      Metric ADescription of the first metric and what it measures
    
    
      🔍
      Metric BDescription of the second metric and its purpose
    
    
      ⚡
      Metric CDescription of the third metric being tracked
    
    
      ✅
      Metric DDescription of the fourth metric and why it matters
    
  
  




  
    Step 2
    Process Flow
  
  
    
      Input Data
      →
      Processing
      →
      Output
    
  
  Additional Details
  
    
      Left column content describing the first aspect of the process.
    
    
      Right column content describing the second aspect of the process.
    
  
  




  Results
  
    "Relevant Paper or Source Title"
    Author A, Author B · link
  
  
    
      95%
      Accuracy
    
    
      2.5×
      Speedup
    
  
  




  Expected Outcomes
  
    
      🎯
      Outcome A
      Description of the first expected outcome
    
    
      📊
      Outcome B
      Description of the second expected outcome
    
    
      ⚖️
      Outcome C
      Description of the third expected outcome
    
  
  




  
  Thank You
  
    Questions & Discussion
  
  
    openhands.ai · github.com/OpenHands/OpenHands

Component Reference

Pipeline (numbered horizontal steps)

<div class="pipeline">
  <div class="step"><div class="num">1</div><br>Step Name</div>
  <div class="arrow">→</div>
  <div class="step"><div class="num">2</div><br>Step Name</div>
</div>

Flowchart (colored boxes with arrows)

<div class="flowchart">
  <div class="flow-row">
    <div class="flow-box dark">Input</div>
    <div class="flow-arrow">→</div>
    <div class="flow-box amber">Output</div>
  </div>
</div>

Box variants: dark, mid, amber, light

Criteria Cards (2×2 grid with icons)

<div class="criteria-grid">
  <div class="criteria-card" style="background:var(--oh-light);">
    <div class="icon">📊</div>
    <div>
      <div class="label">Title</div>
      <div class="desc">Description text</div>
    </div>
  </div>
  <!-- repeat for each card -->
</div>

Metric Cards (validation results)

<div class="validation-grid">
  <div class="validation-card" style="background:var(--oh-dark);color:#fff;">
    <div class="metric" style="color:var(--oh-amber);">95%</div>
    <div class="metric-label" style="color:rgba(255,255,255,0.7);">Label</div>
  </div>
</div>

Outcome Cards (3-column)

<div class="outcome-grid">
  <div class="outcome-card" style="background:var(--oh-dark);color:#fff;">
    <div class="o-icon">🎯</div>
    <div class="o-label" style="color:var(--oh-amber);">Title</div>
    <div class="o-desc" style="color:rgba(255,255,255,0.7);">Description</div>
  </div>
</div>

Reference Callout

<div class="paper-ref">
  <div class="paper-title">"Paper Title"</div>
  <div class="paper-authors">Authors &middot; <a href="#">link</a></div>
</div>

Two-Column Layout

<div class="two-col">
  <div class="col">Left content</div>
  <div class="col">Right content</div>
</div>

Step Badge (section label)

<div class="slide-header">
  <span class="step-badge">Step 1</span>
  <h2 style="margin:0;">Section Title</h2>
</div>

Big Number Diagram

<div class="diagram-row">
  <div class="diagram-box primary"><span class="big-num">~100K</span>items in</div>
  <div class="diagram-arrow">→</div>
  <div class="diagram-box highlight"><span class="big-num">50K</span>items out</div>
</div>

PDF Export

Install Playwright and a color emoji font, then export using ?print-pdf:

pip install playwright && python3 -m playwright install chromium
sudo apt-get install -y fonts-noto-color-emoji  # for emoji rendering

import asyncio
from playwright.async_api import async_playwright

async def export_pdf():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.goto('http://localhost:12000/?print-pdf', wait_until='networkidle')
        await page.wait_for_timeout(3000)
        await page.pdf(
            path='presentation.pdf',
            width='1280px',
            height='720px',
            print_background=True,
            margin={'top': '0', 'right': '0', 'bottom': '0', 'left': '0'},
        )
        await browser.close()

asyncio.run(export_pdf())

This produces one page per slide with backgrounds and emojis intact.

Downloadable Zip

Bundle the presentation for sharing:

import zipfile, os
with zipfile.ZipFile('presentation.zip', 'w', zipfile.ZIP_DEFLATED) as zf:
    zf.write('index.html')
    zf.write('presentation.pdf')
    for f in os.listdir('assets'):
        zf.write(os.path.join('assets', f))

Design Guidelines

Minimal palette: Stay within the 4 core colors (dark, brown, amber, beige) plus gray and light neutrals. Do not add new accent colors.
Left-aligned text: Body content is left-aligned; only end slides and diagram elements are centered.
Consistent slide structure: Every content slide gets data-background-color="#F9F0D9" and class="content-slide".
Footer on every content slide: Add the logo footer to all slides except title and end.
No transitions: Use transition: 'none' for a clean, professional feel.
Font: Inter only — loaded from Google Fonts CDN.

openhands-slides

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository

OpenHands Slides

Quick Start

Branding & Palette

Full HTML Template

Component Reference

Pipeline (numbered horizontal steps)

Flowchart (colored boxes with arrows)

Criteria Cards (2×2 grid with icons)

Metric Cards (validation results)

Outcome Cards (3-column)

Reference Callout

Two-Column Layout

Step Badge (section label)

Big Number Diagram

PDF Export

Downloadable Zip

Design Guidelines

OpenHands Slides

Quick Start

Branding & Palette

Full HTML Template

Component Reference

Pipeline (numbered horizontal steps)

Flowchart (colored boxes with arrows)

Criteria Cards (2×2 grid with icons)

Metric Cards (validation results)

Outcome Cards (3-column)

Reference Callout

Two-Column Layout

Step Badge (section label)

Big Number Diagram

PDF Export

Downloadable Zip

Design Guidelines