ワンクリックでManusで任意のスキルを実行

cinematic-slides

スター44

フォーク13

更新日2026年2月18日 12:33

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.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

aviz85

aviz85/claude-skills-library

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

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: fixed slides, toggle .active class
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

このリポジトリの他の Skills

同じリポジトリ

aviz85/claude-skills-library

WhatsApp automation (Green API primary, WAHA fallback). Use for: send/receive messages, send voice/images/files, retrieve incoming messages (text, voice, images), transcribe voice messages. WAME = 'WhatsApp ME' = send me by WhatsApp.

2026-07-0844

quick-voice

aviz85/claude-skills-library

Spin up an instant browser voice session (OpenAI Realtime gpt-realtime-2) to close a topic in a short conversation instead of working through documents. Generic & white-label - works for any process. Supports live data work (read/update files, JSON, run commands), and distill mode (no tools, ends with a structured deliverable). Has a generic canvas that can display images, markdown, code, html, json, video, audio - perfect for "let's go over X" flows where the agent shows you items one by one and you react in real time. Use when user says "let's close this in a voice call", "run a quick voice session about X", "תפעיל שיחה קולית", "let's go over the [images/leads/PRs/files/notes]", or when a task is faster as a 3-minute conversation than as a document edit.

2026-07-0744

ten-by-ten

aviz85/claude-skills-library

The 10x10 method — generate breadth, then converge with human judgment. Use whenever a single AI output won't nail it and quality matters (design, copy, naming, posters, messaging, strategy options, code approaches), OR when the user says '10x10', 'ten by ten', 'give me 10 options', 'show me variations', or asks to refine/tighten an output instead of round-after-round corrections.

2026-06-1744

teach-by-doing

aviz85/claude-skills-library

Never teach a principle without an immediate rep. When designing ANY teaching content — a workshop, a lesson plan, a deck, a course module, a webinar, an explainer video, an educational post — pair every theoretical unit with an embodiment the learner does right now. Use whenever building or reviewing teaching material, lesson plans, workshop flows, course outlines, or training content, OR when the user says 'teach-by-doing', 'add an exercise', 'make it hands-on', 'don't leave it abstract', 'תרגיל לכל עיקרון', 'הטמעה מיידית'.

2026-06-1744

creative-seeds

aviz85/claude-skills-library

Inject creative absurdity to break AI pattern-thinking before creative tasks. Randomly samples surreal micro-stories to spark unconventional thinking. Use before brainstorming, naming, writing, or any task needing fresh perspective.

2026-06-1044

gh-pages-deploy

aviz85/claude-skills-library

Deploy static or interactive frontend content to GitHub Pages using gh CLI. Use when the user wants to publish, share, or make accessible any HTML/CSS/JS content - including demos, prototypes, visualizations, landing pages, portfolios, documentation, interactive tools, games, or any browser-based project. Activate whenever content needs to be publicly viewable via URL, not just when "website" is explicitly mentioned.

2026-06-1044

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.
enhancedBy	[{"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: fixed slides, toggle .active class
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