DEV Community

Cover image for Can Claude Code migrate VanillaJS/HTML/CSS to Preact/Tailwind?
Jonathan Tuzman
Jonathan Tuzman

Posted on • Originally published at linkedin.com

Can Claude Code migrate VanillaJS/HTML/CSS to Preact/Tailwind?

In my last post, I introduced LinkedIn Secret Weapon, the Chrome Extension I built with Claude Code to supercharge my LinkedIn workflow.

As I mentioned, the app was built almost entirely with Claude Code – I had no background or knowledge about building browser extensions. I just wanted the tool, and AI built it, and it worked! But now I want to work on expanding it, adding a backend to store the actions a user takes, getting my hands a little more dirty with the code.

So, inspired by this article on building a Chrome extension with modern frontend tooling, I decided to try porting it to use React, Typescript, Tailwind, and Vite. A few years ago this would have been a relatively daunting task for a side project, but this is 2026, so AI can probably do it for me, right? Mostly right!

First of all, I was concerned that React would add a lot of overhead for a Chrome Extension, which should be pretty light and quick. So I decided to use Preact, which, as its homepage states, is a "fast 3kB alternative to React with the same modern API."

So I pointed Claude at the article:

Using this webpage as a guide, migrate this app to the stack in the guide, but use Preact instead of React. Make incremental, well-organized commits.

It made these 3 commits:

  • Phase 1: Setup Vite, CRXJS, TypeScript, Preact, and Tailwind
  • Phase 2: Migrate content, background, and options to TypeScript
  • Phase 3: Fix Vite and Tailwind configuration

Did it run? No! It was trying to import TS files from manifest.json, which simply didn't work. I asked Claude for help. This was a problem it couldn't quite fix, but as usual the problem is it didn't realize it. It kept saying things like "Ah, I see the problem!" and "Okay, now it's fixed", and it was definitely not fixed. It suggested things like developing against npm run build -- --watch which is pretty ridiculous. So I had to figure this one out for myself!

I looked at the manifest file and the vite config, and it looked like it added a whole bunch of stuff that maybe didn't need to be there. I headed over to the docs for CRXJS and compared their file tree to mine. They had a much barer vite config, as well as a manifest.config.ts file. I basically just pasted in CRXJS's vite config, and was able to load the unpacked extension into Chrome without error.

The code had a bunch of type errors, but, the extension worked! Well, to be fair, the Popup worked – I wasn't trying the Options page yet. But, if I remember correctly, the functionality also worked (copying, clicking, etc).

However, the styles were not quite right:

Broken styling after Claude's migration

Here's how the popup looked the first time I got the Preact version running
Also, I noticed that sometimes the popup would take a long time to load – a number of seconds, at times. I'm pretty sure these times were mainly when first loading the extension, or perhaps after an update. That is definitely bad UX and I'll need to address it.

So next, I had to fix the styling. Could AI help? I'll let you know soon!

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.