user-docs-build-badges

Generate standardized shields.io badge blocks for package README files.

Updated Mar 24, 2026
One-click install
npx skills add https://github.com/spencerbeggs/design-docs-plugin --skill user-docs-build-badges
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: user-docs-build-badges
Source: https://github.com/spencerbeggs/design-docs-plugin/tree/main/plugin/skills/user-docs-build-badges
Command: npx skills add https://github.com/spencerbeggs/design-docs-plugin --skill user-docs-build-badges

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the manual effort and common errors associated with creating and maintaining consistent, professional-grade badge blocks for package README files.

Core Features & Use Cases

  • Canonical Badge Generation: Automatically creates the standard 4-badge block (npm, license, runtime, TypeScript) using verified shields.io URLs.
  • Smart Normalization: Intelligently distinguishes between standard and custom badges in existing READMEs, ensuring standard badges are updated while preserving custom ones.
  • Use Case: When preparing a new open-source release, use this skill to ensure your README badges for npm version, license, runtime compatibility, and TypeScript version are perfectly formatted and linked.

Quick Start

Use the user-docs-build-badges skill to generate a standard badge block for this project using the metadata found in package.json.

Frequently Asked Questions about user-docs-build-badges

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate standardized README badges for an npm package?

To generate standardized README badges, use this skill to automatically create a canonical 4-badge block for npm version, license, runtime, and TypeScript status using verified shields.io URL patterns. It reads project metadata to ensure accurate, perfectly formatted Markdown links.

What is the best way to update existing README badges without overwriting custom ones?

The best way to update existing README badges is through smart normalization, which intelligently distinguishes between standard project metadata and custom user badges. This ensures standard shields.io indicators are refreshed while preserving your custom badges untouched.

How do I add a TypeScript status badge to my package documentation?

To add a TypeScript status badge to your package documentation, generate a canonical badge block that includes the TypeScript version indicator. The skill uses verified shields.io URLs to automatically format and link the TypeScript status alongside npm and license badges.

Can I automate README badge formatting for multiple repository configurations?

Yes, you can automate README badge formatting across diverse repository configurations. The skill ensures consistent formatting for npm, license, runtime, and TypeScript status indicators by normalizing existing documentation and applying verified shields.io URL patterns.

Does this badge generation method work with standard package.json metadata?

Yes, badge generation works directly with standard package.json metadata. The skill extracts project metadata from your package.json file to build the canonical 4-badge Markdown block, ensuring the npm and runtime status indicators reflect your actual project configuration.