メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/neubig/workflow --skill openhands-slidesコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Facilitate collaborative, human-in-the-loop Linear cycle or sprint planning. Use when the user asks to plan a cycle or sprint, choose cycle scope, set outcome themes, review capacity or carryover, sequence release work into a cycle, or work through a planning ticket surfaced by daily-workflow.
Human-in-the-loop daily workflow ("daily workflow", "my workflow", or "work queue") for checking review requests, aligning GitHub PRs and issues with Linear tickets, and triaging recent Slack requests before remediating the current user's eligible PRs.
Run evaluations using the OpenHands/software-agent-sdk CI system. Supports SWE-bench, GAIA, Terminal-Bench, and other benchmarks via GitHub Actions.
SOC 職業分類に基づく
SKILL.md を表示中
| 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"] |
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.
index.html using the template belowpython3 -m http.server 12000Use 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:
height: 44pxheight: 22px; opacity: 0.35height: 52pxIf no logo file is available, omit the <img> tags rather than using a placeholder.
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
<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>
<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
<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>
<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>
<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>
<div class="paper-ref">
<div class="paper-title">"Paper Title"</div>
<div class="paper-authors">Authors · <a href="#">link</a></div>
</div>
<div class="two-col">
<div class="col">Left content</div>
<div class="col">Right content</div>
</div>
<div class="slide-header">
<span class="step-badge">Step 1</span>
<h2 style="margin:0;">Section Title</h2>
</div>
<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>
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.
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))
data-background-color="#F9F0D9" and class="content-slide".transition: 'none' for a clean, professional feel.