feat: add live GitHub stars CTA and redesign README banner (#46)

* feat: add live GitHub stars CTA and redesign README banner

- Add live star count to navbar with star icon and bordered button
- Add GitHub Star CTA button in hero with live count from GitHub API
- Update description to "open source package manager"
- Replace plain ASCII README header with SVG banner
- Fix video visibility with clickable thumbnail fallback
- Add GitHub stars badge to README badges row

* fix: reduce gap between install and star buttons

* fix: remove broken placeholder URL from README video section

Author: rohitg00

README.md

@@ -1,34 +1,56 @@
 <div align="center">
 
-```
-██ SKILLKIT
-```
-</div>
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/img/banner.svg">
+  <source media="(prefers-color-scheme: light)" srcset="docs/img/banner.svg">
+  <img alt="SkillKit - One Skill. 32 Agents." src="docs/img/banner.svg" width="100%">
+</picture>
 
-**Universal Skills for AI Coding Agents**
+<br/>
 
-[![npm version](https://img.shields.io/npm/v/skillkit.svg)](https://www.npmjs.com/package/skillkit)
-[![npm downloads](https://img.shields.io/npm/dm/skillkit.svg)](https://www.npmjs.com/package/skillkit)
+[![npm version](https://img.shields.io/npm/v/skillkit.svg?style=flat-square)](https://www.npmjs.com/package/skillkit)
+[![npm downloads](https://img.shields.io/npm/dm/skillkit.svg?style=flat-square)](https://www.npmjs.com/package/skillkit)
+[![GitHub stars](https://img.shields.io/github/stars/rohitg00/skillkit?style=flat-square)](https://github.com/rohitg00/skillkit/stargazers)
 [![CI](https://github.com/rohitg00/skillkit/actions/workflows/ci.yml/badge.svg)](https://github.com/rohitg00/skillkit/actions/workflows/ci.yml)
-[![Website](https://img.shields.io/badge/Website-agenstskills.com-black)](https://agenstskills.com)
-[![Docs](https://img.shields.io/badge/Docs-agenstskills.com/docs-blue)](https://agenstskills.com/docs)
-[![API](https://img.shields.io/badge/API-agenstskills.com/api-green)](https://agenstskills.com/api)
-[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
-[![SKILL.md](https://img.shields.io/badge/SKILL.md-compatible-black?style=flat-square)](https://agenstskills.com)
+[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg?style=flat-square)](https://opensource.org/licenses/Apache-2.0)
+[![Website](https://img.shields.io/badge/agenstskills.com-black?style=flat-square&logo=vercel)](https://agenstskills.com)
+[![Docs](https://img.shields.io/badge/Docs-blue?style=flat-square&logo=readthedocs&logoColor=white)](https://agenstskills.com/docs)
+[![API](https://img.shields.io/badge/API-green?style=flat-square&logo=swagger&logoColor=white)](https://agenstskills.com/api)
 
-Skills make AI coding agents smarter. But every agent uses a different format — Claude Code wants `.claude/skills/`, Cursor uses `.mdc`, Copilot expects `.github/skills/`. You end up rewriting the same skill for each agent, or locking into one platform.
+**Write a skill once, deploy it to all 32 agents. No rewrites.**
 
-SkillKit fixes this. Write a skill once, deploy it to all 32 agents.
+[Website](https://agenstskills.com) &middot; [Docs](https://agenstskills.com/docs) &middot; [API](https://agenstskills.com/api) &middot; [npm](https://www.npmjs.com/package/skillkit)
+
+</div>
+
+---
+
+Skills make AI coding agents smarter. But every agent uses a different format:
+
+| Agent | Format | Directory |
+|-------|--------|-----------|
+| Claude Code | `SKILL.md` | `.claude/skills/` |
+| Cursor | `.mdc` | `.cursor/skills/` |
+| Copilot | Markdown | `.github/skills/` |
+| Windsurf | Markdown | `.windsurf/skills/` |
+
+You end up rewriting the same skill for each agent, or locking into one platform.
+
+**SkillKit fixes this.** Install from 15,000+ skills, auto-translate between formats, persist learnings with Memory. Works with Claude, Cursor, Windsurf, Copilot, and 28 more.
 
 ```bash
 npx skillkit@latest
 ```
 
 ## See It In Action
 
-<video src="https://raw.githubusercontent.com/rohitg00/skillkit/main/docs/video/skillkit.mp4" controls width="100%"></video>
+<div align="center">
+
+[![Watch the demo](docs/img/inital-command.png)](https://raw.githubusercontent.com/rohitg00/skillkit/main/docs/video/skillkit.mp4)
 
-> If the video doesn't play above, [watch it here](https://raw.githubusercontent.com/rohitg00/skillkit/main/docs/video/skillkit.mp4)
+*Click the image above to watch the full demo*
+
+</div>
 
 ## Quick Start
 
@@ -105,7 +127,7 @@ async with SkillKitClient() as client:
     results = await client.search("react performance", limit=5)
 ```
 
-[REST API docs](https://agenstskills.com/docs/rest-api) · [MCP Server docs](https://agenstskills.com/docs/mcp-server) · [Python Client docs](https://agenstskills.com/docs/python-client) · [Interactive API explorer](https://agenstskills.com/api)
+[REST API docs](https://agenstskills.com/docs/rest-api) &middot; [MCP Server docs](https://agenstskills.com/docs/mcp-server) &middot; [Python Client docs](https://agenstskills.com/docs/python-client) &middot; [Interactive API explorer](https://agenstskills.com/api)
 
 ### Auto-generate agent instructions
 
@@ -167,7 +189,7 @@ Team members run `skillkit manifest install` and they're in sync.
 skillkit ui
 ```
 
-`h` Home · `m` Marketplace · `r` Recommend · `t` Translate · `i` Installed · `s` Sync · `q` Quit
+`h` Home &middot; `m` Marketplace &middot; `r` Recommend &middot; `t` Translate &middot; `i` Installed &middot; `s` Sync &middot; `q` Quit
 
 ![SkillKit Interactive CLI](docs/img/inital-command.png)
 
@@ -292,7 +314,7 @@ SkillKit aggregates skills from trusted sources. All original creators are credi
 
 ### Community
 
-[trailofbits/skills](https://github.com/trailofbits/skills) · [obra/superpowers](https://github.com/obra/superpowers) · [wshobson/agents](https://github.com/wshobson/agents) · [ComposioHQ/awesome-claude-skills](https://github.com/ComposioHQ/awesome-claude-skills) · [travisvn/awesome-claude-skills](https://github.com/travisvn/awesome-claude-skills) · [langgenius/dify](https://github.com/langgenius/dify) · [better-auth/skills](https://github.com/better-auth/skills) · [onmax/nuxt-skills](https://github.com/onmax/nuxt-skills) · [elysiajs/skills](https://github.com/elysiajs/skills) · [kadajett/agent-nestjs-skills](https://github.com/kadajett/agent-nestjs-skills) · [cloudai-x/threejs-skills](https://github.com/cloudai-x/threejs-skills) · [dimillian/skills](https://github.com/dimillian/skills) · [waynesutton/convexskills](https://github.com/waynesutton/convexskills) · [kepano/obsidian-skills](https://github.com/kepano/obsidian-skills) · [giuseppe-trisciuoglio/developer-kit](https://github.com/giuseppe-trisciuoglio/developer-kit) · [openrouterteam/agent-skills](https://github.com/openrouterteam/agent-skills)
+[trailofbits/skills](https://github.com/trailofbits/skills) &middot; [obra/superpowers](https://github.com/obra/superpowers) &middot; [wshobson/agents](https://github.com/wshobson/agents) &middot; [ComposioHQ/awesome-claude-skills](https://github.com/ComposioHQ/awesome-claude-skills) &middot; [travisvn/awesome-claude-skills](https://github.com/travisvn/awesome-claude-skills) &middot; [langgenius/dify](https://github.com/langgenius/dify) &middot; [better-auth/skills](https://github.com/better-auth/skills) &middot; [onmax/nuxt-skills](https://github.com/onmax/nuxt-skills) &middot; [elysiajs/skills](https://github.com/elysiajs/skills) &middot; [kadajett/agent-nestjs-skills](https://github.com/kadajett/agent-nestjs-skills) &middot; [cloudai-x/threejs-skills](https://github.com/cloudai-x/threejs-skills) &middot; [dimillian/skills](https://github.com/dimillian/skills) &middot; [waynesutton/convexskills](https://github.com/waynesutton/convexskills) &middot; [kepano/obsidian-skills](https://github.com/kepano/obsidian-skills) &middot; [giuseppe-trisciuoglio/developer-kit](https://github.com/giuseppe-trisciuoglio/developer-kit) &middot; [openrouterteam/agent-skills](https://github.com/openrouterteam/agent-skills)
 
 **Want to add your skills?** [Submit your repository](https://github.com/rohitg00/skillkit/issues/new?template=add-source.md)
 
@@ -312,4 +334,4 @@ Apache License 2.0 — see [LICENSE](LICENSE).
 
 ## Links
 
-[Documentation](https://agenstskills.com/docs) · [Website](https://agenstskills.com) · [API Explorer](https://agenstskills.com/api) · [npm](https://www.npmjs.com/package/skillkit) · [GitHub](https://github.com/rohitg00/skillkit)
+[Documentation](https://agenstskills.com/docs) &middot; [Website](https://agenstskills.com) &middot; [API Explorer](https://agenstskills.com/api) &middot; [npm](https://www.npmjs.com/package/skillkit) &middot; [GitHub](https://github.com/rohitg00/skillkit)

docs/img/banner.svg

@@ -43,7 +43,7 @@ export default function App(): React.ReactElement {
     <div className="min-h-screen text-zinc-100 font-sans selection:bg-white selection:text-black" style={{ backgroundColor: '#000000' }}>
       <nav className="fixed top-0 left-0 right-0 z-50 border-b border-zinc-800 backdrop-blur-md" style={{ backgroundColor: 'rgba(0,0,0,0.9)' }}>
         <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
-          <div className="flex h-14 items-center justify-between">
+          <div className="flex h-14 items-center justify-between gap-2">
             <a href="#" onClick={scrollToTop} className="flex items-center gap-2 cursor-pointer">
               <div className="w-4 h-4 bg-white"></div>
               <span className="text-base font-bold tracking-tight text-white font-mono">SKILLKIT</span>
@@ -116,18 +116,22 @@ export default function App(): React.ReactElement {
                 href="https://github.com/rohitg00/skillkit"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-zinc-400 hover:text-white transition-colors p-1"
-                aria-label="GitHub"
+                className="inline-flex items-center gap-1.5 border border-zinc-700 hover:border-zinc-500 px-2 py-1 transition-colors group"
+                aria-label="GitHub Stars"
               >
                 {GITHUB_ICON}
+                <svg className="w-3.5 h-3.5 text-zinc-500 group-hover:text-yellow-500 transition-colors" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <span className="text-xs font-mono text-zinc-400 group-hover:text-white transition-colors">{stats.stars}</span>
               </a>
             </div>
           </div>
         </div>
       </nav>
 
       <main className="pt-14">
-        <Hero version={stats.version} />
+        <Hero version={stats.version} stars={stats.stars} />
 
         <div className="border-b border-zinc-800/50 py-2.5" style={{ background: 'linear-gradient(to bottom, rgba(9,9,11,0.95), rgba(0,0,0,1))' }}>
           <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">

docs/skillkit/App.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Button } from './Button';
 
 interface HeroProps {
   version: string;
+  stars?: number;
 }
 
 const ASCII_LOGO = `
@@ -58,7 +58,7 @@ const COPY_ICON = (
   </svg>
 );
 
-export function Hero({ version }: HeroProps): React.ReactElement {
+export function Hero({ version, stars }: HeroProps): React.ReactElement {
   const [copied, setCopied] = useState(false);
   const [visibleLines, setVisibleLines] = useState(0);
   const [typingIndex, setTypingIndex] = useState(0);
@@ -138,12 +138,12 @@ export function Hero({ version }: HeroProps): React.ReactElement {
             </h1>
 
             <p className="text-sm text-zinc-400 mb-5 max-w-lg font-mono leading-relaxed">
-              The package manager for AI agent skills. Install from 15,000+ skills,
+              The open source package manager for AI agent skills. Install from 15,000+ skills,
               auto-translate between formats, persist learnings with Memory.
               Works with Claude, Cursor, Windsurf, Copilot, and 28 more.
             </p>
 
-            <div className="flex flex-wrap items-center gap-3 mb-4">
+            <div className="flex flex-wrap items-center gap-2 mb-4">
               <button
                 onClick={copyInstall}
                 className="inline-flex items-center bg-black border border-zinc-700 px-3 py-2 hover:border-zinc-500 transition-colors"
@@ -161,9 +161,24 @@ export function Hero({ version }: HeroProps): React.ReactElement {
                   )}
                 </span>
               </button>
-              <Button variant="outline" onClick={openGitHub}>
-                GITHUB
-              </Button>
+              <button
+                onClick={openGitHub}
+                className="inline-flex items-center gap-2 border border-zinc-700 px-3 py-2 hover:border-zinc-500 transition-colors group"
+              >
+                <svg className="w-4 h-4 text-zinc-400 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
+                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                </svg>
+                <span className="font-mono text-sm text-zinc-300 group-hover:text-white transition-colors">Star</span>
+                {typeof stars === 'number' && (
+                  <>
+                    <span className="w-px h-4 bg-zinc-700"></span>
+                    <svg className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                    </svg>
+                    <span className="font-mono text-sm text-white font-medium">{stars}</span>
+                  </>
+                )}
+              </button>
             </div>
           </div>