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
최근 소스 활동: 2026년 6월 18일 06:18
감지된 SKILL.md 언어: 영어
스타: 49
포크: 7

설치 방법

기본적으로 소스를 먼저 확인하는 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