tomstech.net / Skills & Project Work

Design, Dev,
and the Work
Between.

Strategic technical execution for organizations that need more than a vendor. Design systems, UX architecture, full-stack development in Python / JavaScript / TypeScript / Ruby, and structured team growth — delivered with the same rigor on small teams as on large ones.

Start a Conversation See Project Work
4 Core Languages
Python · JS · TS · Ruby
UX Audit + Design Systems
Figma · Token Architecture · a11y
15+ Years Experience

Capability Matrix

Languages, tools, and practices I work in daily — organized by discipline.

Languages & Runtime

  • Python 3 FastAPI · asyncio · data pipelines
  • TypeScript strict mode · discriminated unions · zod
  • JavaScript ES2022+ ESM · modern async patterns
  • Ruby Rails · service objects · background jobs
  • REST & GraphQL APIs design, documentation, integration
  • Shell / Bash task automation · CI scripting

Frontend & React

  • React 18 hooks architecture · compound components
  • Next.js App Router · RSC · route handlers
  • Component API design prop contracts · TypeScript generics
  • Storybook component docs · interaction tests
  • Tailwind CSS utility-first · design token integration
  • Vite / Webpack build optimization · bundle analysis

UX & Research

  • UX auditing heuristic analysis · prioritized findings
  • User research interview synthesis · journey mapping
  • Interaction design flows · prototyping · edge-case design
  • Accessibility WCAG 2.1 AA · ARIA · screen reader QA
  • Figma high-fidelity prototypes · spec delivery
  • Usability testing Maze · FullStory · session analysis

Design Systems & Tokens

  • W3C DTCG token architecture 3-tier primitive → semantic → component
  • Figma Variables multi-mode · light/dark · brand theming
  • Style Dictionary cross-platform token export pipelines
  • Component library architecture versioning · breaking-change strategy
  • Design/dev handoff spec documentation · adoption workflows
  • Token governance naming conventions · decision audits

Architecture & Strategy

  • System design API modeling · service boundaries
  • Performance auditing profiling · bundle analysis · Core Web Vitals
  • Security posture auth patterns · dependency audits · OWASP
  • CI/CD pipelines GitHub Actions · automated testing gates
  • Technical debt triage prioritized roadmaps · incremental migration
  • Cloud deployment AWS · Vercel · Render · containerization

Team & Staff Development

  • Engineering mentorship structured 1:1s · skill gap assessment
  • Cohort-based learning programs differentiated tracks · real codebase examples
  • Code review culture standards docs · psychological safety frameworks
  • Workshop facilitation hands-on technical training · async materials
  • Cross-functional bridging design ↔ dev alignment · shared vocabulary
  • Onboarding program design ramp plans · documentation systems

Project Work

Selected engagements across design systems, UX, development, automation, and team growth.

01 Design Dev

Design System Architecture for a 40-Person Product Team

SaaS Product Company (NDA) · 2023–2024 · Design System Build

The Situation

Four product teams had diverged into independent component libraries across four repos with no shared token layer. Engineers and designers used conflicting naming conventions — a UI change triggered 2–3x rework across every codebase. An audit found 340+ unique color values in the Figma files alone.

Discovery

Audited three Figma libraries and four React codebases simultaneously. Catalogued every component variant and identified 17 conflicting button implementations — each with slightly different prop shapes. Mapped the token hierarchy (or lack of one) from primitive hex values up to component usage.

Approach

Implemented W3C DTCG token architecture with a strict 3-tier hierarchy: primitive → semantic → component. Built Figma Variables with light/dark mode, synced via Style Dictionary to TypeScript constants. React component library rebuilt using compound component pattern with TypeScript strict mode throughout.

Outcome

Full adoption in 3 months. Color decisions reduced from 340+ values to 58 semantic tokens. Button variants unified to one API with 6 props. Teams reported ~40% reduction in design/dev handoff friction. The token pipeline became a template adopted by two partner teams.

Stack: Figma Variables Style Dictionary TypeScript (strict) React 18 Storybook GitHub Actions
02 UX

UX Audit & Onboarding Redesign for B2B SaaS

HR Tech Platform (NDA) · 2024 · UX Audit + Conversion

The Situation

Onboarding completion rate was 34%. The product team assumed it was a technical problem (slow load, bugs). Support ticket analysis told a different story — recurring confusion around account setup and team invitation flows pointed to structural UX issues, not performance.

Discovery

Ran 12 user interviews with HR admins plus deep-dive session recording analysis in FullStory. Identified 4 critical drop-off points. Root cause: the app's mental model was built around developer workflows, but the primary user was an HR administrator with a completely different job context.

Approach

Redesigned the 3-step onboarding flow with progressive disclosure, restructuring the information architecture around the HR admin's actual job tasks — not the product's data model. Added contextual tooltips at each decision point. Built a low-fidelity Figma prototype and validated with 6 target users via Maze before engineering handoff.

