Install the shieldcn agent skill to let AI coding agents add badges to your projects.
The shieldcn agent skill gives AI coding agents the knowledge to add beautiful shadcn/ui-styled badges to README files, docs, and markdown. It works with any agent that supports the Agent Skills specification — Claude Code, Cursor, Windsurf, Codex, and 40+ more.
npx skills add jal-co/shieldcnThis installs the shieldcn-badges skill to your coding agent.
npx skills add jal-co/shieldcn -a claude-codenpx skills add jal-co/shieldcn -a cursornpx skills add jal-co/shieldcn -gOnce installed, ask your coding agent to add badges. The skill triggers automatically for requests like:
Add npm and GitHub badges to the README.
Use size xs, the ghost variant, and make them work in both light and dark mode.Migrate the existing Shields.io badges in this README to shieldcn.
Undo any split-style/two-tone badges: use single-surface badges and remove split=true, labelColor, and split-label styling unless explicitly needed.Add a shieldcn npm downloads chart for this package below the intro.
Make it transparent, link it to the npm page, and keep it readable in both light and dark mode.Add a CI status badge for this repoAdd shieldcn badges to the docsSet up a badge row with stars, license, and versionThe agent knows all shieldcn providers, URL patterns, variants, and query parameters — no manual lookup needed.
<img> and <a> wrapping for GitHub READMEsAn agent using this skill might produce:
<p align="center">
<a href="https://www.npmjs.com/package/your-package"><img src="https://shieldcn.dev/npm/your-package.svg" alt="npm" /></a>
<a href="https://github.com/you/repo/stargazers"><img src="https://shieldcn.dev/github/stars/you/repo.svg" alt="stars" /></a>
<a href="https://github.com/you/repo"><img src="https://shieldcn.dev/github/license/you/repo.svg" alt="license" /></a>
</p>