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

Override framework detection

--cdn

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.js

next.config.*

next.config.ts

Next.js

next.config.ts

vite.config.js

or

vite.config.ts

Vite

vite.config.*

.next/

directory

Next.js (built)

Detection only

dist/

directory + vite in package.json

Vite (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:

generateBuildId

configured for deterministic builds

assetPrefix

configured for CDN

compress: true

enabled

poweredByHeader: false

for security

generateEtags

configured

Cache headers configured in

headers()

function

Vite

- Read

vite.config.js/ts

and check:

build.rollupOptions.output.entryFileNames

uses

[hash]

build.rollupOptions.output.chunkFileNames

uses

[hash]

build.rollupOptions.output.assetFileNames

uses

[hash]

build.manifest: true

for SSR/manifest-based routing

build.cssCodeSplit

configured appropriately

Step 3: Detect CDN provider

Identify CDN from project files:

Indicator

CDN Provider

vercel.json

exists

Vercel

.vercelignore

exists

Vercel

_headers

in root or

public/

Cloudflare Pages

_redirects

exists

Cloudflare Pages / Netlify

wrangler.toml

exists

Cloudflare 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-only Auto-fix all issues /configure:cache-busting --fix Next.js project only /configure:cache-busting --fix --framework nextjs Vite project only /configure:cache-busting --fix --framework vite Cloudflare CDN headers /configure:cache-busting --fix --cdn cloudflare Vercel CDN headers /configure:cache-busting --fix --cdn vercel Output Provide: 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 /configure:all - Run all compliance checks /configure:status - Quick compliance overview /configure:workflows - GitHub Actions workflow standards /configure:dockerfile - Container configuration with build caching Next.js Documentation - https://nextjs.org/docs/pages/api-reference/next-config-js Vite Documentation - https://vitejs.dev/config/build-options.html Web.dev Caching Guide - https://web.dev/http-cache/