Spec — Slides re-skin

2026-refresh › slides-reskin · feature · created 2026-08-05 · spec · plan.html

The dated slide lectures — the one part of the catalogue Asim judged genuinely old-looking — get their visuals rebuilt in the design-system's language while his original narration plays verbatim: new slides and diagrams, rendered from the Remotion slide kit, landing on the words via the Scribe word-timestamps. Zero mic time; the lectures with new narration (the event-loop re-records) belong to lecture-production, not here.

Problem

P1The slide lectures are the most dated-looking material in the merged course — 2018 deck design, @jawache watermark, live cursor wandering over slides.

The frame classification showed it plainly: clip-art-era photos on light slides, the retired Twitter handle on every dark diagram, the recording cursor visible. Asim's verdict: "the dated concern was only the slides — VS Code's not dated at all." This task is that verdict, executed.

P2Their narration is too good to throw away — factually sound teaching that re-recording would waste.

The dossiers verdict these lectures largely IMPORT-worthy on content; the staleness is visual. Re-recording costs mic time and risks the delivery; re-skinning costs neither.

P3Slide visuals carry meaning, so they must land on the words — a diagram appearing four seconds late teaches confusion.

The originals animate what's being said (bars fill, queues drain, tables highlight). New visuals that merely play alongside the audio would be worse than the old ones.

Solution at a glance

J0Original audio, new picture, perfectly on the beat — per lecture, as config not code. For each slide lecture: the original visuals are read for what each moment conveys; an equivalent sequence is built from the design-system slide kit (rebuilt in the new language, never pixel-copied); beat times come from the Scribe word-timestamps; render, mux with the untouched narration, conform, and Asim reviews at 1×. Each lecture is a data file driving the kit — Asim's "it should just be config" principle, honoured.

Job stories

J1 · When a lecture is re-skinned

J1.1The narration is untouched, word for word — same audio track, no cuts, no synthesis P2Narration too good to wastethe whole point of re-skinning

Corrections the dossiers demand stay the job of prepended cards (back-catalogue-ops); this task never edits what Asim said.

J1.2Every visual change lands on the words that call for it — beats derived from the word-timestamps, checked at start, middle and end P3Visuals carry meaningsync is the quality bar

Scribe JSON exists for every master; the pilot's beats-scaffolding approach (anchor phrases → timed skeleton) carries over with sparser, easier beats than code typing.

J1.3The new visuals are the design system speaking — built from the slide kit; watermark policy applied; no bespoke one-off design P1Most dated-looking materialreplaced by the one language

The kit's recurring shapes (title, agenda, diagram, code-card, emphasis) cover these lectures; a lecture needing a shape the kit lacks grows the kit, not a one-off.

J2 · When Asim reviews

J2.1I judge each lecture at 1× and nothing ships without my pass — the first re-skin doubles as the design-lock specimen for the whole batch P1Most dated-looking materialhis eye is the bar

Blocking-vs-non-blocking is the natural first (rich slides, both light and dark modes in the original); its approval locks the treatment before the rest render.

Constraints

Scope is slide-led lectures whose narration survives — code-alongs stay as they are (Asim: VS Code isn't dated); the event-loop re-records live in lecture-production.
Depends on design-system's slide kit and watermark policy.
Per-lecture work is configuration driving the kit — bespoke Remotion code per lecture is the failure mode this story exists to prevent.
Outputs meet the delivery spec via the standard pipeline; finals land in courses/adv-js/media/out/.
Mixed lectures (slides + demo footage, e.g. CORS) may re-skin only their slide segments — cuts spliced, demo footage kept.

Deferred to plan

The definitive lecture list, and the mixed-lecture calls

Why it must wait: needs a frame-level pass over the candidates (~9–11 async slide lectures + the 2016 slide-led ones like classical-vs-prototypal and CORS) deciding full re-skin vs slide-segments-only vs card-only per lecture — the production sheet's rows reconciled post-pivot.

How much of the pilot's beats tooling transfers

Why it must wait: the scaffolder targeted code-along choreography; the plan checks what generalises to slide beats and what the kit's player needs instead.

Decisions

Keep the narration — re-skin visuals only

Asim, repeatedly and explicitly ("I'm thinking definitely keep the narration"). Re-recording these lectures was rejected; synthetic audio is banned course-wide.

Slides-only scope — the code-alongs are not dated

Asim's 2026-08-05 narrowing after reviewing the footage; the earlier "re-skin everything" ambition is superseded (recorded in the July spec's decision trail).

Remotion slide kit is the vehicle

Asim: better than the old slide stack; and it makes every re-skin config-driven and reusable.

Estimated files / edits

Size: M — per-lecture visual specs + beat configs in courses/adv-js/, kit growth in packages/remotion/, renders to media out.