This site, under its own loupe

1. Summary

What was reviewed. The loupe project website: all eleven routes of the static export served at localhost:4318, plus its source in site/. The routes were /, /method, /cases, the three case pages, /testing, /tools, /specimen, /faq and the 404 page. It was a whole-app review, run with the profile the owner confirmed (no .loupe.md was written): web only, release_stage: development, an expressive-but-restrained register, and a chosen direction of lightbox, loupe and engineering redlines.

Verdict. The site holds up to its own review on the things that are hardest to fake:

• No text fails contrast at rest in any of the 12 width × scheme × motion combinations.
• No target is below 24 px without spacing.
• Reduced motion is honoured, and no template defaults were detected.
• The direction is carried by more than the palette.

It fails its own standard in three measured places:

• A hover state drops a redline number to 4.05:1.
• Two pages scroll sideways at 320 px.
• The 404 page wears the home page's title.

The bigger risk is a set of hand-written claims about the skill and the site that have already drifted from their sources. On a site whose argument is "shows its measurements", that drift is what a sceptic will find first.

What to do first:

• Fix findings 1 to 3. Each is a one-line CSS or metadata change.
• Then take Rework R1: derive or build-check every claim the site makes about the skill and itself, instead of paraphrasing it by hand.

Assumptions.

• The profile came from the owner's answers, not a .loupe.md.
• The register is expressive-but-restrained, as given.
• Voice is en-GB (lang="en-GB", "licence", "colour") and sentence case, inferred from the strings.
• Content that literally read "PENDING" at the start of the review was ignored as content. The components that hold it were reviewed.

Run notes.

• The artefact changed mid-review.
  • The first measurement ran on the export from 20:58.
  • The site was rebuilt at 21:17 while the passes ran. That build filled in /testing, the case reports and the home specimen, and reworked the loupe into a panning window.
  • Every finding below was re-checked against the 21:17 export, and all measurements were re-run on it. The 21:17 export is the reviewed artefact.
  • Four draft findings are gone from this report because the 21:17 build had already fixed them:
    • /testing returning 404 from the main nav.
    • The ring moving off screen from the finding list at 390 and 820 px.
    • An unclamped ring causing page-wide horizontal scroll.
    • The specimen screenshot specified at 1x and magnified 2.5×. The asset is now 780×3000.
  • The source kept changing after 21:17. For example, app/globals.css on disk now gives .loupe-list button:hover a --sheet background, which would fix finding 1. Edits made after the 21:17 export are not reviewed or measured here.
• Tools.
  • The Playwright MCP tools were unavailable, so the skill's own scripts ran in Node scripts with Playwright 1.64.1:
    • scripts/measure-runner.js, unchanged, on every route: 390/820/1440 × light/dark × reduced motion on and off.
    • scripts/type-eval.js on / and /specimen, in Chromium 1248.
  • FAQ and home screenshots were also taken in Firefox 1555 and WebKit 2370.
  • Forced colours and prefers-contrast: more were emulated in Chromium.
  • Text at 200% was tested by setting the root font size to 200%.
  • RTL was tested with dir="rtl", and pseudo-localisation by padding text nodes by 40%.
  • Five subagents were used: landscape, four pass groups, and a fresh red team. Every item they returned was checked against the evidence before it went in.
