/shieldcn-badges

name: shieldcn-badges
description: Create polished shieldcn README badges, badge groups, charts, headers, sponsors grids, and full README hero sections. Use when a user wants shadcn/ui-styled badges, Shields.io replacement, npm/GitHub/CI/status badges, download charts, README header banners, contributor/sponsor images, or README Studio guidance. Triggers include "add badges", "add shields", "README badges", "npm badge", "GitHub stars badge", "CI badge", "download chart", "README header", "README banner", "contributors grid", "sponsors grid", "build a README", "README Studio", "shieldcn", and requests to make a project README look better.
metadata:
  author: jal-co
  version: "1.0.0"

shieldcn Badges

Use [shieldcn](https://shieldcn.dev) 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.

Replace the existing Shields.io badges in this README with shieldcn equivalents.
Keep the same links where possible, remove stale or duplicate badges, and keep
the final row to 3-6 high-signal badges.

Migrate the existing Shields.io badges in this README to shieldcn, but undo any
split-style/two-tone badges. Use single-surface shieldcn badges instead: remove
split=true, labelColor, and other split-label styling unless a split badge is
explicitly needed for readability.

Create a compact shieldcn badge group for [owner/repo] with stars, license,
contributors, and last commit. Use one grouped image when that is cleaner than
separate badges.

Add release-quality README badges for a TypeScript library named [package]. I
want npm version, monthly downloads, license, types, GitHub stars, CI, and a
small branded static badge if it improves the visual hierarchy.

Headers and hero sections

Design the top of my README using shieldcn: add an adaptive header banner for
[project name], a one-sentence tagline, and a centered badge row. Use GitHub
<picture> markup so the header and badges adapt to light/dark mode.

Add a left-aligned shieldcn header to my README with title [title], subtitle
[subtitle], logo [simple-icons slug], and a graph/grid style that fits a
technical open-source project.

Charts and visual proof

Add a shieldcn npm download chart for [package] to the README. Use a concise
caption and choose chart dimensions that work well on GitHub mobile.

Add a shieldcn lifetime commit chart for [github username]. If multiple users
are listed, compare them in one chart and explain what the chart shows.

Bigger README work

Improve this README's above-the-fold impression with shieldcn. Keep the content
accurate, add a header, badges, and one chart only where they help, and avoid
visual clutter.

I want to generate a whole README visually. Point me to shieldcn README Studio
and explain which blocks I should use for this project.

Agent workflow

When this skill is loaded for a README/docs task:

1. Inspect the existing README and package metadata before editing. 2. Identify the project type: library, app, CLI, docs site, template, or skill. 3. Choose only high-signal badges. Default to 3-6 badges above the fold. 4. Use real values for `owner`, `repo`, package names, workflow names, and links. 5. Prefer SVG for Markdown images. Use PNG only when the target host blocks SVG. 6. Make badges clickable with `<a>` wrappers when they represent an external page. 7. Use `<p align="center">` for centered rows in GitHub READMEs. 8. Use GitHub `<picture>` markup when a header/chart/badge needs explicit light and dark URLs. 9. Avoid leaving placeholders in the user's README. Placeholders are fine only in examples or drafts. 10. If the user wants a full README rather than a few assets, suggest README Studio at `https://shieldcn.dev/studio`.

URL basics

https://shieldcn.dev/{provider}/{...params}.svg          SVG badge/image
https://shieldcn.dev/{provider}/{...params}.png          PNG badge/image
https://shieldcn.dev/{provider}/{...params}.json         raw resolved data
https://shieldcn.dev/{provider}/{...params}/shields.json Shields.io-compatible JSON

Markdown patterns:

[![alt](https://shieldcn.dev/{provider}/{params}.svg)](https://link)

![alt](https://shieldcn.dev/{provider}/{params}.svg)

Adaptive GitHub pattern:

<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/header/graph.svg?title=Acme&subtitle=Build+faster&logo=react&mode=dark" />
    <img alt="Acme" src="https://shieldcn.dev/header/graph.svg?title=Acme&subtitle=Build+faster&logo=react&mode=light" />
  </picture>
</p>

Common badge endpoints

GitHub

Both route styles work: `/github/{topic}/{owner}/{repo}` and `/github/{owner}/{repo}/{topic}`.

| Badge | Endpoint | Example | |---|---|---| | Stars | `/github/stars/{owner}/{repo}` | `/github/stars/vercel/