Product engineering · Design systems · Accessibility

Shipping accessible product features that reach millions of people. Crafting the systems, design tokens, and tooling other teams build with and extend.

MagicSchool AI, since 2025 · previously edX / 2U · Résumé ↓

About

Day to day, it’s product work, and the design system underneath it: the tokens, the components, the accessibility tooling that team leans on.

Every job in industry has come in the same two halves. It started with research: a video learning platform from undergrad turned into papers and two years of a Ph.D. at Carnegie Mellon, before I traded academia for industry. Seven years at edX / 2U followed, leading Paragon across the Open edX ecosystem and building edX for Business alongside it. Now it’s MagicSchool AI, shipping product features, stewarding the design system, leading the accessibility work, and teaching AI coding agents to respect all of it.

Aerial view from a small plane over Lake Winnipesaukee, New Hampshire, in fall, the wing strut in frame, foliage and a runway below
Lake Winnipesaukee, from the left seat
View from a small plane of Mount Monadnock under late-day clouds, the wing strut crossing the frame
Mount Monadnock, from 4,500 ft

Experience

  1. Tech lead on a product squad and steward of Spellbook, the design system behind an AI platform for K-12 educators serving ~8M people across 36,000 schools. Built the Spellbook MCP server, giving AI agents semantic component discovery and a compiler-backed validator so they build against real APIs instead of inventing markup, and rebuilt the design-token layer on DTCG. Working with the accessibility guild, a designer and a handful of engineers, led the remediation behind the company's first VPAT, which unlocked enterprise deals, and automated the axe-core checks that run on every pull request to help the platform stay conformant.

    Visit MagicSchool AI

    Stack

    TypeScript · React · Next.js · Node.js · MCP · DTCG Design Tokens · Tailwind · Playwright · axe-core · LLM Evaluation

  2. Led Paragon, the open-source design system behind 40+ Open edX projects (5.9M+ npm downloads, 100M+ learners): design-token architecture on Style Dictionary, a documentation platform with 500+ monthly actives, and the internationalization initiative that shipped its first language pack, consumed by other product teams, edX/2U's own eng org, and the wider Open edX open-source contributor community. In parallel, an early engineer on edX for Business, a 0-to-1 enterprise platform serving 1.2M+ learners: shaped scope and timeline together with product and design while architecting its React SPAs and Django REST APIs and establishing React Query as its server-state architecture.

    Visit edX / 2U

    Positions held

    • Principal Software Engineer2023–2025
    • Senior Software Engineer II2022–2023
    • Senior Software Engineer I2020–2022
    • Software Engineer II2018–2020

    Stack

    JavaScript · TypeScript · React · Style Dictionary · React Query · React Router · Sass · Webpack · Python · Django · Node.js · MySQL · GitHub Actions · Docker · Datadog RUM

  3. Shipped reusable Ractive.js components for a B2B web application, partnering directly with a designer and a product manager. Revamped the dashboard with fuzzy search, venue filtering, and CSV export, and built the real-time social data ingestion behind it.

    Visit Ground Signal

    Stack

    JavaScript · Ractive.js · Ruby on Rails · Python

  4. Prototyped a browser-based conversational turn-detection model for video communication in Python and JavaScript, analyzing 392 Coursera discussion groups (1,027 users, 800K+ conversational turns) to assess dominant behavior in multi-party conversation. The work became the $1 Conversational Turn Detector paper at ACM Learning @ Scale; a separate research proposal earned an honorable mention for the NSF Graduate Research Fellowship.

    Visit Carnegie Mellon University

    Stack

    JavaScript · R · Python

  5. Developed a collaborative video-based learning platform enabling threaded discussion anchored inside video lectures, used by ~5,000 learners across three universities. Ran the user interviews and mixed-methods evaluations that drove prioritization, and co-authored the peer-reviewed publications behind a $448k National Science Foundation grant (IIS-1318345). Alongside a B.A. in Web Design & Development with University Honors, and minors in Computer Science and Psychology.

    Visit University of Hartford

    Stack

    JavaScript · jQuery · PHP · MySQL · Python · SPSS

