--- name: electric-presentation description: Use this skill whenever the user wants to create an HTML presentation, slide deck, pitch deck, lecture, workshop, or webinar slides. Triggers on phrases like "תיצור לי מצגת", "תכין מצגת", "תבנה לי דק", "תבנה slides", "מצגת בסגנון", "מצגת ל-HTML", "מצגת על X", "create a presentation", "build a deck", "make slides", "presentation in dark/electric/neon style", or any time the user wants a visual presentation file. Produces a self-contained HTML presentation in a modern Electric style — deep black background with neon lime + cyan accents, dotted grid backdrop, smooth animations, content-aware SVG illustrations, copy-paste-ready prompt blocks, keyboard navigation, RTL Hebrew support, and fullscreen mode. Supports both 16:9 (landscape, desktop/projector/Zoom) and 9:16 (portrait, mobile/Reels/Stories) aspect ratios. Always trigger when the deliverable is an HTML presentation file — even when phrased casually like "תכין לי דק על X" or "תעשה לי slides". --- # Electric Presentation Skill A self-contained HTML presentation builder in the Electric design language — deep black, neon lime + cyan, dotted grid, animated SVG illustrations. Single HTML file, no dependencies (except Google Fonts), keyboard navigation, copy buttons, fullscreen mode. Brandable for any business. ## When to use Trigger any time the user wants to build a presentation, slide deck, lecture, workshop, webinar, pitch, or training material as an HTML file. Don't trigger for: - Plain text content / blog posts - Single-page landing pages or websites - Email templates - PDF documents (unless they're being made *from* a presentation) ## Workflow ### Step 1 — Gather requirements If the user hasn't already provided the info below, ask in a single message (don't ask one at a time): 1. **Topic / נושא** — what is the deck about? 2. **Hook / כותרת מובילה** — the punchy main message in one line. If they don't have one ready, propose 3 options based on the topic. 3. **Brand name / שם העסק** — for cover meta, brand mark in corner, and closing CTA. If they say "[name] AI Studio" or similar, extract the brand handle. 4. **Number of slides / כמה שקפים** — explicit count (e.g., "5 שקפים"), or implicit by content listing (e.g., "מצגת על X עם הסבר על Y, Z, W"). Default to 5-7 if unclear. 5. **Aspect ratio** — 16:9 (default, for desktop/projector/Zoom) or 9:16 (mobile/Reels/Stories). 6. **Contact info for closing** — any subset of phone, email, IG handle, website, WhatsApp link. If the user is brief and just says "תכין מצגת על X", proceed with sensible defaults: 5 slides, 16:9, ask only for the brand name and contact. ### Step 2 — Read the right template Based on the chosen aspect ratio: - **16:9 (default)** → read `template-16-9.html` from this skill folder - **9:16 (portrait)** → read `template-9-16.html` from this skill folder Both templates are complete, working presentations with placeholder content. They include the full CSS design system, all keyframe animations, JS for navigation, and 5 example slides demonstrating each pattern. **Use the template as a starting point — fork it and replace content. Don't rewrite the design system from scratch.** ### Step 3 — Build the slides Each presentation has three structural roles: - **Cover** (always first, exactly one) - **Content slides** (variable count — most of the deck) - **Closing** (always last, exactly one) Use the appropriate pattern per content slide (see "Slide patterns" below). ### Step 4 — Pick illustrations + animations Match the SVG illustration to the slide's topic. The templates ship with 4 ready-to-use illustrations. For new topics, create a new SVG following the same visual rules (see "Illustration library" + "Creating new illustrations"). ### Step 5 — Brand replacement The templates ship with placeholder branding (`[BRAND/NAME]` in the brand mark, generic CTA). **Always replace** with the user's actual brand: - `
BRAND/NAME
` → user's brand split by the slash - Cover meta presenter line → user's name + brand - Closing CTA button → user's contact (link + handle) - Footer/marquee text → relevant keywords for the user's domain ### Step 6 — Output Save the final HTML to `/mnt/user-data/outputs/[topic-slug].html` using a kebab-case filename derived from the topic. Then present it. After the user reviews, offer to also generate a PDF version using the same Playwright pipeline if Code Execution is available. --- ## Design system (key values) These are baked into both templates. Don't change them unless the user specifically requests: ``` --bg: #050505 /* deep black background */ --bg-2: #0E0E10 /* card background */ --bg-3: #16161A /* elevated surface */ --ink: #FAFAFA /* primary text */ --ink-2: #D4D4D8 /* secondary text */ --muted: #71717A /* tertiary text */ --border: #1F1F23 /* subtle borders */ --border-2: #27272A /* card borders */ --lime: #C6FF00 /* primary accent (neon) */ --cyan: #22D3EE /* secondary accent */ --lime-glow: rgba(198,255,0,0.4) /* shadow/glow */ ``` **Fonts**: Heebo (300-900) + JetBrains Mono (400, 500, 700). Loaded from Google Fonts in the template's ``. **Type scale** (16:9): - Cover h1: 88-96px / weight 900 / letter-spacing -.035em - Section title (h2.title): 56px / weight 800 - Lede: 19px / max-width 720px - Chip: 11px JetBrains Mono uppercase **Type scale** (9:16): proportionally larger since the viewport has more vertical space and is viewed on smaller screens. --- ## Slide patterns ### Cover slide The hero. Always uses `class="slide cover active"` (active makes it visible on load). Pattern: - `chip` with status — e.g., "SESSION_001 · LIVE 2026" or "LECTURE_02 · 2026" - `h1` with mixed treatment: regular text + `` (lime gradient fill) + `` (lime stroke outline). Pick which words get which based on emphasis. - `cover-sub` subtitle line with optional `` accents - `cover-meta` row of 3 stats (presenter / topic / duration) - `cover-card` (right side in 16:9, below the hero in 9:16) — 3-5 numbered preview items - `marquee` at bottom — relevant keywords scrolling ### Content with illustration (most common) Use when the slide has a clear visual concept (a process, a character, a system). ```html
01
STAGE_01 · TOPIC LABEL

