op7418/video-wrapper-skills

Browser automation

330 stars Quality 41 Trend 41

Repository Install

AI-powered subtitle analysis, automatic effect suggestions, one-click professional visual rendering

Overview

AI-powered subtitle analysis, automatic effect suggestions, one-click professional visual rendering

README

✨ Features

🛠️ Dual Rendering Engines

Engine	Tech Stack	Features
Browser 🌐	Playwright + HTML/CSS/Anime.js	High quality, complex animations (Recommended)
PIL 🎨	Python PIL	Pure Python, no browser required

🚀 Quick Start

Installation

Method 1: One-Click Install (Recommended)

npx skills add https://github.com/op7418/Video-Wrapper-Skills

Method 2: Manual Install

# Clone to Claude Skills directory
cd ~/.claude/skills/
git clone https://github.com/op7418/Video-Wrapper-Skills.git video-wrapper
cd video-wrapper

# Install dependencies
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
playwright install chromium

Usage

In Claude Code

/video-wrapper interview.mp4 subtitles.srt

Claude will:

📊 Analyze subtitles, identify key information
💡 Generate effect suggestions (lower thirds, key phrases, term cards, etc.)
📝 Present suggestions in Markdown for review
✅ Auto-render output video after confirmation

Command Line

# Direct rendering with config file
python src/video_processor.py video.mp4 subs.srt config.json output.mp4

# Specify renderer
python src/video_processor.py video.mp4 subs.srt config.json -r browser  # Browser
python src/video_processor.py video.mp4 subs.srt config.json -r pil      # PIL

🎥 Demo

💡 Visual effects showcase across different themes and components

Theme Comparison

Component Examples

Component	Preview	Use Case
🏷️ Key Phrase	[Preview placeholder]	When guest mentions “Artificial General Intelligence”, show “AI Development is Smooth Curve”
👤 Lower Third	[Preview placeholder]	Show “Dario Amodei · CEO · Anthropic” at video start
📖 Term Card	[Preview placeholder]	Auto popup explanation when “Moore’s Law” first mentioned
💬 Quote	[Preview placeholder]	Highlight “AI development is a very smooth exponential curve”

📋 Use Cases

🎨 Theme System

Choose the right theme based on content style:

{
  "theme": "notion"  // or "cyberpunk", "apple", "aurora"
}

Theme	Color Scheme	Characteristics	Best For
Notion	Warm Yellow + Blue	Soft gradients, knowledge-focused	Education, knowledge sharing, courses
Cyberpunk	Neon Purple + Cyan	High contrast, tech-forward	Tech, sci-fi, innovation topics
Apple	Black/White/Gray	Minimal, professional	Business, corporate, formal interviews
Aurora	Rainbow Gradient	Flowing light, artistic	Creative, design, artistic content

🧩 Component Configuration

Complete Configuration Example

Component Parameters Quick Reference

Component	Required	Optional	Notes
Lower Third	name, role, company, startMs	durationMs (default 5s)	Guest information
Chapter Title	number, title, startMs	subtitle, durationMs	Topic segmentation
Key Phrase	text, startMs, endMs	style, position	text must be phrase
Term Card	chinese, english, firstAppearanceMs	description, displayDurationSeconds	Terminology explanation
Quote	text, author, startMs	durationMs, position	Memorable quotes
Stats	number, label, startMs	prefix, unit, durationMs	Number display
Bullet Points	title, points, startMs	durationMs	List summary
Social Bar	platform, handle, startMs	label, durationMs	Follow CTA

⚠️ Key Phrase Usage: text must be a phrase (e.g., “AI Development is Smooth Curve”), not a single word (e.g., “Artificial Intelligence”). Use term cards for single words.

🗂️ Project Structure

video-wrapper/
├── 📄 SKILL.md                  # Claude Skill definition
├── 📄 README.md                 # This document (English)
├── 📄 README_CN.md              # Chinese documentation
├── 📄 ARCHITECTURE.md           # Detailed architecture
├── 📄 requirements.txt          # Python dependencies
├── 📁 src/                      # Source code
│   ├── video_processor.py       # Main processing flow
│   ├── browser_renderer.py      # Playwright renderer
│   ├── content_analyzer.py      # AI content analysis
│   ├── fancy_text.py            # PIL key phrase rendering
│   ├── term_card.py             # PIL card rendering
│   └── animations.py            # Animation functions
├── 📁 templates/                # HTML templates
│   ├── fancy-text.html
│   ├── term-card.html
│   ├── lower-third.html
│   ├── chapter-title.html
│   ├── quote-callout.html
│   ├── animated-stats.html
│   ├── bullet-points.html
│   ├── social-bar.html
│   └── video-config.json.template
└── 📁 static/                   # Static assets
    ├── css/                     # Theme styles
    │   ├── effects.css
    │   ├── theme-notion.css
    │   ├── theme-cyberpunk.css
    │   ├── theme-apple.css
    │   └── theme-aurora.css
    └── js/
        └── anime.min.js         # Animation engine

❓ FAQ

🔧 Tech Stack

Layer	Technology	Description
Visual Rendering	HTML + CSS + Anime.js	Screenshot via Playwright browser
Video Compositing	MoviePy	Python video editing library
Animation Engine	Anime.js	Spring physics animations
Fallback Rendering	Python PIL	Pure Python image processing
Content Analysis	AI Analysis	Auto-identify key information

Detailed architecture available in ARCHITECTURE.md

📚 Resources

🤝 Contributing

Issues and Pull Requests are welcome!

Before submitting a PR, please ensure:

✅ Code style follows project conventions
✅ Added necessary tests
✅ Updated relevant documentation

📄 License

MIT License

View this README on GitHub

Recommended Tools

Try a different keyword or remove a filter.

Install

npx skillfish add op7418/video-wrapper-skills