Earlier: internships, co-ops, and part-time web development roles including Carbonite, Diebold, ForeSite Technologies, and Green Bridge Guide, plus a visiting research appointment at Carnegie Mellon. (2010–2015)

Selected Work

MagicSchool AI · design-system tooling

Spellbook MCP Server

The design system, made legible to AI. An MCP server that lets coding agents build UI against Spellbook's real component APIs instead of inventing markup.

The problem
Ask an AI for a destructive button and it reaches for a raw Tailwind red that isn't registered in the app: it compiles, renders nothing, and nobody notices until someone looks. Ask whether the system has an inline alert and it invents one. The root cause is the same everywhere: guessing instead of checking what actually exists in the design system.
The build
Nine tools over 70+ React component specs, resolved design tokens, icon catalogs, and real Storybook examples. Discovery is semantic: keyword matching fused with an embedding index baked at build time, traced query expansion so a search for a snackbar finds the Toast, and one entry-point tool that fans out across components, tokens, and guidelines in a single call. A compiler-backed validator type-checks generated JSX against the real APIs, and the manifest is derived by walking the TypeScript export graph on every release, so the tools can never drift from source. Remote connections authenticate over OAuth.
The test
A 25-task evaluation across three Claude model tiers: same tasks, same models, only the MCP connection toggled. First-attempt success rose from 4–36% to 72–88% depending on the model, and cost per shipped task fell 35–41%. The sharpest finding: not one baseline failure was cleanly fixed by a round of review comments; with the MCP connected, there is rarely a mistake to review.

