Imported from majiayu000/claude-skill-registry (skills/design/shorts-presentation-skill-sgobet-ai-powered-youtube-w/SKILL.md). Install upstream with npx skills add majiayu000/claude-skill-registry --skill shorts-presentation-skill-sgobet-ai-powered-youtube-w. Copyright stays with the author.

Shorts Presentation Generator

Overview

This skill creates vertical (9:16 aspect ratio) interactive HTML presentations specifically designed for short-form video content. You screen record the presentation while narrating, then use Opus Clip Pro or direct upload for Shorts/Reels/TikTok.

Key Features:

• Vertical 9:16 format (1080x1920 optimized)
• Fast-paced slide design (3-5 seconds per slide)
• Large, readable text for mobile viewing
• Bold animations that pop on small screens
• Click-to-advance for easy recording
• 30-60 second content pacing

CRITICAL: Fact Integrity Rules

Rule 1: NEVER Infer New Facts

• Only use information explicitly stated in source videos or found in web research
• NEVER extrapolate, assume, or create new "facts" by combining information
• If unsure, mark as [FROM VIDEO] or [NEEDS VERIFICATION]

Rule 2: Source Everything

• Every fact shown on a slide must have a traceable source
• Either from the YouTube transcript (with timestamp) or web research (with URL)
• If you cannot source it, do not include it

Rule 3: Recency Matters

• Always search for the most recent data (2025-2026)
• Mark dates on any statistics or data points
• Outdated facts can go viral for the wrong reasons

Rule 4: Source Attribution Format

Every fact in the presentation must be tagged:

• [VERIFIED: Source Name, Date] - Confirmed via web search
• [FROM VIDEO: Title, Timestamp] - From transcript, not independently verified
• [USER PROVIDED] - User stated this information

Red Flags - STOP and Verify

If you find yourself including:

• "Studies show..." → Which study? What year?
• "Experts say..." → Which expert? What quote?
• "Millions of..." → Exact number and source?
• Any statistic → Source URL and date required

Rule 5: ALWAYS Re-Verify Before Generating

DO NOT trust research from earlier in the conversation. Before generating ANY presentation:

1. Re-fetch the primary source - If referencing a GitHub issue, blog post, or article, fetch it AGAIN right before generating slides
2. Check for updates - Issues get closed, bugs get fixed, versions change. What was true 10 minutes ago may not be true now
3. Verify version numbers - ALWAYS confirm the CURRENT latest version and its status. Don't assume old version info is still accurate
4. Cross-reference user's context - If user mentions they're on version X, verify if the issue affects version X specifically

Example of what NOT to do:

• Research says "bug affects v2.0.75"
• User says "I'm on v2.0.76"
• ❌ WRONG: Assume v2.0.75 info is still current
• ✅ RIGHT: Search for "v2.0.76 [bug name]" to verify current status

Before generating slides, ALWAYS ask yourself:

• "Is this the CURRENT version?"
• "Has this been fixed since my research?"
• "Did I verify this against the user's specific context?"

Rule 6: Update ALL Outputs When Facts Change

When a fact is corrected or updated:

• Update the presentation HTML
• Update the narration script
• Update the research.md
• Update any other files referencing that fact

One wrong fact in a viral video destroys credibility.

When to Use

Invoke this skill when:

• User says "create a short", "make a viral presentation", "shorts presentation"
• User provides YouTube URLs and wants quick, shareable content
• User wants to create educational Shorts with animated facts
• User wants vertical video content for social media

Workflow

Step 1: Collect Input

Accept one or more of:

• YouTube video URLs (to extract transcripts and facts)
• A specific topic to research
• Key points the user wants to convey

Step 2: Fetch YouTube Transcripts (If URLs Provided)

For each video URL, use Playwright MCP with this exact method:

Step 2a: Navigate and Extract with JavaScript (RECOMMENDED)

Use browser_run_code to handle navigation, clicking, and extraction in one reliable call:

// Use this exact code in mcp__plugin_playwright_playwright__browser_run_code
async (page) => {
  // Scroll down to load description
  await page.evaluate(() => window.scrollBy(0, 400));
  await page.waitForTimeout(1000);

  // Click expand description button
  const expandBtn = await page.$('tp-yt-paper-button#expand');
  if (expandBtn) {
    await expandBtn.click();
    await page.waitForTimeout(500);
  }

  // Click "Show transcript" button
  const showTranscriptBtn = await page.$('button[aria-label="Show transcript"]');
  if (showTranscriptBtn) {
    await showTranscriptBtn.click();
    await page.waitForTimeout(1500);
  }

  // Extract transcript segments using Playwright's querySelectorAll method
  const segments = await page.locator('ytd-transcript-segment-renderer').evaluateAll(els =>
    els.map(el => {
      const time = el.querySelector('.segment-timestamp')?.innerText?.trim() || '';
      const text = el.querySelector('.segment-text')?.innerText?.trim() || '';
      return '[' + time + '] ' + text;
    }).join('\n')
  );

  return segments || 'Transcript not found';
}

Step 2b: Alternative - Manual Click Method

If the JavaScript method fails, use manual clicks:

1. browser_navigate to https://www.youtube.com/watch?v=VIDEO_ID
2. browser_snapshot to get page state
3. Look for "Show transcript" button ref in snapshot (usually in description area)
4. browser_click with the exact ref (e.g., ref=e3960)
5. browser_snapshot again to see transcript panel
6. Use browser_run_code to extract just the transcript text

CRITICAL: Do NOT use browser_snapshot alone - the transcript text is in buttons, not plain text. Always use JavaScript to extract the actual segment content from ytd-transcript-segment-renderer elements.

Common Issues:

• If snapshot shows transcript panel but no text: Use JavaScript to extract
• If "Show transcript" button not visible: Scroll down and expand description first
• If transcript not loading: Wait longer (1500ms+) after clicking

Extract from each video:

• Video title
• Key claims/facts with timestamps
• Statistics mentioned
• Quotes that could be used

Step 3: Web Research for Verification

Use WebSearch to:

1. Verify any numerical claims from the video
2. Find additional recent data on the topic
3. Get official sources for credibility

Search Strategy:

• Use site: operators for authoritative sources
• Always include current year in searches
• Look for the most recent data available

Source Priority:

1. Official sources (government, company reports)
2. Major news outlets (Reuters, Bloomberg, AP)
3. Industry publications
4. Original video (clearly attributed)

Step 4: Ask Clarifying Questions

Question 1: Content Focus

"What's the main hook for this Short?"
Header: "Hook"
Options:
- Surprising fact reveal
- Myth vs Reality
- Quick tutorial/tip
- Comparison (A vs B)
- Story/Timeline

Question 2: Slide Count

"How many slides (aim for 30-60 seconds total)?"
Header: "Length"
Options:
- 5-7 slides (30 seconds - punchy)
- 8-10 slides (45 seconds - standard) [Recommended]
- 11-15 slides (60 seconds - detailed)

Question 3: Visual Style

"What visual style?"
Header: "Style"
Options:
- Bold & Minimal (large text, high contrast) [Recommended]
- Data-focused (stats, numbers, charts)
- Comparison view (split screen style)
- Story sequence (narrative flow)

Question 4: Theme

"Color theme?"
Header: "Theme"
Options:
- Dark Mode (black/teal) [Recommended for screen recording]
- Light Mode (white/blue)
- High Energy (dark/orange-red)
- Professional (dark/green)

Step 4.5: VERIFICATION CHECKPOINT (REQUIRED)

Before generating slides, present facts to user for approval:

## 🔒 FACT VERIFICATION CHECKPOINT

I found these facts from analysis and research:

### ✅ VERIFIED FACTS (confirmed via web search)
| Fact | Source | Date |
|------|--------|------|
| [fact] | [source URL] | [date] |

### 📺 VIDEO CLAIMS (from transcript, not independently verified)
| Claim | Video | Timestamp |
|-------|-------|-----------|
| [claim] | [video title] | [MM:SS] |

### ❌ COULD NOT VERIFY
| Claim | Search Attempted | Result |
|-------|------------------|--------|
| [claim] | [what I searched] | Not found |

---

**Which facts should I include in the Short?**
- I recommend only using ✅ VERIFIED facts
- 📺 VIDEO CLAIMS can be included with attribution ("According to [video]...")
- ❌ UNVERIFIED facts should NOT be used

