My Stack

Here's where I'm currently most productive:

1. Framework (Next.js and React)

I've been working with Next.js since 2018 (and React since 2015) so I'm most productive here. I start all my projects with TypeScript.

The latest AI models are really good at React.

2. Styling (Tailwind CSS and shadcn/ui)

Building flexible, accessible components is difficult. You either use (and extend) a component library, or build your own. This is why I use shadcn/ui.

It 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.

More on Tailwind in How I'm Writing CSS.

3. Database (Postgres and Drizzle)

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.

Drizzle also works perfectly with TypeScript.

4. AI (Cursor)

I use Cursor (and coding agents) to edit, refactor, and debug code. Pixo was my latest experiment using only coding agents, if you want an in-depth example.

5. Coding Patterns

Here's my AGENTS.md file:

• Only create an abstraction if it's actually needed
• Prefer clear function/variable names over inline comments
• Avoid helper functions when a simple inline expression would suffice
• Use knip to remove unused code if making large changes
• The gh CLI is installed, use it
• Don't use emojis

React

• React Compiler is enabled, skip manual useMemo/useCallback
• Avoid massive JSX blocks and compose smaller components
• Colocate code that changes together
• Avoid useEffect unless absolutely needed

Tailwind

• Mostly use built-in values, occasionally allow dynamic values, rarely globals
• Always use v4 + global CSS file format + shadcn/ui

Next

• Content pages use MDX
• Prefer fetching data in RSC (page can still be static)
• Use next/font + next/script when applicable
• For above-the-fold images, use priority on next/image
• Be mindful of serialized prop size for RSC → child components

TypeScript

• Don't unnecessarily add try/catch
• Don't cast to any