Shieldcn Badges

If you're tired of shields.io badges looking out of place in your shadcn/ui projects, this gives you a drop-in alternative that matches the design system. It covers the usual suspects (npm, GitHub stars, CI status) plus some nice extras like skills.sh agent skill metrics, Bluesky followers, and bundlephobia size. The variant system means you can use default, secondary, outline, or branded styles, and split mode gives you the classic two-tone badge look. It's just URL construction, so Claude can drop these into your README without any setup. Works well when you're building a new project page or refreshing docs and want everything to feel cohesive.

skills.sh installs: 271
GitHub stars: 942
last updated: Jun 10, 2026

View on GitHub

Install

$ npx -y skills add jal-co/shieldcn --skill shieldcn-badges --agent claude-code

Installs into .claude/skills of the current project.

Files

shieldcn Badges

Use shieldcn to add beautiful shadcn/ui-styled badges, badge groups, charts, headers, sponsors grids, and contributor images to READMEs and docs.

Base URL: https://shieldcn.dev

Install this skill

Install from the shieldcn repository with the Skills CLI:

npx skills add jal-co/shieldcn

Useful variants:

# Install globally instead of only the current project
npx skills add jal-co/shieldcn --global

# Install for a specific agent supported by the Skills CLI
npx skills add jal-co/shieldcn --agent AGENT_NAME

# Use once without installing
npx skills use jal-co/shieldcn@shieldcn-badges

Verify installation:

npx skills list

What to ask your agent

Copy one of these prompts after installing the skill. Replace bracketed values with the real project details.

Great badge rows

Add a polished shieldcn badge row to my README for [owner/repo]. Include npm
version/downloads if this package is published as [package], GitHub stars,
license, CI status, and last commit. Center the row, make badges clickable, and
use a subtle shadcn style that works on GitHub light and dark themes.

SKILL.md on GitHub