Select the facts you want featured (by number):

Wait for user to select which facts to include before generating slides.

Step 5: Generate Slide Content

Create 5-15 slides following this structure:

Slide 1: Hook (0-3 sec)

LARGE BOLD TEXT
[Attention-grabbing statement or question]

Slides 2-N: Content (3-5 sec each)

KEY POINT
[Supporting detail]
[Source indicator if applicable]

Final Slide: CTA or Punchline (3-5 sec)

[Memorable conclusion]
[Call to action if appropriate]

Step 6: Generate HTML Presentation

Create a vertical HTML file optimized for:

• 1080x1920 resolution (9:16)
• Large, bold typography (minimum 48px)
• High contrast colors
• Simple animations (fade, scale, slide)
• Touch/click advancement
• No distracting elements

Step 7: Save and Provide Instructions

IMPORTANT: Shorts go in the Ideas folder with "SHORTS - " prefix.

Save to: ~/YT/Ideas/SHORTS - [Topic]/presentation.html

Provide recording instructions:

Your Shorts presentation is ready!

**File:** ~/YT/Shorts/[Topic]/presentation.html

**How to Record:**
1. Open in Chrome
2. Press F11 for fullscreen
3. Resize Chrome window to 1080x1920 (or use DevTools mobile view)
4. Start OBS/screen recording
5. Click to advance each slide while narrating
6. Each slide = 3-5 seconds of content

**Tips for Recording:**
- Speak with energy - shorts need high engagement
- Match your voice to the slide transitions
- Keep total length under 60 seconds
- The hook (slide 1) is crucial - nail it

**After Recording:**
- Upload directly to YouTube Shorts, TikTok, Reels
- Or use Opus Clip Pro for auto-captions and effects

Shorts-Optimized Slide Types

Hook Slide

<div class="slide hook-slide">
  <h1 class="hook-text">[HOOK TEXT]</h1>
  <p class="hook-subtext">[Optional subtext]</p>
</div>

• Largest text size
• Centered, bold
• Immediate attention grab

Fact Slide

<div class="slide fact-slide">
  <p class="fact-label">[LABEL like "FACT" or "DID YOU KNOW"]</p>
  <h2 class="fact-text">[The fact]</h2>
  <p class="fact-source">[Source]</p>
</div>

• Clear hierarchy
• Source visible but not dominant

Number Reveal Slide

<div class="slide number-slide">
  <p class="number-label">[Context]</p>
  <h1 class="big-number" data-animate="count">[NUMBER]</h1>
  <p class="number-unit">[Unit or description]</p>
</div>

• Animated number counter
• Dramatic reveal effect

Comparison Slide

<div class="slide compare-slide">
  <div class="compare-item wrong">
    <span class="compare-icon">❌</span>
    <p>[Wrong/Myth/Before]</p>
  </div>
  <div class="compare-item right">
    <span class="compare-icon">✅</span>
    <p>[Right/Truth/After]</p>
  </div>
</div>

• Clear visual distinction
• Stacked vertically for mobile

Quote Slide

<div class="slide quote-slide">
  <div class="quote-mark">"</div>
  <p class="quote-text">[Quote]</p>
  <p class="quote-author">— [Author]</p>
</div>

• Large quote marks
• Emphasis on the words

List Slide

<div class="slide list-slide">
  <h2 class="list-title">[Title]</h2>
  <ul class="shorts-list">
    <li data-reveal="1">[Item 1]</li>
    <li data-reveal="2">[Item 2]</li>
    <li data-reveal="3">[Item 3]</li>
  </ul>
</div>

• Items reveal one by one
• 3-5 items max per slide

CTA Slide

<div class="slide cta-slide">
  <h2 class="cta-text">[Call to action]</h2>
  <p class="cta-subtext">[Supporting text]</p>
  <div class="cta-icons">
    <span>👆 Follow</span>
    <span>💬 Comment</span>
    <span>🔄 Share</span>
  </div>
</div>

• Clear action request
• Platform-appropriate icons

Theme Options for Shorts

Dark Mode (Default)

--bg-primary: #000000;
--bg-secondary: #1a1a1a;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--accent: #00d4aa;

