feat(website): add demo video and fix Twitter preview

[rohitg00]

Summary

• Add demo video player to Hero section
• Fix Twitter/OG preview card not showing

Changes

Video Demo

• Added skillkit.mp4 video player below hero content
• Auto-plays muted with loop for seamless demo experience
• Styled with terminal-like window frame (red/yellow/green dots)

Twitter Preview Fix

• Fixed og:url from skillkit.dev to agenstskills.com
• Changed image URLs from relative to absolute (https://agenstskills.com/og-image.png)
• Added og:image:width, og:image:height, og:site_name, twitter:url
• Updated description to "32 AI coding agents"

Test Plan

• Verify video plays on website
• Validate Twitter card at https://cards-dev.twitter.com/validator

---

Summary by CodeRabbit

• New Features
  • Added a video demo section to the hero area featuring an auto-playing, looped video with branded card styling and poster image.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
skillkit	Ready	Preview, Comment	Jan 30, 2026 10:47pm
skillkit-docs	Ready	Preview, Comment	Jan 30, 2026 10:47pm

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces a new "Video Demo" UI block to the Hero component featuring an autoplaying video element, and updates metadata tags in the HTML file for improved SEO and social sharing with new URLs and descriptions.

Changes

Cohort / File(s)	Summary
Video Demo UI Component docs/skillkit/components/Hero.tsx	Adds a new stylized video card block to Hero component with three colored dots, "skillkit demo" label, and embedded video element (/skillkit.mp4) configured for autoplay, looping, and muted playback with poster image.
Metadata and Social Sharing docs/skillkit/index.html	Updates description meta tag and Open Graph/Twitter Card tags with new URL (agenstskills.com), updated descriptions, and image metadata (width: 1200, height: 630). Adds og:site_name attribute.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A video dances in the Hero's embrace,
With dots of color and a cheerful face,
The metadata blooms with fresh new grace,
Social cards gleam from every place,
SkillKit's story now has a prettier space! 🎬✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% 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 captures the two main changes: adding a demo video to the Hero component and fixing the Twitter/OG preview metadata.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/video-and-twitter-fix

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 3 additional flags.