Salem Cobalt#
Principal Frontend Engineer, Design Systems Expert#
Boston-based frontend engineer with 14+ years specializing in design systems used at scale — component API architecture, design token pipelines, and theming systems — with deep expertise in React, TypeScript, headless UI primitives, web components, accessibility, and AI-assisted (agentic) development workflows.
Work Experience#
Independent Software Consultant, Midnight Mansion (April 2026 – May 2026)
- Frontend architecture consulting, plus agent-driven refactoring and migration workflows (Claude Code) across the client's full-stack codebase
- Designed and shipped a highly interactive physical mini-game for Edge of Elsewhere, their upcoming immersive venue — MCU programming, a centralized SSE-based control system, WebSockets, and a collection of fully playable levels
VP of Engineering – Frontend Architecture, Pypestream (January 2023 – March 2026)
- Architected and helped build Pypestream's cross-platform (Lit + React-wrapped) design system — built on headless UI primitives (Base UI, Floating UI, TanStack Table) and adopted company-wide across 5+ next-gen products
- Baked WCAG 2.1 AA accessibility — keyboard navigation, focus management, ARIA patterns — directly into the design system, so every downstream product inherited it
- Owned the company-wide frontend re-platforming: unified 7+ disjointed product repos and shared UI libraries into a single TypeScript monorepo, centralizing how everything is built, tested, documented, deployed, and maintained
- Drove a 4x increase in frontend release frequency and 50%+ faster CI/CD — even as the number of centrally managed apps grew — saving thousands in infrastructure costs
- Led pragmatic AI coding-agent adoption across frontend teams (Cursor, Claude Code) and AI-assisted code review (CodeRabbit) — shipping production code with agents while raising, not lowering, the code-quality bar
- Led a distributed team of 9 full-stack / senior frontend engineers; technical lead on the greenfield rebuild of Pypestream's core management platform, which directly supported $1M+ in Fortune 500 contract renewals and expansions
Principal Frontend Engineer, Knapsack (May 2020 – January 2023)
- Rebuilt the entire frontend UI for Knapsack's flagship "design system as a platform" product — the tool enterprise design system teams use to build, document, theme, and ship their own design systems
- Co-developed the codemod systems powering the core product, including an inheritance-based UI theming system that lets customer brands customize the product's appearance without compromising accessibility or slowing product iteration
- Architected the end-to-end design token pipeline: Style Dictionary definitions consumed as CSS custom properties, Sass mixins, and auto-generated TypeScript typings
- Built, tested, and shipped major UI/UX-heavy iterations of the product's modular block-based editor — React, XState, GraphQL, and TypeScript throughout
Lead Frontend Architect, Pegasystems (July 2016 – May 2020)
- Frontend development lead and creator of the Bolt Design System, powering the UI across Pega's 5+ corporate sites and 7+ microsites
- Drove Pega's web frontend consolidation onto Bolt — the fragmentation → migration → adoption arc — through design system summits, cross-team component API workshops, and long-term maintainability practices later featured in my 2019 conference talks
- Planned, built, documented, tested, released, and maintained the system's frontend deliverables: highly accessible components, patterns, design tokens, docs & demos, CI/CD, and dev tooling
- Developed centrally maintained, shared Lit-based web components with deep CMS integration (Drupal 8 + custom Twig extensions), and authored the Sass-based CSS architecture and theming used by engineers, designers, and content authors
Frontend Architect, Genuine Interactive (March 2012 – March 2016)
- Built front-end websites & apps for clients including Angry Orchard, Samuel Adams, Panera Bread, and Akamai
- Consulted on, architected, and built best-in-class responsive, mobile, and desktop sites; early design system advocate
Specializations#
- Design Systems
- Scalable Frontend Architecture
- Web Components
- CSS Architecture
- Web Performance
- AI-Assisted (Agentic) Engineering
Technical Skills#
Design Systems & Component APIs
- Headless / unstyled UI primitives (Base UI, Material UI, Floating UI, TanStack Table) deeply integrated into design system components
- Component API design; design system theming systems
- Design token pipelines (Style Dictionary, Figma-to-code)
- Type-safe styling (Vanilla Extract); automated, versioned design system docs
React & Modern Full Stack
- React, XState, MobX, Next.js, React Router
- Auth0, Kratos, Sentry, Datadog
- Playwright, Vitest, Cypress, Percy, Lost Pixel
AI Tooling & Engineer Efficiency
- Claude Code, Cursor, CodeRabbit — daily production use
- Led sensible team adoption and AI-assisted code review
- Agent workflows for large-scale refactoring and migration
Web Component Architecture
- TypeScript-typed Lit elements with React integration
- Progressive enhancement, accessibility, i18n
- Native form behavior (ElementInternals); extensive Shadow DOM experience
- Server-side rendering via Twig / Node
CSS Architecture
- Scalable BEM / ITCSS Sass architecture
- CSS custom properties, theming systems, design token management
- Advanced animation & interaction patterns; modular (fluid) typography & layout
Web Performance
- Re-render optimization, ES Modules, tree shaking
- Responsive images (intrinsic ratio, average-color / base64 placeholders, lazy loading), Critical CSS, async font loading
- Auditing, monitoring & instrumentation — SpeedCurve, Lighthouse, Web Vitals; Cloudinary, Imgix
Frontend DevOps & Automation
- Monorepo management (Yarn, NX, Lerna), CI/CD (GitHub Actions)
- Serverless functions & middleware (Vercel, Cloudflare Workers)
- Visual regression (Percy, Lost Pixel); monitoring (Sentry, Datadog)
- Automated release pipelines (NPM publishing, GitHub releases, release notes, Slack notifications)
Frontend Tools & Bundling
- Vite, Rollup, Babel, ESLint, Prettier, TypeScript
- GraphQL, Hasura, URQL
- Storybook, Pattern Lab, 11ty; automated docs & schema APIs; Figma + VS Code plugins
Contact Me#
Achievements#
Open Source
- Former Lead Maintainer + core contributor of Pattern Lab
Podcasts
- Design Systems Podcast (S1, E8): Bolt Design System & Front-End Architects
Awards
- Pega’s Business Operations Team Award for Innovation: Q1, 2019
Conference Talks & Speaking
- Front-end Architecture for Scalable Design Systems — the Bolt fragmentation → migration → adoption story
- Next Gen Design Systems with Pattern Lab, Twig, and Web Components (Design4Drupal Boston, 2018)
- Design Systems Are Hard (Design4Drupal Boston, 2017)
- Data Driven Design Systems (Drupal Nights, 2016)
- Bumps in the Road: Addressing the Challenges of Responsive Web Design