Light Mode

--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--text-primary: #000000;
--text-secondary: #666666;
--accent: #3b82f6;

High Energy

--bg-primary: #0a0a0a;
--bg-secondary: #1a1a1a;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--accent: #ff6b35;

Professional

--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--accent: #22c55e;

Animation Presets for Shorts

Slide In

.slide { animation: slideIn 0.3s ease-out; }
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

Scale Pop

.slide { animation: scalePop 0.3s ease-out; }
@keyframes scalePop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

Fade Up

.slide { animation: fadeUp 0.3s ease-out; }
@keyframes fadeUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

Number Count

// For dramatic number reveals
function animateNumber(el, target, duration = 800) {
  let current = 0;
  const increment = target / (duration / 16);
  const timer = setInterval(() => {
    current = Math.min(current + increment, target);
    el.textContent = formatNumber(Math.floor(current));
    if (current >= target) clearInterval(timer);
  }, 16);
}

Content Pacing Guide

Total target: 30-60 seconds

Example: Shorts from YouTube Analysis

User: Create a short from this video about AI productivity
      https://youtube.com/watch?v=ABC123

Claude: [Fetches transcript via Playwright MCP]
        [Identifies key facts and statistics]
        [Verifies claims via WebSearch]

I found 5 key facts from this video:

1. "AI tools save an average of 2 hours per day" - [VERIFIED: McKinsey 2024]
2. "ChatGPT has 200M weekly users" - [VERIFIED: OpenAI 2024]
3. "40% of workers use AI secretly" - [FROM VIDEO - needs verification]
4. "Productivity up 35% with AI" - [PARTIALLY VERIFIED: varies by study]
5. "AI will replace 30% of jobs" - [DISPUTED: estimates vary widely]

Which facts would you like to feature in the Short?

[User selects facts 1, 2, 4]

[Asks clarifying questions about style]

Generating your Shorts presentation...

**Slides Created:**
1. Hook: "AI is changing EVERYTHING about work"
2. Number: "2 HOURS saved per day with AI tools"
3. Source: "According to McKinsey Research 2024"
4. Number: "200 MILLION people use ChatGPT weekly"
5. Number: "35% productivity boost with AI"
6. CTA: "Follow for more AI insights"

**File:** ~/YT/Shorts/AI Productivity Facts/presentation.html

**Recording Tips:**
- Hook with energy: "Did you know AI can give you 2 extra hours every day?"
- Pause on numbers for impact
- End with enthusiasm for the CTA
- Total time: ~35 seconds

Folder Structure

~/YT/Shorts/
├── [Topic Name 1]/
│   ├── presentation.html
│   ├── research.md (sources and verification)
│   └── script-notes.md (optional talking points)
├── [Topic Name 2]/
│   └── ...

Integration with Opus Clip Pro

After recording the screen with your narration:

1. Export as vertical video (1080x1920)
2. Upload to Opus Clip Pro
3. Let it add auto-captions
4. Apply effects/transitions
5. Auto-post to all platforms

The presentation provides the visual backbone - your voice and Opus Clip's captions complete the package.

Safety Reminders

1. Double-check all numbers before recording
2. Date your statistics - add "as of 2025" to slides if needed
3. Cite sources verbally when recording ("According to McKinsey...")
4. Don't mix sources - clearly separate video claims from research
5. When in doubt, leave it out - one wrong fact can tank credibility

Troubleshooting

Transcript Extraction Fails

Solutions (try in order):

1. Check video has captions: Not all videos have CC
2. Fallback to Python script:

   cd ~/YT/_Config/scripts
   source .venv/bin/activate
   python fetch_youtube.py "VIDEO_URL" --format markdown

3. Manual fallback: Ask user to provide key facts directly

WebSearch Doesn't Find Verification

1. Try different search terms: Use company/organization names directly
2. Check official sources: Go directly to company websites, government sites
3. Mark as unverified: If no source found, do NOT include in slides
4. Ask user: "I couldn't verify [claim]. Do you have a source, or should I exclude it?"

Vertical Format Display Issues

1. Chrome DevTools: Press F12 → Toggle device toolbar → Select custom 1080x1920
2. OBS Setup: Create scene with 1080x1920 canvas, window capture Chrome
3. Preview: Always preview at actual size before recording