What the tools cover

  • component specs
  • resolved design tokens
  • icon catalog
  • curated examples
  • JSX type-checking
  • release-synced manifest
  • OAuth

    TypeScript · Node.js · MCP · React · DTCG Design Tokens · LLM Evaluation

    Spellbook MCP · before / after

    scripted · no live model

    TaskBuild a small feature UI from a ticket.

    Filesystem only

    1. grepGreps the component library for likely names.

    first attempt lands 4–36% of the time

    With Spellbook MCP

    1. get-design-contextOne call fans out across components, design tokens, and guidelines for the task.

    72–88% first-attempt · −35–41% cost

    Step 1 of 12

    A scripted reconstruction of how a run works, not a recorded transcript

    First-attempt success
    36% → 88%
    Cost per shipped task
    −35–41%
    Evaluation
    25 tasks · 3 model tiers
    Surface area
    9 tools · 70+ components

    Success and cost from the 25-task, three-tier study, shown for the model with the strongest unaided baseline; every difference statistically significant (p<0.001).

    MagicSchool AI · product engineering

    MagicSchool Chat Shell

    The conversational core of MagicSchool: a composable ChatInput component family in Spellbook, and the view-transition choreography that carries it between the homepage, standalone chat, and empty states.

    The component
    ChatInput is a slot-based Spellbook family: textareas, attachment previews, file drop with drag states, animated placeholder prompts, an actions menu, a stop button. Apps compose only what they need. The animated placeholder is hidden from assistive tech, stills under reduced motion, and surfaces its first prompt as an accessible description.
    The choreography
    View transitions carry the chat between states: homepage hero to standalone chat to empty state and back. The homepage handoff reads the prompt and files at submit time, so arriving in the chat feels instant, and transitions skip themselves under Save-Data and reduced motion.

      TypeScript · React · Next.js · View Transitions API · Spellbook Design System

      The homepage-to-chat handoff, carried by view transitions

      ChatInput's Kitchen Sink story: every slot composed at once

      The accessibility contract from ChatInput's docs: focus, reduced motion, aria-live

      ChatInput's docs: the card-chrome organism, with Do's and Don'ts

      MagicSchool AI · accessibility

      Diff-Aware Accessibility CI

      Automated axe scans wired into CI with two review surfaces: a sticky pull-request comment that separates the violations a PR introduced from what already existed, and a lifecycle dashboard for the accessibility guild. Non-blocking by design: it informs review instead of failing merges.

      The comment
      Every pull request gets a diff against the main baseline: regressions on already-scanned flows called out, pre-existing debt collapsed, and newly instrumented flows counted as coverage rather than blame.
      The report
      A self-contained report.html groups findings by WCAG rule, screenshots each violation with the element highlighted, and carries a copy-ready fix prompt you can hand straight to a coding agent.
      The dashboard
      Post-merge runs aggregate each violation's lifecycle (first seen, regression, resolved) into a dashboard of coverage-normalized signals the accessibility guild works from: violations per screen, regressions versus new coverage, and introduced-versus-resolved momentum.

        TypeScript · Playwright · axe-core · GitHub Actions · WCAG 2.1 AA

        The report: findings by WCAG rule, each with a fix prompt (demo data)

        The guild dashboard: coverage-normalized signals (demo data)

        Violation lifecycles: first seen, regressed, resolved (demo data)

        edX / 2U · open source

        Paragon, Design System & Component Library

        The open-source design system and React component library underneath the Open edX platform: design tokens, components, docs, and the tooling that keeps 40+ consuming projects consistent and accessible.

        JavaScript · TypeScript · React · Style Dictionary · CSS · Sass · Gatsby · GitHub Actions · Figma

        Paragon home page

        Paragon color palette

        Paragon button component

        Paragon pagination component

        Paragon usage insights

        edX / 2U · enterprise platform

        edX Enterprise

        The enterprise learning platform at edX, built 0 → 1: onboarding, discovery, enrollment, and administration for corporate customers, from the React frontends to the Django REST APIs.

        JavaScript · TypeScript · React · React Router · State Management · React Query · Redux · Python · Django · MySQL · Redis · Celery · GitHub Actions · Docker

        Enterprise Learner Portal - Dashboard

        Enterprise Learner Portal - Search

        Enterprise Learner Portal - Course

        Enterprise Admin Portal - Learner Credit

        Enterprise Admin Portal - Learner Credit Allocation

        Enterprise Admin Portal - Highlights

        Publications

        Before industry, I studied how people learn together at scale. Five peer-reviewed papers in ACM venues.

        1. 01

          Supporting Learners with Distributed Mentorship Teams in Massive Online Classes

          A. Stankiewicz

          CSCW '16 Workshop · 2016

        2. 02

          ACM Learning @ Scale · 2016

        3. 03

          The Evolution of TrACE: Integration of a Collaborative Learning Platform in Flipped Classrooms

          S. L. Dazo, A. Stankiewicz, R. M. Gibbs, B. Dorn

          CSCL · 2015

        4. 04

          ACM CSCW · 2015

        5. 05

          Lost While Searching: Difficulties in Information Seeking Among End-User Programmers

          B. Dorn, A. Stankiewicz, C. Roggi

          ASIS&T Annual Meeting · 2013

        Full list on Google Scholar

        Lab

        Interaction sketches built for this site, running live on this page. Each one is a specimen of something the site itself uses.

        01Weight, by proximity

        Bricolage's weight axis follows the cursor, letter by letter. The same move as the name at the top of the page, with the dial turned up.

        font-variation-settings · wght 460–760

        02Spring, as a design token

        Click anywhere in the field. The dot arrives on the site's spring easing, a CSS linear() curve stored in tokens.json with the rest of the design tokens.

        easing.spring · duration.slow · linear()

        03The theme wipe

        The header's theme toggle sweeps the new mode across the page. Here is the same wipe in miniature. Click to run it.

        clip-path · easing.anticipate · View Transitions API

        04Grain, seven ways

        A WebGL grain shader from the same library as the hero's atmosphere. It comes in seven shapes; here are all of them, with the dial turned up.

        @paper-design/shaders-react · GrainGradient

        Get in touch

        Always glad to talk product engineering, design systems, or work that needs both.

        agstanki@gmail.com