choiyounggi · choiyounggi · Sep 29, 2026 · Sep 29, 2026
@@ -208,3 +208,11 @@ Append-only. Format: `## [YYYY-MM-DD] <ingest|revise|lint|gap|contradiction|drif
 ## [2026-09-28] ingest | testing-strategy-agent-tool-shared-handler-tests — a UI action that is also a registered tool is tested once at the shared function plus two entry-point tests per tool (Registration incl. AbortSignal teardown, Wiring via spy) against a `document.modelContext` stub; a bug fix that changes the handler's contract changes the `inputSchema` assertion in the same commit; one DevTools Run-tool pass per release.
 
 ## [2026-09-28] revise | WebMCP adopted as the development standard (owner decision 2026-09-28): frontend/agent-interfaces/agent-facing-tool-surfaces trigger widened to any new or changed user action in a web UI + bug-fix and exclusion-list edge cases; AGENTS.md routing step 7 gains a web-UI-action row → frontend agent-interfaces then qa parity gate; INDEX.md frontend/qa/testing route lines and the frontend/qa/testing domain indexes updated; related links added both ways (release-gates, cross-layer-effect-tests, in-session-tool-exposure). The standard keeps the human UI primary and the tool layer additive (CG draft; Chrome origin trial + ChatGPT desktop runtimes).
+
+## [2026-09-29] ingest | frontend-design-product-ui-vs-brand-surface — new page: Persuade / Operate / Read / Experience surface modes and the Operate-mode rules that invert the anti-slop brand-surface rows for task UIs (one tuned sans, fixed rem scale 1.125–1.2, Restrained color floor + second neutral, full state vocabulary, skeleton loading, structural responsiveness, 150–250 ms state motion with no page-load sequence, standard affordances permitted, overlay escapes overflow ancestors, modal only for interruption/protected focus). Source: pbakaus/impeccable skill/reference/operate.md + SKILL.src.md pinned to 114ea1d3 (paths churn between versions — the 2026-08-21 entry recorded the earlier 404). Gap evidence: hallmark v1.1.0 and this wiki had zero product-UI rows (grep "dashboard" in wiki/frontend: 0 files). `field-tested` — ratio and ms values are the skill's, not measured.
+
+## [2026-09-29] ingest | frontend-design-ui-hardening-against-real-content — new page: extreme-input test set (100+ char names, empty, emoji, CJK, millions, 1000+ rows, 200% zoom), W3C/IBM translation-expansion budget by source length (≤10 chars 200–300% … >70 chars 130%; Korean 0.8× English), truncate / line-clamp / wrap + `min-width: 0`, logical properties + `[dir=rtl]` glyph flip, `Intl.NumberFormat` / `DateTimeFormat` / `PluralRules`, interrupted-gesture rule (`pointerId` pinning; clear drag state on `pointercancel`, `lostpointercapture`, out-of-bounds `pointerup`, window `blur` — Pointer Events §3.3.7 MUST fire `pointercancel` on stream suppression and implicitly release capture), evidence-naming for gesture tests, error copy with recovery, pending-state submit guard, virtualization. Sources: W3C article-text-size, W3C Pointer Events, MDN logical properties + Intl, Impeccable harden.md pinned to 114ea1d3. Back-links added on responsive-layout and data-fetching/async-ui-states.
+
+## [2026-09-29] revise | frontend/design/anti-slop-visual-design +2 directive rows (theme browser-default surfaces from the palette on brand pages; shadows carry offset + soft blur — halo and hard-offset are costumes) / +2 edge cases (task UI → product-ui-vs-brand-surface; hostile content or custom drag → ui-hardening-against-real-content) / +6 Instead-of rows (eyebrow, decorative section numbers, geometric occlusion mask, mono as costume, glyph icons, image hover animation). Source: Impeccable craft-floor.md pinned to 114ea1d3. Body 85 → 96 lines. Index load-when extended with browser-surface theming. Prohibition directives: rows written positively, count re-checked by `node scripts/wiki-lint-prohibitions.js` after the edit.
+
+## [2026-09-29] revise | review round on the Impeccable ingest (general + adversarial reviewer, both fresh-context): anti-slop stray trailing source bullet removed (page keeps sources in frontmatter); anti-slop task-UI edge case widened to Read/Experience surfaces and now names the exact rows it scopes (font pairing, default-font rejection, extreme contrast, page-load motion); responsive-layout fluid-type row scoped to brand/content surfaces with the app-UI alternative; product-ui-vs-brand-surface downgraded to `confidence: unverified` (third-party skill + blog only, no production context) and its trigger now lists mode choice, Read/Experience surfaces, overlay clipping and modal-first; ui-hardening: `overflow-wrap: anywhere` vs `break-word` min-content rule corrected (only `break-word` needs `min-width: 0`), `title` replaced by a hover+focus tooltip, `touch-action` added to the drag row, iOS 16px row defers to responsive-layout, WCAG 1.4.4 / MDN overflow-wrap / hyphens / line-clamp / touch-action / title sources added, IBM 51–70 anomaly noted as published.
@@ -11,7 +11,7 @@ sources:
   - https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates
   - https://react.dev/reference/react/Component
 last_verified: 2026-07-10
-related: [frontend-state-client-vs-server-state, frontend-data-fetching-race-conditions, frontend-data-fetching-query-state-vs-fetch-state]
+related: [frontend-state-client-vs-server-state, frontend-data-fetching-race-conditions, frontend-data-fetching-query-state-vs-fetch-state, frontend-design-ui-hardening-against-real-content, frontend-design-product-ui-vs-brand-surface]
 ---
 
 # Designing Loading, Error, Empty, and Data States for an Async View

@@ -8,8 +8,9 @@ sources:
   - "hallmark skill v1.1.0 (anti-AI-slop design skill; distills Anthropic's frontend-design skill, the Claude cookbook on frontend aesthetics, and the 2026 tactile-rebellion consensus)"
   - "https://claude.com/blog/improving-frontend-design-through-skills — Anthropic Engineering, 2025-11-12 (distributional-convergence mechanism, font avoid-list + taxonomy, extreme-contrast thresholds, domain-derived aesthetic direction, second-order convergence warning; Korean translation: velog.io/@xxziiko)"
   - "https://github.com/pbakaus/impeccable — README (gray-text-on-colored-background and bounce/elastic-easing anti-patterns; command list unstable across versions, cited for README-level rules only)"
-last_verified: 2026-08-21
-related: [frontend-design-html-in-canvas, frontend-accessibility-interactive-elements, frontend-design-responsive-layout, frontend-design-design-canvas-workflow, frontend-design-lightness-steps-on-dark-surfaces, frontend-design-custom-property-values-read-from-script]
+  - "https://github.com/pbakaus/impeccable/blob/114ea1d3838fca73b253af45f873b9c4f5f213c8/skill/reference/craft-floor.md — Impeccable skill 4.x craft floor, pinned to a commit (browser-surface theming, offset+blur shadows vs halo and hard-offset, eyebrow ban, section numbers, geometric occlusion mask, mono-as-costume, glyph icons, image-hover)"
+last_verified: 2026-09-29
+related: [frontend-design-html-in-canvas, frontend-accessibility-interactive-elements, frontend-design-responsive-layout, frontend-design-design-canvas-workflow, frontend-design-lightness-steps-on-dark-surfaces, frontend-design-custom-property-values-read-from-script, frontend-design-product-ui-vs-brand-surface, frontend-design-ui-hardening-against-real-content]
 ---
 
 # Making Web UI Look Designed, Not Generated
@@ -69,6 +70,8 @@ Typography, layout, motion, states:
 | Animate `transform`/`opacity` only, with named easing tokens | Support `prefers-reduced-motion`; cut motion before adding it — spend the whole motion budget on one orchestrated page-load with staggered reveals (`animation-delay`), then content is just there; scattered per-element micro-interactions read as noise. Ease/cubic-bezier tokens only — bounce/elastic easing reads as dated |
 | Ship all 8 states per interactive element | default · hover · focus-visible · active · disabled · loading · error · success — see [frontend-accessibility-interactive-elements] for the focus rules; the focus ring appears instantly, ≥3:1 contrast |
 | Prefer silent success and optimistic update + Undo | Toasts are for failures and non-visible async effects; confirmation modals are for irreversible actions only. Tooltip delay: hover ~800ms, focus 0ms |
+| Theme the browser's own surfaces from the palette | `::selection`, `caret-color`, `scrollbar-color`, the `:focus-visible` ring, `text-underline-offset` / `text-decoration-thickness`, and `font-variant-numeric: tabular-nums` in data all ship as browser defaults that belong to no design system; setting them from the tokens is the cheapest signal that the page was built rather than assembled, and the one an unsteered generation skips most reliably (brand surfaces only — a product surface keeps standard scrollbars, see [frontend-design-product-ui-vs-brand-surface]) |
+| Shadows carry an offset and a soft blur | A zero-offset colored halo is decoration; a zero-blur hard offset (`4px 4px 0`) is a neobrutalist costume that only a world which chose that aesthetic earns |
 
 ## Edge cases
 
@@ -80,6 +83,8 @@ Typography, layout, motion, states:
 | The base design passes and an effect layer is wanted | Canvas/shader effects go on top of a passing base, not instead of one — see [frontend-design-html-in-canvas] |
 | Writing reusable design guidance (a prompt, skill, or wiki page) rather than styling directly | Pitch it at the "right altitude": name the design axes and their decision logic (pairing categories, contrast thresholds), never exact hex/pixel values (over-constrains) and never "make it look good" (assumes context the model lacks) |
 | Narrow viewports (verify 320/375/414/768px) | Root `overflow-x: clip` on both `html` and `body`; clickable text stays on one line (shorten the label, then `white-space: nowrap`, then drop the item); image-bearing grid tracks use `minmax(0, 1fr)` |
+| The surface is a task UI (dashboard, admin, settings, editor, data table) or a Read / Experience surface (docs, guides, changelog, portfolio, gallery), not a landing or marketing page | Route to [frontend-design-product-ui-vs-brand-surface]: it scopes this page's font-pairing, default-font-rejection, extreme-contrast and page-load-motion rows to Persuade surfaces and replaces them for the others |
+| The screen will show user-generated or translated content, or a custom drag control | The visual rules above assume friendly data; run [frontend-design-ui-hardening-against-real-content] before shipping |
 
 ## Instead of
 
@@ -96,3 +101,9 @@ Typography, layout, motion, states:
 | `loading="lazy"` on the hero (LCP) image or video | `fetchpriority="high"` on the LCP element; lazy-load only below the fold | Lazy LCP roughly doubles p75 paint time |
 | An uppercase eyebrow label (`01 / FEATURES`) on every section | Zero eyebrows by default; only for genuinely ordinal content, 1–2 per page, stacked above the heading in the same column | Decorative numbering erases the hierarchy it claims to create |
 | Straight quotes, `--`, `...`, "Jane Doe", "Acme" | Curly quotes, `—`, `…`, plausible domain-specific names | Unproofread details mark generated copy |
+| A kicker or eyebrow label above a heading | Delete the label and let the heading carry its own weight | The heading already names the section; the label is the one scaffold no brief earns back |
+| Section numbers (`01 / 02 / 03`) as decoration | Number sections only when the sequence itself is information the reader needs | Decorative ordinals promise a structure the content does not have |
+| A circle, polygon or radial-gradient cutout approximating a photo subject's edge | Derive an alpha matte from the image or produce a real cut-out asset | The geometric approximation reads worse than omitting the effect |
+| Monospace for everything "technical" | Mono only for code, data and measurement; the body face for prose about technology | Mono as a costume signals the theme was chosen by category, not by content |
+| Emoji or Unicode glyphs standing in for an icon set | One icon library, or authored SVG, in one consistent stroke and weight | Glyph icons vary in weight and color per platform and read as a placeholder |
+| A hover animation on an image (scale, tilt, brightness), directly or via its parent | Put the feedback on the container that is actually the action target (border, background, shadow) | An image is not the control; animating it invents an affordance |