Skip to content

Project

SFDS Developer Platform

State Farm, closed source

A governed developer platform that distributes UI architecture, engineering standards, and migration context to 1000+ engineers and designers.

  • Web Components
  • TypeScript
  • Design Tokens
  • npm + CDN

The Platform Problem

State Farm's frontend ecosystem spans hundreds of product teams shipping inconsistent UI across Angular, React, Next.js, JSP, and other frameworks. Past unification efforts didn't hold: brand drift and accessibility gaps compounded with every release, with duplicated engineering effort as the ongoing tax. The org needed a single framework-agnostic system any team could adopt without rewriting its stack.

The Supported Path

Architected sf-ui as a framework-agnostic Lit and Web Components library. The same component contract works inside Angular, React, AEM, and server-rendered pages. A Node.js sidecar adds Declarative Shadow DOM and client hydration for hundreds of unauthenticated CMS pages, so teams can adopt the platform without replacing their product framework or content model.

Context for Engineers and Agents

I first built the SFDS agent-context layer as a RAG system that ingested live documentation into a vector database and exposed retrieval through an MCP server. Live docs plus framework-specific SKILL.md files proved at least as effective for implementation guidance, so I led the replacement of the retrieval stack and removed its dedicated server, index, and ingestion path from the team's support surface. A deterministic CLI checks platform alignment, legacy usage, and accessibility risk, and can run locally or in CI alongside human review.

Distribution and Operations

Built the Figma Variables to W3C design-token pipeline and owned npm publishing, redundant CDN distribution, CI/CD, versioning, deprecation windows, and compliance review. Cache tiering and content-hashed builds cut request volume to a third of peak, with Dynatrace RUM alerting and live incident-bridge support protecting the shared production platform.

Adoption

SFDS is the official migration target for statefarm.com, with governed distribution and a standard migration path for more than 100 teams. Its 70+ accessible primitives are used by 1000+ engineers and designers across React, Angular, AEM, and mixed frontend architectures. Weekly office hours and a design and engineering champion network support adoption without centralizing every implementation decision.

Stack

Lit · Web Components · TypeScript · Figma Plugin API · W3C Design Tokens · npm · CDN distribution · CI/CD

All projects