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.

الانتقال إلى التثبيت

المستودع: laurigates/claude-plugins
آخر نشاط في المصدر: ١٨ يونيو ٢٠٢٦ في ٠٦:١٨
لغة SKILL.md المكتشفة: الإنجليزية
النجوم: ٤٩
التفرعات: ٧

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

العودة إلى البحث العودة إلى التثبيت

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 entries
Build-time processing: Zero runtime overhead

Tech Stack Detection

Detect the project's tech stack from the context above:

Framework:
- Next.js: or or

next.config.js

next.config.mjs

next.config.ts

// 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)

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
  },
};

export default defineConfig({
  define: {
    'import.meta.env.VITE_BUILD_INFO': JSON.stringify(buildInfo),
  },
});

src/components/
  version-badge/
    version-badge.tsx     # Main component
    version-badge.css     # Styles (if not using Tailwind)
    index.ts              # Export

#!/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());

# 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