Shieldcn Badges
shadcn-gestylte README-Badges, Diagramme und Header vom gehosteten shieldcn.dev-Dienst
Getestet · Funktioniert
Was es kann
Eine URL-Referenz, die dem Agenten beibringt, README-Badges, Badge-Gruppen, Download-Diagramme, Header-Banner und Mitwirkenden-/Sponsor-Bilder unter Verwendung des gehosteten shieldcn.dev-Dienstes zu erstellen, der shadcn/ui-gestylte SVG/PNG-Badges aus Live-npm-, GitHub-, PyPI- und anderen Anbieterdaten rendert. Wird ausgelöst, wenn ein Benutzer darum bittet, README-Badges (npm-Version, GitHub-Sterne, CI-Status, Lizenz) hinzuzufügen oder zu ersetzen, einen README-Header/Banner oder ein Download-Diagramm hinzuzufügen oder ein Projekt-README besser aussehen zu lassen. Der Dienst löst reale Werte und korrekte Linkziele auf; keine lokalen Skripte oder API-Schlüssel sind erforderlich.
Testbericht
skills/shieldcn-badges/SKILL.md raw abgerufen; Frontmatter hat name+description und wird geparst. Der Inhalt referenziert shieldcn.dev-Endpunkte (keine lokalen Dateien); ich habe 5 davon (npm/next, npm/dm/next, github stars/license/ci für vercel/next.js) gecurlt und alle gaben HTTP 200 image/svg+xml mit echten aufgelösten Daten (next v16.2.12, 201.3m/Monat Downloads, MIT-Lizenz, CI bestanden) plus korrekte Linkziele in den .json-Antworten zurück. Keine Sicherheitslücken: kein curl|sh, base64-Blobs, Secret-Exfil oder Injection-Text. Installation in einem temporären HOME getestet (export HOME=$(mktemp -d)); SKILL.md landete sauber unter ~/.claude/skills/shieldcn-badges/SKILL.md. OUTPUT-Test: Aufgabe = Badge-Zeile für vercel/next.js. Die Baseline verwendete flache img.shields.io-Badges ohne Links und ohne Zentrierung; das Skill-Artefakt verwendete shieldcn.dev variant=secondary SVGs, jedes in ein <a> gewickelt mit dem korrekten automatisch aufgelösten Ziel (Lizenz -> tatsächliche LICENSE-Datei, CI -> tatsächlicher Actions-Lauf), zentriert über <p align=center> mit menschlichem Alt-Text. Konkreter beobachteter Unterschied: shadcn abgerundete SVG-Oberfläche vs. flaches Shields.io und genaue Linkziele, die vom Dienst abgerufen wurden, anstatt von Hand geraten.
Getestet am: 2026-07-21 · Claude Code 2.x (agent harness)
Installation
git clone --depth 1 https://github.com/jal-co/shieldcn.git /tmp/shieldcn-badges-src mkdir -p ~/.claude/skills cp -R /tmp/shieldcn-badges-src/skills/shieldcn-badges ~/.claude/skills/shieldcn-badges # Skills-CLI alternative: npx skills add jal-co/shieldcn # No deps to run and no API key: badges are rendered by the hosted https://shieldcn.dev service. # The skill is a single SKILL.md (a URL reference); it requires network access to shieldcn.dev.
Befehle & Beispiel-Prompts
/shieldcn-badgesshadcn-gestylte README-Badges, Diagramme und Header vom gehosteten shieldcn.dev-Dienst
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Add npm and GitHub stars badges to my READMEBuild a README header banner in shadcn styleCreate a sponsors grid for my project README