Skill 詳細

make-revealjs-presentation

Creates and updates RevealJS slide decks.

一致度直接一致プレゼンテーション向けにレビュー済み

出典pamelafox/presentation-skills外部ソース

報告インストール数94人気度の参考値

使用前に確認

自動レビューは関連性のみを確認し、安全性や推奨を保証しません。使用前に出典の説明を読んでください。

skills.sh で見る（外部ページ）GitHub で SKILL.md を読む（外部ページ）

保存された出典プレビュー

SKILL.md

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

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

GitHub で全文を読む