Skills
UI & Frontend
ReactVueLitStencilWeb ComponentsTypeScriptJavaScript (ES6+)SVGTailwind CSSCSS Grid/FlexboxAtomic DesignDesign SystemsMaterial DesignArchitecture & Patterns
Spec-driven UIMCP-based tooling (FastMCP)action–state patternsevent bus (pub/sub)component librariesdesign tokensportfolio-level standardsAI & Integration
MCP servers and appsLLM tool integrationsemantic UI interaction (actions/states/events, not DOM)AI-assisted UI workflowsmeta-data–driven behaviorsBackend & Tooling
Node.jsExpressGraphQLREST APIsMongoDB/Mongoosepnpm/Yarn/NPMWebpackbuild pipelinesCLIsPractices
Agiletechnical leadershipmentoringdocumentationcross-functional collaborationremote workproof-of-concept developmentExperience
Principal Architect, UI/UX — Shield Legal LLC
2026 to present- Authoring the ADR for an AI-native UI stack (React, shadcn/ui, Tailwind CSS, Zustand, MCP tooling) built around the action–state pattern validated across 4 apps × 7 frameworks.
- Training and mentoring the engineering team on AI-integrated UI development — agents driving interfaces through the same declared action–state contract as human developers.
Principal Architect, Portfolio UI/UX — Cox Automotive
March 2024 to March 2026- Designed and built an AI-assisted, spec-driven UI platform where YAML specifications generate fully reactive interfaces, live previews, and framework-specific web components, enabling LLMs and human developers to work from a single source of truth.
- Architected a custom MCP host server (built on FastMCP) and a suite of 5 MCP apps exposing UI capabilities, resources, and tools so LLMs can drive rich interfaces via declarative action–state patterns — without reliance on DOM structure.
- Created the Juris runtime as the core reactive engine, with a 20+ component library (design system, Material Design, layout, marketing) styled via Tailwind and backed by a unified SVG icon system of 18k+ icons.
- Implemented a client-side event bus (pub/sub) and meta-data–driven action–state models so both LLMs and users can trigger and observe UI state transitions in a robust, testable way.
- Defined portfolio-wide UI, web component, and design system standards; partnered with product, UX, and engineering leadership across multiple products and teams.
Senior Lead Architect, Portfolio UI/UX — Cox Automotive
February 2023 to March 2024- Guided portfolio-level UI architecture across multiple products, aligning teams on shared components, patterns, and design system usage.
- Drove adoption of web component–based architecture (Lit, Stencil) to increase reuse, standardize behavior, and decouple UI from specific frameworks.
Portfolio Technical Architect, UI/UX (IMS) — Cox Automotive
September 2020 to February 2023- Served as UI/UX technical lead for the IMS portfolio; introduced spec-driven approaches and componentized layouts that reduced duplication and improved feature delivery speed.
Lead Software Engineer / Lead Technical Architect, UI — Cox Automotive
July 2019 to September 2020- Built and maintained front-end features for customer-facing products; developed reusable UI components that evolved into portfolio-wide standards.
Principal UI Engineer — Skava
June 2018 to April 2019- Contributed to a next-generation e-commerce platform; created an SVG-based Material Design icon component for the internal UI framework and refactored a reference store to adopt latest framework components.
- Authored Markdown documentation for the UI library and development environment; provided focused training for SI and in-house engineering teams.
Senior UI Software Engineer — Demandbase
July 2007 to January 2018- Delivered UIs for enterprise SaaS products over 10+ years on React/Redux, AngularJS, and Adobe Flex/AIR as the stack evolved across the decade.
- Developed a programmatically generated SVG information funnel and a desktop AIR ticker-tape display — both requiring deep custom UI work with no off-the-shelf solutions.
- Built reusable React components, rapid prototype UIs, and mock API servers in Node to validate design and technology directions.
Senior UI Software Engineer — Sapias
April 2004 to July 2007- Built a rich internet application in Adobe Flex for a vehicle tracking platform, including custom map rendering of vehicle locations before Google Maps was widely available.
- Designed custom dynamic dashboard dials and worked closely with designers to refine the full application UI.
Early Career Highlights — SGI, Netscape, Taligent, Xaos Tools, Consilium, Measurex, Teknowledge
1985 to 2004- Senior Software Engineer — SGI (Silicon Graphics): Workstation UI and 3D graphics interfaces at the peak of SGI's influence in professional computing.
- Senior Software Engineer — Netscape: UI development during the browser wars — one of the most consequential periods in the history of software.
- Senior Software Engineer — Taligent: Apple/IBM's ambitious OO platform initiative — deep systems-level UI at the intersection of two industry giants.
- UI Technical Lead — Xaos Tools: Led UI for creative imaging software, blending technical depth with visual design sensibility.
- Senior Staff Engineer / UI Project Manager — Consilium: Dual engineering and project leadership role for manufacturing automation UI systems.
- UI Software Engineer — Measurex Automation Systems: Early industrial UI for process automation.
- Apprentice Knowledge Engineer — Teknowledge (1985): Where it all started — expert systems UIs, launching a lifelong focus on human–computer interaction.
Education
BS, Mechanical Engineering (Cum Laude)
Rose-Hulman Institute of Technology, Terre Haute, IN
Notable Projects
Spec-Driven Development & Cleanroom Benchmark
- Publishes implementation-derivable specs instead of code — each `SPEC.md` pins down behavior precisely enough (status codes, field names, validation rules, concurrency guarantees) that someone with zero access to the original implementation can rebuild it faithfully.
- Used as a reproducible benchmark for how well an AI coding agent can turn a complete specification into working software with no reference implementation to copy from.
- spec-cleanroom — the experiment built on top of it: two different coding agents (Gemini via Antigravity CLI, and Grok Build) independently implemented the same poker and retro apps from the identical spec, with no visibility into each other's work.
StackSpec-driven developmentTechnical writingAI evaluation
Real-Time Prototype Apps
- proto-poker — free, no-signup planning-poker tool. Create a room, share the link, vote on a Fibonacci deck, reveal together.
- proto-retro — sibling project mirroring proto-poker's architecture: a team retro board (Went well / To improve / Action items) with the same hidden-until-reveal mechanic.
- proto-bbot — a Slack bot that tracks teammates' birthdays and announces them in-channel via a daily cron job.
- All three run on plain Vercel serverless functions with Upstash Redis for state and Server-Sent Events for realtime push — no accounts, no subscriptions, no third-party realtime vendor.
StackWeb ComponentsRedisServer-Sent EventsVercel
eswat2-mcp
personal knowledge base
- A hybrid MCP + REST server (Python, FastMCP + FastAPI) exposing 40+ years of career history, projects, research, and an art collection across 7 namespaces, so any MCP-aware LLM can query who I am and what I've built.
- Three interfaces onto the same underlying knowledge base — a browsable wiki, a 2D knowledge graph, and an interactive 3D graph visualization.
- A `/render` endpoint turns any internal MCP URI (e.g. `eswat2://manifest`) into standalone HTML, letting individual knowledge-base resources be viewed or linked to directly outside of an MCP client.
- Runs as a living personal knowledge graph rather than a static resume — this page's content was pulled directly from it.
StackPythonFastMCPFastAPIMCP
Spec-Driven MCP Server Suite
5 MCP/REST servers, Docker-orchestrated
- Juris MCP Server — YAML specs generate fully reactive Juris.js component data structures.
- Lit MCP Server — YAML specs compile to production Lit 4.x web components with Shadow DOM, typed props, and state management.
- Stencil MCP Server — "Components as Spec": YAML compiles to production-ready Stencil 4.x web component distributions, dual MCP + REST protocol.
- SVG Icon MCP Server — unified access to 18,978 unique icons (29,710 assets) across 9 families, including Material Design, Feather, Lucide, Tabler, MDI, Nucleo UI, Phosphor, and automotive brand logos.
- Tailwind MCP Server — Tailwind CSS generation with post-processing into layered CSS for Shadow DOM and document-level use.
- All five are orchestrated together via Docker Compose (proto-spec-dkr), letting any MCP-aware LLM generate framework-specific UI directly from a YAML spec.
StackMCPFastMCPDockerStencilLitTailwind CSSSVG
Tinker
- Minimal reference app for validating the action–state interaction pattern across frameworks — the simplest member of the same suite as Autos, Funnel, and Sudoku.
Sudoku App
one design, 10 framework implementations
| app | framework | store |
|---|---|---|
| sudoku-wc | Stencil | @stencil/store |
| sudoku-uce | uCE | nanostores |
| sudoku-sld | Solid | built-in |
| sudoku-lit | Lit | nanostores |
| sudoku-p4t | Preact | Signals |
| sudoku-r3t | React 19 | Zustand+persist |
| sudoku-s4e | Svelte | Runes |
| sudoku-vue | Vue 3 | Pinia |
| sudoku-p4t+ | Preact CE | Signals |
| sudoku-s4e+ | Svelte CE | Runes |
- Puzzle API: serverless Rust — sudoku-rust-api, deployed at a live endpoint.
- Stores utilize a simple action/state pattern; state is persisted to Local Storage.
- Styling is done with Tailwind CSS and a custom color plugin.
StackStencilSvelteSolidPreactLituCEReactVueNano StoresZustandPiniaRunesSignalsTailwind CSSTypeScriptRust
Autos — Technology Demonstration
one design, 7 framework implementations
| app | framework | store |
|---|---|---|
| autos-lit | Lit | nanostores |
| autos-p4t | Preact | Signals |
| autos-r3t | React 19 | Zustand+persist |
| autos-sld | Solid | built-in |
| autos-s4e | Svelte 5 | Runes |
| autos-vue | Vue 3 | Pinia |
| wc-autos | Stencil | @stencil/store |
- Started as a take-home exercise during the Cox Automotive interview process — the prompt was to build a dealer/vehicle browsing UI against a provided API. The API didn't support CORS, so the server was re-engineered from scratch and deployed independently to unblock the work.
- A GraphQL layer was built on top unprompted, as a second, more sophisticated submission — the extra work reportedly helped solidify the job offer. The GraphQL backend, gt-forza, still runs on Vercel today, alongside the original gt-sports backend.
- Each app: 10 components, action/state pattern, Tailwind CSS, SVG icons via a dynamic web component loader.
- Car data is sourced from racing video games — Forza Horizon 5 and Gran Turismo Sport — for rich, structured, publicly known datasets with no licensing concerns.
- SVG icons provided via a dynamic web component loader.
StackStencilSvelteSolidLitPreactReactVueNano StoresZustandPiniaRunesSignalsTailwind CSSSVGGraphQL
Custom SVG Funnel
one design, 8 framework implementations
| app | framework | tween engine |
|---|---|---|
| funnel-s4e | Svelte 5 | built-in |
| funnel-uce | uCE | Anime.js |
| funnel-sld | Solid | Anime.js |
| funnel-lit | Lit | Anime.js |
| funnel-p4t | Preact | Anime.js |
| funnel-wc | Stencil | Anime.js |
| funnel-vue | Vue 3 | Anime.js |
| funnel-r3t | React 19 | Anime.js |
- The funnel geometry originated at Demandbase, procedurally generated at runtime with Raphael.js in ~278 lines of code. For this suite it was translated into static SVG elements, with Anime.js (or Svelte's own tweening) animating against them instead — same visual result, animation now a separate concern from the drawing logic.
- The animation is fully interruptable — if the target changes mid-animation, the tween restarts from its current position with no reset or shudder, so rapid selections feel seamless.
- Each app: 12 building blocks as single-file components, Tailwind CSS with a custom color plugin, responsive layout, state persisted to Local Storage, deployed on Vercel.
- Styling is done with Tailwind CSS and a custom color plugin.
StackStencilSvelteSolidLituCEPreactReactVueNano StoresPiniaRunesSignalsViteTailwind CSSSVGAnime.js
Icon Libraries & Tools
- s4e-icons — Material Design icon component library for Svelte (33 icons) — proofs.
- s4e-ikons — automotive manufacturer logo icon library for Svelte (86 logos) — proofs.
- proto-ikon-loader — dynamic SVG icon web component loader used across the Autos and Funnel suites.
- Icon Proofs Web Component — wc-proofs, a simple icon proofs sheet implemented in Stencil, optimized with SVGOMG, laid out with flexbox.
StackSvelteStencilSVGTypeScript
NPX business card
- npx eswat2@latest
- npx eswat42@latest
StackJavaScriptNPMNPX
Farmers Market, Columbus, IN
pro bono, Dec 2014 to Dec 2018 — site retired Dec 2018
- Developed a new web app to streamline their signup and approval process.
- Allowed them to move to a completely paperless process.
- Pages defined with EJS (Embedded JavaScript templating).
- Provided password-less admin interface.
- Automatically updated the vendor list on the website as they were approved.
- Private Repo.
StackBootstrapNodeExpressEJSMongoDBHeroku
Technology
Anime.js — All-in-one animation engine
Axios — Promise based HTTP client
Between.js — Lightweight ES6 tweening engine
Behance — Design Inspiration
Capacitor — A cross-platform native runtime for web apps
Colors — A nicer palette for the web
CSS3 — moz://a
CSS Animations — moz://a
CSS variables — moz://a
Custom Elements Everywhere — Web Components
devolution — Ship modern, and de-modernized bundles
Direflow — Create fast, performant Web Components using React
Dribbble — Show and tell for designers
egghead.io — Learn to Code
EJS — Embedded JavaScript templating
ES6 — ECMAScript 6
esbuild — An extremely fast JavaScript bundler
Fast — Adaptive UI System, Utilities & Tools
Fetch API — moz://a
Figma — The collaborative Interface Design Tool
Framer X — Interactive Design Tool
Got — Human-friendly and powerful HTTP request library for Node.js
Headless UI — Completely unstyled UI components
Hooks — React
HTML — moz://a
HTML5 — moz://a
iconfactory — Award-Winning Design & Development
JavaScript — moz://a
Ky — Tiny & elegant JavaScript HTTP client based on the browser Fetch API
Lit — Simple. Fast. Web Components.
lowdb — Simple to use local JSON database
Micro Frontends — Frontend architecture
Midnight — Dark Theme Sketch Plugin
MobX — Simple, scalable state management.
moz://a — about:Credits <sup>Richard Hess</sup>
Muzli — Design Inspiration
Nano Stores — A tiny (334 bytes) state manager
nativeWeb — Tiny library for simple web components
nvm — Node Version Manager
Papa Parse — A powerful, in-browser CSV parser
Pinia — The intuitive store for Vue.js
Pose — Simple animation for React & Vue
Pow — Zero-config Rack server for OSX
Powder — Makes Pow even easier
Preact Signals — Reactive Primatives
PurgeCSS — A tool to remove unused CSS
PWA — Progressive Web Apps
Redux — A Predictable State Container
Rust — A Programming Language
Sapper — The next small thing in web development
Sinon.js — Test spies, stubs and mocks for JS
Slack — Where work happens
SolidJS — Another UI compiler
Stencil — A compiler for Web Components
Svelte — Cybernetically enhanced web apps
SVG — Scalable Vector Graphics
SVGOMG — SVGO's missing GUI
svql — FetchQL wrapper for Svelte 3
Tailwind CSS — A utility-first CSS framework
Tailwind UI — Official Tailwind CSS components
tapbots — Delightful robots apps for iOS and the Mac
Udemy — Online Courses
uce — uhtml based Custom Elements
urql — A blazing-fast GraphQL client
Vectornator — Design Tool
Vercel — Develop. Preview. Ship.
Verdaccio — A lightweight private npm proxy registry
Vite — Next Generation Frontend Tooling
Vuetify — Material Component Framework
Web Components — moz://a
Web Components the Right Way — A currated list
WebSockets — Client and server for Node
xScope — Measure. Inspect. Test.
162 tools & libraries