Skip to main content
components-version-badge Version badge with build-info tooltip (version, commit, changelog). Use when adding version display to app header/footer for Next.js, Nuxt, SvelteKit, Vite, React, Vue, or Svelte.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/laurigates/claude-plugins --skill components-version-badgeThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository Install, configure and troubleshoot MCP servers. Use when adding/enabling servers, editing .mcp.json, fixing OAuth, or when a server runs stale code after an upstream fix.
FinOps snapshot — org billing, workflow stats, cache usage. Use when you want a high-level view of CI spending or workflow health before diving deeper.
GitHub Actions billing, workflow efficiency, and waste analysis at org or repo level. Use when investigating CI/CD costs, wasted runs, or optimizing triggers.
Related occupations SOC
Based on SOC occupation classification
created "2025-02-03T00:00:00.000Z" modified "2026-06-18T00:00:00.000Z" reviewed "2026-04-25T00:00:00.000Z" description Version badge with build-info tooltip (version, commit, changelog). Use when adding version display to app header/footer for Next.js, Nuxt, SvelteKit, Vite, React, Vue, or Svelte. allowed-tools Glob, Grep, Read, Write, Edit, Bash, AskUserQuestion, TodoWrite args [--check-only] [--location <header|footer|custom>] argument-hint [--check-only] [--location <header|footer|custom>] name components-version-badge
/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 entriesBuild-time processing : Zero runtime overhead
Tech Stack Detection
Detect the project's tech stack from the context above:
Framework :
next.config.js
next.config.mjs
next.config.ts
Nuxt: nuxt.config.ts or nuxt.config.js
SvelteKit: svelte.config.js
Vite + React: vite.config.* + React in dependencies
Vite + Vue: vite.config.* + Vue in dependencies
Create React App: react-scripts in dependencies
Plain React: React in dependencies without specific framework
Styling :
Tailwind CSS: tailwind.config.* or @tailwind in CSS
CSS Modules: .module.css files
styled-components: In dependencies
Emotion: @emotion/* in dependencies
Plain CSS: Fallback
UI Library :
shadcn/ui: components.json with shadcn config
Radix UI: @radix-ui/* in dependencies
Headless UI: @headlessui/* in dependencies
None: Use native implementation
Execution Execute this version badge implementation workflow:
Step 1: Analyze project Read package.json to identify dependencies. Check for framework config files, styling configuration, and existing component patterns.
Step 2: Create changelog parser script Create a build-time script that parses CHANGELOG.md:
Location : scripts/parse-changelog.mjs (or appropriate location)
Type Icon Description feat sparkles New feature fix bug Bug fix perf zap Performance improvement breaking warning Breaking change
Max 3 features per version
Max 2 other changes per version
Last 2 versions only
Step 3: Configure build pipeline Based on framework, add build-time environment variables:
Next.js (next.config.mjs):
const buildInfo = {
version : process.env .npm_package_version || 'dev' ,
commit : process.env .VERCEL_GIT_COMMIT_SHA || process.env .GITHUB_SHA || 'local' ,
branch : process.env .VERCEL_GIT_COMMIT_REF || process.env .GITHUB_REF_NAME || 'local' ,
buildTime : new Date ().toISOString (),
};
export default {
env : {
NEXT_PUBLIC_BUILD_INFO : JSON .stringify (buildInfo),
},
};
export default defineConfig ({
define : {
'import.meta.env.VITE_BUILD_INFO' : JSON .stringify (buildInfo),
},
});
Step 4: Create component Create the version badge component appropriate for the detected framework:
src/components/
version-badge/
version-badge.tsx # Main component
version-badge.css # Styles (if not using Tailwind)
index.ts # Export
Trigger display :
Version number from build info
Abbreviated commit SHA (7 chars)
Subtle styling: text-[10px] text-muted-foreground/60
Hover brightening for affordance
Hidden when no build info (local dev)
Tooltip content :
Build Information section with table layout
Recent Changes section with categorized items
Proper keyboard accessibility
Accessibility :
Focusable button trigger
aria-label with version infoFocus ring styling
Both hover and focus trigger tooltip
Screen reader friendly content
Step 5: Integrate component Add the component to the appropriate location:
Header/navbar (most common)
Footer
Settings page
About modal
Default : Place below the main title in header, for both desktop and mobile nav.
Component Variants
React + Tailwind + shadcn/ui Uses Tooltip from shadcn/ui, cn utility for class merging.
React + Tailwind (no UI library) Native implementation with Radix Tooltip or custom tooltip.
Vue 3 + Tailwind Vue component with Teleport for tooltip positioning.
Svelte + Tailwind Svelte component with actions for tooltip behavior.
Plain CSS Generates CSS with custom properties for theming.
Build Script Template #!/usr/bin/env node
import { readFileSync, existsSync } from 'fs' ;
const CHANGELOG_PATH = './CHANGELOG.md' ;
const MAX_VERSIONS = 2 ;
const MAX_FEATURES_PER_VERSION = 3 ;
const MAX_OTHER_PER_VERSION = 2 ;
function parseChangelog (if (!existsSync (CHANGELOG_PATH )) {
return JSON .stringify ([]);
}
const content = readFileSync (CHANGELOG_PATH , 'utf-8' );
const versions = [];
const versionRegex = /^## \[?(\d+\.\d+\.\d+)\]?/gm ;
const changeRegex = /^\* \*\*(\w+):\*\* (.+)$/gm ;
return JSON .stringify (versions.slice (0 , MAX_VERSIONS ));
}
console .log (parseChangelog ());
Flags Flag Description --check-onlyAnalyze project and show what would be implemented --location <loc>Specify component placement (header, footer, custom)
Examples
/components:version-badge
/components:version-badge --check-only
/components:version-badge --location footer
Post-Implementation
Verify build : Run build command to ensure env vars are setTest tooltip : Check hover and keyboard accessibilityUpdate CI : Ensure changelog is available during buildDocument : Add note to README about version display feature
Error Handling
No package.json : Warn and ask for framework specificationUnknown framework : Offer generic implementation or ask userNo CHANGELOG.md : Component works without changelog, shows only build infoExisting component : Ask before overwriting, offer merge strategy
See Also
version-badge-pattern skill - Detailed pattern documentation 