Outcome

Onboarding completion rose from 34% to 67% within 6 weeks of launch. Onboarding-related support tickets dropped 58%. The IA audit framework was adopted by the product team as a standing QA process for all new feature flows.

Stack: Figma FullStory Maze WCAG 2.1 Notion (docs)
03 Python

Report Automation Pipeline — 20 Hours of Weekly Manual Work Eliminated

Regional Real Estate Group · 2023 · Process Automation

The Situation

A 3-person ops team spent 20 hours/week manually pulling data from 4 separate systems, reformatting in Excel, and emailing consolidated reports. Human error rate on the output was approximately 12%, causing downstream reconciliation work every month.

Discovery

Shadowed the ops team through a full weekly reporting cycle, mapping every transformation step. Found that 85% of the work was entirely mechanical — no human judgment required. The remaining 15% was review and sign-off, which the team should have been doing all along.

Approach

Built a Python 3 pipeline using pandas for data transformation, openpyxl for formatted Excel output, and Jinja2 for email templating. Deployed as a scheduled job via cron on a small Render VM. Added a pytest suite covering all transformation functions and edge cases with known-good fixture data.

Outcome

Manual report time dropped from 20 hrs/week to ~1.5 hrs (review and sign-off only). Error rate on machine-generated sections: 0%. The ops team redirected recovered hours to higher-value client work. The pipeline has run without intervention for 14+ months.

Stack: Python 3 pandas openpyxl Jinja2 pytest cron Render
04 Dev

JavaScript→TypeScript Migration of an 80K-Line React Application

EdTech Platform (NDA) · 2022–2023 · Codebase Migration

The Situation

An 80,000-line JavaScript React codebase with undocumented implicit contracts between modules. 4–6 production bugs per sprint were directly caused by type mismatches, prop-drilling errors, and unhandled undefined paths — each requiring manual triage by senior engineers.

Discovery

Static analysis with ESLint and jscpd revealed 27% code duplication and approximately 400 implicit any-equivalent patterns. Mapped the highest-risk module boundaries by cross-referencing bug history with call graphs. The most fragile layer was the API response handling — no contracts at all.

Approach

Incremental migration using @ts-check JSDoc first pass, then full TypeScript strict mode in phases by module risk. Introduced discriminated unions for all API response types and zod for runtime validation of external data at system boundaries. Built an internal migration guide adopted by 5 other engineers on the team.

Outcome

Sprint production bugs dropped from 4–6 to 0–1 within 2 sprints of migration completing. Code duplication down from 27% to 9%. New engineers reported measurably faster onboarding. TypeScript coverage: 0% → 94% over 8 months with zero forced rewrites.

Stack: TypeScript (strict) React 18 zod ESLint jscpd Vite
05 Team

Engineering Skills Program for a 12-Person Team Transitioning to Modern Stack

Government Contractor (NDA) · 2023 · Team Development

The Situation

A 12-person engineering team operating primarily in legacy PHP/jQuery. The organization had committed to a React + TypeScript + REST API migration. Team had high anxiety, significant resistance, and 2 senior engineers threatening to leave — treating the migration as a demotion of their expertise.

Discovery

Individual skill assessments through 1:1 conversations plus a structured "learning edge" survey. Identified three distinct cohorts: 4 people nearly ready to contribute immediately, 4 with a mid-gap needing targeted bridging, and 4 needing fundamentals work before they could engage the new stack meaningfully.

Approach

Built a 16-week cohort-based program with differentiated tracks — not a single all-hands curriculum. Weekly workshops used real codebase examples, never toy apps. After week 6, the two most resistant senior engineers became track leads, shifting the power dynamic. Paired code review became a structured learning artifact, not a gatekeeping mechanism.

Outcome

Zero engineers left. Eleven of twelve were contributing meaningfully to the new stack by week 14. The two originally resistant senior engineers became the program's loudest advocates. The cohort structure was adopted as the standard onboarding template for all new hires going forward.

Stack: React TypeScript Cohort Design Structured 1:1s Peer Mentorship Internal Curriculum

Ways We Can Work

Pick the engagement model that fits your timeline, scope, and team setup.

Project Build

Defined scope, delivery milestones, and hands-on execution from discovery to rollout.

Scoped Delivery Milestones Implementation

Audit + Strategy

Targeted diagnostics, ranked findings, and a practical plan your team can execute immediately.

UX / Tech Audit Roadmap Prioritization

Team Acceleration

Mentorship, systems coaching, and engineering guidance to increase team capability over time.

Mentorship Workshops Process Design

Need Something Specific?

If your project does not fit a standard package, start with a quick consult and I will map the best path forward.

Quick Consult Text Tom