Why not introduce a single shared CSS for style consistency? Not full CSS separation, each tool could still have its local CSS.

Things like styling buttons, responsiveness, and so on are better solved once.

A good rule of thumb is: if the shared CSS fails to load, page still fully works but it might be uglier (weird fonts, etc). That's a reasonable rule for proper isolation (tools remain simple to understand, code remains reusable, etc).

I love the idea of self-contained tools, but you're already using CDNs. Having a shared CSS wouldn't hurt and actually make the tools better.

I would go as far as having a shared JS too (same idea, works if it doesn't load).

That's essentially what I did in https://alganet.github.io/spiral/ (also vibe coded).

Each spiral is mostly independent. You can go ahead and delete the shared CSS from the <head>, they still work and don't break funcionality. However, by having the shared CSS I made them consistent, made them friendly to phone users and so on.

▲

simonw 13 hours ago | parent [-]

Yeah, I've been thinking some kind of reusable styles or style guide might be a good idea at this point.

It's been fun collecting a bunch of inconsistent tool designs just to see how the different models behave, plus occasionally I go for something with a topical theme like https://tools.simonwillison.net/terminal-to-html or https://tools.simonwillison.net/new-yorker-style - but a little more consistency could be nice.

	▲	gaigalas 13 hours ago \| parent [-]
		Definitely! Not only for the user, but it makes sense for the process of making the tools as well. If I left the agent for itself, it often come up with outrageous styles and I need to prompt it for something more sober. --- You can do a lot with just CSS. I restored this 2009 project of mine just now: https://alganet.github.io/ghiaweb/ It still works (minor misalignments though), all HTML is pure (no class=, no css=, no <div>). The global CSS does everything: the forms, the drop-down menus, etc. Nowadays, we can do even better, no build step or anything like that.