shieldcn
Skill that adds shadcn/ui-styled README badges, charts and headers as a shields.io alternative
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
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/shieldcnDetects 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 -yThe 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-badgesCommands 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 -yThe 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-badgesCommands 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 -yThe 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-badgesCommands 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 -yThe 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-badgesCommands 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 -yThe 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-badgesCommands 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-badgesCommands 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 -yThe 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-badgesCommands 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 -yThe 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-badgesCommands 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 -yThe 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-badgesCommands 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-badgesCommands 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-badgesCommands for macOS and Linux, on Windows run them in Git Bash.
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-codeAdd -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 shieldcnLimitations
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.
Related
A skills library that gives coding agents a development process: brainstorming, planning, TDD, subagents and code review
Skills for real engineers by Matt Pocock
Skills For Real Engineers
Small composable skills for engineering with agents: plan grilling, TDD, bug diagnosis, code review and architecture
GitHub toolkit for spec-driven development: the specify CLI adds agent commands and skills to a project, from principles to implementation
Reference MCP servers
Model Context Protocol servers
Official reference MCP servers: Filesystem, Fetch, Git, Memory, Sequential Thinking, Time and Everything