Notes from shipping code
Deep-dives on the problems I've debugged, the patterns I've extracted, and the decisions I'd make differently next time.
The Rule of Three in Design Systems
When to extract a repeated pattern into a shared abstraction, and when to leave it inline. A framework from auditing portfolio typography.
ESLint Import Ordering for Monorepos: Taming 77 Violations
Setting up import/order with custom path groups for monorepo aliases, fixing ESLint 10 compatibility, and auto-fixing 77 violations across the codebase.
Removing focus-trap-react: Native Focus Management in Modals
Replacing a 15KB focus-trap dependency with native dialog behavior and manual focus management drops bundle size and simplifies the shared-ui library.
Building a Typography System for a Next.js Design System
Auditing three competing heading systems and consolidating them into a variant-based Heading/Text API that serves as a single typography source of truth.
Composing React Providers Without the Nesting Nightmare
A functional composition pattern that turns deeply nested provider trees into a flat, readable list. Includes automatic React DevTools display names.
From Wrapper Hell to One Source of Truth
Promoting kit wrappers into a shared-ui library with typography variants and layout primitives eliminates 2,000 lines of duplication.
Automating Visual Regression Testing in GitHub Actions
A CI pipeline catches visual regressions with Playwright screenshots, auto-updates baselines via workflow dispatch, and re-triggers itself with a PAT.
Building an Auto-Generated Table of Contents with Scroll Spy
Extracting headings from rendered MDX, tracking reading position with IntersectionObserver, and adapting between a sticky sidebar and a mobile bottom sheet.
Building a Unified Content Pipeline with Next.js and MDX
How a single content registry replaces duplicated per-type data files, cutting the cost of adding new content types from 6+ files to 3.