feat(web): add mock GitHub screenshots for product video

[parse]

Summary

• Replace test fixture screenshots with realistic HTML mocks of GitHub PR pages
• Three slides based on erode-app/playground PR Bump the non-major-updates group with 2 updates #1: PR opened, drift detected, model update PR
• Includes erode-video skill (generate_video.py + SKILL.md) and regenerated MP4

Test plan

• Open each HTML mock in browser to verify rendering
• Run python .claude/skills/erode-video/scripts/generate_video.py --input-dir .claude/skills/erode-video/screenshots to verify video generation
• Check video output at packages/web/public/videos/erode_pitch.mp4

Summary by CodeRabbit

• New Features

  • Added Erode Video Generator skill enabling MP4 product pitch video creation from screenshot folders with animated overlays, transitions, and branding effects.
  • Enhanced architecture diagrams with OpenAI API integration and pipeline visualization.

• Documentation

  • Added comprehensive skill documentation with configuration guide, CLI arguments, and automation examples.
  • Updated architecture documentation with new pipeline-stages view reference.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

A new Erode Video Generator skill is introduced, comprising documentation, Python implementation, configuration schema, and mock screenshot assets. Additionally, architecture diagrams and web documentation are updated to incorporate OpenAI API integration and reflect pipeline stage visualization changes.

Changes

Cohort / File(s)	Summary
Erode Video Generator Implementation .claude/skills/erode-video/SKILL.md, .claude/skills/erode-video/scripts/generate_video.py, .claude/skills/erode-video/screenshots/video_config.json	Comprehensive video generation system with documentation, Python CLI script supporting frame rendering (intro/slides/outro), Ken Burns effects, animated text overlays, font resolution with fallbacks, easing animations, and FFmpeg MP4 encoding; configuration-driven approach with JSON schema for titles, slides, accents, and video settings.
Erode Video Mock Assets .claude/skills/erode-video/screenshots/mocks/01_pr_opened.html, .claude/skills/erode-video/screenshots/mocks/02_drift_detected.html, .claude/skills/erode-video/screenshots/mocks/03_model_updated.html	Three static HTML mock pages simulating GitHub PR interface with architectural drift detection workflow, demonstrating multi-stage analysis visualization and dark-themed UI components for video presentation assets.
Architecture and Documentation packages/architecture/views.c4, packages/web/src/content/docs/docs/how-it-works.md	Architecture diagram extended with OpenAI API integration and new pipeline-stages sequence view; documentation link and viewer configuration updated to reference revised pipeline visualization.

Sequence Diagram

sequenceDiagram
    participant CLI as User/CLI
    participant Config as Config Loader
    participant Frame as Frame Generator
    participant FFmpeg as FFmpeg Encoder
    participant Output as Video Output

    CLI->>Config: Parse args & load video_config.json
    Config->>Frame: Provide config, input directory
    
    Frame->>Frame: Generate intro frames (title + tagline)
    Frame->>Frame: Process slide images (fit, Ken Burns, overlays)
    Frame->>Frame: Generate outro frames (branding)
    
    Frame->>FFmpeg: Pass frame sequence directory
    FFmpeg->>FFmpeg: Encode frames to MP4 (fps, crf)
    FFmpeg->>Output: Write video file
    
    Output-->>CLI: Video complete, cleanup temp files

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰✨ A Video Odyssey ✨🐰

Frames bloom from screenshots, layer by layer dear,
With Ken Burns floating, the story becomes clear,
Config guides the rhythm, fonts find their place,
FFmpeg weaves the magic, one frame at a time's grace! 🎬

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely summarizes the main change—adding mock GitHub screenshots for a product video. It is specific, clear, and directly relates to the primary focus of the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/video-mock-screenshots

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}