Shieldcn Badges

shadcn-gestylte README-Badges, Diagramme und Header vom gehosteten shieldcn.dev-Dienst

von jal-co · jal-co/shieldcn

Getestet · Funktioniert ★ 8.8/10

Shieldcn Badges — shadcn-gestylte README-Badges, Diagramme und Header vom gehosteten shieldcn.dev-Dienst

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 README
  • Build a README header banner in shadcn style
  • Create a sponsors grid for my project README