Repository navigation
docs: add beginner's Screen Studio demo tutorial for Font Lab - #59
Merged
Merged
Conversation
A start-to-finish guide for recording a Font Lab product demo with Screen Studio, tuned to Font Lab's two filming challenges: it's keyboard-driven (so auto-zoom-on-click misses the hero moments — use manual zooms + the keystroke overlay) and its changes are subtle (fonts, not fireworks — so zoom into type, lean on before/after, name the pairings in captions). Covers the tool from zero (auto-zoom, cursor smoothing, backgrounds, captions, export), a demo plan built around the choosing moment, a ready-to-record ~75s shot-by-shot storyboard, export targets (README/GIF/social), and a side-by-side of the Font Lab panel keys and the Screen Studio keys. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HQaSAUNGAikgPc3e5m2Jrk
… detect CSP blockers, pin Cursor MCP
The filmed-demo dogfood failed twice between install and the choosing
moment, and both failures were invisible until the human hit them:
(1) an MCP server frozen at 0.11 stamped a panel into a 0.13 project —
the panel imported ./fl-census, the file was never written, Next 500'd,
and the white page read as a dead dev server; (2) the site's CSP (no dev
'unsafe-eval', no connect-src :7777) let the page serve while the client
tree never hydrated — panel absent, picks/edits unreachable. Two extra
prompts and many minutes of triage that the tool should have caught
itself. This closes the whole class:
- Version-skew hard gate: init / prepare_preview / more_directions now
REFUSE to stamp when the running tool ≠ the project's installed
font-lab (status mentioning drift was too quiet — the break happens at
init, so the refusal happens at init). allowVersionSkew:true is the
deliberate override; the message prescribes `npx font-lab upgrade` +
session reload, and upgrade's final line now frames the reload as a
hard gate.
- Init self-check: after stamping, every file just written must exist
and every relative import in app/_fontlab/ must resolve (including the
bare `import "./fl-census"` form that shipped broken) — init refuses
to report success on a scaffold that would 500.
- font_lab_healthcheck (new tool, both transports): one read-only pass
over version alignment (tool vs installed vs panel stamp vs :7777),
scaffold completeness, a real homepage GET (sniffs a 500 body to NAME
the missing module instead of leaving a white page to guesswork), the
pick/edit endpoint, and the CSP scan → { ready, blockers, warnings,
nextStep }. Severity is path-aware: dev-server-down is a warning
(capture tools start one themselves) unless baseUrl was explicit.
- CSP detection (cli/csp.mjs): scans next.config.*/middleware/layout
for policies; flags missing dev 'unsafe-eval' (page never hydrates →
no panel), connect-src without 127.0.0.1:7777 (picks/edits fail), and
style-src without 'unsafe-inline' — each with WHY, a paste-ready
dev-only patch, and the restart-Next-after-config-change rule
(headers are startup-bound). Conditional/templated policies demote to
verify-warnings rather than false-positive blockers.
- Cursor MCP pinning: Cursor moves to project-scoped .cursor/mcp.json,
so mcpEntryFor pins it to node_modules/font-lab/mcp.mjs exactly like
Claude's .mcp.json (npm install IS the MCP upgrade); install migrates
the old global ~/.cursor/mcp.json entry off, and uninstall cleans
legacy locations too.
- Skill + AGENTS block + docs: VERIFY FIRST — after init, run
font_lab_healthcheck and do not invite the human until ready:true; a
white page or missing panel is an agent failure to catch, not a human
setup step. init's own nextStep routes through the healthcheck, and
status.versions now reports installed + skew alongside panel drift.
Tests: new cli/healthcheck-test.mjs (49 asserts) reproduces both filmed
failures end to end (skew refusal, fl-census unresolved-import catch,
live 500-body sniff via a local server, strict-vs-conditional CSP).
install-test updated for Cursor's new pinning (+2 asserts). Suites run:
healthcheck 49/49, install 37, version 13/13, init 9/9, state 41,
flow 10, commit-plan 23, handoff 19/19, finish 26, pick-delivery 12/12,
serve-heal 10/10, m5 MCP-over-stdio 35/35. pnpm-lock.yaml synced to the
committed package.json (optional playwright-core was missing from it).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HQaSAUNGAikgPc3e5m2Jrk
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A start-to-finish guide for recording a Font Lab product demo with
Screen Studio, tuned to Font Lab's two filming challenges: it's
keyboard-driven (so auto-zoom-on-click misses the hero moments — use
manual zooms + the keystroke overlay) and its changes are subtle
(fonts, not fireworks — so zoom into type, lean on before/after, name
the pairings in captions).
Covers the tool from zero (auto-zoom, cursor smoothing, backgrounds,
captions, export), a demo plan built around the choosing moment, a
ready-to-record ~75s shot-by-shot storyboard, export targets
(README/GIF/social), and a side-by-side of the Font Lab panel keys and
the Screen Studio keys.
Co-Authored-By: Claude Opus 4.8 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01HQaSAUNGAikgPc3e5m2Jrk