Claude's Got Frontend Skills

A few days ago I wrote about A New Vibe-coded Site Builder and it did a pretty decent job of migrating my site-builder off of Obsidian Publish and back onto a static build process akin to what I had before in Moving Back To Github Pages (or Static Hosting Saga 3)

It was very functional, but the style left a little bit to be desired.

Here is what that looked like:

However, today I started incorporating more of Claude’s specialized skills into my claude configs and added the frontend-design from the anthropic skills repo.

I prompted it as follows:

Look at the @website/packages/obs-static-site/build.js script and @website/packages/obs-static-site/templates/app.js
  and their respective HTML and CSS outputs.  Fix up the color theme and layout to have a cleaner more balanced design
  similar to the aesthetic of lospec.com.

  While fixing the color theme try to stick to the color pallete CC-29 found here https://lospec.com/palette-list/cc-29

The result was nice, but the font Syne looked a little strange so I modified it a bit:

Replace the Syne font with one that has slightly taller glyphs and ensure that in dark mode the .social-title
  elements have higher contrast with their background colors.

And here’s what came out:

And this is Dark Mode:

Not too shabby. You can see the entire PR here.