slides-revealjs
Use when creating or updating presentation decks with reveal.js, including setup, slide authoring, plugins, animation, navigation, and export.
Informações da origem
- Repositório
- jeasonstudio/smallpower
- Última atividade na origem
- 3 de março de 2026 às 03:19
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 0
- Forks
- 0
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Explorador de arquivos
46 arquivosExibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- name
- slides-revealjs
- description
- Use when creating or updating presentation decks with reveal.js, including setup, slide authoring, plugins, animation, navigation, and export.
# Slides Skill for reveal.js
## Overview
This skill guides AI to create and update reveal.js slides quickly and reliably. Prefer documented reveal.js capabilities over guessed APIs, config keys, or plugin behavior.
## When to Use
- Creating a reveal.js presentation from scratch.
- Migrating existing content into reveal.js slides (HTML or Markdown).
- Enabling advanced behaviors like Fragments, Auto-Animate, Speaker View, Math, Code Highlight, PDF export, or Scroll View.
- Integrating reveal.js into npm/ESM or React projects.
## Core Workflow
1. Analyze the content first and state a content-informed design approach before writing code (topic, tone, audience, branding, and palette rationale).
2. Choose the integration mode: Static HTML (fastest) or npm/ESM (engineering).
3. If converting from an existing doc, inventory all source sections/items first and map each item to at least one slide.
4. Build the minimal deck structure: `.reveal > .slides > section`.
5. Register only required plugins (Markdown, Highlight, Notes, Math, Search, Zoom, etc.).
6. Author content and interactions: horizontal/vertical slides, fragments, backgrounds, transitions, media.
7. Configure runtime behavior: navigation, keyboard, `hash`, `slideNumber`, `autoSlide`, `view: 'scroll'`.
8. Validate and ship: local preview, Speaker View, print/PDF export, and optional API control code.
## Implementation Templates
### 1) Static HTML (UMD)
```html
<html>
<head>ex
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/solarized.css" />
<link rel="stylesheet" href="plugin/highlight/zenburn.css" />
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>
<section>Vertical 1</section>
<section>Vertical 2</section>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/notes/notes.js"></script>
<script>
Reveal.initialize({
hash: true,
slideNumber: 'c/t',
plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
});
</script>
</body>
</html>
```
### 2) npm/ESM
```js
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
import Highlight from 'reveal.js/plugin/highlight/highlight.esm.js';
import Notes from 'reveal.js/plugin/notes/notes.esm.js';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/white.css';
const deck = new Reveal({
hash: true,
slideNumber: 'c/t',
plugins: [Markdown, Highlight, Notes],
});
await deck.initialize();
```
### 3) Markdown Slide Block
```html
<section data-markdown>
<textarea data-template>
## Slide 1
---
## Slide 2
</textarea>
</section>
```
## Feature Playbook
- Markdown: Enable the Markdown plugin; external markdown requires a local web server.
- Code: Enable Highlight and use `data-line-numbers` plus step highlights via `|`.
- Math: Use `RevealMath.KaTeX` by default (or MathJax when required).
- Speaker Notes: Enable Notes and press `S` for presenter view.
- Auto-Animate: Use adjacent `<section data-auto-animate>` and `data-id` for precise matching.
- Backgrounds: Use `data-background-*` (color/image/video/iframe).
- Architecture diagrams: Prefer Mermaid for system/process/flow slides to increase clarity and visual consistency.
- Scroll View: Use `view: 'scroll'` with optional `scrollSnap` and `scrollLayout`.
- PDF: Use `?print-pdf` then browser print to PDF.
## Reveal.js Tips
The items below should be preferred in this skill.
### Design Principles (CRITICAL)
Before creating any presentation, analyze the content and choose design elements intentionally:
1. Consider the subject matter: what is this presentation about, and what tone/industry/mood does it suggest?
2. Check for branding: if the user mentions a company or organization, align with likely brand identity and colors.
3. Match palette to content: choose colors that reflect the topic, audience, and communication goal.
4. State your approach first: explain your design choices before writing slide code.
Required behavior:
- State the content-informed design approach before writing code.
- Use web-safe fonts (`Arial`, `Helvetica`, `Georgia`, `Verdana`, etc.) or Google Fonts via `@import`.
- Create clear visual hierarchy through size, weight, and color.
- Ensure readability with strong contrast, appropriately sized text, and clean alignment.
- Keep visual consistency across slides: repeated spacing, component patterns, and color language.
- Always use `pt` units for font sizes in slide CSS/inline styles. Never use `em`, `rem`, or `px` for font-size values.
### Color Palette Selection
Choose colors creatively based on the actual content:
- Think beyond defaults: avoid autopilot palettes.
- Consider multiple angles: topic, industry, mood, energy level, audience, and mentioned brand identity.
- Be adventurous when useful: healthcare is not required to be green; finance is not required to be navy.
- Build a 3-5 color system: dominant colors, supporting tones, and accent colors.
- Always verify text/background contrast for readability.
Palette references (adapt freely or create your own):
1. Classic Blue: deep navy `#1C2833`, slate gray `#2E4053`, silver `#AAB7B8`, off-white `#F4F6F6`
2. Teal and Coral: teal `#5EA8A7`, deep teal `#277884`, coral `#FE4447`, white `#FFFFFF`
3. Bold Red: red `#C0392B`, bright red `#E74C3C`, orange `#F39C12`, yellow `#F1C40F`, green `#2ECC71`
4. Warm Blush: mauve `#A49393`, blush `#EED6D3`, rose `#E8B4B8`, cream `#FAF7F2`
5. Burgundy Luxury: burgundy `#5D1D2E`, crimson `#951233`, rust `#C15937`, gold `#997929`
6. Deep Purple and Emerald: purple `#B165FB`, dark blue `#181B24`, emerald `#40695B`, white `#FFFFFF`
7. Cream and Forest Green: cream `#FFE1C7`, forest green `#40695B`, white `#FCFCFC`
8. Pink and Purple: pink `#F8275B`, coral `#FF574A`, rose `#FF737D`, purple `#3D2F68`
9. Lime and Plum: lime `#C5DE82`, plum `#7C3A5F`, coral `#FD8C6E`, blue-gray `#98ACB5`
10. Black and Gold: gold `#BF9A4A`, black `#000000`, cream `#F4F6F6`
11. Sage and Terracotta: sage `#87A96B`, terracotta `#E07A5F`, cream `#F4F1DE`, charcoal `#2C2C2C`
12. Charcoal and Red: charcoal `#292929`, red `#E33737`, light gray `#CCCBCB`
13. Vibrant Orange: orange `#F96D00`, light gray `#F2F2F2`, charcoal `#222831`
14. Forest Green: black `#191A19`, green `#4E9F3D`, dark green `#1E5128`, white `#FFFFFF`
15. Retro Rainbow: purple `#722880`, pink `#D72D51`, orange `#EB5C18`, amber `#F08800`, gold `#DEB600`
16. Vintage Earthy: mustard `#E3B448`, sage `#CBD18F`, forest green `#3A6B35`, cream `#F4F1DE`
17. Coastal Rose: old rose `#AD7670`, beaver `#B49886`, eggshell `#F3ECDC`, ash gray `#BFD5BE`
18. Orange and Turquoise: light orange `#FC993E`, grayish turquoise `#667C6F`, white `#FCFCFC`
### Slide Content Principles
Even when slides share similar content types, avoid repeating the same visual pattern.
- Vary layout patterns across neighboring slides (columns, stacked blocks, cards, split hero, quote-led).
- Mix container styles (plain text, styled panels, blockquotes, icon-led callouts).
- Build hierarchy actively (`<strong>`, color emphasis, type scale, spacing rhythm).
- Break up long list sequences with visual elements and structural transitions.
- Do not repeat identical layout structures on consecutive slides.
- Keep slides scannable: short bullets, one main idea per slide where possible.
- Use icons (for example Font Awesome) when they improve clarity and pacing.
- When a slide has less content, increase scale and composition impact instead of leaving sparse tiny text.
### 30-Second Design Review Checklist
Run this before considering a deck "done":
- Deck defaults to a light tone unless explicitly requested otherwise (prefer official reveal `solarized` theme).
- Aesthetic direction is explicit and consistent (not mixed styles).
- Typography has clear hierarchy (display vs body) and readable line lengths.
- Palette has one dominant tone and one intentional accent color.
- At least one memorable visual motif exists (layout move, background treatment, or motion sequence).
- Motion supports narrative pacing (not scattered decorative effects).
- Architecture/process slides use Mermaid when applicable instead of ad-hoc ASCII bullets.
- Slides stay readable on both desktop and mobile widths.
### 1) Title slide with custom background
Use an explicit first `<section>` as a title slide and style it with reveal data attributes.
```html
<section
id="title-slide"
data-background-image="./img/background.jpg"
data-background-size="cover"
data-background-opacity="0.9"
>
<h1>My Slide Show</h1>
</section>
```
### 2) Move/resize a logo after leaving title slide
Use CSS classes plus the `slidechanged` event.
Add a persistent logo element in your HTML, e.g. `<img class="slide-logo" src="./images/my-logo.svg" alt="Logo" />`.
```css
.reveal .slide-logo {
position: fixed;
display: block;
max-width: none !important;
}
.reveal .slide-logo-bottom-right {
right: 12px !important;
bottom: 0 !important;
left: auto !important;
max-height: 2.2rem !important;
}
.slide-logo-max-size {
top: 5px;
left: 12px;
right: auto !important;
bottom: auto !important;
height: 100px !important;
max-height: none !important;
}
```
```js
function syncLogoForSlide(currentSlide) {
const logos = document.querySelectorAll('.slide-logo');
const onTitle = currentSlide && currentSlide.id === 'title-slide';
logos.forEach((el) => {
el.classList.toggle('slide-logo-max-size', onTitle);
el.classList.toggle('slide-logo-bottom-right', !onTitle);
});
}
Reveal.on('ready', (event) => syncLogoForSlide(event.currentSlide));
Reveal.on('slidechanged', (event) => syncLogoForSlide(event.currentSlide));
```
### 3) Background image sizing (`cover` vs `contain`)
`cover` fills the slide and may crop. `contain` preserves the entire image.
```html
<section data-background-image="images/2024.jpg" data-background-size="cover"></section>
<section data-background-image="images/2024.jpg" data-background-size="contain"></section>
```
### 4) Slide structure control (replacement for Quarto `slide-level`)
Pure reveal.js does not use Pandoc `slide-level`. Control structure explicitly:
- HTML mode: one `<section>` per slide, nested `<section>` for vertical slides.
- Markdown mode: use configured separators (`---`, `--`) to split slides.
### 5) Emoji support
Quarto's `from: markdown+emoji` is not a reveal.js feature. In reveal.js:
- Use native Unicode emoji directly.
- Or render emoji through your markdown/HTML pipeline before reveal initializes.
### 6) Fit large text and stretch media
`r-fit-text` and `r-stretch` are reveal classes and work directly.
```html
<section>
<div class="r-fit-text">Big Text</div>
</section>
<section>
<p>Here is an image:</p>
<img class="r-stretch" src="image.webp" alt="Demo image" />
<p>Some text after the image.</p>
</section>
```
### 7) Reveal content on key press with fragments
```html
<section>
<h2>It's a candy dog</h2>
<p style="font-size: 44pt; color: #75aadb;">Would you like to see a candy dog?</p>
<img class="fragment fade-up" src="./images/dog.webp" alt="Candy dog" />
</section>
```
### 8) Two-column and 4-quadrant layouts
Quarto `::: columns` is not native reveal syntax. Use HTML/CSS layout wrappers.
```html
<section>
<div class="cols">
<div class="col col-70"><img src="./images/image_1.webp" alt="Left" /></div>
<div class="col col-30">
<img src="./images/image_2.webp" alt="Right top" />
<img src="./images/image_3.webp" alt="Right bottom" />
</div>
</div>
</section>
```
```css
.reveal .cols {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.reveal .col-70 { flex: 0 0 70%; }
.reveal .col-30 { flex: 0 0 30%; }
```
For 4 quadrants, use a 2x2 CSS grid and reveal each cell with fragment classes (`fade-in-then-semi-out` or similar).
### 9) Custom inline short-code transform (`==text==` -> `<mark>text</mark>`)
```js
function convertMarkedTextInSlide(slide) {
if (!slide) return;
slide.innerHTML = slide.innerHTML.replace(/==([^=]+)==/g, '<mark>$1</mark>');
}
Reveal.on('ready', (event) => convertMarkedTextInSlide(event.currentSlide));
Reveal.on('slidechanged', (event) => convertMarkedTextInSlide(event.currentSlide));
```
### 10) Inline style and custom CSS
In reveal markdown, use inline HTML for precise text styling:
Ver no GitHubEste SKILL.md e muito grande, entao o SkillsMP mostra aqui apenas a primeira secao. Ver no GitHub
