feat(website): add dynamic stats from npm and GitHub APIs

[rohitg00]

Summary

• Create useStats hook to fetch real-time version, downloads, and stars from npm and GitHub APIs
• Replace hardcoded values in App.tsx stats bar with dynamic data
• Replace hardcoded version in Hero.tsx badge with dynamic data
• Add 5-minute localStorage cache to reduce API calls
• Graceful fallback to default values if APIs fail

Changes

• New: docs/skillkit/hooks/useStats.ts - Custom React hook for fetching stats
• Modified: docs/skillkit/App.tsx - Use dynamic stats in stats bar
• Modified: docs/skillkit/components/Hero.tsx - Use dynamic version in badge

Test plan

• Verify version displays correctly from npm registry
• Verify downloads count displays correctly from npm API
• Verify stars count displays correctly from GitHub API
• Verify caching works (subsequent loads should be faster)
• Verify fallback works if APIs fail

---

Summary by CodeRabbit

Release Notes

• New Features
  • Version, download count, and star metrics are now dynamically fetched and displayed in real-time with local caching for improved performance.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
skillkit	Ready	Preview, Comment	Feb 2, 2026 5:37pm
skillkit-docs	Ready	Preview, Comment	Feb 2, 2026 5:37pm

[coderabbitai]

Warning

Rate limit exceeded

@rohitg00 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 41 minutes and 27 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

The changes introduce a new useStats hook that dynamically fetches version, downloads, and star metrics from npm and GitHub APIs with localStorage caching. The App and Hero components now use this hook to display real-time stats instead of hard-coded values.

Changes

Cohort / File(s)	Summary
New Hook Implementation docs/skillkit/hooks/useStats.ts	New React hook that fetches package version from npm registry, downloads from npm API, and stars from GitHub API. Implements localStorage caching with TTL, concurrent fetching via Promise.allSettled, and error resilience for cache operations.
Component Updates docs/skillkit/App.tsx, docs/skillkit/components/Hero.tsx	Both components now import and invoke useStats to replace static display values (version, downloads, stars) with dynamic hook data. UI rendering now depends on fetched stats instead of hard-coded literals.

Sequence Diagram

sequenceDiagram
    participant Component as App/Hero Component
    participant Hook as useStats Hook
    participant Cache as localStorage
    participant NPM as npm API
    participant GH as GitHub API
    
    Component->>Hook: Invoke useStats()
    Hook->>Cache: Check cached stats & TTL validity
    alt Cache valid
        Cache-->>Hook: Return cached stats
        Hook-->>Component: Return stats (loading: false)
    else Cache expired/missing
        Hook->>NPM: Fetch version (registry/skillkit/latest)
        Hook->>NPM: Fetch downloads (last-month)
        Hook->>GH: Fetch stargazers_count (repos/rohitg00/skillkit)
        par Concurrent requests
            NPM-->>Hook: version data
            NPM-->>Hook: downloads data
            GH-->>Hook: stars data
        end
        Hook->>Cache: Update cache with new stats
        Hook-->>Component: Return stats (loading: false)
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A hop through the code, what do I spy?
Dynamic stats reaching up to the sky,
No more hardcoded numbers so plain,
GitHub and npm dance in this refrain,
With cache to make loading quite spry! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding dynamic stats integration from npm and GitHub APIs to replace hardcoded values.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/dynamic-stats

---

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 found 3 potential issues.

View issues and 4 additional flags in Devin Review.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@docs/skillkit/hooks/useStats.ts`:
- Around line 81-92: The checks for API values use truthiness and drop valid
zeroes; update the logic in useStats where npmResponse and githubResponse are
handled so you explicitly check for null/undefined rather than truthiness: when
npmResponse is fulfilled and ok, verify npmData.downloads != null (or typeof
npmData.downloads === 'number') before calling formatDownloads and assigning
downloads; likewise when githubResponse is fulfilled and ok, check
githubData.stargazers_count != null (or typeof githubData.stargazers_count ===
'number') before assigning stars; reference the variables/functions npmResponse,
npmData.downloads, formatDownloads, githubResponse, githubData.stargazers_count,
downloads, and stars to locate and change the conditionals.

🧹 Nitpick comments (1)

docs/skillkit/components/Hero.tsx (1)

3-65: Avoid duplicate stats fetches by lifting useStats to App and passing props.

Both App and Hero invoke the hook, causing two concurrent API fetches on first load. Consider fetching once in App and passing the version into Hero.

♻️ Proposed refactor

-import { useStats } from '../hooks/useStats';
+interface HeroProps {
+  version: string;
+}

-export function Hero(): React.ReactElement {
+export function Hero({ version }: HeroProps): React.ReactElement {
   const [copied, setCopied] = useState(false);
   const [visibleLines, setVisibleLines] = useState(0);
   const [typingIndex, setTypingIndex] = useState(0);
   const [currentText, setCurrentText] = useState('');
-  const stats = useStats();

-              <span className="text-xs font-mono text-zinc-400">v{stats.version}</span>
+              <span className="text-xs font-mono text-zinc-400">v{version}</span>

-        <Hero />
+        <Hero version={stats.version} />

Also applies to: 129-132