Files
pbakaus_impeccable/skill/reference/craft-floor.md
T
Paul BakausandClaude Fable 5 4432b92bbb Harden the comp-to-build translation after the hamster-wheel failure
A codex greenfield build produced an excellent approved comp and then an
abysmal page, and the reviewer approved it. The failure chain: the
implementation inventory downgraded a photographic hero to 'silhouette
in SVG' and sculpted panels to 'material finish: CSS'; the builder read
'no photography on hand' as a license to avoid photographic rendering;
QA looked at one full-page thumbnail; the reviewer was spawned with the
builder's forked history and then scored fix claims instead of pixels;
and the output contract had no way to say 'rejected'.

The fixes, stage by stage:

- The inventory's medium column gets a gate: a human figure, product
  object, machinery, or lit material is raster whatever the stack, and
  such regions are regenerated cleanly at asset resolution with the
  comp and its embedded prompt as reference. Never cropped from the
  comp, whose effective resolution is reference grade; the asset
  producer's direct bucket closes the same hole. Dropping an
  image-native region is a user decision at the approval point.
- Generated imagery is a material, not a claim: evidence rules bind
  assertions, never render fidelity.
- The build thread's inspection becomes a region-by-region side-by-side
  against the comp at legible scale, never one full-page thumbnail.
- The reviewer spawns fresh, never with forked history (fork_turns: 0
  in codex), and gains a rejection lane: when TYPE, MATERIAL, and the
  focal element are all contradicted, the first material fix is a
  rebuild directive the parent surfaces to the user instead of
  patching. Verdict passes score recaptures only; the parent's fix
  narration is not evidence.
- The verdict-loop ceiling softens: two rounds ends an unattended run,
  but an attended session puts the open-items table in front of the
  user and lets them fund another round; any round that resolves
  nothing stops the loop.
- Comp approval joins the roll as skip-proof: question-tool errors fall
  back to the decision page, delegation is recorded in the brief and
  the sidecar and disclosed up front, and the reviewer treats comps
  with no recorded pick as a material finding.
- Craft floor: system display faces (Impact, Arial Black) as an
  own-world display voice and unicode glyphs standing in for icon
  systems are named failures.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-29 17:45:45 -07:00

6.0 KiB
Raw Blame History

Craft floor

Load this after the direction is settled, and build without announcing the checklist. A pinned brief or the committed visual world overrides anything here; your own habit does not. When the design hook is active it already enforces the mechanical checks below as you edit: act on its findings instead of re-auditing each rule.

Verify

Each of these is a check on the built result, not an intention. Run them together in the batched inspection rounds, not as separate screenshot trips; the checks share one render.

  • Contrast: body and placeholder text ≥4.5:1, large text ≥3:1. On colored surfaces tint secondary text from that hue or the foreground; never gray.
  • Depth: shadows carry an offset and a soft blur. A zero-offset colored halo is decoration.
  • Spacing: tight groups, generous separation, more space above a heading than below it. Read the computed values.
  • Type: body measure 6575ch, display max 6rem, tracking floor -0.04em, balanced headings, obvious scale and weight steps. Run the real copy at every breakpoint and fix what overflows.
  • Motion: one authored moment, not scattered effects and not one identical entrance on every section. Exponential ease-out from an already-visible default. Reach past transform and opacity: blur, backdrop-filter, clip-path, mask, and shadow belong to the palette when they stay smooth.
  • States: hover, disabled, loading, error, empty. Plus real content, working controls, responsive composition, keyboard focus.
  • Copy: the product's own language. Controls name their action; errors name the problem and the recovery.
  • Coverage: every brief requirement present and findable within seconds.

Refuse

These are the category's defaults, not bans: the brief's own words can earn any of them. Reaching for one when the axis is free means you were not deciding; recognizing that means rewriting the element, not softening it.

Page scaffolds:

  • Same-size cards of icon plus heading plus text as the page structure. Cards are the lazy container; nested cards are always wrong.
  • The hero-metric template: big number, small label, supporting stats, accent.
  • A kicker or eyebrow above a heading. This one is a ban, not a default: no brief earns it back. The heading carries its own weight; delete the label and let the heading speak.
  • Section numbers (01 / 02 / 03) unless the sequence itself carries information the reader needs.
  • A modal for a task that needs neither interruption nor protected focus.

Surface habits:

  • Gradient text. Emphasis comes from weight or size.
  • Glass and blur as decoration rather than as a specific effect.
  • A colored border-left or border-right above 1px on cards, list items, callouts, or alerts.
  • Sparklines, progress rings, and soft-shadowed rounded rectangles standing in for content.
  • Monospace as a costume for "technical" rather than for code, data, or measurement.
  • A system display face (Impact, Arial Black, the platform sans) as the display voice of an own-world page. Source and self-host a face whose character matches the approved lettering; the closest installed font is a failure, not a fallback.
  • Unicode glyphs or emoji standing in for an icon system. Icons are drawn, from a real library or authored SVG, in one consistent stroke and weight.
  • Light or dark picked by category. Pick it from the use scene: who, where, under what ambient light.
- Tracking stops at -0.04em. -0.02 to -0.03em usually reads better. - Declare elevation once, border or shadow. A 1px border under a wide soft shadow is the ghost card. Card radii stay at 1216px; pills are for small controls. - Real illustration or none. Sketch-style SVG scenes, `loose-sketch` / `doodle` class names, and `feTurbulence` grain read as amateur. This bans SVG imitating pictures, never SVG doing geometry: crisp vector shapes, diagrams, animated linework, and shader-driven effects remain first-class media. - Backgrounds are surfaces, textured only from the subject's world. `repeating-linear-gradient` stripes and two-axis grid overlays need an actual canvas, map, blueprint, or measuring tool under them. - Claims and configuration come from supplied truth; label illustrative values honestly. Naming a concept and then ironizing it is not a claim. Never animate an image on hover, directly or through its parent. It is not an action target. Give the container the feedback.

The floor holds the mechanics; it never picks the direction. With every check green, spend the page on the committed world, and when torn between refined and committed, commit.