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

docs/skillkit/components/Hero.tsx

@@ -206,6 +206,32 @@ export function Hero(): React.ReactElement {
             </div>
           </div>
         </div>
+
+        {/* Video Demo */}
+        <div className="mt-8 sm:mt-10 animate-fade-in-delay">
+          <div className="relative mx-auto max-w-3xl">
+            <div className="absolute -inset-1 bg-gradient-to-r from-zinc-800 via-zinc-600 to-zinc-800 rounded-lg opacity-30 blur-xl"></div>
+            <div className="relative border border-zinc-800 bg-black rounded-lg overflow-hidden">
+              <div className="flex items-center gap-1.5 px-3 py-2 border-b border-zinc-800 bg-zinc-900/50">
+                <div className="w-2.5 h-2.5 rounded-full bg-red-500/80"></div>
+                <div className="w-2.5 h-2.5 rounded-full bg-yellow-500/80"></div>
+                <div className="w-2.5 h-2.5 rounded-full bg-green-500/80"></div>
+                <span className="ml-2 text-zinc-500 text-xs font-mono">skillkit demo</span>
+              </div>
+              <video
+                className="w-full"
+                autoPlay
+                loop
+                muted
+                playsInline
+                poster="/og-image.png"
+              >
+                <source src="/skillkit.mp4" type="video/mp4" />
+                Your browser does not support the video tag.
+              </video>
+            </div>
+          </div>
+        </div>
       </div>
 
       <style>{FADE_ANIMATION_STYLES}</style>

docs/skillkit/index.html

@@ -4,20 +4,24 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SkillKit - Universal Skills for AI Coding Agents</title>
-    <meta name="description" content="Portable, reusable skills that work across Claude Code, Cursor, Codex, Windsurf, GitHub Copilot, and 12 more AI coding agents.">
+    <meta name="description" content="Write once, deploy to 32 AI coding agents. Skills for Claude Code, Cursor, Codex, Windsurf, GitHub Copilot, and more.">
 
     <!-- Open Graph -->
     <meta property="og:type" content="website">
-    <meta property="og:url" content="https://skillkit.dev/">
+    <meta property="og:url" content="https://agenstskills.com/">
     <meta property="og:title" content="SkillKit - Universal Skills for AI Coding Agents">
-    <meta property="og:description" content="Portable, reusable skills that work across Claude Code, Cursor, Codex, Windsurf, GitHub Copilot, and 12 more AI coding agents.">
-    <meta property="og:image" content="/og-image.png">
+    <meta property="og:description" content="Write once, deploy to 32 AI coding agents. Skills for Claude Code, Cursor, Codex, Windsurf, GitHub Copilot, and more.">
+    <meta property="og:image" content="https://agenstskills.com/og-image.png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:site_name" content="SkillKit">
 
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:url" content="https://agenstskills.com/">
     <meta name="twitter:title" content="SkillKit - Universal Skills for AI Coding Agents">
-    <meta name="twitter:description" content="Portable, reusable skills that work across Claude Code, Cursor, Codex, Windsurf, GitHub Copilot, and 12 more AI coding agents.">
-    <meta name="twitter:image" content="/og-image.png">
+    <meta name="twitter:description" content="Write once, deploy to 32 AI coding agents. Skills for Claude Code, Cursor, Codex, Windsurf, GitHub Copilot, and more.">
+    <meta name="twitter:image" content="https://agenstskills.com/og-image.png">
 
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />