Compare two or more npm packages side by side using live data — downloads, bundle size, GitHub stars, last update, known vulnerabilities, and community sentiment.
Install the "npm-package-comparator" agent skill from https://github.com/tinyfish-io/tinyfish-cookbook/tree/main/skills/npm-package-comparator into .claude/skills/npm-package-comparator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "npm-package-comparator", then confirm the skill loads.
Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
skills CLI
$ npx skills add tinyfish-io/tinyfish-cookbook --skill npm-package-comparator -a codex
Project install goes to .agents/skills/; add -g for ~/.codex/skills/.
Install the "npm-package-comparator" agent skill from https://github.com/tinyfish-io/tinyfish-cookbook/tree/main/skills/npm-package-comparator into .agents/skills/npm-package-comparator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "npm-package-comparator", then confirm the skill loads.
Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add tinyfish-io/tinyfish-cookbook --skill npm-package-comparator -a cursor
Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.
Install the "npm-package-comparator" agent skill from https://github.com/tinyfish-io/tinyfish-cookbook/tree/main/skills/npm-package-comparator into .cursor/skills/npm-package-comparator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "npm-package-comparator", then confirm the skill loads.
Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
skills CLI
$ npx skills add tinyfish-io/tinyfish-cookbook --skill npm-package-comparator -a gemini-cli
Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.
Install the "npm-package-comparator" agent skill from https://github.com/tinyfish-io/tinyfish-cookbook/tree/main/skills/npm-package-comparator into .gemini/skills/npm-package-comparator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "npm-package-comparator", then confirm the skill loads.
Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
skills CLI
$ npx skills add tinyfish-io/tinyfish-cookbook --skill npm-package-comparator -a github-copilot
Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.
Install the "npm-package-comparator" agent skill from https://github.com/tinyfish-io/tinyfish-cookbook/tree/main/skills/npm-package-comparator into .github/skills/npm-package-comparator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "npm-package-comparator", then confirm the skill loads.
GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add tinyfish-io/tinyfish-cookbook --skill npm-package-comparator -a opencode
OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
Install the "npm-package-comparator" agent skill from https://github.com/tinyfish-io/tinyfish-cookbook/tree/main/skills/npm-package-comparator into .opencode/skills/npm-package-comparator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "npm-package-comparator", then confirm the skill loads.
OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
Skill name
npm-package-comparator
GitHub stars
2.2k
Token cost
~2k tokens
SKILL.md length
369 words
Files
1
Skills in repo
28
Repo updated
First seen
Licence
MIT
At a glance
Compare two or more npm packages side by side using live data — downloads, bundle size, GitHub stars, last update, known vulnerabilities, and community sentiment.
Works in 3 steps: Gather inputs → Parallel data fetch → Synthesize comparison
A user asks zustand vs jotai vs redux
SKILL.md covers Pre-flight Check (REQUIRED), Step 1 — Gather inputs, Step 2 — Parallel data fetch and Step 3 — Synthesize comparison, plus 1 more section
Calls npm; reaches github.com and npmjs.com
What it does
npm Package Comparator is an agent skill from tinyfish-io/tinyfish-cookbook. Compare two or more npm packages side by side using live data — downloads, bundle size, GitHub stars, last update, known vulnerabilities, and community sentiment. Use this skill when a user asks "zustand vs jotai vs redux", "compare react-query and swr", "which state management library should I use", "what's the difference between X and Y", "is X better than Y for my use case", "help me choose between these packages", or any request to compare npm packages or decide between JavaScript libraries.
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering State management and Web performance. It works with npm, GitHub, Zustand and Redux. The repository describes itself as: A collection of sample apps and recipes built with the TinyFish web agent. Open-source examples for you to learn & build! The licence is MIT.
When your agent uses it
A user asks zustand vs jotai vs redux
Compare react-query and swr
Which state management library should I use
Whats the difference between X and Y
Example prompts
“zustand vs jotai vs redux”
“compare react-query and swr”
“which state management library should I use”
“/npm-package-comparator”
Requirements
Node.js
Workflow steps
3 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 292ee62. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
github.com
npmjs.com
bundlephobia.com
security.snyk.io
Also links to:
agent.tinyfish.ai
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
npm Package Comparator loads about 2k tokens when it runs. Until then it costs about 131 tokens; SKILL.md has 369 words of instructions outside code blocks.
Always· name and description, kept in context so the agent knows when to use it
~131
When it runs· the whole SKILL.md, loaded when a task matches
~2k
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
Download SKILL.mdSave it as .claude/skills/npm-package-comparator/SKILL.md (or your agent's skills folder).
name
npm-package-comparator
description
Compare two or more npm packages side by side using live data — downloads, bundle size, GitHub stars, last update, known vulnerabilities, and community sentiment. Use this skill when a user asks "zustand vs jotai vs redux", "compare react-query and swr", "which state management library should I use", "what's the difference between X and Y", "is X better than Y for my use case", "help me choose between these packages", or any request to compare npm packages or decide between JavaScript libraries.
npm Package Comparator
Compare any set of npm packages side by side using live data from npm, GitHub, Bundlephobia, and Snyk — then give a clear recommendation based on what you actually need.
Pre-flight Check (REQUIRED)
Before making any TinyFish call, always run BOTH checks:
1. CLI installed?
bash
which tinyfish && tinyfish --version || echo "TINYFISH_CLI_NOT_INSTALLED"
If not installed, stop and tell the user:
Install the TinyFish CLI: npm install -g @tiny-fish/cli
Package names — 2 to 4 packages to compare (e.g. zustand, jotai, redux)
Use case (optional but improves recommendation) — e.g. "small React app", "large enterprise codebase", "need SSR support"
If the user hasn't specified a use case, ask:
"What are you building with it? (e.g. small side project, large team codebase, performance-critical app)"
If they don't know, proceed without it and give a general recommendation.
Step 2 — Parallel data fetch
For each package, fire agents across npm, GitHub, Bundlephobia, and Snyk simultaneously. Run ALL agents for ALL packages in parallel — one agent per package per source.
bash
# ── For each PACKAGE, run all 4 agents in parallel ───────────
# npm stats
tinyfish agent run \
--url "https://www.npmjs.com/package/{PACKAGE}" \
"You are on the npm page for the package {PACKAGE}.
Extract:
- current version
- weekly downloads (exact number shown)
- total downloads if shown
- last publish date
- license
- number of dependencies
- TypeScript support (yes/no — check if types are listed)
- maintainers count
- repository URL
STRICT RULES:
- Do NOT click any links
- Read only what is visible on this page
- If a field is not shown, return null
Return JSON: {package, version, weekly_downloads, last_published, license, dependency_count, typescript_support, maintainer_count, repo_url}" \
--sync > /tmp/npm_{PACKAGE_SAFE}.json &
# GitHub stats
tinyfish agent run \
--url "https://github.com/{OWNER}/{REPO}" \
"You are on the GitHub repository page for {PACKAGE}.
Extract:
- star count
- fork count
- open issues count
- last commit date
- number of contributors (from sidebar or Insights)
- latest release tag and date
- whether the repo is actively maintained (check: last commit within 6 months)
STRICT RULES:
- Do NOT click any tabs or links
- Read only what is visible on the main repo page
Return JSON: {package, stars, forks, open_issues, last_commit, contributors, latest_release, latest_release_date, is_active}" \
--sync > /tmp/gh_{PACKAGE_SAFE}.json &
# Bundle size
tinyfish agent run \
--url "https://bundlephobia.com/package/{PACKAGE}" \
"You are on the Bundlephobia page for {PACKAGE}.
Extract:
- minified size (in KB)
- minified + gzipped size (in KB)
- download time on slow 3G (if shown)
- tree-shakeable (yes/no)
- side-effect free (yes/no)
STRICT RULES:
- Do NOT click any links
- Read only what is visible on this page
- If the page hasn't loaded sizes yet, note it
Return JSON: {package, minified_kb, gzipped_kb, tree_shakeable, side_effect_free}" \
--sync > /tmp/bp_{PACKAGE_SAFE}.json &
# Known vulnerabilities
tinyfish agent run \
--url "https://security.snyk.io/package/npm/{PACKAGE}" \
"You are on the Snyk security page for the npm package {PACKAGE}.
Extract:
- total number of known vulnerabilities
- number by severity: critical, high, medium, low
- most recent vulnerability title and date (if shown)
STRICT RULES:
- Do NOT click any vulnerability links
- Read only the summary visible on this page
- If the page shows 'no vulnerabilities', return {total: 0}
Return JSON: {package, total_vulns, critical, high, medium, low, latest_vuln_title, latest_vuln_date}" \
--sync > /tmp/snyk_{PACKAGE_SAFE}.json &
# Repeat the above 4 agents for each additional package
# All backgrounded with & — fire everything at once then:
wait
# Collect all results
for p in {PACKAGE_LIST}; do
echo "=== $p ==="
cat /tmp/npm_${p}.json
cat /tmp/gh_${p}.json
cat /tmp/bp_${p}.json
cat /tmp/snyk_${p}.json
done
Before running, replace:
{PACKAGE} — exact npm package name e.g. zustand
{PACKAGE_SAFE} — safe filename version e.g. zustand
{OWNER}/{REPO} — GitHub repo e.g. pmndrs/zustand
{PACKAGE_LIST} — space-separated list of all packages
Use your knowledge to find the correct GitHub repo for well-known packages. For unknown packages, check the repository field on their npm page first.
Show full SKILL.md (122 more words)Show less
Step 3 — Synthesize comparison
Combine all data into a side-by-side comparison.
## Package Comparison: {PACKAGE_1} vs {PACKAGE_2} vs ...
*Data fetched live — {date}*
---
### 📊 At a Glance
| | {pkg1} | {pkg2} | {pkg3} |
|---|---|---|---|
| **Version** | {v} | {v} | {v} |
| **Weekly Downloads** | {n} | {n} | {n} |
| **GitHub Stars** | {n} | {n} | {n} |
| **Bundle (gzipped)** | {n}kb | {n}kb | {n}kb |
| **Tree-shakeable** | ✅/❌ | ✅/❌ | ✅/❌ |
| **TypeScript** | ✅/❌ | ✅/❌ | ✅/❌ |
| **Last Published** | {date} | {date} | {date} |
| **Known Vulns** | {n} | {n} | {n} |
| **License** | {l} | {l} | {l} |
---
### 📈 Popularity & Health
{2-3 sentences comparing download trends, GitHub activity, and community size}
---
### 📦 Bundle Size
{Comparison of bundle impact — important for frontend packages}
{Flag if any package is significantly larger than alternatives}
---
### 🔒 Security
{Note any packages with known vulnerabilities}
{If all clean: "No known vulnerabilities found for any of these packages."}
---
### ⚙️ Maintenance
{Compare last commit dates, contributor counts, release cadence}
{Flag any package that looks abandoned (no commits in 12+ months)}
---
### 🎯 Recommendation
{Use case}: {user's stated use case or "general use"}
**Best pick: {PACKAGE}**
{2-3 sentences explaining why this package wins for this use case, and what trade-offs you're making}
**When to pick {PACKAGE_2} instead:**
{1-2 sentences on when the runner-up is the better choice}
**Avoid {PACKAGE_3} if:**
{Any specific reasons to avoid a package in certain contexts}
Edge Cases
Package not on npm — check if it's a GitHub-only package and scrape the repo directly
Bundlephobia doesn't have it — note "bundle size unavailable" and skip that row
GitHub repo not found from npm page — search https://github.com/search?q={PACKAGE}&type=repositories to find the canonical repo
One of the packages is deprecated — flag it clearly at the top of the comparison: "⚠️ {package} is deprecated — the maintainers recommend {replacement}"
Comparing more than 4 packages — ask the user to narrow to their top 3, as more becomes hard to compare meaningfully
Packages serve slightly different purposes — note the distinction upfront before comparing (e.g. "react-query handles server state, zustand handles client state — you may actually need both")
npm Package Comparator next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
npm Package Comparator compared with similar skills
Skill
Stars
Used in
Tokens
Auto-check
Licence
Repo updated
npm Package Comparator this skilltinyfish-io/tinyfish-cookbook
Builds React 19 components in TypeScript with Server Components, useActionState forms, custom hooks and state libraries, checked with tsc and React Testing Library.
A skill your agent uses when making architecture-level React decisions — component decomposition, choosing where state should live, selecting a state manager (Context vs Redux vs Zustand) or a…
A skill your agent uses when reviewing state management architecture — classifying state types (server/URL/form/UI), checking for over-globalization, Jotai/Zustand/Redux patterns, derived state, and…
Default browser automation agent — click, fill forms, navigate, log in, and extract structured data from any website using a natural-language goal, or run the same task across multiple sites in…
Reverse-engineer what a company is building by scraping their job postings, careers page, LinkedIn Jobs, and engineering blog using TinyFish web agents.
Check every dependency in a package.json against live CVE databases and security advisories in real time — specifically targeting vulnerabilities disclosed in the last 48 hours, the window that…
Compare two or more npm packages side by side using live data — downloads, bundle size, GitHub stars, last update, known vulnerabilities, and community sentiment. npm Package Comparator is an agent skill from tinyfish-io/tinyfish-cookbook. Compare two or more npm packages side by side using live data — downloads, bundle size, GitHub stars, last update, known vulnerabilities, and community sentiment.
When should I use npm Package Comparator?
npm Package Comparator fits situations like: A user asks zustand vs jotai vs redux; compare react-query and swr; which state management library should I use; whats the difference between X and Y.
How do I install npm Package Comparator in Claude Code?
Run `npx skills add tinyfish-io/tinyfish-cookbook --skill npm-package-comparator -a claude-code`. Or copy the skill folder (skills/npm-package-comparator in tinyfish-io/tinyfish-cookbook) into .claude/skills/npm-package-comparator in your project. Claude Code loads it when a task matches its description.
How do I install npm Package Comparator in Codex?
Run `npx skills add tinyfish-io/tinyfish-cookbook --skill npm-package-comparator -a codex`. Or copy the skill folder (skills/npm-package-comparator in tinyfish-io/tinyfish-cookbook) into .agents/skills/npm-package-comparator in your project. Codex loads it when a task matches its description.
Can I use npm Package Comparator in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tinyfish-io/tinyfish-cookbook --skill npm-package-comparator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/npm-package-comparator, .gemini/skills/npm-package-comparator, .github/skills/npm-package-comparator and .opencode/skills/npm-package-comparator in your project.
What does npm Package Comparator need to run?
Going by SKILL.md and its folder, npm Package Comparator needs the command-line tools its instructions call (npm). Our summary lists: Node.js.
Does npm Package Comparator access the network?
SKILL.md names 5 domains. In commands or code: github.com, npmjs.com, bundlephobia.com and security.snyk.io; the agent is likely to contact these when it follows the instructions. As links in the text: agent.tinyfish.ai. This is read from the text; nothing was executed.
Is npm Package Comparator safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does npm Package Comparator use?
npm Package Comparator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does npm Package Comparator use?
About 2k tokens (SKILL.md is roughly 7.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to npm Package Comparator?
Skills that share tags, products or a category with npm Package Comparator: React Expert (Jeffallan/claude-skills, 12k stars), Frontend (kid-sid/claude-spellbook, 189 stars), React State Management (involvex/youtube-music-cli, 456 stars) and Frontend Review State (mizchi/skills, 356 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains npm Package Comparator?
tinyfish-io (a GitHub organization) maintains it in tinyfish-io/tinyfish-cookbook, which has 2,223 GitHub stars. The repository holds 28 skills in this directory. The repository was last updated on October 1, 2026.
Source: tinyfish-io/tinyfish-cookbook on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