Title here
second line if needed

Description sentence or two.

[picked illustration]
[3 or 4 step cards]
[optional: link-strip or prompt-block]
``` In 9:16 the illustration sits **above** the head-text (stacked), not beside it. ### Content with metrics + pillars (intro slide) Use for "about us" or "why this matters" framing — shows credibility (numbers) + value props (pillars). Has `metrics-grid` (4 columns of `metric` cards) + `pillars` (3 columns of `pillar` cards). Closes with a `start-cta` button that calls `navigate(1)` to go to the next slide. ### Content with prompt block (technical / copy-paste) Use when the slide includes a prompt, code snippet, or template the audience should copy. The `prompt-block` has: - Header with 3 colored dots, filename label, and Copy button (built-in clipboard.writeText) - Body — scrollable monospace area, max-height 200-240px ### Content with link button Use when slide includes a major CTA to an external tool or URL. Use the `open-link-btn` class on an anchor tag with target="_blank". ### Closing slide Pattern: - `chip` with "EOF · [ending message]" - Big `h2.title` with parting message - `lede` summarizing the value - `closing-grid` (4-5 small cards) with key takeaways - `cta-box` with title + sub + button linking to user's primary contact channel --- ## Illustration library The templates ship with these 4 illustrations. Match them to slide topics: | Illustration | When to use | |--------------|-------------| | **Waving robot + HELLO bubble** | Greeting, intro, table of contents, "let's start" | | **Robot interviewing human** | Q&A, learning, dialogue, training, interview prep | | **Phone with chat bubbles** | Chat, support, messaging, customer service, bots | | **Person with microphone + sound waves** | Pitch, presentation, public speaking, voice | Additional ones used in past decks (write fresh if needed): - **3 paths radiating from a person** — strategy, decisions, choices - **Sleeping person + active bot** — automation, 24/7, "while you sleep" - **Phone with talking avatar inside** — video, content creation, avatars ### Creating new illustrations If the topic doesn't match any existing illustration, create a new SVG following the same visual rules: - **viewBox**: `0 0 280 280` - **Frame**: `` - **Color rules**: lime (`#C6FF00`) for primary accent, cyan (`#22D3EE`) for secondary, white (`#FAFAFA`) for neutral characters, dark (`#0E0E10`) for fills inside outlines, magenta (`#F472B6`) only for "recording" / urgent states - **Style**: line-art only — outlines with 1.5-2px stroke, fills only as dark backgrounds inside shapes - **No text labels inside characters** unless clearly part of the scene (e.g., "HELLO" speech bubble, "60 SEC" timer chip) Apply animation classes from the template's CSS: - `.float-anim` — floating up-down (use sparingly, for accent elements like badges or speech bubbles) - `.pulse-eye` — soft opacity pulse (for eyes, status dots) - `.recording-dot` — blinking (red REC dots) - `.dot-1`, `.dot-2`, `.dot-3` — staggered "typing" dots - `.mouth-talk` — vertical squash for talking mouths (set ellipse, animate transform-origin:center) - `.dash-flow` — flowing dashed lines (set stroke-dasharray:5 7 on a path) - `.wave-arm` — rotating wave (set transform-origin in viewBox coords + transform-box:view-box) - `.wave-1`, `.wave-2`, `.wave-3` — radiating sound waves (with -.8s and -1.6s delays) Don't over-animate. 1-3 animated elements per illustration is plenty. --- ## Branding The templates have these brand placeholders. **Replace ALL of them** with the user's actual brand before delivering: | Element | Default | Replace with | |---------|---------|--------------| | `.brand-mark` (top-right) | `BRAND/NAME` | User's brand split by the slash (e.g., `STUDIO/X`, `ACME/CO`) | | Cover meta — presenter | `Presenter Name` | User's actual name | | Cover meta — brand | `Brand Studio` | User's actual studio/company | | Closing CTA button | `@HANDLE` | User's IG, WhatsApp link, or main contact | | Closing CTA href | `https://example.com` | User's actual link | | Marquee keywords | `KEYWORD · KEYWORD ...` | Domain-relevant keywords | The default colors and design language stay the same — they're not branded to any specific company. --- ## Aspect ratio guidance ### 16:9 (1920×1080) — default - Best for: live presentations, projectors, Zoom share, desktop viewing, recorded talks - The cover uses a 2-column grid (text + side card) - Content slides have illustrations beside text (`.with-illustration` grid) - Step rows in 3-4 columns ### 9:16 (1080×1920) — mobile / Reels / Stories - Best for: Instagram/TikTok Reels, mobile-only viewing, Stories - Cover stacks vertically — hero on top, side card below - Content slides have illustrations **above** text (stacked) - Step rows in 1-2 columns - Type sizes scale up since the viewport is narrow but tall The 9:16 template handles all of this automatically via its CSS. --- ## Output requirements - **Single HTML file**, all CSS inline in `