About WebDev Tools

Yeah, I know. The ten-thousandth tool collection on the internet. Who needs that? But I can reassure you: This project was never planned. It's an accident, a product of pure procrastination, but also a lesson in working with artificial intelligence.

It all started quite innocently on my desktop.

In the Beginning Was the Script

Like many developers, I had stockpiled various homemade tools on my localhost. Little scripts for everyday annoyances: an em/px conversion here, a little helper there. Things I was too lazy to look up on the same websites every time. I'm absolutely at war with bookmarks, you see.

These little helpers did their job well. But then I added two more, and my web developer instinct struck mercilessly: I started linking them together. I needed a menu. A little styling. And suddenly I was right in the middle of everything that comes to mind when you want to successfully distract yourself from your actual work. The simple collection turned into a full-fledged project. I just had to "pimp" it until I had a proper little website with all the bells and whistles in front of me.

"AI, Take Over!" - Was That a Crazy Idea?

At some point, it occurred to me: They're just simple scripts. Why not let the AI handle it? As a loyal user of VS Code, I set up the project directly with Claude Code (Sonnet).

But before giving the AI free rein, I needed clear guidelines. So first and foremost, I defined a fixed tech stack. From this, I derived a CLAUDE.md (strictly limited to a maximum of 60 lines - short command paths are essential for AI) as well as a .claude/comments/review.md. Just as vital for your wallet are a consistent .claudeignore file and a specifically tailored .claude/settings.local.json to save a massive amount of tokens while coding.

The result was surprising: an amazingly good, modularly expandable web application. But of course, not everything went smoothly. You have to constantly stop an AI from overdoing it. My most important command quickly became: "No, we don't need a package manager! And now stop trying to suggest another framework to me!" In the end, though, a usable foundation actually emerged.

The Pitfalls of "Vibe Coding"

The project picked up steam, and I quickly learned some hard lessons about collaborating with my digital colleagues.

• The framework question: AIs love Tailwind. After a few manual tweaks that stretched my patience to the limit, it finally snapped. I switched to Bootstrap to pragmatically wrap things up. Sometimes "done" is simply better than "perfect" (or Tailwind).


• No Git? No way! Out of habit, I created a repo right away. Thank goodness! I quickly realized that this haphazard "vibe coding" without version control ends up being a massive waste of time.


• AI logic vs. reality: AIs sometimes make life too easy - or too complicated. Claude has improved massively in this regard and now analyzes code much more thoroughly instead of speculating blindly. However, if you don't specify precisely where the journey should lead, AIs still tend toward idiosyncratic script solutions that end in a dead end. Without a bold "git reset --hard," I would likely have had to completely restart the project more than once anyway.


• AI Ping-Pong During Code Review: For quality assurance, I relied on a system of "checks and balances." Using the /review command, I trigger Claude's internal review, which operates strictly according to the guidelines in my review.md. In addition, I had external reviews conducted by ChatGPT and Gemini and then discussed the results with Claude Opus. This "AI review for the AI review" is pretty meta, but extremely useful for cross-checking different ways of thinking and closing logical gaps.

Bonus Round: AI as a Translator?

Once the functionality was in place, it was time for the translations. Here, the AI showed its philosophical side: Claude Sonnet 4.5 pointed out to me, without being asked, that languages like Hindi, Chinese, or Japanese aren't just about vocabulary, but also about cultural idiosyncrasies and forms of politeness. That was a refreshing level of self-reflection.

In practice, however, things took a pragmatic turn: For the actual batch translation of the static content, Claude was too "intellectual" and too complicated for me. With Gemini and ChatGPT, the quality of the output fluctuated too much. In the end, I had everything translated by DeepL. Here, too, the rule applies: The right tool for the right job!

From the Intranet to the Wild Web

Once the toolkit was finished and even supported multiple languages, it served us well on our company network for quite some time. At some point, I thought to myself: Why not share it?

So I cleaned things up and made the site public. And since the whole thing came about by accident anyway, the code is completely open-source. If you want to tinker with it or find a bug: You can find the Git repo here: https://github.com/RamonKaes/WebDev-Tools.

Yeah, sorry. So here it is, the 10,000th tool collection. The 10,000th tool collection. But hey, at least it has a good origin story!

Have fun with it!

Ramon