Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add laurigates/claude-plugins --skill components-version-badgegit clone --depth 1 https://github.com/laurigates/claude-pluginsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/laurigates/claude-plugins/components-version-badge)<a href="https://agentmods.dev/skills/laurigates/claude-plugins/components-version-badge"><img src="https://agentmods.dev/badge/skills/laurigates/claude-plugins/components-version-badge/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/laurigates/claude-plugins/components-version-badge"><img src="https://agentmods.dev/badge/skills/laurigates/claude-plugins/components-version-badge.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00050 | $0.02164 |
| Opus 5.5 | $0.00020 | $0.00866 |
| Sonnet 5.5 | $0.00010 | $0.00433 |
| Haiku 4.5 | $0.00005 | $0.00216 |
Grade A, and why
components-version-badge scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 281 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/components:version-badge
Implement a version badge component that displays version number, git commit, and recent changelog in a tooltip.
When to Use This Skill
| Use this skill when... | Use version-badge-pattern instead when... |
|---|---|
| Adding a version badge end-to-end to an existing app via slash command | Studying the pattern, data flow, and accessibility checklist before adapting it manually |
| You want auto-detection of framework, styling, and UI library with file edits applied | You need full reference implementations for React, Vue 3, Svelte, or plain CSS variants |
Implementing the default header placement with --check-only / --location flags |
Composing the changelog-parser script and build-pipeline wiring into a custom workflow |
Context
- Framework config: !
find . -maxdepth 1 \( -name "next.config.*" -o -name "nuxt.config.*" -o -name "svelte.config.*" -o -name "vite.config.*" \) - Package manager: !
find . -maxdepth 1 \( -name "package.json" -o -name "bun.lockb" -o -name "pnpm-lock.yaml" \) - Styling: !
find . -maxdepth 1 \( -name "tailwind.config.*" -o -name "postcss.config.*" \) - UI library: !
find . -maxdepth 1 -name "components.json" - Changelog: !
find . -maxdepth 1 -name \'CHANGELOG.md\' - Version: !
find . -path '*/package.json' -maxdepth 2 -exec jq -r '.version // "unknown"' {} +
Parameters
--check-only: Analyze project and show what would be implemented without making changes--location <header|footer|custom>: Specify component placement (default: header)
Overview
This command adds a version display to your application with:
- Trigger element:
v1.43.0 | 004ddd9(version + abbreviated commit) - Tooltip: Full build info (version, commit, timestamp, branch) + recent changelog entries
- Build-time processing: Zero runtime overhead
Tech Stack Detection
Detect the project's tech stack from the values in Context:
- Framework:
- Next.js:
next.config.jsornext.config.mjsornext.config.ts - Nuxt:
nuxt.config.tsornuxt.config.js - SvelteKit:
svelte.config.js - Vite + React:
vite.config.*+ React in dependencies - Vite + Vue:
vite.config.*+ Vue in dependencies - Create React App:
react-scriptsin dependencies - Plain React: React in dependencies without specific framework
- Next.js:
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago Changed fddfcdf56246
- 1mo ago First seen · 281 lines · 50 tokens per session scan A 37abd7d1e05d
components-version-badge is a skill published in the GitHub repository laurigates/claude-plugins (60 stars, last pushed yesterday), licensed MIT. It adds 50 tokens to every session and 2,164 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
zoom-meeting-sdk-web-component-view
Zoom Meeting SDK Web - Component View. Embeddable Zoom meeting components with Promise-based API for flexible integration. Ideal for React/Vue/Angular apps and custom layouts. Uses ZoomMtgEmbedded with async/await patterns and embeddable UI containers.
merge-seed
Merge upstream React Starter Kit updates (the seed remote) into main, preserving this project's identity, scope, and behavior. Use when asked to sync, pull, or merge the seed / starter kit / upstream template.
release-safety
Release safety rules. INVOKE WHEN: yarn release, npm publish, release canary, release packages, publishing, skip checks, skip tests. NEVER skip checks or tests without explicit permission.
add-localization
Adds or extends multilingual localization in a Power Pages code-site SPA. Use whenever the user asks to translate, localize, internationalize, support multiple languages, add a language selector, add locale routes, repair an i18n setup, or add languages to an existing React, Vue, Angular, or Astro Power Pages site.
git-workflow
Guided git workflows: prepare PRs, clean up branches, resolve merge conflicts, handle monorepo tags, squash-and-merge patterns. Use when asked to prepare a PR, clean branches, resolve conflicts, or tag a release.
dev-fix
Unified developer workflow for fixing bugs. Analyzes issue-tracker context, cross-checks docs/code, proposes a solution, implements the fix, verifies locally, and delivers a PR/MR.