CRITICAL: HTML Template for Vertical Presentations

You MUST use this EXACT structure for all shorts presentations. Do NOT deviate.

Complete HTML Template (REQUIRED)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[PRESENTATION TITLE]</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
        }

        /* 9:16 Container - centered and scaled to fit viewport */
        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1080px;
            height: 1920px;
            background: #0a0a0a;
            transform-origin: center center;
        }

        /* Progress bar - thick and visible */
        .progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 12px;
            background: linear-gradient(90deg, #00d4aa, #00a080);
            z-index: 1000;
            transition: width 0.3s ease;
        }

        /* Slide counter - large and clear */
        .counter {
            position: absolute;
            bottom: 80px;
            right: 60px;
            font-size: 48px;
            font-weight: 700;
            color: rgba(255,255,255,0.7);
            z-index: 1000;
            font-variant-numeric: tabular-nums;
        }

        /* Slides */
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 1080px;
            height: 1920px;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 100px 70px;
            text-align: center;
            color: #fff;
        }

        .slide.active {
            display: flex;
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        /* [ADD YOUR CUSTOM STYLES HERE] */
    </style>
</head>
<body>
    <div class="container" id="container">
        <div class="progress" id="progress"></div>
        <div class="counter" id="counter">1 / [TOTAL]</div>

        <!-- Slides go here -->
        <div class="slide active">
            <!-- Slide 1 content -->
        </div>
        <div class="slide">
            <!-- Slide 2 content -->
        </div>
        <!-- More slides... -->
    </div>

    <script>
        const slides = document.querySelectorAll('.slide');
        const progress = document.getElementById('progress');
        const counter = document.getElementById('counter');
        const container = document.getElementById('container');
        let current = 0;
        const total = slides.length;

        // Scale container to fit viewport
        function scaleContainer() {
            const vw = window.innerWidth;
            const vh = window.innerHeight;
            const scale = Math.min(vw / 1080, vh / 1920);
            container.style.transform = `translate(-50%, -50%) scale(${scale})`;
        }

        function update() {
            // Update slides
            slides.forEach((s, i) => {
                s.classList.toggle('active', i === current);
            });
            // Update progress bar
            const pct = ((current + 1) / total) * 100;
            progress.style.width = pct + '%';
            // Update counter
            counter.textContent = (current + 1) + ' / ' + total;
        }

        function next() {
            if (current < total - 1) {
                current++;
                update();
            }
        }

        function prev() {
            if (current > 0) {
                current--;
                update();
            }
        }

        // Click to advance
        container.addEventListener('click', next);

        // Keyboard
        document.addEventListener('keydown', e => {
            if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'Enter') {
                e.preventDefault();
                next();
            } else if (e.key === 'ArrowLeft') {
                e.preventDefault();
                prev();
            } else if (e.key === 'Home') {
                current = 0;
                update();
            } else if (e.key === 'End') {
                current = total - 1;
                update();
            }
        });

        // Touch support
        let touchStartX = 0;
        container.addEventListener('touchstart', e => {
            touchStartX = e.touches[0].clientX;
        });
        container.addEventListener('touchend', e => {
            const diff = touchStartX - e.changedTouches[0].clientX;
            if (Math.abs(diff) > 50) {
                if (diff > 0) next();
                else prev();
            }
        });

        // Init
        scaleContainer();
        window.addEventListener('resize', scaleContainer);
        update();
    </script>
</body>
</html>

MANDATORY Requirements

Common Mistakes to AVOID

Pre-Generation Checklist

Before generating HTML, verify:

• Container uses .container class with id="container"
• JavaScript scaleContainer() function is included
• Progress bar at top with gradient
• Slide counter at bottom right in "X / Y" format
• Slides have position: absolute
• Slides have fixed pixel dimensions (1080x1920)
• Slide padding is 100px 70px
• fadeIn animation with scale transform

Recording Tips

1. Consistent timing: Practice clicking through at 3-5 second intervals
2. Voice matching: Script what you'll say for each slide before recording
3. Energy level: Shorts need higher energy than long-form content
4. Re-record if needed: Better to do multiple takes than publish subpar content