一键在 Manus 中运行任何 Skill

make-revealjs-presentation

星标92

分支19

更新时间2026年5月10日 05:59

Create or update a RevealJS HTML presentation using the repository's bundled slide template. USE FOR: create RevealJS talks, make HTML slide decks, build presentation slides, start a new conference talk deck, convert a talk outline into RevealJS slides.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

pamelafox

pamelafox/presentation-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Make a RevealJS presentation

Use this skill when the user wants a RevealJS-based slide deck or wants to start a new talk from the repository's house template.

Default approach

Start from the bundled template asset instead of rebuilding the RevealJS shell from scratch:

Template asset: ./assets/index.html
Copy that file to the requested output path, then edit the copied file.
Keep the RevealJS CDN includes and Reveal.initialize(...) block unless the user explicitly asks to change them.

What to customize first

After copying the template, replace these placeholders before expanding the deck:

Talk Title
Conference Name · Month Year
Your Name
Role · Company · website.example
Example links like filename.html and example.com/...

Then rewrite or remove the example slides so the deck matches the user's topic.

Template conventions

The template is intentionally simple and close to stock RevealJS.
Section divider slides use class="heading-only".
Code slides are just normal sections with a <pre><code> block.
If a code badge or copy-button plugin is in use and should be suppressed for one slide, add class="no-code-badge" to that section.

Customization tips

Body font

Change the body font in the .reveal rule near the top of the template:

