aviz85/cinematic-slides
plugins/cinematic-slides/skills/cinematic-slides/SKILL.md
Create cinematic HTML presentations with AI video backgrounds, deployed to GitHub Pages. Use for: slides, presentation, deck, cinematic slides, video presentation, animated slides, live presentation.
$ install --global
skillsauthnpx skillsauth add aviz85/claude-skills-library cinematic-slidesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 3, 2026, 12:13 PM111.0s1 file scanned
SKILL.md
- name:
- cinematic-slides
- description:
- Create cinematic HTML presentations with AI video backgrounds, deployed to GitHub Pages. Use for: slides, presentation, deck, cinematic slides, video presentation, animated slides, live presentation.
- - presentation-architect:
- Design slide structure and narrative
- - image-generation:
- Generate poster images and videos for each slide
- - gh-pages-deploy:
- Deploy final presentation to GitHub Pages
- - whatsapp:
- Send the live URL after deployment
Cinematic Slides
End-to-end pipeline: idea -> structured slides -> HTML -> AI images -> AI videos -> GitHub Pages.
Produces a single-file HTML presentation with looping AI video backgrounds per slide, keyboard navigation, and fullscreen 1920x1080 layout.
Pipeline
Step 1: Content Architecture
Use presentation-architect skill to create the slide plan:
- Get topic, audience, tone from user
- Output: structured markdown with slide-by-slide content, headlines, descriptions, visual direction
- Each slide needs a visual prompt describing the background mood/scene
Step 2: Build HTML Presentation
Create a single index.html (or slides.html) with:
Layout specs:
- 1920x1080 fixed slides, centered with CSS transform scaling
position: fixedslides, toggle.activeclass- Keyboard navigation (left/right arrows + click)
- Slide counter at bottom
- RTL direction for Hebrew content
- Google Fonts (Heebo for Hebrew, or as needed)
Per-slide CSS pattern:
#slideN {
background: [gradient-overlay], url('presentation/slide-N.jpg') center/cover no-repeat;
}
Video background CSS (global):
.slide-video {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.25;
}
.slide > *:not(.slide-video) {
position: relative;
z-index: 1;
}
Per-slide video element:
<video class="slide-video" autoplay muted loop playsinline>
<source src="presentation/videos/slide-N.mp4" type="video/mp4">
</video>
Navigation JS:
// Arrow keys: Right/Down = next, Left/Up = previous (standard, NOT RTL-flipped)
// Click/touch also advances
// Auto-scale to viewport
Preload images in <head> with <link rel="preload" as="image"> for each slide.
Step 3: Generate Images
Use image-generation skill for each slide:
- One image per slide based on visual prompt from Step 1
- Save to
presentation/slide-NN-name.jpg - Default aspect ratio: 16:9 (matches 1920x1080)
- Run all generations in parallel
Step 4: Generate Videos
Use image-generation skill (video mode) for each slide:
- Image-to-video from each slide's poster image
- Always use "static camera, no movement, rock steady tripod shot" in prompt
- Add subtle ambient effects only (light shifts, particles, shimmer)
- Save to
presentation/videos/slide-NN.mp4 - Run all generations in parallel
Step 5: Deploy
Use gh-pages-deploy skill:
- Copy HTML as
index.html+presentation/folder (images + videos) to deploy directory - Push to GitHub Pages
- Return live URL
Step 6: Share (optional)
Use whatsapp skill to send the live URL if requested (WAME).
Video Background Guidelines
- Static camera only - no pans, zooms, or Ken Burns effects
- Opacity 0.25 on video element - keeps text clearly readable over dark backgrounds
- Gradient overlay on background image as fallback while video loads
- autoplay muted loop playsinline - silent infinite loop
- Ambient motion only: light shifts, floating particles, subtle glow
File Structure
project-folder/
slides.html # Main presentation (renamed to index.html on deploy)
presentation/
slide-01-name.jpg # Poster images
slide-02-name.jpg
...
videos/
slide-01.mp4 # Video backgrounds
slide-02.mp4
...
User Input
Minimum needed from user:
- Topic/idea - what the presentation is about
- Audience - who is watching
- Language - Hebrew (default) or English
- Slide count - approximate number (default: 8-12)
- Repo name - for GitHub Pages URL (default: derived from topic)
Everything else is handled by the pipeline.
Quick Reference
| Step | Skill Used | Output | |------|-----------|--------| | Content | presentation-architect | Slide plan markdown | | HTML | (direct) | Single-file HTML presentation | | Images | image-generation | One JPG per slide | | Videos | image-generation (video) | One MP4 per slide | | Deploy | gh-pages-deploy | Live URL | | Share | whatsapp (optional) | Message sent |
Related Skills
aviz85/live-transcribe
tools
VerifiedTrustedCommunity
Start real-time microphone transcription using ElevenLabs Scribe v2 Realtime. Use when user wants to start live transcription, dictation, or real-time speech capture. Triggers on: 'תתחיל תמלול', 'תמלל בזמן אמת', 'start transcribing', 'live transcribe', 'הקלט מה שאני אומר'. After starting, tell user they can say 'אוקי זה מספיק בוא נעצור את התמלול' to stop, or use /live-transcribe-stop.
38SKILL.mdUpdated May 27, 2026
aviz85/live-transcribe-stop
tools
VerifiedTrustedCommunity
Stop a running real-time transcription. Use when user wants to stop/end live transcription. Triggers on: 'עצור תמלול', 'תעצור את התמלול', 'stop transcribing', 'end transcription', 'תפסיק להקליט'.
38SKILL.mdUpdated May 27, 2026
aviz85/live-transcribe-read
testing
VerifiedTrustedCommunity
Read the latest real-time transcription. Use when user asks to see, read, or show a transcription that was captured via live-transcribe. Triggers on: 'תקריא תמלול', 'מה תמללתי', 'התמלול האחרון', 'show transcription', 'what did I say', 'read the transcript', 'מה נכתב בתמלול', 'תראה לי את התמלול'. Also use when user references transcription content without being explicit — e.g. 'summarize what I said', 'translate the transcription'.
38SKILL.mdUpdated May 26, 2026
aviz85/x-bookmarks-fetcher
development
VerifiedTrustedCommunity
Fetch X (Twitter) bookmarks via the official X API v2. Downloads recent bookmarks with text, images, and videos into a local folder. Use whenever user asks to grab/download/export their X bookmarks, save bookmarked tweets, or pull recent saved posts from X/Twitter. Uses OAuth 2.0 user-context auth (one-time browser consent, then refresh-token forever).
34SKILL.mdUpdated May 20, 2026