Skip to content

Course exhibit SVGs: per-image quality pass (refactoring.fm style) - #447

Merged
pftg merged 25 commits into
masterfrom
course-svg-per-image-fixes
Aug 13, 2026
Merged

Course exhibit SVGs: per-image quality pass (refactoring.fm style)#447
pftg merged 25 commits into
masterfrom
course-svg-per-image-fixes

Conversation

@pftg

@pftg pftg commented Aug 13, 2026

Copy link
Copy Markdown
Member

Course exhibit SVGs — per-image quality pass (refactoring.fm style)

Rework of the course exhibit SVGs after the item18 mass-conversion was abandoned (PR #445) for flattening good hand-drawn originals. This branch is the careful per-image redo, driven by Paul's live per-image verdicts + a new visual bar.

The bar (Paul, 2026-08-13)

The refactoring.fm (Luca Rossi) illustration look — reference set in docs/projects/2605-.../10-19-research/images/:

  • Big bold hand-drawn Caveat labels with a soft colored glow
  • Saturated semantic per-element color-coding (blue structure, red/green/amber/purple)
  • Soft tinted rounded pills with drop-shadow + slight wobble
  • Bold blue connector arrows; no emoji (Paul: "emojis look not so good")
  • Legibility: min font ≥20px Caveat, viewBox W=720, zero overflow — every exhibit render-checked at 390 + desktop

Captured in .okf/design/house-visual-spec.md ("Refactoring.fm illustration style"). Template exhibit: jargon-translator.svg.

First 10 — status

# Exhibit Verdict / action
7 jargon-translator ✅ new style (template)
1 scorecard-at-a-glance ✅ new style (glowing PASS/FAIL + hero callout)
6 architecture-comparison ✅ new style (green/red contrast; jargon tie-in + DHH restored)
5 kit-sample-row ✅ restored to the better new 4-col version
2 reviewer-attention keeping original (Paul: looks good)
3 dollar-presale-flow queued
4 kit-components queued
8 refactor-check queued
9 catching-the-lie queued
10 demo-rule queued

Method (the lesson from item18)

Per-image craft, not a mechanical batch: render original + candidate, keep the good of each, render-verify every result at 390 + desktop (overflow is unverifiable from source). Paul reviews per-image; nothing merges without his taste gate.

WIP — 4 done, 5 queued. check-svg-floor stays report-only (never a blocking gate that forces redesign).

🤖 Generated with Claude Code

@coderabbitai

coderabbitai Bot commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

@pftg, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 69 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: efdb7c47-f745-4ede-96e6-a806a1391772

📥 Commits

Reviewing files that changed from the base of the PR and between f7d0a2d and 1e0dd6d.

⛔ Files ignored due to path filters (11)
  • content/course/tech-for-non-technical-founders-2026/agency-ai-five-questions/scorecard-at-a-glance.svg is excluded by !**/*.svg
  • content/course/tech-for-non-technical-founders-2026/ai-token-bill-dev-shop-pass-through-cost/invoice-loop.svg is excluded by !**/*.svg
  • content/course/tech-for-non-technical-founders-2026/fake-stripe-pre-sale-pieter-levels/dollar-presale-flow.svg is excluded by !**/*.svg
  • content/course/tech-for-non-technical-founders-2026/first-paying-customer-operating-kit/kit-sample-row.svg is excluded by !**/*.svg
  • content/course/tech-for-non-technical-founders-2026/five-tech-words-stop-nodding-at/architecture-comparison.svg is excluded by !**/*.svg
  • content/course/tech-for-non-technical-founders-2026/five-tech-words-stop-nodding-at/jargon-translator.svg is excluded by !**/*.svg
  • content/course/tech-for-non-technical-founders-2026/five-tech-words-stop-nodding-at/refactor-check.svg is excluded by !**/*.svg
  • content/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/hypothesis-mad-libs.svg is excluded by !**/*.svg
  • content/course/tech-for-non-technical-founders-2026/friday-demo-rule-founder-progress/catching-the-lie.svg is excluded by !**/*.svg
  • content/course/tech-for-non-technical-founders-2026/friday-demo-rule-founder-progress/demo-rule.svg is excluded by !**/*.svg
  • content/course/tech-for-non-technical-founders-2026/friday-demo-template/friday-demo-timeline.svg is excluded by !**/*.svg
📒 Files selected for processing (23)
  • .okf/design/house-visual-spec.md
  • .okf/log.md
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/23033e11-c879-4cbf-a078-0fc2817a8633_1678x1138.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/23a086a0-7264-4a27-bff8-11f651ab1562_1520x968.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/27d20d91-ec83-43b2-bbd8-23155b8f008f_1914x1382.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/27f70b46-353b-46e3-ad30-db8f426a9fb8_1630x1086.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/43cda95e-8adf-459c-9807-5faac3c2fb9d_1636x726.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/481f20e7-d9be-42c2-9e1d-4009bed26a32_1706x1136.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/5e947eb7-82b9-4ab1-a39c-03c32547b53a_2100x1398.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/64e9368b-a6ff-4f87-9173-1d84077710cf_1802x1200.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/6c3bb61f-fc24-4ba7-b4d9-4c54256d81df_3068x2034.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/8d6bf270-b67b-4082-9af9-bf011f3239a4_2188x1456.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/99a9c756-8add-411a-b733-8608f910a416_1802x1198.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/bcdf5bd1-2bce-4b88-ae47-2e5e43c373b9_1274x1154.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/c618e379-f95f-453c-86ca-970e245b8546_2070x1372.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/c69b13c2-e3d6-4d74-a60e-e0673ae75421_4248x1860.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/df040445-0757-4574-8be1-7ee85f619d14_1200x800.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/e769dbfe-186f-440f-b11a-6c0a37004fbf_1888x1280.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/f7e42d1a-5d84-421f-ad1c-25517ae5a3fe_2072x1372.webp
  • docs/projects/2605-tech-for-non-technical-founders/10-19-research/images/f852daca-55b9-4111-b471-eea4479132fb_3750x2500.webp
  • docs/projects/2605-tech-for-non-technical-founders/50-59-execution/50.02-aug14-metrics-read.md
  • docs/projects/2605-tech-for-non-technical-founders/TASK-TRACKER.md
  • linkedin-posts/icp-validation/POSTING-PACKET.md

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@pftg pftg changed the title Course svg per image fixes Course exhibit SVGs: per-image quality pass (refactoring.fm style) Aug 13, 2026
pftg and others added 25 commits August 13, 2026 14:37
… kit-sample-row (new)

Paul's new exhibit bar: refactoring.fm illustration look - big bold Caveat
labels with soft colored glow, saturated per-element colour-coding, tinted
pills with shadow + wobble, bold blue arrows, clean white, NO emoji. Spec
captured in house-visual-spec. jargon-translator = the template. kit-sample-row
restored to the (better) new 4-col version per Paul's per-image verdict.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…H, rebalance, fix footer overflow

Re-review caught: dropped the 'fix the architecture' lesson tie-in + DHH
'one-person framework' citation, dead space in the green card, and a
footer that overflowed 720. Retitled to the jargon phrase, spaced the
green items to fill, split the footer into 3 fitting lines.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
First campaign-window read (run a day early) against the week-0 baseline.
No course-landing lift (84→75 sessions/14d), ~93% Direct, course absent
from GSC top-25; interactive funnel dead (start_course=1, checkpoint=4,
pdf/copy-share/glossary=0). Gates blog→course bridge unproven, removal of
unused mechanics, and refocusing item 13 on M2-M3 depth.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replaces the other session's flat 720 version. Structure Paul approved
(3 process chips → hero '±20%?' decision → green within / amber over,
no dashed-loop clutter) restyled to the locked refactoring.fm look:
bold blue numbered chips + arrows, glowing hero + card headers, tinted
pills with shadow + wobble, saturated green/amber/blue. Chip overflow
fixed (narrower chips + shorter subs); amber trimmed to the ✓/✗.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…/right amber)

Paul: two arrows hit the same block (confusing) + text too narrow. Redrawn
as a proper decision fork - one green NO arrow to the left within-card, one
amber YES arrow to the right over-card, side by side, concise. Matches the
refactoring.fm decision-fork pattern.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…sistent steps

Paul: text overflown + inconsistent. Shortened each step's body/note to
fit the card (no viewBox overflow), consistent structure across all 4
steps (number + title + one body line + one italic note; step 4 = the
3 color-coded outcomes).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…presale-flow drop arrows + spacing

Paul (design critique via /impeccable): stop cramming, use refactoring.fm
simplicity + real visual gates. invoice-loop = one big '±20%?' question
forking to two big cards (dropped the crammed process row, formula → sub,
sub overflow fixed). dollar-presale-flow = removed the redundant/ill-fitted
connector arrows (numbered steps already convey order) + generous even
spacing.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…xes, not a text brick

Paul: original presented the components well; my version was one brick of
text where nobody finds the core elements. Redrawn each stack piece as its
own box - green = a clean 6-box monolith stack, red = a dense 9-box grid -
so the components are scannable AND 'over-engineered' is visible in the
layout. DHH line kept.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…step-4 circle collision

Paul (validated direction + real-page gate): invoice-loop = one continuous
gauge bar split at the +20% threshold - wide green PAY, narrow amber DEMAND;
the width ratio carries the meaning. dollar-presale-flow: step-4 outcomes
moved clear of the number circle (were colliding).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ngle metaphor

Paul: the two box-columns looked too similar - not clear why over-engineered
is worse. New metaphor makes the complexity VISIBLE: green = ONE cohesive
Rails-monolith box holding all the pieces (one repo); red = a tangled web of
9 service boxes wired together (spaghetti). Simple unit vs hairball.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Mad-libs sentence with the 5 blanks as dashed fill-me-in chips (CUSTOMER,
PROBLEM, APPROACH, COMPETITION, DIFFERENTIATION), plus the vague-vs-specific
contrast (gray 'small businesses → a polite nod' vs ruby 'solo chiropractors
→ that's me!'). Basis line kept.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ns (re-audit)

Design-director re-audit: both sides were text-list bricks + the red card
had a big empty gap. Reworked each item into a distinct ✓/✗ chip (green
evidence chips, red banned-artifact chips), red chips taller to balance the
6-vs-4 count. Tightened the Jira chip to avoid a borderline overflow.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Old exhibit was viewBox 1000x400 muted style with ~13px labels -> ~5px @390
(mobile-illegible). Redrawn as a 2-row grid at 720 wide: 7 blue numbered
question badges + an amber STOP card, amber hard-rules footer. Numbered badges
carry sequence (no chevrons). All fonts >=19px, zero overflow, render-verified
at 390.
36 old-style exhibits trip check-svg-floor @390 (2026-08-13). Framed per the
render-gate-not-metric-gate learning: candidate list to render+eyeball, not a
sweep. Opportunistic per-image migration; 5 walkthrough artifact-trails share
one layout.
3 render-caught fixes: drop the card wobble (it read as misalignment in a
grid, not playful), rebalance the STOP card to mirror the question rhythm
(amber badge + white stop-square + short HARD STOP label, was edge-crowding
'15 MIN HARD'), tighten card height 118->108 to kill the hollow badge-to-label
gap. Re-rendered at 390.
Transparency artifact so the friday-demo-timeline clunkiness isn't repeated:
6-item composition checklist run after the binary gate, per-batch independent
critic backstop, and the corrected wobble rule (craft in a stack, misalignment
in a grid). Decision record + root cause inline.
… item 0

Manager panel (3-lens, unanimous) picked traffic/reach over course polish per
the Aug-14 read. Audit correction: the LinkedIn ICP-E campaign is already built
+ ready (POSTING-PACKET, 10 drafts, 0 posted), blocked purely on Paul posting
#1. Step 2 (UTM'd course-link arrival posts) backlogged behind step-1 engagement
signal. Media polish + 36-image migration + item 7 parked/blocked.
…gn live

Scheduled via claude-in-chrome, verified in LinkedIn Scheduled posts. 2-week
kill-clock starts on publish today. POSTING-PACKET + tracker item 0 updated.
@pftg
pftg force-pushed the course-svg-per-image-fixes branch from 299b0de to 1e0dd6d Compare August 13, 2026 12:39
@pftg
pftg merged commit a92e2fe into master Aug 13, 2026
4 checks passed
@pftg
pftg deleted the course-svg-per-image-fixes branch August 13, 2026 12:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant