{"id":"4fff0a1a-ca83-49b4-acb6-74dd0d7e79ac","shortId":"6BrUht","kind":"skill","title":"shieldcn-badges","tagline":"Add beautiful shadcn/ui-styled README badges to projects using shieldcn. Use when adding badges, shields, or status indicators to README files, docs, or markdown. Triggers include \"add badges\", \"add shields\", \"readme badges\", \"npm badge\", \"GitHub stars badge\", \"CI badge\", \"shield","description":"# shieldcn Badges\n\nAdd beautiful [shadcn/ui](https://ui.shadcn.com)-styled badges to READMEs and docs using [shieldcn](https://shieldcn.dev) — a free, open-source shields.io alternative.\n\nBase URL: `https://shieldcn.dev`\n\n## Badge URL format\n\n```\nhttps://shieldcn.dev/{provider}/{...params}.svg     → SVG (default, for READMEs)\nhttps://shieldcn.dev/{provider}/{...params}.png     → PNG\nhttps://shieldcn.dev/{provider}/{...params}.json    → raw data\n```\n\n## Markdown pattern\n\n```md\n[![alt](https://shieldcn.dev/{provider}/{params}.svg)](https://link)\n\n<!-- or without link -->\n![alt](https://shieldcn.dev/{provider}/{params}.svg)\n```\n\n## Providers & endpoints\n\n### Package registries\n\n| Provider | Endpoint | Example |\n|----------|----------|---------|\n| npm version | `/npm/{package}` | `/npm/react` |\n| npm version (tag) | `/npm/v/{package}/{tag}` | `/npm/v/next/canary` |\n| npm downloads/wk | `/npm/dw/{package}` | `/npm/dw/react` |\n| npm downloads/mo | `/npm/dm/{package}` | `/npm/dm/react` |\n| npm downloads/yr | `/npm/dy/{package}` | `/npm/dy/react` |\n| npm total downloads | `/npm/dt/{package}` | `/npm/dt/react` |\n| npm license | `/npm/license/{package}` | `/npm/license/react` |\n| npm types | `/npm/types/{package}` | `/npm/types/react` |\n| npm dependents | `/npm/dependents/{package}` | `/npm/dependents/react` |\n| npm scoped | `/npm/v/@scope/pkg` | `/npm/v/@types/node` |\n| PyPI version | `/pypi/{package}` | `/pypi/flask` |\n| PyPI downloads/mo | `/pypi/dm/{package}` | `/pypi/dm/flask` |\n| Crates.io version | `/crates/{crate}` | `/crates/serde` |\n| Docker Hub pulls | `/docker/pulls/{image}` | `/docker/pulls/library/nginx` |\n| JSR version | `/jsr/{@scope}/{name}` | `/jsr/@std/path` |\n| Bundlephobia minzip | `/bundlephobia/minzip/{package}` | `/bundlephobia/minzip/react` |\n| Homebrew version | `/homebrew/{formula}` | `/homebrew/node` |\n| Maven version | `/maven/{groupId}/{artifactId}` | `/maven/org.apache.maven/maven-core` |\n| Packagist version | `/packagist/v/{vendor}/{package}` | `/packagist/v/laravel/framework` |\n| RubyGems version | `/rubygems/{gem}` | `/rubygems/rails` |\n| NuGet version | `/nuget/{package}` | `/nuget/Newtonsoft.Json` |\n| Pub.dev version | `/pub/{package}` | `/pub/flutter` |\n| CocoaPods version | `/cocoapods/{pod}` | `/cocoapods/Alamofire` |\n\n### GitHub\n\nBoth formats work: `/github/{topic}/{owner}/{repo}` or `/github/{owner}/{repo}/{topic}`\n\n| Badge | Endpoint | Example |\n|-------|----------|---------|\n| Stars | `/github/stars/{owner}/{repo}` | `/github/stars/vercel/next.js` |\n| Forks | `/github/forks/{owner}/{repo}` | `/github/forks/vercel/next.js` |\n| License | `/github/license/{owner}/{repo}` | `/github/license/vercel/next.js` |\n| Release | `/github/release/{owner}/{repo}` | `/github/release/vercel/next.js` |\n| CI status | `/github/ci/{owner}/{repo}` | `/github/ci/vercel/next.js` |\n| Issues | `/github/issues/{owner}/{repo}` | `/github/issues/vercel/next.js` |\n| Open PRs | `/github/open-prs/{owner}/{repo}` | `/github/open-prs/vercel/next.js` |\n| Contributors | `/github/contributors/{owner}/{repo}` | `/github/contributors/vercel/next.js` |\n| Last commit | `/github/last-commit/{owner}/{repo}` | `/github/last-commit/vercel/next.js` |\n| Watchers | `/github/watchers/{owner}/{repo}` | `/github/watchers/vercel/next.js` |\n| Downloads | `/github/dt/{owner}/{repo}` | `/github/dt/vercel/next.js` |\n| Dependabot | `/github/dependabot/{owner}/{repo}` | `/github/dependabot/vercel/next.js` |\n\nCI supports `?workflow=name&branch=main` query params.\n\n### Social\n\n| Provider | Endpoint | Example |\n|----------|----------|---------|\n| Discord online | `/discord/{serverId}` | `/discord/1316199667142496307` |\n| Discord by invite | `/discord/members/{inviteCode}` | `/discord/members/nextjs` |\n| Reddit subscribers | `/reddit/subscribers/r/{subreddit}` | `/reddit/subscribers/r/reactjs` |\n| Bluesky followers | `/bluesky/followers/{handle}` | `/bluesky/followers/bsky.app` |\n| YouTube subs | `/youtube/subscribers/{channelId}` | `/youtube/subscribers/UCxxxxxx` |\n| Mastodon followers | `/mastodon/followers/{instance}/{acct}` | `/mastodon/followers/mastodon.social/Gargron` |\n| Hacker News karma | `/hackernews/{userId}` | `/hackernews/pg` |\n\n### Code quality\n\n| Provider | Endpoint | Example |\n|----------|----------|---------|\n| Codecov | `/codecov/{service}/{owner}/{repo}` | `/codecov/gh/vercel/next.js` |\n| VS Code installs | `/vscode/installs/{publisher}/{ext}` | `/vscode/installs/esbenp/prettier-vscode` |\n| WakaTime | `/wakatime/{username}` | `/wakatime/@user` |\n\n### Custom badges\n\n| Type | Endpoint | Example |\n|------|----------|---------|\n| Static | `/badge/{label}-{message}-{color}` | `/badge/build-passing-brightgreen` |\n| Dynamic JSON | `/badge/dynamic/json?url=...&query=...` | Fetch any JSON API |\n| HTTPS endpoint | `/https/{hostname}/{path}` | Proxy any JSON endpoint |\n\n## Query parameters\n\nAppend to any badge URL as `?key=value&key2=value2`.\n\n| Param | Values | Default | Notes |\n|-------|--------|---------|-------|\n| `variant` | `default`, `secondary`, `outline`, `ghost`, `destructive`, `branded` | `default` | shadcn Button variant |\n| `size` | `xs`, `sm`, `default`, `lg` | `sm` | Badge size |\n| `mode` | `dark`, `light` | `dark` | Color mode |\n| `split` | `true`, `false` | `false` | Two-tone label/value split |\n| `logo` | SimpleIcons slug, `ri:Name`, `false` | auto | Icon source |\n| `logoColor` | hex (no `#`) | auto | Icon color |\n| `label` | string | auto | Override label text |\n| `color` | hex (no `#`) | — | Background color |\n| `labelColor` | hex (no `#`) | — | Label side bg (split mode) |\n| `theme` | `zinc`, `slate`, `blue`, `green`, `rose`, `orange`, `violet` | — | Color theme |\n| `font` | `inter`, `geist`, `geist-mono` | `inter` | Font family |\n| `statusDot` | `true`, `false` | auto for CI | Show status indicator dot |\n\n## Common recipes\n\n### Typical README badge row\n\n```md\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/{pkg}\"><img src=\"https://shieldcn.dev/npm/{pkg}.svg\" alt=\"npm\" /></a>\n  <a href=\"https://github.com/{owner}/{repo}/stargazers\"><img src=\"https://shieldcn.dev/github/stars/{owner}/{repo}.svg\" alt=\"stars\" /></a>\n  <a href=\"https://github.com/{owner}/{repo}\"><img src=\"https://shieldcn.dev/github/license/{owner}/{repo}.svg\" alt=\"license\" /></a>\n  <a href=\"https://github.com/{owner}/{repo}/actions\"><img src=\"https://shieldcn.dev/github/ci/{owner}/{repo}.svg\" alt=\"CI\" /></a>\n</p>\n```\n\n### Secondary variant (lighter)\n\n```md\n![badge](https://shieldcn.dev/npm/react.svg?variant=secondary)\n```\n\n### Branded variant (brand-colored bg)\n\n```md\n![badge](https://shieldcn.dev/npm/react.svg?variant=branded)\n```\n\n### Split badge (two-tone)\n\n```md\n![badge](https://shieldcn.dev/npm/react.svg?split=true)\n```\n\n### Light mode\n\n```md\n![badge](https://shieldcn.dev/npm/react.svg?mode=light)\n```\n\n### Custom icon\n\n```md\n![badge](https://shieldcn.dev/npm/react.svg?logo=typescript)\n![badge](https://shieldcn.dev/github/stars/owner/repo.svg?logo=ri:GoStarFill)\n```\n\n### No icon\n\n```md\n![badge](https://shieldcn.dev/npm/react.svg?logo=false)\n```\n\n## Rules\n\n1. Always use `.svg` for markdown images (best quality, smallest size)\n2. Use `<a>` wrapper to make badges clickable links\n3. Use `<p align=\"center\">` to center badge rows in GitHub READMEs\n4. Replace `{owner}`, `{repo}`, `{package}` with actual values — never leave placeholders\n5. Default variant (`default`) works on both light and dark GitHub themes\n6. Icons are auto-resolved per provider — only set `?logo=` to override\n7. For npm scoped packages, use the full scope: `/npm/v/@scope/package`\n8. Prefer `variant=secondary` for subtle badge rows\n9. Keep badge rows to 3–6 badges for readability\n10. Link each badge to its relevant page (npm registry, GitHub stars page, etc.)\n\n## Docs\n\nFull documentation: https://shieldcn.dev/docs\nAPI reference: https://shieldcn.dev/docs/api-reference\nBadge builder: https://shieldcn.dev (interactive UI)","tags":["shieldcn","badges","jal-co","agent-skills","badges-markdown","markdown","open-source","readme","readme-badges","shadcn-ui","shields","shields-io"],"capabilities":["skill","source-jal-co","skill-shieldcn-badges","topic-agent-skills","topic-badges","topic-badges-markdown","topic-markdown","topic-open-source","topic-readme","topic-readme-badges","topic-shadcn-ui","topic-shields","topic-shields-io","topic-shields-io-badges"],"categories":["shieldcn"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/jal-co/shieldcn/shieldcn-badges","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add jal-co/shieldcn","source_repo":"https://github.com/jal-co/shieldcn","install_from":"skills.sh"}},"qualityScore":"0.518","qualityRationale":"deterministic score 0.52 from registry signals: · indexed on github topic:agent-skills · 137 github stars · SKILL.md body (7,913 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:56:09.085Z","embedding":null,"createdAt":"2026-04-26T07:01:36.572Z","updatedAt":"2026-05-18T18:56:09.085Z","lastSeenAt":"2026-05-18T18:56:09.085Z","tsv":"'/badge':393 '/badge/build-passing-brightgreen':397 '/badge/dynamic/json':400 '/bluesky/followers':344 '/bluesky/followers/bsky.app':346 '/bundlephobia/minzip':195 '/bundlephobia/minzip/react':197 '/cocoapods':232 '/cocoapods/alamofire':234 '/codecov':370 '/codecov/gh/vercel/next.js':374 '/crates':177 '/crates/serde':179 '/discord':328 '/discord/1316199667142496307':330 '/discord/members':334 '/discord/members/nextjs':336 '/docker/pulls':183 '/docker/pulls/library/nginx':185 '/docs':703 '/docs/api-reference':708 '/github':239,244 '/github/ci':273 '/github/ci/vercel/next.js':276 '/github/contributors':289 '/github/contributors/vercel/next.js':292 '/github/dependabot':310 '/github/dependabot/vercel/next.js':313 '/github/dt':305 '/github/dt/vercel/next.js':308 '/github/forks':257 '/github/forks/vercel/next.js':260 '/github/issues':278 '/github/issues/vercel/next.js':281 '/github/last-commit':295 '/github/last-commit/vercel/next.js':298 '/github/license':262 '/github/license/vercel/next.js':265 '/github/open-prs':284 '/github/open-prs/vercel/next.js':287 '/github/release':267 '/github/release/vercel/next.js':270 '/github/stars':252 '/github/stars/owner/repo.svg?logo=ri:gostarfill)':582 '/github/stars/vercel/next.js':255 '/github/watchers':300 '/github/watchers/vercel/next.js':303 '/hackernews':361 '/hackernews/pg':363 '/homebrew':200 '/homebrew/node':202 '/https':409 '/jsr':188,191 '/mastodon/followers':354 '/mastodon/followers/mastodon.social/gargron':357 '/maven':205 '/maven/org.apache.maven/maven-core':208 '/npm':113 '/npm/dependents':156 '/npm/dependents/react':158 '/npm/dm':130 '/npm/dm/react':132 '/npm/dt':141 '/npm/dt/react':143 '/npm/dw':125 '/npm/dw/react':127 '/npm/dy':135 '/npm/dy/react':137 '/npm/license':146 '/npm/license/react':148 '/npm/react':115 '/npm/react.svg?logo=false)':589 '/npm/react.svg?logo=typescript)':578 '/npm/react.svg?mode=light)':571 '/npm/react.svg?split=true)':564 '/npm/react.svg?variant=branded)':554 '/npm/react.svg?variant=secondary)':543 '/npm/types':151 '/npm/types/react':153 '/npm/v':119,161,163,664 '/npm/v/next/canary':122 '/nuget':222 '/nuget/newtonsoft.json':224 '/packagist/v':211 '/packagist/v/laravel/framework':214 '/pub':227 '/pub/flutter':229 '/pypi':167 '/pypi/dm':172 '/pypi/dm/flask':174 '/pypi/flask':169 '/reddit/subscribers/r':339 '/reddit/subscribers/r/reactjs':341 '/rubygems':217 '/rubygems/rails':219 '/vscode/installs':378 '/vscode/installs/esbenp/prettier-vscode':381 '/wakatime':383,385 '/youtube/subscribers':349 '/youtube/subscribers/ucxxxxxx':351 '1':591 '10':684 '2':602 '3':610,679 '4':619 '5':630 '6':642,680 '7':655 '8':666 '9':674 'acct':356 'actual':625 'ad':15 'add':4,29,31,45 'alt':93,99 'altern':64 'alway':592 'api':406,704 'append':418 'artifactid':207 'auto':472,478,483,522,646 'auto-resolv':645 'background':490 'badg':3,8,16,30,34,36,39,41,44,50,68,248,388,421,449,533,540,551,556,561,568,575,579,586,607,614,672,676,681,687,709 'base':65 'beauti':5,46 'best':598 'bg':497,549 'blue':503 'blueski':342 'branch':318 'brand':438,544,547 'brand-color':546 'builder':710 'bundlephobia':193 'button':441 'center':613 'channelid':350 'ci':40,271,314,524 'clickabl':608 'cocoapod':230 'code':364,376 'codecov':369 'color':396,455,480,487,491,508,548 'commit':294 'common':529 'contributor':288 'crate':178 'crates.io':175 'custom':387,572 'dark':452,454,639 'data':89 'default':76,430,433,439,446,631,633 'depend':155 'dependabot':309 'destruct':437 'discord':326,331 'doc':24,54,698 'docker':180 'document':700 'dot':528 'download':140,304 'downloads/mo':129,171 'downloads/wk':124 'downloads/yr':134 'dynam':398 'endpoint':105,109,249,324,367,390,408,415 'etc':697 'exampl':110,250,325,368,391 'ext':380 'fals':459,460,471,521 'famili':518 'fetch':403 'file':23 'follow':343,353 'font':510,517 'fork':256 'format':70,237 'formula':201 'free':59 'full':662,699 'geist':512,514 'geist-mono':513 'gem':218 'ghost':436 'github':37,235,617,640,694 'green':504 'groupid':206 'hacker':358 'handl':345 'hex':476,488,493 'homebrew':198 'hostnam':410 'https':407 'hub':181 'icon':473,479,573,584,643 'imag':184,597 'includ':28 'indic':20,527 'instal':377 'instanc':355 'inter':511,516 'interact':712 'invit':333 'invitecod':335 'issu':277 'json':87,399,405,414 'jsr':186 'karma':360 'keep':675 'key':424 'key2':426 'label':394,481,485,495 'label/value':464 'labelcolor':492 'last':293 'leav':628 'lg':447 'licens':145,261 'light':453,565,637 'lighter':538 'link':98,609,685 'logo':466,652 'logocolor':475 'main':319 'make':606 'markdown':26,90,596 'mastodon':352 'maven':203 'md':92,535,539,550,560,567,574,585 'messag':395 'minzip':194 'mode':451,456,499,566 'mono':515 'name':190,317,470 'never':627 'news':359 'note':431 'npm':35,111,116,123,128,133,138,144,149,154,159,657,692 'nuget':220 'onlin':327 'open':61,282 'open-sourc':60 'orang':506 'outlin':435 'overrid':484,654 'owner':241,245,253,258,263,268,274,279,285,290,296,301,306,311,372,621 'packag':106,114,120,126,131,136,142,147,152,157,168,173,196,213,223,228,623,659 'packagist':209 'page':691,696 'param':73,81,86,96,102,321,428 'paramet':417 'path':411 'pattern':91 'per':648 'placehold':629 'png':82,83 'pod':233 'prefer':667 'project':10 'provid':72,80,85,95,101,104,108,323,366,649 'proxi':412 'prs':283 'pub.dev':225 'publish':379 'pull':182 'pypi':165,170 'qualiti':365,599 'queri':320,402,416 'raw':88 'readabl':683 'readm':7,22,33,52,78,532,618 'recip':530 'reddit':337 'refer':705 'registri':107,693 'releas':266 'relev':690 'replac':620 'repo':242,246,254,259,264,269,275,280,286,291,297,302,307,312,373,622 'resolv':647 'ri':469 'rose':505 'row':534,615,673,677 'rubygem':215 'rule':590 'scope':160,189,658,663 'scope/package':665 'scope/pkg':162 'secondari':434,536,669 'serverid':329 'servic':371 'set':651 'shadcn':440 'shadcn/ui':47 'shadcn/ui-styled':6 'shield':17,32,42 'shieldcn':2,12,43,56 'shieldcn-badg':1 'shieldcn.dev':57,67,71,79,84,94,100,542,553,563,570,577,581,588,702,707,711 'shieldcn.dev/docs':701 'shieldcn.dev/docs/api-reference':706 'shieldcn.dev/github/stars/owner/repo.svg?logo=ri:gostarfill)':580 'shieldcn.dev/npm/react.svg?logo=false)':587 'shieldcn.dev/npm/react.svg?logo=typescript)':576 'shieldcn.dev/npm/react.svg?mode=light)':569 'shieldcn.dev/npm/react.svg?split=true)':562 'shieldcn.dev/npm/react.svg?variant=branded)':552 'shieldcn.dev/npm/react.svg?variant=secondary)':541 'shields.io':63 'show':525 'side':496 'simpleicon':467 'size':443,450,601 'skill' 'skill-shieldcn-badges' 'slate':502 'slug':468 'sm':445,448 'smallest':600 'social':322 'sourc':62,474 'source-jal-co' 'split':457,465,498,555 'star':38,251,695 'static':392 'status':19,272,526 'statusdot':519 'std/path':192 'string':482 'style':49 'sub':348 'subreddit':340 'subscrib':338 'subtl':671 'support':315 'svg':74,75,97,103,594 'tag':118,121 'text':486 'theme':500,509,641 'tone':463,559 'topic':240,247 'topic-agent-skills' 'topic-badges' 'topic-badges-markdown' 'topic-markdown' 'topic-open-source' 'topic-readme' 'topic-readme-badges' 'topic-shadcn-ui' 'topic-shields' 'topic-shields-io' 'topic-shields-io-badges' 'total':139 'trigger':27 'true':458,520 'two':462,558 'two-ton':461,557 'type':150,389 'types/node':164 'typic':531 'ui':713 'ui.shadcn.com':48 'url':66,69,401,422 'use':11,13,55,593,603,611,660 'user':386 'userid':362 'usernam':384 'valu':425,429,626 'value2':427 'variant':432,442,537,545,632,668 'vendor':212 'version':112,117,166,176,187,199,204,210,216,221,226,231 'violet':507 'vs':375 'wakatim':382 'watcher':299 'work':238,634 'workflow':316 'wrapper':604 'xs':444 'youtub':347 'zinc':501","prices":[{"id":"71b01ce0-222d-420e-ad47-eb706c4070b9","listingId":"4fff0a1a-ca83-49b4-acb6-74dd0d7e79ac","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"jal-co","category":"shieldcn","install_from":"skills.sh"},"createdAt":"2026-04-26T07:01:36.572Z"}],"sources":[{"listingId":"4fff0a1a-ca83-49b4-acb6-74dd0d7e79ac","source":"github","sourceId":"jal-co/shieldcn/shieldcn-badges","sourceUrl":"https://github.com/jal-co/shieldcn/tree/main/skills/shieldcn-badges","isPrimary":false,"firstSeenAt":"2026-04-26T07:01:36.572Z","lastSeenAt":"2026-05-18T18:56:09.085Z"}],"details":{"listingId":"4fff0a1a-ca83-49b4-acb6-74dd0d7e79ac","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"jal-co","slug":"shieldcn-badges","github":{"repo":"jal-co/shieldcn","stars":137,"topics":["agent-skills","badges","badges-markdown","markdown","open-source","readme","readme-badges","shadcn-ui","shields","shields-io","shields-io-badges"],"license":"mit","html_url":"https://github.com/jal-co/shieldcn","pushed_at":"2026-05-08T00:08:23Z","description":"Beautiful README badges, inspired by shields.io and styled like shadcn/ui.","skill_md_sha":"0a33e8d4fc53197d6d861e6ac8a178df359244f1","skill_md_path":"skills/shieldcn-badges/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/jal-co/shieldcn/tree/main/skills/shieldcn-badges"},"layout":"multi","source":"github","category":"shieldcn","frontmatter":{"name":"shieldcn-badges","description":"Add beautiful shadcn/ui-styled README badges to projects using shieldcn. Use when adding badges, shields, or status indicators to README files, docs, or markdown. Triggers include \"add badges\", \"add shields\", \"readme badges\", \"npm badge\", \"GitHub stars badge\", \"CI badge\", \"shieldcn\", or any request to add project status badges to documentation."},"skills_sh_url":"https://skills.sh/jal-co/shieldcn/shieldcn-badges"},"updatedAt":"2026-05-18T18:56:09.085Z"}}