Stack

I’ve been working with Astro for the last two years along with HTMX and Alpine.js so I'm most productive here. I start all my projects with TypeScript.

For forms, I try to use Astro Actions.

If I need to do some sort of frontend wizardry, then I go to HTMX and can expand on it with Alpine if needed, it keeps the overhead a lot nicer than using React does.

I am excited about Datastar and am slowly moving projects over to it to replace Alpine and eventually HTMX.

Building flexible, accessible components is difficult. You either use (and extend) a component library, or build your own. This is why I now use DaisyUI along with StarWind

Starwind provides well-designed and extensible components, built on top of accessible, unstyled primitives. This includes basics like buttons and inputs, but also icons, charts, and even custom themes.

Components are styled with Tailwind CSS—the most AI-friendly CSS library. Why? You can easily colocate your styles with your markup. This makes generating and editing code with AI tools much easier.

Tailwind uses a compiler to generate only the classes used. So while the utility CSS framework contains many possible class names, only the classes used will be included in the single, compiled CSS file.

Assuming you only write Tailwind code, your bundle will never be larger than the total set of used Tailwind classes. It's extremely unlikely you would use them all. This means you have a fixed upper bound on the size of the generated CSS file, which is then minified, compressed, and cached for the best performance.

You don't have to only write Tailwind styles. Tailwind classes are just utilities that adhere to a design system and work alongside normal CSS. You can mix and match Tailwind with CSS Modules, for example.

Postgres is my go-to database. Drizzle makes working with Postgres easy, type-safe, and fun. I can view and modify my data using Drizzle Studio and run migrations with Drizzle Kit.

The best part? Drizzle works perfectly with TypeScript.

My AI tools depend on the task at hand.

Claude Code is my main goto and helps me edit, refactor, and debug code.

It’s especially helpful for more tedious refactors, or restructuring/reformatting code. Since it has up-to-date knowledge of Drizzle, and other web tools, it give me great code suggestions.

I also use v0 a lot for coming up with new UI on projects.

For agents, depending on if the agent involves coding or low code then I either code it myself or else use n8n.

If coding AI interaction into webapps I tend to start with the AI SDK from Vercel and go from there, since they have lots of built-in interfaces to make swapping providers quick and seamless.

Directus is my goto for all things involving some sort of CMS or admin, I can quickly link it to my existing database and set up a nice looking admin to manage things.

On top of that, their new MCP server support ties beautifully into Claude Code and other AI friendly tools which lets me use AI to really dive in.

It's what I use for this site and nearly every other site I build.

• let > const most of the time
• Larger files > many small components
• Colocate code that changes often close together
• Copy/paste is better than the wrong abstraction
• You might not want SVGs in your JSX (explore sprites)