The tools I use every day to design, build, and ship.
Last updated
Editor & TerminalVS Code
Primary editor — dark theme, always. I keep it lean with only the extensions I actually use.
Geist Mono
Editor font. Clean, readable at small sizes, designed specifically for code.
Prettier
Format on save. Non-negotiable. Eliminates all style debates.
ESLint
Catch errors before runtime. Configured strictly — I treat warnings as errors.
GitLens
Inline blame, history at a glance. Indispensable when tracing down a regression.
Tailwind CSS IntelliSense
Autocomplete + class sorting. Speeds up styling significantly.
Auto Rename Tag
Renames closing tag automatically. Saves 5 seconds 40 times a day.
Error Lens
Surfaces errors inline on the line they occur — no alt-tab to the Problems panel.
AI ToolsCursor
My primary editor setup. The tab-completion and inline edits are the best I've used. I use it for refactoring, exploring unfamiliar APIs, and drafting components.
ChatGPT (GPT-4o)
For reasoning through architecture decisions, writing/reviewing SQL, and anything that needs a back-and-forth conversation.
Claude
Long-context tasks — reading and summarizing large codebases, drafting documentation, reviewing PRs end-to-end.
Vercel AI SDK
For streaming AI features in Next.js when a project needs them.
GitHub Copilot
Occasional second opinion when Cursor suggestions aren't clicking. Useful for boilerplate-heavy files.
Browser & DevToolsChrome
Primary browser for development. DevTools is still the best in class.
React Developer Tools
Component tree inspection, props/state drill-down, profiler for render performance.
Lighthouse
Performance, accessibility, SEO audits. I run it on every major PR before merging.
Network tab
My primary debugging tool for API issues — payload shape, timing, headers, CORS.
DesignFigma
Daily. I use it both to build from existing designs and to sketch my own before writing a line of code.
FigJam
Architecture diagrams before I start any non-trivial feature. Drawing the component tree first saves significant refactoring time.
Framer Motion
My go-to for production animations. The mental model just clicks for me.
Stack DefaultsNext.js 15 (App Router) + TypeScript
Starting point for every web project. App Router co-locates data fetching with components. TypeScript prevents entire categories of bugs.
Tailwind CSS + Shadcn/UI
Tailwind for utility-first speed; Shadcn for accessible, unstyled primitives I can customize without fighting a design system.
Vercel
Deploy target of choice. Preview URLs per branch, instant rollbacks, Edge Runtime when needed.
MongoDB Atlas or PostgreSQL on RDS
Atlas for flexible, document-shaped data. PostgreSQL (on RDS) when the data is relational and needs joins and indexes.
What I Always Add FirstESLint + Prettier + Husky pre-commit hooks
Enforces code quality before a commit lands. Eliminates the 'I'll clean it up later' problem.
GitHub Actions
Lint + type check + build on every PR. If it doesn't pass CI it doesn't merge.
Lighthouse CI on PRs
Catches performance regressions before they hit production — not after a user complains.
Learning ResourcesJosh Comeau
The best CSS course I've taken. His interactive explanations of layout algorithms finally made flexbox and grid click.
Kent C. Dodds
The definitive source on testing patterns. His philosophy — test behavior, not implementation — changed how I write tests.
Theo (t3.gg)
Keeps me current on the Next.js + TypeScript ecosystem. Good signal-to-noise ratio on what's worth adopting.
Next.js & Vercel documentation
Primary reference. Well-maintained, accurate, and the examples are production-quality.
Inspired by uses.tech — a community-maintained directory of developer setups.