| name | web-slides-generator |
| description | Generates visually stunning, animated, web-based presentation slides as a single HTML artifact โ NOT a .pptx file. Use this skill whenever the user asks for: slides, a presentation, a deck, a slideshow, a pitch, or any multi-slide visual content on ANY topic. Trigger even for casual requests like "make me slides on X", "create a presentation about Y", "give me a deck for Z". This skill is the exclusive handler for all presentation-generation requests. Do NOT use the pptx skill or any file-based approach โ the output is always a self-contained HTML artifact rendered in the browser with CSS animations, transitions, keyboard navigation, and topic-adaptive visual themes.
|
Web Presentation Slides Generator
Creates self-contained, single-file HTML presentations with cinematic
animations, topic-matched visual themes, and keyboard/click navigation.
The output is a browser artifact โ no PowerPoint, no PDF.
Step 1 โ Understand the Request
Extract from the user's message:
- Topic (required): What is the presentation about?
- Slide count (optional, default: 8โ12 slides)
- Audience (optional): Who will see this? (executive, students, clients, general)
- Tone (optional): formal / casual / inspirational / technical / storytelling
- Special content (optional): must-include sections, data, bullet lists
If critical info is missing, make intelligent assumptions and state them
briefly before generating.
Step 2 โ Pick the Visual Theme
Crucial Instruction: Do NOT rely on fixed, hardcoded themes or color
palettes for broad topic categories (e.g., do not default to dark sci-fi/neon
for all tech topics). Instead, you must dynamically choose the colors,
visual aesthetics, and fonts based on the specific contextual essence of
the requested topic or subject matter.
- Context-Aware Palettes: Identify any specific brand colors, implicit
subject colors, or vibes associated with the prompt. For example, if the
user asks for a presentation about "Claude AI", intelligently deduce that
Claude is associated with orange and white/cream, and build a stunning
palette around those colors rather than reverting to generic
"AI = neon green/blue".
- Feature Creative Freedom: You have full creative freedom to use
whatever visual effects, CSS geometry, gradients, textures, or animations
are required to make the presentation look stunning, unique, and highly
bespoke to the prompt. Do not limit yourself to listed palettes.
- Font & Typography Dynamics: Dynamically select Google Font pairings
that match the unique personality of the core subject, not just its broad
category.
โ ๏ธ NEVER produce two identical themes. Every generation must feature a
custom, intelligently generated design scheme that reflects the uniqueness
of the user's specific request. The aesthetic should feel premium, deeply
considered, and perfectly aligned with the subject matter.
Step 3 โ Plan the Slide Structure
A strong presentation has a clear narrative arc. Default structure (adapt freely):
- Title Slide โ Topic, subtitle, author/org (if known), date
- Agenda / Overview โ What will be covered
- Context / Problem โ Why does this matter?
- Main Section 1 โ Core idea or data point
- Main Section 2 โ Supporting evidence or elaboration
- Main Section 3 โ Key insight or case
- Visual Data / Stats โ Numbers, charts, comparisons (use CSS-drawn visuals if needed)
- Deep Dive โ Nuance, methodology, or example
- Challenges / Considerations โ Honest complexity
- Key Takeaways โ Distilled insights
- Call to Action / Next Steps โ What to do now
- Closing Slide โ Thank you, contact, or memorable quote
Adjust count and sections to fit the topic. Always open with impact and
close with resonance.
Step 4 โ Write the HTML Artifact
Produce a single self-contained HTML file with everything inline. No
external CDN dependencies (except Google Fonts). It must work offline after
the fonts load.
Required Architecture
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
CSS Design System
Define a CSS custom property palette at :root level. Every color, font,
spacing value must come from variables:
:root {
--bg-primary: ;
--bg-secondary: ;
--accent-1: ;
--accent-2: ;
--text-primary: ;
--text-muted: ;
--font-display: ;
--font-body: ;
--slide-padding: ;
--transition-speed: 0.7s;
}
Animation System
Implement slide transitions using CSS classes toggled by JavaScript:
.slide {
opacity: 0;
transform: translateY(40px);
transition: all var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
position: absolute;
width: 100%;
}
.slide.active {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.slide.exit-left {
transform: translateX(-60px) scale(0.97);
opacity: 0;
}
Per-element staggered entrance animations inside each slide:
.reveal { opacity: 0; transform: translateY(20px); }
.slide.active .reveal {
animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide.active .reveal:nth-child(1) { animation-delay: 0.1s; }
.slide.active .reveal:nth-child(2) { animation-delay: 0.2s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
Use at least 4 distinct animation types across slides: fade-up,
scale-in, slide-from-right, blur-in, rotate-in, etc. Vary transitions per
slide type (title = dramatic zoom, data slide = count-up, quote = typewriter
effect).
Navigation
- Keyboard: Left/Right arrow keys, Space to advance
- Click: Left half of screen = prev, Right half = next
- Progress bar: thin bar at top or bottom showing progress
- Slide counter: e.g., "3 / 12" in corner
- Optional: swipe gesture support for mobile
let current = 0;
const slides = document.querySelectorAll('.slide');
function goTo(n) {
slides[current].classList.remove('active');
slides[current].classList.add('exit-left');
setTimeout(() => slides[current].classList.remove('exit-left'), 700);
current = (n + slides.length) % slides.length;
slides[current].classList.add('active');
updateProgress();
}
document.addEventListener('keydown', e => {
if (e.key === 'ArrowRight' || e.key === ' ') goTo(current + 1);
if (e.key === 'ArrowLeft') goTo(current - 1);
});
slides[0].classList.add('active');
Background Techniques
Use at least one of these per slide (vary across deck):
- Gradient mesh:
background: radial-gradient(circle at 20% 80%, color1, transparent), radial-gradient(circle at 80% 20%, color2, transparent), base-color
- CSS Grid pattern: repeating-linear-gradient for dot/line grids
- SVG inline shapes: decorative blobs, polygons, circles as positioned
<svg> elements
- Noise texture: CSS
filter: url(#noise) with inline SVG feTurbulence filter
- Geometric accent: large rotated rectangle or circle as pseudo-element
- Diagonal split: clip-path split creating two-tone background
Content Quality
Every slide must have:
- A strong headline โ not vague; specific and punchy
- 2โ4 supporting points max per slide โ never wall-of-text
- Visual hierarchy: headline > subheadline > body > caption
- One anchor visual element: icon (Unicode/emoji rendered large), stat number, decorative shape, or quote callout
Tone rules:
- Titles: bold, declarative, active voice
- Body: concise, intelligent, no filler
- Stats: use real-looking, plausible numbers if none given
- Quotes: attribute to real relevant figures where appropriate
Layout Variation
Never repeat the same layout. Rotate through:
- Full bleed text โ giant headline, minimal body, dramatic background
- Split layout โ content left, visual element right (or vice versa)
- Card grid โ 3โ4 equal cards on one slide
- Big stat โ one massive number dominates the slide
- Quote callout โ large pull quote with attribution
- Timeline โ horizontal or vertical step flow
- Comparison โ two-column side-by-side
- Icon list โ each point has a large Unicode icon or emoji
Shapes & Decorative Elements
Add atmosphere with positioned, layered decorative elements:
- Large semi-transparent circles/ovals:
border-radius: 50%; opacity: 0.08
- Corner accent triangles via
clip-path: polygon(...)
- Diagonal stripe overlays via repeating-linear-gradient
- Dotted grid:
background-image: radial-gradient(circle, var(--accent-1) 1px, transparent 1px); background-size: 30px 30px
- Thin ruled lines:
border-top: 1px solid rgba(255,255,255,0.15)
Step 5 โ Quality Checklist
Before outputting, verify:
Step 6 โ Output
Produce the artifact directly โ do not explain it first. After outputting,
add a single short line like:
"12 slides on [topic] โ use arrow keys or click to navigate."
Do not explain the design choices unless asked.
Reference Files
animation-recipes.md โ Ready-to-use CSS animation snippets for complex effectstheme-palettes.md โ Pre-built color systems for each topic categorylayout-templates.md โ HTML layout scaffolds for each slide type
Read these if you need inspiration or exact code patterns during generation.
