What tech stack powers this skill?

React for components, Tailwind CSS for styling, hls.js for HLS video backgrounds, lucide-react for icons, and Plus Jakarta Sans for typography.

Can I customize the theme and typography?

Yes. The design system enforces a dark theme with Plus Jakarta Sans and clamp()-based font sizes; Tailwind utilities drive consistent styling.

How are video backgrounds integrated per slide?

Provide per-slide HLS URLs; the solution uses hls.js to load sources and attach them to full-bleed elements, with a Safari-native fallback when possible. Content sits above via z-index.

presentation-builder

Scanned

npx machina-cli add skill Roberdan/MyConvergio/presentation-builder --openclaw

Files (1)

SKILL.md

5.8 KB

Presentation Builder Skill

Build full-screen animated slide deck web apps optimized for live presentation.

Inputs

Parameter	Required	Description
Slide count	Yes	Number of slides
Theme	Yes	dark / light / custom
Content per slide	Yes	Title, body, media, layout type
Video backgrounds	Optional	HLS stream URLs per slide
Brand assets	Optional	Logo SVG, fonts, colors

Tech Stack

Package	Purpose
React	Component framework
Tailwind CSS	Utility-first styling
hls.js	HLS video background streaming
lucide-react	Icon library
Plus Jakarta Sans	Default presentation font (Google Fonts)

Design System

Global Rules

Font: Plus Jakarta Sans (400, 500, 700) via Google Fonts import
Theme: Dark/black throughout, all text white
Font sizes: Responsive clamp() values (e.g., clamp(12px, 1.05vw, 20px))
Spacing: Percentage-based (e.g., px-[5.2%], pt-[4%]) for full responsiveness
No shadows: Use liquid glass aesthetic instead

Liquid Glass Aesthetic

backdrop-filter: blur(24px) saturate(1.4);
background: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0.08),
  rgba(255, 255, 255, 0.03)
);
border: 1px solid rgba(255, 255, 255, 0.12);
/* Subtle radial specular highlight at top-left */

Component Architecture

Presentation.tsx (Framework)

Props: Array of slide React elements, renders full-screen.

Keyboard Navigation:

Key	Action
ArrowRight / ArrowDown / Space	Next slide
ArrowLeft / ArrowUp	Previous slide
F	Toggle fullscreen
Escape	Exit fullscreen

Transitions: 500ms ease-in-out opacity fade + subtle scale (0.95 past, 1.05 future, 1 current).

Auto-hiding Controls (appear on mouse move, hide after 3s inactivity, 300ms fade):

Position	Element
Bottom-left	Slide counter ("1 / 5", white/50, 13px, tabular-nums)
Bottom-center	Progress dots (6px circles, active = 24px pill white/90, inactive = white/30)
Bottom-right	Prev/next chevrons + divider + fullscreen toggle (white/50, hover white/90)
Top-right	Keyboard hints ("Arrow Navigate, F Fullscreen", 11px, white/40)

Video Background Pattern (per slide)

Identical implementation across all video slides:

// HLS.js: if supported, create instance, load source, attach, auto-play on MANIFEST_PARSED
// Safari fallback: native HLS on <video src={url}>
// <video>: absolute inset-0 w-full h-full object-cover, autoPlay loop muted playsInline
// No overlay, no dimming, 100% opacity
// Content sits on top via relative z-10

Slide Types

Cover Slide

Video background (HLS)
Header: logo left, label right
Center: title (clamp 32px-96px), subtitle (clamp 20px-48px), author (clamp 14px-24px)
Footer: year centered

Content Slide (Multi-Column)

Video background (HLS)
Header: logo, title, page number
Title section
2-3 column layout with stats, paragraphs, mini charts (SVG)

Card Grid Slide

Video background (HLS)
Header + centered title
Card grid: top row (3 cards) + bottom row (2 cards)
Liquid glass cards with icon, title, description
Icons from lucide-react (white stroke)

Quote Slide

Video background (HLS)
Centered: attribution + quote (smart quotes)
Max-width 70%

Contact/Outro Slide

Video background (HLS)
Title + description paragraph
Contact items: icon + text, stacked vertically
Social icons: custom SVG paths for Instagram/Facebook

Workflow

Gather content: slides, media, brand assets
Scaffold: Presentation.tsx + individual slide components
Implement video: HLS.js pattern per slide
Style: Liquid glass cards, clamp() typography, percentage spacing
Navigation: Keyboard handlers, progress dots, auto-hide controls
Wire: App.tsx imports all slides into Presentation component

Output

Deliverable	Description
Presentation.tsx	Framework with navigation, transitions, controls
[Name]Slide.tsx	One component per slide
App.tsx	Wires slides into Presentation
index.css	Global styles, font import, liquid glass utilities

Quality Checklist

All font sizes use clamp()
All spacing uses percentage values
No shadows (liquid glass only)
HLS.js with Safari fallback on all video slides
Keyboard navigation working (arrows, F, Escape)
Controls auto-hide after 3s
Transitions smooth (500ms ease-in-out)
Responsive at all viewport sizes
Content readable over video backgrounds

/brand-identity (brand strategy + presentation design) | /ui-design (component specs) | /design-systems (design tokens)

Source

git clone https://github.com/Roberdan/MyConvergio/blob/master/.claude/skills/presentation-builder/SKILL.mdView on GitHub

Overview

Build full-screen, animated slide decks optimized for live presentations using React, Tailwind, and HLS video backgrounds. It enforces a liquid glass aesthetic with a dark theme and responsive typography to keep audiences engaged.

How This Skill Works

Slides are React components styled by Tailwind, with per-slide HLS video backgrounds loaded by hls.js (Safari fallback supported). The kit uses Plus Jakarta Sans, clamp-based typography, and a liquid glass aesthetic, plus keyboard navigation and auto-hiding controls for smooth presentation.

When to Use It

Create immersive product pitches with dynamic video backdrops.
Build conference-style keynotes using multi-column content and headers.
Deliver training or onboarding decks with brand-consistent visuals.
Run remote or in-person presentations with fullscreen-ready slides.
Produce brand-aligned decks using logo, fonts, and color tokens.

Quick Start

Step 1: Define Slide count, Theme (dark/light/custom), and Content per slide (title, body, media, layout).
Step 2: Add optional Video backgrounds (HLS URLs per slide) and Brand assets (logo, fonts, colors).
Step 3: Run the Presentation app and navigate with Arrow keys/Space for next, Arrow keys for previous, F for fullscreen, Esc to exit.

Best Practices

Plan slide count, content per slide, and layout before building.
Lock the theme, font scale, and color tokens to ensure consistency.
Preload HLS sources and keep video backgrounds muted and looped.
Use legible typography and minimal overlays to respect the liquid glass aesthetic.
Test navigation (arrows, space, F fullscreen) across devices and accessibility checks.

Example Use Cases

Product launch deck with video-backed title slide and logo header.
Tech conference keynote with multi-column content and a visible progress bar.
Marketing pitch showcasing features over a dark liquid-glass backdrop.
Team onboarding deck with brand assets and consistent typography.
Investor pitch with slide counter, timer hints, and fullscreen mode.

Frequently Asked Questions

Add this skill to your agents