Help us improve
Share bugs, ideas, or general feedback.
From component-patterns-plugin
Implements framework-agnostic version badge with tooltip for version, git commit, build info, timestamp, branch, and recent changelog. Auto-detects Next.js, Nuxt, SvelteKit, Tailwind, shadcn/ui.
npx claudepluginhub laurigates/claude-plugins --plugin component-patterns-pluginHow this skill is triggered — by the user, by Claude, or both
Slash command
/component-patterns-plugin:components-version-badgesonnetThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Implement a version badge component that displays version number, git commit, and recent changelog in a tooltip.
Implements version badge UI component displaying build version, git commit SHA, and recent changelog in tooltip. For React, Vue, Svelte, or plain JS apps needing version visibility for support/debugging.
Automates changelog generation from Git commits, PRs, and releases in Keep a Changelog format using Conventional Commits and Semantic Versioning for release workflows.
Grounds every framework-specific code decision in official documentation. Verifies patterns by detecting stack versions and fetching authoritative sources before implementation.
Share bugs, ideas, or general feedback.
Implement a version badge component that displays version number, git commit, and recent changelog in a tooltip.
find . -maxdepth 1 \( -name "next.config.*" -o -name "nuxt.config.*" -o -name "svelte.config.*" -o -name "vite.config.*" \)find . -maxdepth 1 \( -name "package.json" -o -name "bun.lockb" -o -name "pnpm-lock.yaml" \)find . -maxdepth 1 \( -name "tailwind.config.*" -o -name "postcss.config.*" \)find . -maxdepth 1 -name "components.json"find . -maxdepth 1 -name \'CHANGELOG.md\'jq -r '.version // "unknown"' package.json--check-only: Analyze project and show what would be implemented without making changes--location <header|footer|custom>: Specify component placement (default: header)This command adds a version display to your application with:
v1.43.0 | 004ddd9 (version + abbreviated commit)Detect the project's tech stack from the context above:
Framework:
next.config.js or next.config.mjs or next.config.tsnuxt.config.ts or nuxt.config.jssvelte.config.jsvite.config.* + React in dependenciesvite.config.* + Vue in dependenciesreact-scripts in dependenciesStyling:
tailwind.config.* or @tailwind in CSS.module.css files@emotion/* in dependenciesUI Library:
components.json with shadcn config@radix-ui/* in dependencies@headlessui/* in dependenciesExecute this version badge implementation workflow:
Read package.json to identify dependencies. Check for framework config files, styling configuration, and existing component patterns.
Create a build-time script that parses CHANGELOG.md:
Location: scripts/parse-changelog.mjs (or appropriate location)
// Script should:
// 1. Read CHANGELOG.md
// 2. Extract last 2 versions with their changes
// 3. Categorize changes (feat, fix, perf, breaking)
// 4. Output as JSON for NEXT_PUBLIC_CHANGELOG (or equivalent)
Change type icons:
| Type | Icon | Description |
|---|---|---|
| feat | sparkles | New feature |
| fix | bug | Bug fix |
| perf | zap | Performance improvement |
| breaking | warning | Breaking change |
Limits:
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),
// NEXT_PUBLIC_CHANGELOG set by parse-changelog.mjs
},
};
Vite (vite.config.ts):
export default defineConfig({
define: {
'import.meta.env.VITE_BUILD_INFO': JSON.stringify(buildInfo),
},
});
Create the version badge component appropriate for the detected framework:
Component structure:
src/components/
version-badge/
version-badge.tsx # Main component
version-badge.css # Styles (if not using Tailwind)
index.ts # Export
Features to implement:
Trigger display:
text-[10px] text-muted-foreground/60Tooltip content:
Accessibility:
aria-label with version infoAdd the component to the appropriate location:
Common locations:
Default: Place below the main title in header, for both desktop and mobile nav.
Uses Tooltip from shadcn/ui, cn utility for class merging.
Native implementation with Radix Tooltip or custom tooltip.
Vue component with Teleport for tooltip positioning.
Svelte component with actions for tooltip behavior.
Generates CSS with custom properties for theming.
#!/usr/bin/env node
/**
* parse-changelog.mjs
* Parses CHANGELOG.md and outputs JSON for the version badge tooltip
*/
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 = [];
// Parse version headers and their changes
const versionRegex = /^## \[?(\d+\.\d+\.\d+)\]?/gm;
const changeRegex = /^\* \*\*(\w+):\*\* (.+)$/gm;
// ... parsing logic ...
return JSON.stringify(versions.slice(0, MAX_VERSIONS));
}
// Output for environment variable
console.log(parseChangelog());
| Flag | Description |
|---|---|
--check-only | Analyze project and show what would be implemented |
--location <loc> | Specify component placement (header, footer, custom) |
# Implement version badge with auto-detection
/components:version-badge
# Check what would be implemented without changes
/components:version-badge --check-only
# Place in footer instead of header
/components:version-badge --location footer
After implementing:
version-badge-pattern skill - Detailed pattern documentation