メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/laurigates/claude-plugins --skill components-version-badgeコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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.
SKILL.md を表示中
SOC 職業分類に基づく
| 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 |
Implement a version badge component that displays version number, git commit, and recent changelog in a tooltip.
| 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 |
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\'find . -path '*/package.json' -maxdepth 2 -exec jq -r '.version // "unknown"' {} +--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.jsnext.config.mjsnext.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