Menu
Create beautiful HTML presentations from topic + authors. Generates slides + speaker notes. No dependencies, works offline.
| name | presentation-master |
| description | Create beautiful HTML presentations from topic + authors. Generates slides + speaker notes. No dependencies, works offline. |
| aliases | ["presentation","create presentation","make presentation"] |
Input: Topic + Author names
Output: 2 HTML files (slides + speech notes)
Style: Study examples/ folder for quality reference
Language: Match user's language
/* CRITICAL: No scrolling on slides */
.slide {
overflow: hidden;
padding: 40px 60px 80px 60px; /* bottom padding for nav */
}
Why 80px bottom padding? Navigation buttons sit at bottom — content must not overlap them.
┌─────────────────────────────────────┐
│ │
│ SLIDE CONTENT │
│ │
│ │
├─────────────────────────────────────┤
│ [1/15] [◄] [►] │ ← Nav area (~60px)
└─────────────────────────────────────┘
↑ Counter ↑ Buttons
bottom-left bottom-right
Key: Counter on left, buttons on right. Both fixed position, ~24-30px from edges.
Since slides can't scroll, content must be compact:
| Element | Recommended Size |
|---|---|
| h1 (title) | 2.5-3.5rem |
| h2 (slide heading) | 1.75-2rem |
| h3 (card heading) | 1-1.2rem |
| Body text | 0.85-0.95rem |
| Card padding | 1-1.5rem |
| Grid gaps | 0.75-1.25rem |
Tip: Use grids (2-4 columns) to fit more content horizontally.
Slide 1: Title (topic + authors)
Slide 2: Overview/Agenda
Slides 3-N: Content (mix of types)
Slide N-1: Summary/Key Takeaways
Slide N: Thank You
| Type | Use For | Layout |
|---|---|---|
| Title | Opening, section dividers | Centered, gradient bg |
| Content | Main ideas | Heading + bullets/cards |
| Grid | Multiple concepts | 2-4 column card grid |
| Comparison | Pros/cons, before/after | 2-column layout |
| Stats | Key numbers | Large numbers + labels |
| Quote | Expert opinion | Blockquote style |
| Timeline | History, process | Vertical/horizontal steps |
Study examples/ — they show the quality bar:
Every content slide should include:
.animate-in {
opacity: 0;
transform: translateY(20px);
}
.slide.active .animate-in {
animation: fadeUp 0.5s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Topic}</title>
<style>
/* All CSS inline */
</style>
</head>
<body>
<!-- Background effects (optional) -->
<div class="bg-effects">...</div>
<!-- Progress bar -->
<div class="progress-bar" id="progress"></div>
<!-- Slides -->
<div class="slides-container">
<div class="slide active" data-slide="1">...</div>
<div class="slide" data-slide="2">...</div>
<!-- ... more slides ... -->
</div>
<!-- Navigation: counter left, buttons right -->
<div class="slide-counter">
<span id="currentSlide">1</span> / <span id="totalSlides">N</span>
</div>
<nav class="nav-container">
<button class="nav-btn" onclick="prevSlide()">◄</button>
<button class="nav-btn" onclick="nextSlide()">►</button>
</nav>
<script>
/* Navigation logic */
</script>
</body>
</html>
let currentSlide = 1;
const totalSlides = N; // Set actual count
const slides = document.querySelectorAll('.slide');
function showSlide(n) {
if (n < 1) n = 1;
if (n > totalSlides) n = totalSlides;
slides.forEach(slide => slide.classList.remove('active'));
slides[n - 1].classList.add('active');
currentSlide = n;
document.getElementById('currentSlide').textContent = currentSlide;
document.getElementById('prevBtn').disabled = currentSlide === 1;
document.getElementById('nextBtn').disabled = currentSlide === totalSlides;
document.getElementById('progress').style.width =
((currentSlide / totalSlides) * 100) + '%';
}
function nextSlide() { showSlide(currentSlide + 1); }
function prevSlide() { showSlide(currentSlide - 1); }
// Keyboard support
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') {
e.preventDefault();
nextSlide();
}
if (e.key === 'ArrowLeft') {
e.preventDefault();
prevSlide();
}
});
// Touch/swipe support
let touchStartX = 0;
document.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
});
document.addEventListener('touchend', (e) => {
const diff = touchStartX - e.changedTouches[0].clientX;
if (Math.abs(diff) > 50) {
diff > 0 ? nextSlide() : prevSlide();
}
});
showSlide(1);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Speech Notes — {Topic}</title>
<style>
body {
font-family: system-ui, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 40px;
line-height: 1.7;
}
.slide-notes {
margin-bottom: 2rem;
padding: 1.5rem;
border-left: 4px solid #3b82f6;
background: #f8fafc;
}
.slide-number {
font-weight: bold;
color: #3b82f6;
}
.slide-title {
font-size: 1.2rem;
font-weight: 600;
margin: 0.5rem 0;
}
.duration {
font-size: 0.85rem;
color: #64748b;
}
</style>
</head>
<body>
<h1>Speech Notes</h1>
<p class="subtitle">{Topic}</p>
<div class="slide-notes">
<span class="slide-number">Slide 1</span>
<span class="duration">~30 sec</span>
<div class="slide-title">Title Slide</div>
<p>Opening remarks...</p>
<p>Introduction to topic...</p>
</div>
<!-- Repeat for each slide -->
<div class="total-time">
Total: ~15-20 min
</div>
</body>
</html>
The examples/ folder contains production-quality presentations:
| File | Style | Learn From |
|---|---|---|
| Artificial Intelligence.html | Dark glass | Animations, grids, timeline |
| Climate Change.html | Light professional | Cards, stats, clean layout |
| Cybersecurity.html | Neon/gaming | Particles, threat meters, glow |
Best practice: Open examples in browser, study their CSS patterns, adapt to your topic.
Remember: The examples/ folder is your quality reference. Be creative, but maintain that level of polish.
Technical research methodology with YAGNI/KISS/DRY principles. Phases: scope definition, information gathering, analysis, synthesis, recommendation. Capabilities: technology evaluation, architecture analysis, best practices research, trade-off assessment, solution design. Actions: research, analyze, evaluate, compare, recommend technical solutions. Keywords: research, technology evaluation, best practices, architecture analysis, trade-offs, scalability, security, maintainability, YAGNI, KISS, DRY, technical analysis, solution design, competitive analysis, feasibility study. Use when: researching technologies, evaluating architectures, analyzing best practices, comparing solutions, assessing technical trade-offs, planning scalable/secure systems.
Review code for quality, security, and best practices. Use when the user asks for code review, wants feedback on their code, mentions reviewing changes, or asks about code quality.
Austrian Impressum (legal notice) requirements for all company types. Covers ECG, UGB, GewO, MedienG, and Offenlegungspflicht for public media. Use when working with impressum, legal notice, imprint, austria, österreich, ECG, mediengesetz, offenlegung.
Implement security best practices for TwinMind integrations. Use when securing API keys, configuring privacy settings, or implementing data protection for meeting recordings. Trigger with phrases like "twinmind security", "secure twinmind", "twinmind privacy", "protect twinmind data", "twinmind api key security".
Soc2 Compliance Checker - Auto-activating skill for Security Advanced. Triggers on: soc2 compliance checker, soc2 compliance checker Part of the Security Advanced skill category.
Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
