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 AEM content-fragment 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.

From Figma to Reviewed Code

The Figma-to-code workflow combines Figma MCP, live component manifests, sf-ui agent skills, deterministic validation, and human review. I am the primary engineer for its skills, Figma integrations, and design-system validator CLI, maintained with platform engineering. These tools guide coding agents to supported components and check generated code against component APIs, attributes, styles, and other design-system rules. Validation runs in Codex and Claude Code agent hooks and CI; Git-hook integration is also available. Configured agent hooks deterministically block on findings. CI deliberately warns without blocking deployment so teams can release urgently.

Distribution and Operations

Built the Figma Variables to W3C design-token pipeline and owned npm publishing, CloudFront delivery, CI/CD, versioning, deprecation windows, and compliance review. The combined delivery changes included npm adoption, cache tiering, content-hashed dependencies, and release-scoped invalidation. Request volume fell to roughly a third of peak. Dynatrace RUM, alerting, rollback controls, and live incident support remain part of owning the shared 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.

The Broader Platform Mandate

I now lead the buildout of an enterprise frontend engineering platform across 100+ repositories spanning AEM and custom customer-facing, insurance-agent-facing, and internal applications. It extends the component foundation into reusable starters, integrations, machine-readable engineering policies, journey telemetry, and validation. These capabilities are in development. I recommend monorepo and microfrontend architecture to engineering leadership and partner with XD and backend teams on customer-experience strategy and GraphQL migration. The eight statefarm.com teams and 50+ engineers in my direct assignment sit within this broader scope of responsibility.

Stack

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

All projects