The Vibes Tax

Last week my blog post hit the front page of Hacker News, which was great... until I got the bill. Here's the story of how I paid my first vibes tax.

What happened

The post was about Claude Code composing original music: audio files, music videos, and visualizations (basically lots of media assets).

Two things went wrong. Claude used completely uncompressed media assets. And it set every audio and video element to prefetch on page load, because of course it wanted a "smooth user experience."

Every single page visit loaded 294 MB of media. One music video alone was 170 MB.

The bill

Then the traffic spike hit.

~2 TB transferred in a single day. $129, almost entirely from Vercel's "Fast Data Transfer."

Vercel sent a notification, but by that point I'd already burned through $129. Turns out the default On-Demand Usage budget from Vercel is $600, so I'm lucky I got out with just a couple hundred dollar bill.

Once I realized what happened, the fix was easy: compress the media and set preload="none" on audio/video elements. This isn't some obscure edge case, it's actually really obvious if you look at the code, but that's the cost of vibe coding.

So I built vercel-cost-guard: an open source Claude Code skill that audits your Next.js project for the exact patterns that cause surprise Vercel bills — uncompressed assets, missing preload attributes, unscoped middleware, stuff like that. It would've caught both issues in this post before I shipped them.

If you've racked up your own surprise bill from vibe coding, tell me about it on Twitter (misery loves company).