.reveal {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Examples:

Minimal/system default: keep the existing stack
Sans-serif web font: font-family: 'Work Sans', sans-serif;
Serif deck: font-family: 'Source Serif 4', serif;

If using a web font, also add the corresponding <link rel="stylesheet"> in <head>.

Heading font

Change headings separately in:

.reveal h1,
.reveal h2,
.reveal h3 {
  font-family: inherit;
}

Examples:

Match body text: keep inherit
Distinct headings: font-family: 'Roboto', sans-serif;
Editorial style: font-family: 'Fraunces', serif;

Text sizing

Adjust the default body sizing here:

.reveal p,
.reveal li,
.reveal td,
.reveal th {
  font-size: 1em;
}

Increase or decrease that font-size when the user wants a generally larger or smaller deck.

Code block styling

Global code block styling lives in:

.reveal pre { ... }
.reveal pre code { ... }

Adjust those rules for larger code, different padding, or lighter/heavier borders.

Divider slides

The divider slide look is controlled by section.heading-only and the underline rule:

.reveal section.heading-only h1::after,
.reveal section.heading-only h2::after,
.reveal section.heading-only h3::after { ... }

Remove that block if the user wants divider slides to look more like plain RevealJS headings.

Color contrast

If the user customizes colors, keep text/background combinations at accessible contrast.

Prefer dark text on a light background or light text on a dark background.
Be especially careful with body text, slide numbers, links, and code blocks.
Recheck contrast after changing theme colors, background fills, or heading styles.

Accessibility

Preserve accessibility basics when creating or customizing decks.

Keep text/background contrast accessible, especially after theme changes.
Make sure links have discernible text.
Make sure images have alt text if they convey meaning.
Treat plugin-generated UI separately from slide content when reviewing issues. RevealMenu currently has a known accessibility issue: its generated menu trigger may lack a discernible accessible name. If the user keeps the plugin, note that this can remain as an axe violation even when the slide content itself is fine.

Example axe-core audit

If the user asks for an accessibility review in VS Code, open the deck in the integrated browser and run axe-core on the rendered page.

Example Playwright snippet:

await page.addScriptTag({
  url: 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.2/axe.min.js'
});

const results = await page.evaluate(async () => {
  return await window.axe.run(document, {
    runOnly: {
      type: 'tag',
      values: ['wcag2a', 'wcag2aa']
    }
  });
});

When reporting results:

Separate actual violations from incomplete checks.
Call out the exact HTML or selector for each real issue.
Distinguish between deck-author issues and plugin-generated issues.
If contrast checks are inconclusive because Reveal overlays or transforms confuse axe, say that clearly instead of reporting them as confirmed failures.

Editing guidance

Prefer plain sections, headings, lists, tables, images, and code blocks over custom layout systems.
Do not add extra decorative CSS unless the user asks for a stronger visual style.
Keep the deck black-on-white by default unless the user wants a themed presentation.

Validation

After creating or editing the deck:

Validate the HTML file for diagnostics.
Open it in the integrated browser.
If the user asks for accessibility review, run an axe audit on the rendered page and report actual violations separately from inconclusive checks.

同仓库更多 Skills

同仓库

thumbnail-of-pptx

pamelafox/presentation-skills

Capture a thumbnail image of a slide from a OneDrive/Office presentation link. Opens the PowerPoint web viewer in a headless browser and screenshots the slide canvas, producing a clean 16:9 image with no viewer chrome. Works even when the PPTX is not downloadable (e.g. personal OneDrive shares), since it screenshots the rendered slide rather than converting the file. USE FOR: make a thumbnail from a PPTX, screenshot a slide, title-slide image, OneDrive slide thumbnail, talk thumbnail from slides.

2026-07-0892

youtube-description

pamelafox/presentation-skills

Generate a YouTube description with a brief intro, relevant links, and clickable timestamps for each question.

2026-05-1492

discussion-commenter

pamelafox/presentation-skills

Post Q&A entries from markdown writeups as comments to a GitHub Discussion. Use when the user wants to post writeup content to a discussion thread.

2026-04-2992

youtube-live-chat

pamelafox/presentation-skills

Download live chat transcripts from YouTube videos. Use when the user asks for live chat, chat messages, or chat replay from a YouTube video and provides a YouTube URL (youtube.com/watch?v=, youtu.be/, or similar). Works with live streams and past streams that have chat replay enabled.

2026-04-2992

capture-video-frames

pamelafox/presentation-skills

Capture frames from a YouTube video at a regular interval, produce a manifest mapping filenames to timestamps, and describe each frame with an LLM. USE FOR: extract video frames, capture screenshots from YouTube, describe video frames, video frame analysis, frame-by-frame summary.

2026-04-2392

convert-slides-to-images

pamelafox/presentation-skills

Convert a PDF file into individual PNG images, one per page/slide. Uses poppler's pdftoppm command. Output files are named slide_1.png, slide_2.png, etc. USE FOR: convert PDF to images, split slides into PNGs, extract slide images from PDF.

2026-04-2392

name	make-revealjs-presentation
description	Create or update a RevealJS HTML presentation using the repository's bundled slide template. USE FOR: create RevealJS talks, make HTML slide decks, build presentation slides, start a new conference talk deck, convert a talk outline into RevealJS slides.
argument-hint	<output_html_path>

Make a RevealJS presentation

Use this skill when the user wants a RevealJS-based slide deck or wants to start a new talk from the repository's house template.

Default approach

Start from the bundled template asset instead of rebuilding the RevealJS shell from scratch:

Template asset: ./assets/index.html
Copy that file to the requested output path, then edit the copied file.
Keep the RevealJS CDN includes and Reveal.initialize(...) block unless the user explicitly asks to change them.

What to customize first

After copying the template, replace these placeholders before expanding the deck:

Talk Title
Conference Name · Month Year
Your Name
Role · Company · website.example
Example links like filename.html and example.com/...

Then rewrite or remove the example slides so the deck matches the user's topic.

Template conventions

The template is intentionally simple and close to stock RevealJS.
Section divider slides use class="heading-only".
Code slides are just normal sections with a <pre><code> block.
If a code badge or copy-button plugin is in use and should be suppressed for one slide, add class="no-code-badge" to that section.

Customization tips

Body font

Change the body font in the .reveal rule near the top of the template:

.reveal {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Examples:

Minimal/system default: keep the existing stack
Sans-serif web font: font-family: 'Work Sans', sans-serif;
Serif deck: font-family: 'Source Serif 4', serif;

If using a web font, also add the corresponding <link rel="stylesheet"> in <head>.

Heading font

Change headings separately in:

.reveal h1,
.reveal h2,
.reveal h3 {
  font-family: inherit;
}

Examples:

Match body text: keep inherit
Distinct headings: font-family: 'Roboto', sans-serif;
Editorial style: font-family: 'Fraunces', serif;

Text sizing

Adjust the default body sizing here:

.reveal p,
.reveal li,
.reveal td,
.reveal th {
  font-size: 1em;
}

Increase or decrease that font-size when the user wants a generally larger or smaller deck.

Code block styling

Global code block styling lives in:

.reveal pre { ... }
.reveal pre code { ... }

Adjust those rules for larger code, different padding, or lighter/heavier borders.

Divider slides

The divider slide look is controlled by section.heading-only and the underline rule:

.reveal section.heading-only h1::after,
.reveal section.heading-only h2::after,
.reveal section.heading-only h3::after { ... }

Remove that block if the user wants divider slides to look more like plain RevealJS headings.

Color contrast

If the user customizes colors, keep text/background combinations at accessible contrast.

Prefer dark text on a light background or light text on a dark background.
Be especially careful with body text, slide numbers, links, and code blocks.
Recheck contrast after changing theme colors, background fills, or heading styles.

Accessibility

Preserve accessibility basics when creating or customizing decks.

Keep text/background contrast accessible, especially after theme changes.
Make sure links have discernible text.
Make sure images have alt text if they convey meaning.
Treat plugin-generated UI separately from slide content when reviewing issues. RevealMenu currently has a known accessibility issue: its generated menu trigger may lack a discernible accessible name. If the user keeps the plugin, note that this can remain as an axe violation even when the slide content itself is fine.

Example axe-core audit

If the user asks for an accessibility review in VS Code, open the deck in the integrated browser and run axe-core on the rendered page.

Example Playwright snippet:

await page.addScriptTag({
  url: 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.2/axe.min.js'
});

const results = await page.evaluate(async () => {
  return await window.axe.run(document, {
    runOnly: {
      type: 'tag',
      values: ['wcag2a', 'wcag2aa']
    }
  });
});

When reporting results:

Separate actual violations from incomplete checks.
Call out the exact HTML or selector for each real issue.
Distinguish between deck-author issues and plugin-generated issues.
If contrast checks are inconclusive because Reveal overlays or transforms confuse axe, say that clearly instead of reporting them as confirmed failures.

Editing guidance

Prefer plain sections, headings, lists, tables, images, and code blocks over custom layout systems.
Do not add extra decorative CSS unless the user asks for a stronger visual style.
Keep the deck black-on-white by default unless the user wants a themed presentation.

Validation

After creating or editing the deck:

Validate the HTML file for diagnostics.
Open it in the integrated browser.
If the user asks for accessibility review, run an axe audit on the rendered page and report actual violations separately from inconclusive checks.