shieldcn

Skill that adds shadcn/ui-styled README badges, charts and headers as a shields.io alternative

Skill

Low risk

We rate an entry low when it mostly gives the agent instructions and reference material.

Why this level

  • The skill edits README markup and inserts badge links
  • Badges depend on the external shieldcn.dev service
All reasons and checks

jal-co/shieldcn

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/shieldcn

Detects the agents on your machine, checks the risk and pins the version.

Other ways to install

Run in a terminal in the project folder

npx skills add jal-co/shieldcn --skill shieldcn-badges -a claude-code -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dd6f2f6
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .claude/skills
cp -R "$tmp/skills/shieldcn-badges" .claude/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add jal-co/shieldcn --skill shieldcn-badges -a cursor -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dd6f2f6
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .agents/skills
cp -R "$tmp/skills/shieldcn-badges" .agents/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add jal-co/shieldcn --skill shieldcn-badges -a github-copilot -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dd6f2f6
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .github/skills
cp -R "$tmp/skills/shieldcn-badges" .github/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add jal-co/shieldcn --skill shieldcn-badges -a codex -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dd6f2f6
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .agents/skills
cp -R "$tmp/skills/shieldcn-badges" .agents/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add jal-co/shieldcn --skill shieldcn-badges -a gemini-cli -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dd6f2f6
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .agents/skills
cp -R "$tmp/skills/shieldcn-badges" .agents/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .devin/skills
cp -R "$tmp/skills/shieldcn-badges" .devin/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

Formerly Windsurf.

Run in a terminal in the project folder

npx skills add jal-co/shieldcn --skill shieldcn-badges -a cline -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dd6f2f6
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .cline/skills
cp -R "$tmp/skills/shieldcn-badges" .cline/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add jal-co/shieldcn --skill shieldcn-badges -a roo -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dd6f2f6
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .roo/skills
cp -R "$tmp/skills/shieldcn-badges" .roo/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

A fork of Roo Code, same .roo folders.

Run in a terminal in the project folder

npx skills add jal-co/shieldcn --skill shieldcn-badges -a opencode -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit dd6f2f6
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .agents/skills
cp -R "$tmp/skills/shieldcn-badges" .agents/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .agents/skills
cp -R "$tmp/skills/shieldcn-badges" .agents/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jal-co/shieldcn.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/shieldcn-badges/
git -C "$tmp" checkout dd6f2f6b58be49207bb095d8c6a5ab6586e1ed34
mkdir -p .agents/skills
cp -R "$tmp/skills/shieldcn-badges" .agents/skills/shieldcn-badges

Commands for macOS and Linux, on Windows run them in Git Bash.

You will need: Node.js

Checked against the repository on Sep 25, 2026, commit dd6f2f6.

Text for your agent

Install the skill: npx skills add jal-co/shieldcn -a claude-code (or -a cursor). Then use the base URL https://shieldcn.dev to build badge and chart links.

Other ways from the author
npx skills add jal-co/shieldcn -a claude-code

Add -g to install globally.

This is third-party code. Review the repository files before installing.

What it does

The skill teaches an agent to dress up a README through the shieldcn service: badges, badge groups, star and download charts, headers, sponsor and contributor grids. Each element is an image URL on shieldcn.dev that renders in the style of shadcn/ui components. The agent drops the right links into the markdown and assembles a finished README hero section. For star charts there is a separate GitHub Action that commits a light and dark SVG pair.

Who it is for. For developers, technical writers and founders who care about how a project README looks.

Good fit when

  • You need npm, GitHub or CI status badges in a README
  • You want a tidy header or sponsors block for a repository
  • You need a star or download chart in the shadcn/ui look

Not a fit when

  • You do not want to depend on an external image-rendering service
  • You need badges fully offline without calling shieldcn.dev

Example request

Build a README header with npm, GitHub stars and license badges in the shadcn style through shieldcn

Limitations

Badges and charts are served by the shieldcn.dev host, so viewing the README needs access to that domain. The GitHub Action in pull request mode needs contents: write and pull-requests: write and permission for Actions to open pull requests. Some data, such as star counts, comes from the public GitHub API.

How to disable. Remove the shieldcn-badges skill via npx skills remove or delete its folder from the agent skills directory.

Security check

  • The skill edits README markup and inserts badge links
  • Badges depend on the external shieldcn.dev service

README in short

The README shows how to embed badges, charts and headers with a single link to shieldcn.dev. It documents the shieldcn-badges agent skill, installed via npx skills add for Claude Code, Cursor and other agents. There is a GitHub Action that commits a star chart as a themed SVG pair. The repo is a monorepo with a website, engine, CLI and action. MIT licensed.

SKILL.md

---
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`

FAQ

How is this different from shields.io?

Same idea of link-based badges, but the styling mirrors shadcn/ui components, plus it adds headers, star charts and sponsor grids.

Do I need an account?

Not for basic badges, they are just images served from shieldcn.dev. The star-chart GitHub Action needs write access to the repository.

Editors’ pick

A skills library that gives coding agents a development process: brainstorming, planning, TDD, subagents and code review

PluginMedium riskNo VPN needed292.5KRepository stars
Editors’ pick

Small composable skills for engineering with agents: plan grilling, TDD, bug diagnosis, code review and architecture

SkillLow risk271.4KRepository stars
Editors’ pick

GitHub toolkit for spec-driven development: the specify CLI adds agent commands and skills to a project, from principles to implementation

CLIMedium riskNo VPN needed139.3KRepository stars

Reference MCP servers

Model Context Protocol servers

Official

Official reference MCP servers: Filesystem, Fetch, Git, Memory, Sequential Thinking, Time and Everything

MCP serverMedium risk90.6KRepository stars
Foxx AIshieldcn

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.