
frontend · design systems · agents
Senior agentic
product engineer.
Frontend engineer in Berlin. I build product frontends and design systems in TypeScript, React, and Vue, connecting deep engineering experience with the multiplier of modern agentic engineering.
How I work
01Spec
Work starts as a written spec: feature definition, bounds of scope, and acceptance criteria. Spec-driven engineering settles open questions before any code exists, and every later phase validates against it.
02Plan
Engineering effort goes where experience and taste matter most: robust technical architecture and a clear implementation plan, built on proven frameworks and patterns, and weighed against existing systems, customer needs, and business goals.
03Build
Agents take on the rote implementation: the boilerplate and repetitive code engineers used to type and retype. Running in parallel, they turn a good plan into working software fast, and free the engineer for higher-level thinking: directing the work, catching problems early, and keeping applications coherent as they grow.
04Verify
Verification is what makes agent-written code trustworthy. Every change is validated against the acceptance criteria with unit tests for logic, end-to-end tests for user flows, and visual regression for the interface. Agents make tests cheap to write, so coverage goes well past what a deadline used to allow.
05Review
Pull requests are built for confident review: clear context, evidence that it works, and a trail back to the spec. Agent review handles the mechanical pass, so human review, on my work and teammates’ alike, can focus on design and judgement.
Timeline
Late 1990s
Web 1.0
The early days of Netscape and a visual web, when the Internet was young. Pages built by hand: tables for layout and far too many 1px spacer.gifs.
- HTML
- GIFs
- Image maps
- Frames
- FTP
Early 2000s
CSS and Flash
The browser wars, and the web learning to move. Built interactive sites in Flash and ActionScript, while layouts moved from tables to CSS one IE6 hack at a time.
- Flash
- ActionScript
- SWFObject
- CSS
- Internet Explorer 6
- Server-side includes
- CGI scripts
- Dreamweaver
- BBEdit
- Photoshop
- Illustrator
2005–2020
WordPress and web standards
The web standards years, when semantic markup and CSS layout were a cause worth arguing for. Freelancing as Little Penguin Studio since 2000, with WordPress as the constant for fifteen years.
- WordPress
- PHP
- MySQL
- phpMyAdmin
- HTML5
- JavaScript
- CSS reset
- 960 Grid
- CSS sprites
- @font-face
- Cufon
- jQuery
- Modernizr
- Silverlight
- Firebug
- TextMate
- Google Analytics
- Git
- SVN
- Apache
- cPanel
- MAMP
2012–2015
Responsive and component libraries
Phones turned every layout into a question of screen width. At Domain7, shipped the team’s first responsive sites and introduced component libraries, including Librarian, an open-source PHP tool for SCSS UI libraries.
- WordPress
- WP-CLI
- Drupal
- Sass
- Less
- Stylus
- Compass
- Susy
- Bootstrap
- BEM
- normalize.css
- Media queries
- Autoprefixer
- jQuery
- Harvey.js
- Grunt
- Gulp
- Bower
- Browsersync
- Atomic design
- Sketch
- Font Awesome
- IcoMoon
Mid 2010s
Decoupled frontends
A new JavaScript framework every month, and the CMS turning into an API. Spoke at WordCamp 2015 on headless WordPress: the WP API feeding decoupled Angular frontends.
- WordPress
- WP REST API
- Angular
- Ember
- Handlebars
- Lodash
- Underscore
- Moment.js
- Karma
- Browserify
2015–2019
React
Components won, and frontends became applications with a build step. Headless WordPress feeding React at Carter Hales, Vue contract work for Invoke, then frontend lead at MEC.
- React
- Redux
- Redux Thunk
- React Router
- PropTypes
- Create React App
- Vue
- ES6
- SCSS / CSS Modules
- Axios
- Jasmine
- Mocha
- Chai
- Enzyme
- BrowserStack
- Webpack
- Babel
- Yarn
- Storybook
2019–2022
Design systems at scale
Design systems grew into infrastructure, with design and code sharing one source of truth. Staff engineer for design systems at Thinkific, and primary engineer on the React and Storybook system behind most of its products.
- Storybook
- Design tokens
- Radix UI
- Chromatic
- TypeScript
- Emotion
- styled-components
- React
- GraphQL
- Apollo Client
- Jest
- Testing Library
- Cypress
- Monorepos
- Lerna
- Nx
- ESLint
- Prettier
- Figma
2020s
Full-stack TypeScript
TypeScript became the default, and frontend engineers started owning the server too. Next.js end to end, deployed on Vercel, and the stack behind my own products, including Soundmap.
- TypeScript
- Next.js
- Node
- Tailwind
- shadcn/ui
- Nuxt
- SwiftUI
- Supabase
- Prisma
- Zod
- TanStack Query
- Vitest
- Playwright
- Vite
- pnpm
- Docker
- Vercel
- S3
- ffmpeg
Now
Agentic engineering
The biggest shift since Netscape. Claude Code and Cursor write most of the code, engineering moves up to architecture, planning, and review, and every change still ships as a pull request I own.
- Claude Code
- Cursor
- MCP
- AI SDK
- Spec-driven
- Plan mode
- Subagents
- Skills
- CLAUDE.md
- AGENTS.md
- Git worktrees
- Git
Experience
Now
Frontend Engineer at reteach, Berlin. Vue and TypeScript across its LMS: product development, design system ownership, and user-facing AI features.
Product & SaaS
- reteachfrontend engineer
- Lightspeed Commercesenior frontend engineer
- Aplossenior frontend engineer
- Highspotsenior frontend engineer
- 1Passwordsenior frontend engineer
- Thinkificstaff frontend engineer
- MECsenior frontend developer
Agency & studio
- Invokecontract developer
- Carter Hales Design Labsenior web developer
- Domain7web developer
- LiFT Studiosweb developer
Leadership
Set direction
Led frontend architecture for mec.ca and its migration to React and Redux. At Thinkific, went from a regular contributor to the design system’s full-time owner, setting its roadmap with design and business stakeholders.
Grow people
Interviewing, onboarding, and training frontend hires at Thinkific, MEC, and Domain7, and leading a small web team at Carter Hales. Mentoring runs through every role.
Build culture
Fostering collaborative, communicative, and effective teams: reviews that teach rather than gatekeep, decisions made in the open, and room for quieter voices.
Connect teams
The conduit between design, engineering, and the business, bringing deep engineering experience and a designer’s eye to translating intent, constraints, and goals, so trade-offs are made together instead of discovered late.
Stack
Agentic
- Claude Code
- Cursor
- GitHub Copilot
- ChatGPT
- Spec-driven
- Plan mode
- Subagents
- Skills
- Git worktrees
- CLAUDE.md
- AGENTS.md
- MCP
- Playwright MCP
- Figma MCP
- GitHub MCP
- AI SDK
- Whisper
- BirdNET
- YAMNet
Languages
- JavaScript
- TypeScript
- Swift
- PHP
Frameworks
- React
- Next.js
- Vue
- Nuxt
- SwiftUI
- Node
Data
- GraphQL
- Apollo Client
- TanStack Query
- Pinia
- Zod
- Supabase
- Firebase
- Prisma
- S3
Style
- Design systems
- Design tokens
- Storybook
- Chromatic
- Radix UI
- shadcn/ui
- Tailwind
- SCSS / CSS Modules
- styled-components
- Emotion
Design
- Figma
- FigJam
- Sketch
Planning
- Agile
- Scrum
- Kanban
- GTD
- Jira
- Linear
- Trello
- Confluence
- Obsidian
Ship
- Vitest
- Jest
- Testing Library
- Playwright
- Cypress
- Vite
- npm
- pnpm
- Monorepos
- Lerna
- Nx
- ESLint
- Prettier
- Stylelint
- GitHub
- Docker
- Vercel
- Datadog
- Xcode
- ffmpeg
Legacy
- WordPress
- WP REST API
- WP-CLI
- Advanced Custom Fields
- Drupal
- Composer
- MySQL
- phpMyAdmin
- Perl
- Bootstrap
- Less
- Stylus
- Compass
- Susy
- BEM
- normalize.css
- jQuery
- jQuery UI
- AngularJS
- Ember
- Redux
- Redux Thunk
- Vuex
- PropTypes
- Create React App
- Axios
- Lodash
- Moment.js
- Harvey.js
- Jasmine
- Karma
- Enzyme
- Grunt
- Gulp
- Bower
- Yarn
- Webpack
- Babel
- SVN
- Apache
- cPanel
- DigitalOcean
- FTP
- Flash
- ActionScript
- Silverlight
- Dreamweaver
Projects
Soundmap
launching soon- platform
- web
A public map of field recordings: filter by place, subject, and year, then play back the filtered set. Each recording is enriched with weather, sun and moon data, and the bird species detected in the audio.
Built end to end with agents: the app, a token-driven design system, and an ingestion pipeline for field recordists that transcodes, uploads, and enriches the audio. Launching soon.
- Next.js
- Supabase
- MapLibre
- WaveSurfer
- BirdNET
- YAMNet
- Whisper
- TensorFlow
- Storybook
An iOS reference app for flags: a world map and a searchable database, with the history and symbolism behind each flag.
Ships with home screen widgets and a quiz mode. Owned everything around the code too: the content, the marketing site, and the TikTok launch.
- Swift
- SwiftUI
- Xcode
- WidgetKit
- MapKit
- StoreKit
- Combine
- SF Symbols
The site for my music: release pages, an EPK, bios, touring, and session recording, with press quotes placed next to the records they review.
Config-driven content, generated SEO metadata, and a deliberately short dependency list. Lean, typed, and built with agents.
- Next.js
- React
- TypeScript
- SCSS / CSS Modules
- Vercel
Contact
Email is the best way to reach me. Always happy to talk frontend architecture, design systems, and agentic engineering.
hello@nathansh.com