16 lessons · about 241 minutes of reading · complete

You set the rules before. Here you’re a tenant.

Every design system you have shipped was one you owned. You picked the tokens, the primitives, the reset, the build. That is ownership, and it is not the job here. The job is inserting a surface into a 2018 Angular app, a server-rendered .NET product and a modern Next.js app in the same quarter, where somebody else picked all of it, most of it is bad, and none of it is yours to change. This course drills that: the constraints you inherit, the mechanisms that survive them, and the contract that gets you through a platform team’s review.

Start lesson one: Read the host before you touch it →

The running artifact

One bundle, three hosts. Across this course you package a review-gate surface — the human approval step in front of an agent’s action — alongside an <AgentTrace /> view as a single Web Component bundle, then drop that same file into a plain HTML page, a React app and an Angular app, each carrying a different brand. Nothing about the bundle changes between them. That demo is the “ninety-plus portfolio companies” claim made physical, and it is the only form of the claim anyone will believe. It is tracked at learning/grafting-ui/ARTIFACT.md, and every hands-on task in the course advances that one bundle rather than starting something new.

The trace component itself is not built here. It is built in Making an agent’s work legible — what a trace should show, how to render a tool-calling loop, how to make a run that failed halfway through readable. This course assumes it exists and covers the thing that course does not: getting it into a host application that never asked for it.

Lessons

The full sixteen-lesson spine is registered so lesson numbers never move. The first module is ready; ask your teaching agent for the next one once the bundle has landed in its first host.

Tenancy, not ownership

Working inside a codebase whose rules you did not write, cannot change, and have to ship into anyway.

Web Components as the delivery mechanism

The one delivery mode that works in every host, and everything the boundary costs you to get it.

Micro-frontends and their seams

The heavier delivery modes, what each one buys, and the header that quietly disqualifies most of them.

Inheriting the host

Taking on the host’s brand, session and identity instead of fighting them — and proving it across three of them at once.

How to actually get value from this

Pick a real host, not a toy. The first lesson asks you to read a codebase you did not write. Use one you actually have — an old employer’s repo, a large open-source app, a product you have consulted on. A host you invented has no constraints, and constraints are the entire subject.
Date every browser-support claim you write down. Form-associated custom elements and ARIA element reflection both reached broad support recently enough that a stale memory of “that only works in Chrome” will cost you a delivery decision. Check, and write the date next to the answer.
The bundle is the deliverable. A module you finished without the bundle changing is a module you read. The three-host demo at the end is a build artifact, not a slide.

Browser behaviour on these pages is dated on purpose — support for shadow-DOM, form-association and ARIA-reflection features has moved repeatedly, and a claim without a date is a claim that will quietly rot. If a source looks wrong or out of date, check the resource list and tell your teaching agent — the course is meant to be corrected.