revealjs

Name: revealjs
Author: ryanbbrown

624installs34forks

How to install revealjs?

ryanbbrown/revealjs-skill/revealjs

$npx -y skills add ryanbbrown/revealjs-skill --skill revealjs

Installs into the current project.

Summary

Create polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step

Files · 1

View on GitHub

SKILL.md

1	# Reveal.js Presentations
2
3	Create HTML presentations using reveal.js. No build step required - just open the HTML in a browser.
4
5	## What You Create
6
7	A reveal.js presentation consists of:
8
9	1. HTML file - Contains slides and loads reveal.js from CDN
10	2. CSS file - Custom styles for layouts, colors, typography, and components
11
12	## Design Principles
13
14	CRITICAL: Before creating any presentation, analyze the content and choose appropriate design elements:
15
16	1. Consider the subject matter: What is this presentation about? What tone, industry, or mood does it suggest?
17	2. Check for branding: If the user mentions a company/organization, consider their brand colors and identity
18	3. Match palette to content: Select colors that reflect the subject
19	4. State your approach: Explain your design choices before writing code
20
21	Requirements:
22	- ✅ State your content-informed design approach BEFORE writing code
23	- ✅ Use web-safe fonts (Arial, Helvetica, Georgia, Verdana, etc.) or Google Fonts via `@import` in CSS
24	- ✅ Create clear visual hierarchy through size, weight, and color
25	- ✅ Ensure readability: strong contrast, appropriately sized text, clean alignment
26	- ✅ Be consistent: repeat patterns, spacing, and visual language across slides
27	- ✅ Always use `pt` (points) for font sizes - slides are fixed-size, so `pt` is predictable and familiar (like PowerPoint/Keynote). Never use `em`, `rem`, or `px` for font sizes.
28
29	### Color Palette Selection
30
31	Choosing colors creatively:
32	- Think beyond defaults: What colors genuinely match this specific topic? Avoid autopilot choices.
33	- Consider multiple angles: Topic, industry, mood, energy level, target audience, brand identity (if mentioned)
34	- Be adventurous: Try unexpected combinations - a healthcare presentation doesn't have to be green, finance doesn't have to be navy
35	- Build your palette: Pick 3-5 colors that work together (dominant colors + supporting tones + accent)
36	- Ensure contrast: Text must be clearly readable on backgrounds
37
38	Example color palettes (use these to spark creativity - choose one, adapt it, or create your own):
39
40	1. Classic Blue: Deep navy (#1C2833), slate gray (#2E4053), silver (#AAB7B8), off-white (#F4F6F6)
41	2. Teal & Coral: Teal (#5EA8A7), deep teal (#277884), coral (#FE4447), white (#FFFFFF)
42	3. Bold Red: Red (#C0392B), bright red (#E74C3C), orange (#F39C12), yellow (#F1C40F), green (#2ECC71)
43	4. Warm Blush: Mauve (#A49393), blush (#EED6D3), rose (#E8B4B8), cream (#FAF7F2)
44	5. Burgundy Luxury: Burgundy (#5D1D2E), crimson (#951233), rust (#C15937), gold (#997929)
45	6. Deep Purple & Emerald: Purple (#B165FB), dark blue (#181B24), emerald (#40695B), white (#FFFFFF)
46	7. Cream & Forest Green: Cream (#FFE1C7), forest green (#40695B), white (#FCFCFC)
47	8. Pink & Purple: Pink (#F8275B), coral (#FF574A), rose (#FF737D), purple (#3D2F68)
48	9. Lime & Plum: Lime (#C5DE82), plum (#7C3A5F), coral (#FD8C6E), blue-gray (#98ACB5)
49	10. Black & Gold: Gold (#BF9A4A), black (#000000), cream (#F4F6F6)
50	11. Sage & Terracotta: Sage (#87A96B), terracotta (#E07A5F), cream (#F4F1DE), charcoal (#2C2C2C)
51	12. Charcoal & Red: Charcoal (#292929), red (#E33737), light gray (#CCCBCB)
52	13. Vibrant Orange: Orange (#F96D00), light gray (#F2F2F2), charcoal (#222831)
53	14. Forest Green: Black (#191A19), green (#4E9F3D), dark green (#1E5128), white (#FFFFFF)
54	15. Retro Rainbow: Purple (#722880), pink (#D72D51), orange (#EB5C18), amber (#F08800), gold (#DEB600)
55	16. Vintage Earthy: Mustard (#E3B448), sage (#CBD18F), forest green (#3A6B35), cream (#F4F1DE)
56	17. Coastal Rose: Old rose (#AD7670), beaver (#B49886), eggshell (#F3ECDC), ash gray (#BFD5BE)
57	18. Orange & Turquoise: Light orange (#FC993E), grayish turquoise (#667C6F), white (#FCFCFC)
58
59	### Slide Content Principles
60
61	Diverse presentation is key. Even when slides have similar content types, vary the visual presentation:
62
63	- Use different layouts across slides: columns on one, stacked containers on another, styled cards on a third
64	- Mix container styles: plain text, custom styled containers, blockquotes
65	- Use visual hierarchy: `<strong>` for key terms, different colors to distinguish categories
66	- Break up lists with other elements (quotes, styled containers, columns)
67	- Don't repeat the same layout pattern on consecutive slides
68
69	Keep it scannable:
70	- Short bullet points, not paragraphs
71	- One main idea per slide when possible
72	- Use icons (Font Awesome) to add visual interest
73
74	When a slide has less content, make it bigger - don't leave empty space with tiny text.
75
76	## Workflow
77
78	### Step 1: Plan the Structure
79
80	Based o

People who liked this also viewed

6 picks

Type

revealjs

624installs34forks

View on GitHub

How to install revealjs?

ryanbbrown/revealjs-skill/revealjs

$npx -y skills add ryanbbrown/revealjs-skill --skill revealjs

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Reveal.js Presentations
2
3	Create HTML presentations using reveal.js. No build step required - just open the HTML in a browser.
4
5	## What You Create
6
7	A reveal.js presentation consists of:
8
9	1. HTML file - Contains slides and loads reveal.js from CDN
10	2. CSS file - Custom styles for layouts, colors, typography, and components
11
12	## Design Principles
13
14	CRITICAL: Before creating any presentation, analyze the content and choose appropriate design elements:
15
16	1. Consider the subject matter: What is this presentation about? What tone, industry, or mood does it suggest?
17	2. Check for branding: If the user mentions a company/organization, consider their brand colors and identity
18	3. Match palette to content: Select colors that reflect the subject
19	4. State your approach: Explain your design choices before writing code
20
21	Requirements:
22	- ✅ State your content-informed design approach BEFORE writing code
23	- ✅ Use web-safe fonts (Arial, Helvetica, Georgia, Verdana, etc.) or Google Fonts via `@import` in CSS
24	- ✅ Create clear visual hierarchy through size, weight, and color
25	- ✅ Ensure readability: strong contrast, appropriately sized text, clean alignment
26	- ✅ Be consistent: repeat patterns, spacing, and visual language across slides
27	- ✅ Always use `pt` (points) for font sizes - slides are fixed-size, so `pt` is predictable and familiar (like PowerPoint/Keynote). Never use `em`, `rem`, or `px` for font sizes.
28
29	### Color Palette Selection
30
31	Choosing colors creatively:
32	- Think beyond defaults: What colors genuinely match this specific topic? Avoid autopilot choices.
33	- Consider multiple angles: Topic, industry, mood, energy level, target audience, brand identity (if mentioned)
34	- Be adventurous: Try unexpected combinations - a healthcare presentation doesn't have to be green, finance doesn't have to be navy
35	- Build your palette: Pick 3-5 colors that work together (dominant colors + supporting tones + accent)
36	- Ensure contrast: Text must be clearly readable on backgrounds
37
38	Example color palettes (use these to spark creativity - choose one, adapt it, or create your own):
39
40	1. Classic Blue: Deep navy (#1C2833), slate gray (#2E4053), silver (#AAB7B8), off-white (#F4F6F6)
41	2. Teal & Coral: Teal (#5EA8A7), deep teal (#277884), coral (#FE4447), white (#FFFFFF)
42	3. Bold Red: Red (#C0392B), bright red (#E74C3C), orange (#F39C12), yellow (#F1C40F), green (#2ECC71)
43	4. Warm Blush: Mauve (#A49393), blush (#EED6D3), rose (#E8B4B8), cream (#FAF7F2)
44	5. Burgundy Luxury: Burgundy (#5D1D2E), crimson (#951233), rust (#C15937), gold (#997929)
45	6. Deep Purple & Emerald: Purple (#B165FB), dark blue (#181B24), emerald (#40695B), white (#FFFFFF)
46	7. Cream & Forest Green: Cream (#FFE1C7), forest green (#40695B), white (#FCFCFC)
47	8. Pink & Purple: Pink (#F8275B), coral (#FF574A), rose (#FF737D), purple (#3D2F68)
48	9. Lime & Plum: Lime (#C5DE82), plum (#7C3A5F), coral (#FD8C6E), blue-gray (#98ACB5)
49	10. Black & Gold: Gold (#BF9A4A), black (#000000), cream (#F4F6F6)
50	11. Sage & Terracotta: Sage (#87A96B), terracotta (#E07A5F), cream (#F4F1DE), charcoal (#2C2C2C)
51	12. Charcoal & Red: Charcoal (#292929), red (#E33737), light gray (#CCCBCB)
52	13. Vibrant Orange: Orange (#F96D00), light gray (#F2F2F2), charcoal (#222831)
53	14. Forest Green: Black (#191A19), green (#4E9F3D), dark green (#1E5128), white (#FFFFFF)
54	15. Retro Rainbow: Purple (#722880), pink (#D72D51), orange (#EB5C18), amber (#F08800), gold (#DEB600)
55	16. Vintage Earthy: Mustard (#E3B448), sage (#CBD18F), forest green (#3A6B35), cream (#F4F1DE)
56	17. Coastal Rose: Old rose (#AD7670), beaver (#B49886), eggshell (#F3ECDC), ash gray (#BFD5BE)
57	18. Orange & Turquoise: Light orange (#FC993E), grayish turquoise (#667C6F), white (#FCFCFC)
58
59	### Slide Content Principles
60
61	Diverse presentation is key. Even when slides have similar content types, vary the visual presentation:
62
63	- Use different layouts across slides: columns on one, stacked containers on another, styled cards on a third
64	- Mix container styles: plain text, custom styled containers, blockquotes
65	- Use visual hierarchy: `<strong>` for key terms, different colors to distinguish categories
66	- Break up lists with other elements (quotes, styled containers, columns)
67	- Don't repeat the same layout pattern on consecutive slides
68
69	Keep it scannable:
70	- Short bullet points, not paragraphs
71	- One main idea per slide when possible
72	- Use icons (Font Awesome) to add visual interest
73
74	When a slide has less content, make it bigger - don't leave empty space with tiny text.
75
76	## Workflow
77
78	### Step 1: Plan the Structure
79
80	Based o

People who liked this also viewed

6 picks

Type