Skip to main content
configure-cache-busting Cache-busting for Next.js and Vite: content hashing, CDN cache headers. Use when adding Vercel/Cloudflare cache headers or auditing static asset caching.
インストールへ移動 Skills Marketplace コミュニティが作成したAIスキルを発見・探索
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/laurigates/claude-plugins --skill configure-cache-bustingコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか?SkillsMP が現在取得できるファイルをダウンロードできます。
Zipをダウンロード ダウンロード中... このリポジトリの他の Skills 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.
created "2025-12-16T00:00:00.000Z" modified "2026-04-19T00:00:00.000Z" reviewed "2025-12-16T00:00:00.000Z" description Cache-busting for Next.js and Vite: content hashing, CDN cache headers. Use when adding Vercel/Cloudflare cache headers or auditing static asset caching. allowed-tools Glob, Grep, Read, Write, Edit, Bash, AskUserQuestion, TodoWrite args [--check-only] [--fix] [--framework <nextjs|vite>] [--cdn <cloudflare|vercel|none>] argument-hint [--check-only] [--fix] [--framework <nextjs|vite>] [--cdn <cloudflare|vercel|none>] name configure-cache-busting
When to Use This Skill
Use this skill when... Use another approach when... Configuring content hashing for Next.js or Vite builds Optimizing server-side caching (nginx, CDN config directly) Setting up CDN cache headers for Vercel or Cloudflare Debugging build output issues (system-debugging agent) Verifying cache-busting compliance after a framework upgrade Configuring general CI/CD workflows (/configure:workflows) Adding build verification scripts for hashed assets Setting up container builds (/configure:container) Auditing static asset caching strategy across a project Profiling frontend performance (browser devtools)
Context
Project root: !pwd
Package files: !find . -maxdepth 1 -name 'package.json'
Next.js config: !find . -maxdepth 1 -name 'next.config.*'
Vite config: !find . -maxdepth 1 -name 'vite.config.*'
Build output: !find . -maxdepth 1 -type d \( -name '.next' -o -name 'dist' -o -name 'out' \)
CDN config: !find . -maxdepth 2 \( -path './vercel.json' -o -path './_headers' -o -path './_redirects' -o -path './public/_headers' \)
Project standards: !find . -maxdepth 1 -name '.project-standards.yaml'
Parameters
Parse from command arguments:
--check-only: Report compliance status without modifications (CI/CD mode)
--fix: Apply fixes automatically without prompting
--framework <nextjs|vite>: Override framework detection
--cdn <cloudflare|vercel|none>: Specify CDN provider for cache header configuration
Execution
Execute this cache-busting configuration check:
Step 1: Detect project framework
Identify the framework from file structure:
Indicator Framework Config File next.config.js or next.config.mjs
next.config.tsNext.js next.config.ts
vite.config.js or vite.config.tsVite vite.config.*
.next/ directoryNext.js (built) Detection only
dist/ directory + vite in package.jsonVite (built) Detection only
Check package.json dependencies for "next" or "vite".
If both detected, prompt user to specify with --framework. If neither detected, report unsupported and exit.
Step 2: Analyze current cache-busting state For the detected framework, read config files and check:
Next.js - Read next.config.js/ts and check:
Vite - Read vite.config.js/ts and check:
Step 3: Detect CDN provider Identify CDN from project files:
Indicator CDN Provider vercel.json existsVercel .vercelignore existsVercel _headers in root or public/Cloudflare Pages _redirects existsCloudflare Pages / Netlify wrangler.toml existsCloudflare Workers/Pages None of the above Generic / None
Step 4: Generate compliance report Print a formatted compliance report:
Cache-Busting Compliance Report
================================
Project: [name]
Framework: [Next.js 14.x | Vite 5.x]
CDN Provider: [Vercel | Cloudflare | None detected]
Framework Configuration:
Config file next.config.js [EXISTS | MISSING]
Asset hashing [hash] in filenames [ENABLED | DISABLED]
Build manifest manifest files [GENERATED | MISSING]
Deterministic builds Build ID configured [PASS | NOT SET]
Compression gzip/brotli enabled [PASS | DISABLED]
Cache Headers:
Static assets immutable, 1y [CONFIGURED | MISSING]
HTML files no-cache, must-revalidate [CONFIGURED | MISSING]
API routes varies by route [CONFIGURED | N/A]
CDN configuration vercel.json/_headers [EXISTS | MISSING]
Build Output (if built):
Hashed filenames app.[hash].js [DETECTED | NOT BUILT]
Content addressing Unique hashes per version [PASS | DUPLICATE]
Manifest integrity Valid manifest.json [PASS | INVALID]
Overall: [X issues found]
Recommendations:
[List specific fixes needed]
If --check-only, stop here.
Step 5: Apply configuration (if --fix or user confirms) Based on detected framework, create or update config files using templates from REFERENCE.md :
Next.js : Update next.config.js/ts with deterministic builds, compression, cache headers
Vite : Update vite.config.js/ts with content hashing, manifest, chunk splitting
Step 6: Configure CDN cache headers Based on detected CDN provider, create or update cache header configuration using templates from REFERENCE.md :
Vercel : Create/update vercel.json with header rules
Cloudflare Pages : Create public/_headers with cache rules
Generic : Provide nginx configuration reference
Step 7: Add build verification Create scripts/verify-cache-busting.js to verify content hashing works after build. Add package.json scripts for build verification. Use the verification script template from REFERENCE.md .
Step 8: Configure CI/CD verification Add cache-busting verification step to GitHub Actions workflow. Use the CI workflow template from REFERENCE.md .
Step 9: Update standards tracking Update .project-standards.yaml:
standards_version: "2025.1"
last_configured: "[timestamp]"
components:
cache-busting: "2025.1"
cache-busting-framework: "[nextjs|vite]"
cache-busting-cdn: "[vercel|cloudflare|none]"
cache-busting-verified: true
Step 10: Print final report Print a summary of changes applied, cache strategy overview, and next steps for verification.
For detailed configuration templates and code examples, see REFERENCE.md .
Agentic Optimizations Context Command Quick compliance check /configure:cache-busting --check-onlyAuto-fix all issues /configure:cache-busting --fixNext.js project only /configure:cache-busting --fix --framework nextjsVite project only /configure:cache-busting --fix --framework viteCloudflare CDN headers /configure:cache-busting --fix --cdn cloudflareVercel CDN headers /configure:cache-busting --fix --cdn vercel
Output
Compliance report with framework and CDN configuration status
List of changes made (if --fix) or proposed (if interactive)
Verification instructions and commands
CDN cache header examples
Next steps for deployment and monitoring
See Also