メニュー
Convert YouTube videos or local video files into beautiful reveal.js HTML slide decks. Use when the user wants to create a presentation from a video, lecture, tutorial, or talk.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | slidewise |
| description | Convert YouTube videos or local video files into beautiful reveal.js HTML slide decks. Use when the user wants to create a presentation from a video, lecture, tutorial, or talk. |
| version | 0.1.0 |
Create beautiful reveal.js slide decks from any video. The Slidewise API extracts transcripts, keyframes, and segments from videos, then you generate a self-contained HTML presentation that the user can open in any browser.
The user needs a Slidewise API key. Check for SLIDEWISE_API_KEY in the environment, or ask the user to provide one.
Ask the user for the video URL or file path. Confirm the target before calling the API.
curl -s -X POST https://api.slidewise.dev/api/v1/extract \
-H "X-API-Key: $SLIDEWISE_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"url": "VIDEO_URL_HERE",
"options": {
"extract_keyframes": true,
"max_slides": 25,
"language": "en"
}
}'
For local development: replace the host with http://localhost:8000.
The API returns JSON with three key sections:
video — title, duration, channel, chapterssegments[] — per-segment transcript, content type, keyframe images (base64), speaker notesslide_outline[] — suggested slide structure with types, titles, bullets, and codeUse the template below and the slide_outline to build the HTML file. Write it to the user's working directory.
Tell the user to open the HTML file in a browser. Then refine based on their feedback.
Use this as the skeleton for every slide deck:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TITLE_HERE</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/night.css" id="theme">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/monokai.css">
<style>
.reveal h1 { font-size: 2.2em; }
.reveal h2 { font-size: 1.6em; }
.reveal ul { text-align: left; }
.reveal li { margin-bottom: 0.4em; line-height: 1.4; }
.reveal pre { width: 95%; font-size: 0.65em; }
.reveal img { max-height: 55vh; border-radius: 8px; }
.reveal .subtitle { font-size: 0.7em; color: #aaa; margin-top: 0.3em; }
.reveal .timestamp { font-size: 0.5em; color: #666; }
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- SLIDES GO HERE -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/highlight.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/notes/notes.js"></script>
<script>
Reveal.initialize({
hash: true,
plugins: [RevealHighlight, RevealNotes],
transition: 'slide',
});
</script>
</body>
</html>
<section>
<h1>{title}</h1>
<p class="subtitle">{subtitle}</p>
<p class="timestamp">{upload_date}</p>
<aside class="notes">{speaker_notes}</aside>
</section>
<section>
<h2>{title}</h2>
<ul>
<li>{bullet_1}</li>
<li>{bullet_2}</li>
<li>{bullet_3}</li>
</ul>
<aside class="notes">{speaker_notes}</aside>
</section>
<section>
<h2>{title}</h2>
<pre><code class="{language}" data-trim data-noescape>
{code}
</code></pre>
<aside class="notes">{speaker_notes}</aside>
</section>
<section>
<h2>{title}</h2>
<img src="{keyframe_base64_data_uri}" alt="{title}">
<aside class="notes">{speaker_notes}</aside>
</section>
<section>
<h2>Key Takeaways</h2>
<ol>
<li>{takeaway_1}</li>
<li>{takeaway_2}</li>
<li>{takeaway_3}</li>
</ol>
</section>
<section data-background-color="#1a1a2e">
<h2>{section_title}</h2>
</section>
slide_outline[], pick the matching template by typeslide_outline[].title, bullets from slide_outline[].bulletsspeaker_notes field from the matching segments[] entry (matched via source_segment)segments[source_segment].keyframe.image_base64 as the srcslide_outline[].code if present, otherwise extract from transcript contextslides.htmlThe user can request any reveal.js theme. Change the theme CSS URL:
| Theme | URL path |
|---|---|
| Night (default) | theme/night.css |
| Moon | theme/moon.css |
| Dracula | theme/dracula.css |
| Black | theme/black.css |
| White | theme/white.css |
| League | theme/league.css |
| Solarized | theme/solarized.css |
| Sky | theme/sky.css |
Available: slide, fade, convex, concave, zoom, none
Change in the Reveal.initialize() config.
Common user requests and how to handle them:
| Request | Action |
|---|---|
| "Make slide 3 more concise" | Rewrite the bullets to be shorter, keep the speaker notes full |
| "Add more code examples" | Check segments[].code_blocks for adjacent segments, add code slides |
| "Change the theme" | Swap the theme CSS URL in the <head> |
| "Split slide 5 into two" | Create two <section> elements, divide the content |
| "Remove slides 8-10" | Delete those <section> elements |
| "Make the text bigger" | Adjust font-size in the <style> block |
| "Add a slide between 3 and 4" | Insert a new <section>, use transcript from that time range |
| "Reorder slides" | Move <section> elements within the HTML |
| "Add slide numbers" | Add slideNumber: true to Reveal.initialize() config |
| "Export to PDF" | Add ?print-pdf to the URL, then print to PDF from the browser |
Headers: X-API-Key: <your_key>, Content-Type: application/json
Request body:
{
"url": "https://www.youtube.com/watch?v=...",
"options": {
"extract_keyframes": true,
"max_slides": 30,
"language": "en",
"time_window_seconds": 120
}
}
Response shape:
{
"status": "success",
"job_id": "a1b2c3d4e5f6",
"video": {
"title": "...",
"duration": 1234.0,
"channel": "...",
"url": "...",
"thumbnail_url": "...",
"upload_date": "20260101",
"chapters": [{"title": "...", "start_time": 0.0, "end_time": 45.0}]
},
"segments": [
{
"index": 0,
"title": "Introduction",
"start_time": 0.0,
"end_time": 45.0,
"transcript": "Welcome to...",
"content_type": "intro",
"suggested_slide_type": "title",
"keyframe": {"timestamp": 22.5, "image_base64": "data:image/jpeg;base64,...", "frame_type": "webcam"},
"code_blocks": [],
"speaker_notes": "Welcome to..."
}
],
"slide_outline": [
{
"slide_number": 1,
"type": "title",
"title": "Video Title",
"subtitle": "by Channel Name",
"source_segment": 0,
"has_image": true
},
{
"slide_number": 2,
"type": "content",
"title": "Getting Started",
"bullets": ["Point one", "Point two", "Point three"],
"source_segment": 1,
"has_image": false
}
],
"processing_time_seconds": 8.5
}