Menu
Animated slide deck builder with React, Tailwind, HLS video backgrounds, and liquid glass aesthetics
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Comprehensive code review with security, patterns, and quality focus
Parallel execution using multiple Claude instances in Kitty terminal
Agile/Waterfall project planning, tracking, and delivery management
McKinsey-level strategic analysis with MECE frameworks and quantitative prioritization
Update project documentation (ADRs, CHANGELOG, running notes) in compact Claude-friendly format
Audit and harden any repository with standardized quality gates, hooks, and scripts
Baseado na classificação ocupacional SOC
| name | presentation-builder |
| description | Animated slide deck builder with React, Tailwind, HLS video backgrounds, and liquid glass aesthetics |
| allowed-tools | ["Read","Glob","Grep","WebSearch","Write","Edit","Bash"] |
| context | fork |
| user-invocable | true |
| version | 1.0.0 |
Build full-screen animated slide deck web apps optimized for live presentation.
| 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 |
| 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) |
clamp() values (e.g., clamp(12px, 1.05vw, 20px))px-[5.2%], pt-[4%]) for full responsivenessbackdrop-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 */
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) |
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
| 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 |
clamp()/brand-identity (brand strategy + presentation design) | /ui-design (component specs) | /design-systems (design tokens)