From cinematic-slides
Creates single-file HTML presentations with looping AI video backgrounds per slide, keyboard navigation, and GitHub Pages deployment. For cinematic slides and decks.
npx claudepluginhub aviz85/claude-skills-library --plugin cinematic-slidesThis skill uses the workspace's default tool permissions.
End-to-end pipeline: idea -> structured slides -> HTML -> AI images -> AI videos -> GitHub Pages.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
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.
Use presentation-architect skill to create the slide plan:
Create a single index.html (or slides.html) with:
Layout specs:
position: fixed slides, toggle .active classPer-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.
Use image-generation skill for each slide:
presentation/slide-NN-name.jpgUse image-generation skill (video mode) for each slide:
presentation/videos/slide-NN.mp4Use gh-pages-deploy skill:
index.html + presentation/ folder (images + videos) to deploy directoryUse whatsapp skill to send the live URL if requested (WAME).
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
...
Minimum needed from user:
Everything else is handled by the pipeline.
| 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 |