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.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/laurigates/claude-plugins --skill configure-cache-bustingThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... Related occupations SOC
Based on SOC occupation classification
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 headersVite : 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 rulesCloudflare Pages : Create public/_headers with cache rulesGeneric : 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 More from this repository 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.
