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