Skill-Details

make-revealjs-presentation

Creates and updates RevealJS slide decks.

ÜbereinstimmungDirektGeprüft für präsentationen

Quellepamelafox/presentation-skillsExterne Quelle

Gemeldete Installationen94Nur Popularitätssignal

Vor Nutzung prüfen

Die automatische Prüfung bewertet Relevanz, nicht Sicherheit oder Empfehlung. Lies vor der Nutzung die Quellanweisungen.

Auf skills.sh ansehen (öffnet externe Seite)SKILL.md auf GitHub lesen (öffnet externe Seite)

Gespeicherte Quellvorschau

SKILL.md

Dieser Auszug wurde bei der Prüfung gespeichert. Die externe Quelle enthält die vollständige und aktuelle Version.

---
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:

```css
.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:

```css
.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:

```css
.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:

```css
.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:

```css
.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 w

Vollständige Quelle auf GitHub lesen

Kontext