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.

Jump to install

Repository: neubig/workflow
Last source activity: July 10, 2026 at 10:10
Detected SKILL.md language: English
Stars: 4
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

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

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to 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

Source facts

Install options

Review the source files

More from this 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

More from this 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