Two video-sourced canvases: flashcard-onboarding and skillpath-ios

[Jing-yilin]

Two worked examples added to mockups/canvases/, both cloned through the
clone-prototype seven-phase workflow. Nothing under skills/, canvas/ or
tools/ changes — this is data, not plugin code.

Every canvas in this folder so far was built from screenshots. These two are
built from screen recordings, which is a different problem, and each one
documents the half of it that bit hardest.

flashcard-onboarding/ — 13 boards, 9 in a fresh clone

Four onboarding screens of a flashcard app, from a clip posted by
@FarzadGodarz. A token
board for 28 tokens, three evidence boards, an art board for seven crops, the
four replicas, and the source frame parked under each one column-for-column.

Replicas on top, the video frames they were measured from underneath:

The whole canvas, all 13 boards

Mean absolute delta 6.17–7.05 levels of 255, two to four times
duolingo-ios'. That is the medium, not the geometry: at 1.337 capture px per
design pt every glyph is three pixels tall through an H.264 encoder, so the
cropped hero art scores 1.0–3.5 while the type zone scores 7.7–14.2 with every
string inside 1.5pt of its reference ink box.

The three findings that cost the most:

• letter-spacing inherits as a computed length, not a ratio. An em set
  on body reaches a 36px title as body's own -0.4px, which reads exactly like
  a display size that wants its own token. Two rounds went into fitting a
  --x-tracking-lg that does not exist. Setting the same var on each type rule
  took the four screens from 8.20/8.18/7.01/7.66 to 6.09/6.23/5.77/6.66 in one
  edit.
• The face is SF Pro tracked at a single -.025em, settled by character
  count rather than by width — tracking sheds width per gap, a narrower face
  sheds it per width, and the observed ratio 0.391 matches 0.371 against 0.533.
• LANCZOS undershoot in the downscale step read as a 20-level ink-core
  error. Image.BOX took the 13 colour probes from mean Δmax 4.6 to 0.9.

The chrome is the repo's, not the source's, and both halves are priced rather
than asserted: the phone frame at 1.00 delta per screen, and the template's
status bar at a flat 0.42 — the same figure on all four. The difference is
visible in the shot above: the source frames carry a fourth glyph reading "32"
between wifi and the battery, and sit the clock 3pt higher.

skillpath-ios/ — 23 boards, 18 in a fresh clone

Five screens of a gamified self-improvement app, from a clip posted by
@BreejeAnadkat. Six
token boards and seven evidence boards for 73 tokens, the five replicas, and
the source frame under each. Mean absolute delta 5.88–9.04.

The whole canvas, all 23 boards

This is the run to read when the clip zooms, so there is no such thing as
the capture scale:

• The device is 402 × 874, an iPhone 17 Pro, not the 393 × 852 the rest of
  this repo uses. Found by scale agreement — solving each frame's screen-inner
  rect against 402 × 874 makes width and height scales agree to 0.07%, against
  0.34% for the smaller frame.
• Every frame carries its own px-per-pt, 1.01194 to 1.07985, so each of the
  59 rows in probes.json carries its own "pt" and refkit batch replays
  them all in one pass.
• The renderer's cap metrics are not the face's. Eight font stacks probed
  byte-identical, so the boards are set in the platform fallback, whose cap is
  0.733em and sits 0.350 × font-size below the line box against SF Pro's 0.245.
  Inverting the nominal relation instead of the measured one put every run low
  by 3.3pt at 31.5px and cost 1.50 delta on the busiest screen.

A --check-overflow gap worth knowing about

The foundation boards are plural because 73 rows is about 4000px of table in a
980px artboard — and the check stayed quiet twice:

• refkit shoot --check-overflow only reports full-bleed board overflow when
  --crop-phone is not passed; with it, the board is cropped to the phone
  first and the overflow never surfaces.
• It never reports a table running off the side at all, because it flags an
  element whose own overflow is hidden, not a page wider than the board.
  The token table sized itself to the 107-character font stack and rendered
  1033px wide in a 478px box.

Both tables are now pinned to a fixed 430px with overflow-wrap, and both
tables split across boards rather than being trimmed — the evidence is the
deliverable.

Verification

For both folders: refkit tokens passes, regeneration from gen.py is
byte-identical, and refkit shoot --check-overflow (without --crop-phone)
reports fits for every board including the gitignored ref-* ones. No
ref-*.html, assets/refs/ or scratch/ is committed.

_{Screenshots above are hosted on the orphan pr-media branch, pinned to
commit 034a59c; they are not part of this PR's diff.}

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying super-prototyping with    Cloudflare Pages

Latest commit:	625340d
Status:	✅  Deploy successful!
Preview URL:	https://315c5297.super-prototyping.pages.dev
Branch Preview URL:	https://worktree-bridge-cse-01xccpxo.super-prototyping.pages.dev

View logs

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 625340dc20

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Add the required Flashcard canvas artifacts

This new canvas folder omits both icon.png and assets.json. As a result, its welcome-page card has no identifying icon and the committed measurement evidence is incomplete for anyone auditing the raster assets from a fresh clone; add both required artifacts.

AGENTS.md reference: AGENTS.md:L44-L47

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Add the required Skill Path asset manifest

Although this folder commits the generated raster assets and their crop boxes, it omits the required assets.json, leaving the canvas without the complete measurement-evidence set expected for auditing or rebuilding those assets from a fresh clone.

AGENTS.md reference: AGENTS.md:L46-L47

Useful? React with 👍 / 👎.