• Evidence. Everything is in a session scratch folder outside the repo, …/scratchpad/dogfood/:
  • measure.json is the 21:17 build. measure-2058.json is the first build.
  • stress.json and verify.js hold the stress-state checks.
  • shots/*.png holds the screenshots.
  • The scratch folder is not committed.
• Measurement summary (21:17 build).
  • Contrast: 0 fails and 0 unmeasurable rows on every route, in all 12 combinations. The case pages hit the runner's 400-item cap, so their rows are sampled.
  • Targets: the only items under 24 px are inline text links with spacingOk: true, plus two 37.8×44 colour inputs.
  • Type: two families (Atkinson Hyperlegible Next and Mono). There are 12 distinct sizes on / and 14 on /specimen. The minimum is 12 px, except 11.7 px on /specimen.
  • Motion: transitionAll 0, animatedOnLoad 0, and a reduced-motion rule is present.
  • Template defaults: none. Logical properties: 4 physical, 0 logical. Iframes: none.
• Scope limits.
  • I deliberately did not read the content of the blind-round results on /testing or in the case reports, as the owner asked. Those pages were reviewed for structure, layout and accessibility only.
  • No .playwright-mcp/ folder was created.
  • DOM edits made during the text-stress tests were undone by reloading.

2. Findings

waived: 0

3. Trust

No deceptive patterns found in what was seen. Checks that came up empty:

• There is no sign-up, paywall, consent or cookie flow, and no urgency, scarcity or confirmshaming.
• There are no testimonials, user counts or ratings.
• The counts in copy match their sources. "Ten defects … five more" and "eight … six more" match the pre-registration. "Twelve combinations" is 3 widths × 2 schemes × 2 motion settings.

The overstatements in findings 16, 36 and 37 are accuracy defects, not dark patterns. On this site they still cost trust, which is why R1 exists.

4. Landscape

Category: the marketing and documentation site for a Claude Code design-review skill. It uses the developer-tools seed playbook and overlaps with evidence and trust pages for AI features. All pages were checked on 2026-10-26.

Conventions to keep

• An install command with one-click Copy in the first viewport, plus variants per method (Impeccable, skills.sh). loupe already matches this in 1 tap, against Impeccable's 2.
• Something to try without installing (Impeccable's sample interface, Polypane's checker).
• A way to run it on a live page without the agent (Impeccable's detect and extension; loupe's bookmarklet is the same move).
• llms.txt and .md siblings (Claude Code docs).
• A dated changelog.
• A contrast tool that handles opacity and suggests a passing colour (Polypane).

Convergence to avoid

• Testimonial walls and star or install counts as the main proof (Impeccable, skills.sh).
• Curated, undated before/after wins (Impeccable gallery).
• Identity collision. Impeccable ships achromatic grey "paper", a dark "instrument" surface, one saturated accent and a mono face. loupe's grey, single redline and Mono sit close. loupe's difference has to come from mechanisms: the redline only on measured values (finding 14), crop-marked frames, and the ring.
• "Anti-slop" as the headline vocabulary.

Frontier moves

• An interactive demo on the first screen, 1 click (Impeccable).
• Finding overlays on the element itself (Impeccable /slop).
• Cost and submitter beside every score, raw traces, and public correction notes (HAL).
• Per-skill third-party security audits (skills.sh/audits).

Openings (no studied peer does these)

• A pre-registration with sealed key hashes that a sceptic can check.
• Losses shown as first-class rows.
• Every rule linking to the Apple passage it rests on.
• Every number on the site measured and redlined.
• A tool's own review of its own site. (No peer was found doing this; Impeccable's self-audit was searched for and not found.)

Step counts

• Land → copy the install command: loupe 1 tap, Impeccable 2.
• Land → try without installing: loupe 2 (Home → Tools; on phones only the contrast checker works), Impeccable 1.
• Sceptic compares one pair of reports: loupe 3 taps plus about 25 screens at 390 px (finding 4). No studied peer has a sourced count for this task.

5. Distinctiveness verdict

Authored. Two weaknesses: finding 14 erodes the redline rule, and the palette sits close to the category leader's.

Channels

Signature and moments

• Signature element: the loupe ring. It repeats in the wordmark, the favicon (app/icon.svg) and the home specimen.
• Signature moments: one, the ring settling on a finding. Under reduced motion it jumps.

Slop-catalog tells (5 tells across 4 channels, under the cluster threshold)

• AI-template: a tracked uppercase mono eyebrow above every section heading (layout idiom).
• AI-template: mono used for non-code labels such as eyebrows, frame labels, th, dt and tags (type).
• AI-template: a version string with a middle dot in the hero, "A Claude Code skill · v1.0.0" (voice).
• Second-layer default: a near-black ground with one vermilion or orange accent (dark mode), plus zero-radius hairlines (colour, shape).
• Praised-product clone: orange accent, mono caps labels, spec-sheet tables. This one is excused only while the accent's mapping holds, and finding 14 shows it does not hold fully.

Brand tests

• Logo-off: "crop-marked white frames on grey, red mono numerals that are measurements, a magnifier ring over a screenshot". Something is owned.
• Competitor swap (Impeccable's name on the home page): the crop marks and ring look wrong on it. The grey, the single accent and the mono labels would not.

6. Type

Atkinson Hyperlegible Next (variable 200–800). Roles: UI, reading and display.

• Legibility: pass.
  • x-height ratio 0.743.
  • No confusable pair fails at 12, 13, 15 or 17 px. The lowest is 5/S at d 0.27, 7 px, at 12 px. I/l is ≥0.62 and 0/O ≥0.36.
  • The zero is slashed.
• Weights in use: 400, 600, 700, 800.
• Figures: tabular figures are available and forced on site-wide by body (finding 38).
• Coverage: Latin and Latin Extended, enough for en-GB.
• Delivery: next/font, self-hosted WOFF2 subsets, font-display: swap. Three files, 51 KB decoded.
• Scaling: rem plus clamp. It overflows at 200% only through the h1 (finding 8).
• Distinctiveness: not a default-tier face. The choice is traced to the subject.
• Verdict: Tune.
  • Ease the h1 to line-height 1.04 and −0.02em tracking (finding 25).
  • Remove the body-wide tabular-nums.

Atkinson Hyperlegible Mono (variable 200–800). Roles: code, measured values, eyebrows, table headers, tags.

• Legibility: pass. type-eval flagged three pairs, and each was checked by eye at 1x and magnified:
  • 0/O: d 0.23 at 12 and 15 px.
  • 5/S: d 0.22 at 12 px.
  • Result: the zero's inner stroke and the flat top of 5 separate them at 12 px. I/l/1 are distinct at every size.
• Figures: tabular by default. Distinct zero: yes.
• Coverage: layout.tsx requests the latin subset only. A code path with diacritics would fall back to ui-monospace.
• Scaling: em multipliers of 0.85–0.92 create off-scale sizes, including 11.7 px (finding 24).
• Verdict: Tune.
  • Set Mono at 1em; the x-heights already match.
  • Add latin-ext if code samples can carry names.

7. Reworks

R1. Derive or build-check every claim the site makes about the skill and about itself, instead of paraphrasing it by hand.

• What changes.
  • Before: the home Blocker definition, the step list, the FAQ answers, the /specimen principles and the "every pair" list are hand-written paraphrases of SKILL.md, red-team.md, the pre-registration and globals.css. Nothing checks them.
  • After:
    • The Blocker definition and step list are read from SKILL.md through the existing readRepo and section() in lib/md.ts, which /method already uses.
    • The contrast pairs are generated from the CSS rules that pair a text colour with a background, hover and pressed states included.
    • Each factual or behavioural claim on /specimen, /faq and /tools either gets a build assertion or is cut.
• Bar: Cluster. Rows 15, 16, 32, 33, 35, 36 and 37 share one stated root cause: a hand-written restatement of a source the repo already holds, with nothing checking it against that source. Fixing each row corrects today's text but leaves the cause, so the drift returns with the next SKILL.md, token or eval change. Seven rows have drifted already, before launch.
• Evidence.
  • Rows 15, 16, 32, 33, 35, 36 and 37.
  • Finding 1 is the cost when a check is missing: the uncovered pair is the one that fails.
• Cost.
  • Files: app/page.tsx, lib/faqs.ts, app/specimen/page.tsx, lib/tokens.ts, the /cases lede, and one build-time check script.
  • Low migration risk. There is no visual change.
• Unlocks.
  • The site's thesis, "shows its measurements", cannot drift from the tool it sells. That is the exhibition goal in the profile.
  • Later copy edits get cheaper, because a wrong claim fails the build instead of waiting for a reader to find it.
• Smallest experiment.
  • List every factual sentence on /, /specimen, /faq and /tools beside its source, and count the disagreements after rows 15, 16, 33 and 35 are fixed by hand.
  • If two or fewer remain, downgrade R1 to per-row fixes plus a single contrast-pairs generator.

No other rework is warranted:

• Premise: holds. The first viewport says what loupe is and gives the install command in 1 tap.
• Peer gap: has no sourced peer count.
• Identity: the verdict is not default-assembled.
• Mobile overflow rows (2, 8, 11): each has its own cause and its own one-line fix.

8. Enhancements

Information architecture

1. Fold Cases into Testing. (Simplicity)
   • /testing already lists every pair and links to the reports.
   • Make /cases/[slug] the detail pages under it, drop Cases from the nav, and remove Cases Frame 04, which duplicates /specimen#review-h.
   • Each object (a pair, a report, the site's own review) then has one name and one place.
   • Together with removing GitHub (finding 27), the nav fits one row at 390.

Experience and flows

2. Try it in one tap from the home specimen. (Agency)
   • The landscape gap is Impeccable's 1-click demo against loupe's 2 steps, and the bookmarklet can't be used on phones.
   • Serve the Lendwell fixture as a static page with the measurement panel already open, linked under the specimen: "Run the checks on this page yourself".
3. Check the seal in the browser. (Responsibility)
   • Today a sceptic has to clone the repository and run shasum to check the pre-registered key hashes.
   • Add a button on /testing that fetches each published key file, computes SHA-256 with Web Crypto, and shows the hash and the match per fixture.
   • This uses an opening no studied peer has.
4. Status on the dogfood review. (Responsibility)
   • Each finding in /specimen#review-h carries fixed, open or waived, with the commit that fixed it.
   • Open ones stay visible, as the losses do on /testing.
   • This is the exhibition goal made checkable, and no studied peer was found publishing a review of its own site.

Content and voice

5. The contrast checker proposes the nearest passing colour. (Agency)
   • Polypane does this (landscape). loupe's own Fix lines already speak in that form.
   • Search OKLCH lightness at fixed hue and chroma until the pair passes, then print "#4f535a passes body text at 6.21 to 1" with the value in the redline, because it is measured.

Brand and identity

6. Share images that carry a measured value. (Purpose)
   • Visitors arrive from social links, and every number the site shows is a measurement.
   • Generate a build-time opengraph-image per case and for /testing, showing one measured finding with its redlined ratio inside the ring, instead of the single site-wide og.png.
   • Do this after finding 17.

Six, not eight. Each one is tied to a specific gap in the landscape or the profile; I dropped two candidates that would fit any docs site.

9. Unverified

• Screen readers: no real screen reader (VoiceOver, NVDA, JAWS) or Voice Control was run. Announcements in findings 6, 7, 12 and 28 are inferred from the Playwright aria snapshot and the ARIA spec.
• Forced colours: Chromium emulation only, not Windows High Contrast (findings 5, 30).
• Sticky hover on touch (finding 22): inferred from CSS and known iOS behaviour, not seen on a device.
• Bookmarklet acceptance: whether a 37 KB javascript: bookmark is accepted and editable in Safari, iOS Safari and Firefox was not tested.
• CSP behaviour: what a CSP-protected page actually does when the bookmarklet runs was not tested (finding 37).
• Case pages, horizontal scroll: at 390, .report-frame scrolls sideways (356 px of 2,060) and reports tabIndex -1. Whether Chromium's keyboard-focusable scrollers make it reachable by keyboard was not checked. Reaching it with Tab and the arrow keys would settle it.
• Sampled runs: the case pages hit the measurement runner's 400-item cap, so their contrast and target results are sampled.
• Blind-round content: the results on /testing and in the case reports were deliberately not read, at the owner's request. Their copy, tables and accuracy are unreviewed; only structure, layout and measurements were checked.
• Loupe misregistration on resize (finding 29): from source, not recorded frame by frame.
• Text spacing (WCAG 1.4.12): not run on /testing or the case pages. It was run on /, /faq and /tools, and nothing clipped.
• Reflow on new pages: /testing and the filled case pages were measured at 320 and at 200% text, but not in dark mode with forced colours.
• Fonts: whether next/font emits metric-matched fallbacks (size-adjust) was not checked, so layout shift on font swap is unmeasured.
• Source after the reviewed export: edits after the 21:17 export (for example, globals.css now uses --sheet for the loupe-list hover) are not reviewed. Re-run the measurement on the next export.
• Error, offline and loading states: a static export with no API. The only runtime network action is the clipboard, which was tested (finding 6). The bookmarklet's failure alert was read in source, not triggered.

10. Offer

Fixable in code now, no design decision needed:

• One-line CSS: 2 and 8 (wrap inline code; page-head grid; h1 cap), 13 (FAQ marker), 22 (hover gating and :active), 24 (mono at 1em), 25 (h1 leading), 30 (crosshair as SVG).
• Contrast and tokens: 1, 16 (hover ground, plus pairs added to the build check), 23 (prefers-contrast variants).
• Metadata: 3 (404 title), 17 (per-route Open Graph), and the breadcrumb in 38.
• Component fixes:
  • 5: forced-colours focus.
  • 6: Copy names and failure state.
  • 7: live region.
  • 12: heading demotion in lib/md.ts.
  • 28: tabs semantics.
  • 29: ring on transform.
  • 31: panel focus and Escape.
• Copy rewrites: 15, 19, 20, 21, 26, 32, 33, 34, 35, 36, 37, and the 404 line in 38.

These need a design decision first:

• 4: pair layout on case pages.
• 9: copy path for the bookmarklet.
• 10: how much of the rules to quote in the open.
• 11: stacked or wrapped install commands.
• 14: where the redline may appear.
• 18: secondary button style.
• 27: nav membership.

Enhancements and the rework need your call. I can build any enhancement, or a throwaway prototype of R1's smallest experiment: a claims-versus-sources table for /, /specimen, /faq and /tools.

Which findings should I fix?

Optional input that would let the review verify more:

• a run with VoiceOver or NVDA on / and /tools
• a Windows machine with High Contrast on
• an iPhone to check the sticky-hover and bookmarklet claims
• the next export, so edits made after 21:17 can be measured