diff --git a/log.md b/log.md
index e44e51d..2def3c4 100644
--- a/log.md
+++ b/log.md
@@ -93,3 +93,5 @@ Append-only. Format: `## [YYYY-MM-DD] <ingest|revise|lint|gap|contradiction|drif
 ## [2026-08-18] ingest | Consolidated review of knowledge PRs #47–#110 (30 open PRs, 2026-08-06→08-17) into one reconciled state on post-#111 main. 53 new pages, 51 amended pages, 12 indexes updated. New categories: backend/common/ml (mape-aligned-point-prediction), backend/python/packaging (data-files-and-install-paths), security/incident-response (verifying-assumed-security-agents, process-identity-by-path-and-hash). Branches merged chronologically; conflicts union-resolved (related-id unions, max last_verified, newer routing framing + branch-new trigger clauses for index rows, edge-table row unions with one duplicate-substance row dropped). Each branch's own log entries spliced into date order above; every branch's added pages verified present in the final tree. The 30 source PRs are closed in favor of this consolidation (same protocol as the #17–#40 and #42–#43 reconciliations).
 ## [2026-08-18] ingest | knowledge-flush of 8 queued insights → 7 new pages (two candidates on the same mechanism merged into one page; no existing page carried any of these triggers). New: backend/python/language/source-introspection-of-a-dynamically-loaded-module (`inspect.getfile` resolves a CLASS through `sys.modules[cls.__module__]` but a FUNCTION through `__code__.co_filename`, so a path-loaded module that was never registered makes class introspection die with `TypeError: … is a built-in class` before any assert runs — register per the stdlib's own recipe or retarget the check at a method; reproduced on CPython 3.9.6/3.11.13/3.13.11/3.14.6), databases/query-optimization/repeated-sublinks-in-a-pulled-up-derived-table (a derived table with no aggregate/LIMIT/DISTINCT/set-op is flattened, so a correlated SubLink in its select list is substituted into EVERY referencing aggregate and evaluated once per reference per row; `OFFSET 0` / `MATERIALIZED` fence it and `LATERAL` removes the SubPlan entirely — reproduced on PostgreSQL 16.11: 1/2/3 outer references → 1/2/3 SubPlan nodes, and a PLAIN CTE is folded too so it is not a fence), qa/environments/browser-console-capture-gaps (two disjoint blind spots in one page: a buffer attached after navigation loses every load-time record, and extension content-script logs live in an isolated execution context a main-world collector never sees — clear+reload for the first, judge by DOM side effects for the second; reproduced on Aside CLI 1.26.810: `[]` at 0 ms and at 800 ms, both records after `console.clear()`+`reload()`), platforms/tools/unpacked-extension-source-reload (Chrome's own reload table lists content scripts as requiring an extension refresh "plus the host page"; add a page-visible running-build marker rather than a log line, since content-script logs are collected from another context), testing/quality/expectation-sets-with-one-distinct-value (when every case expects the same literal, a hardcoded constant and the wired computation are observationally identical, so more assertions change nothing — add a case with a DIFFERENT expected value, and probe by substituting the value rather than deleting the key, which only proves key presence; reproduced with unittest: 3 identical expectations → constant survives, +1 differing case → killed, delete probe reddens via KeyError), testing/strategy/orm-generated-test-schema (a test profile whose schema is generated from the ORM model cannot hold a model-vs-database drift — check `ddl-auto` before promising a reproduction, and move verification to a migration-built test DB with `validate` or an `information_schema` gate; field-tested), platforms/filesystems/deleted-file-recovery-on-apfs (run the TRIM/snapshot checks before recommending any recovery tool, work copy sources in fidelity order, and read the exact path out of an app's bookmark blob when the remembered name is wrong; field-tested). Corrections made during verification: three citations inherited from the drafted candidates were dropped rather than carried, because the pages could not be opened and confirmed this session (playwright.dev page-class events, two Apple developer/support pages — the macOS page now cites the local man pages and measurements instead); the Stryker and PIT quotes were re-fetched and replaced with their real sentences. Open-PR dedup: `gh pr list --state open` returned zero rows, so all eight candidates were routed as `new`.
 ## [2026-08-20] ingest | Frontend visual-design knowledge (2 new pages, NEW category frontend/design). frontend/design/anti-slop-visual-design (field-tested — distilled from hallmark skill v1.1.0, which encodes Anthropic's frontend-design skill + Claude cookbook frontend-aesthetics consensus: decision order with structure-before-visuals as the core claim — the AI tell is structural repetition, not color choice; OKLCH token discipline with the one-accent ≤3% rule and no-pure-extremes; roman-headings + display/body pairing typography; transform/opacity-only motion with the 8-state interactive floor; fabricated-metrics honesty rule; a tells table covering gradient heroes, equal 3-column grids, 100vh centered heroes, genre-blind nav/footer fingerprints, redrawn browser/phone chrome, Lottie/Three.js shortcuts, lazy-loaded LCP, and eyebrow-label decoration). frontend/design/html-in-canvas (verified — WICG html-in-canvas draft: layoutsubtree / drawElementImage / texElementImage2D / copyElementImageToTexture / paint-event API surface, the mandatory returned-transform hit-test sync, the dual DOM+pixels model, and a progressive-enhancement-only stance; status live-checked this session against the WICG repo and the blink-dev intent thread — behind chrome://flags/#canvas-draw-element since Chrome 138 (Dec 2025) dev trial, Origin Trial since Chrome 148 (May 2026)). frontend/index.md routing intro extended with visual-design scope and a new design section. Prohibition-lint directive count unchanged at 71; structure checks 244 pages / 13 indexes / 0 findings.
+## [2026-08-21] ingest | frontend/design/responsive-layout (verified — 1 new page). Mobile-responsive layout contract for viewport-range UI: exact viewport meta with zoom left enabled (~980px virtual-viewport mechanism; user-scalable=no blocks the ≥2× WCAG zoom and iOS ignores it — MDN Viewport_meta_element), mobile-first min-width layering with content-driven breakpoints (web.dev responsive-web-design-basics), intrinsic grids repeat(auto-fit, minmax()) before media queries (web.dev patterns) and @container with intrinsic fallback (MDN), touch targets 24px AA SC 2.5.8 / 44px AAA SC 2.5.5 with the 24px-circle spacing exception (W3C Understanding docs), clamp() fluid type gated on a 200%-zoom check (1.4.4, web.dev min-max-clamp), srcset/sizes + width/height CLS reservation (MDN img), the min-width:auto→min-content overflow mechanism fixed by minmax(0,1fr) (MDN min-width), and edge cases for 100vh-vs-dvh/svh, hover:none long-tap emulation, and viewport-fit=cover + env(safe-area-inset) (WebKit blog). 320px no-horizontal-scroll final gate = SC 1.4.10. All 14 cited URLs live-fetched and verified this session by a research subagent; Apple HIG 44pt / Material 48dp figures deliberately NOT cited (JS-rendered pages unverifiable — WCAG carries the target-size claims); rem-vs-px media-query sub-claim omitted as unverified. related links added both ways (anti-slop-visual-design, accessibility/interactive-elements, performance/bundle-and-assets). frontend/index.md design section +1 row, routing intro extended with responsive-layout scope.
+## [2026-08-21] revise | frontend/design/anti-slop-visual-design +2 sources / +5 directive rows / +1 edge case (theme-defaults reinforcement). Primary source added: Anthropic Engineering "Improving frontend design through Skills" (claude.com/blog, 2025-11-12; live-fetched — the velog.io/@xxziiko post the contributor supplied is its Korean translation, cross-checked as matching). New Anthropic-backed material: named avoid-list of training-data default fonts (Inter/Roboto/Open Sans/Lato/system) with the distributional-convergence mechanism, feel-category font taxonomy (code/editorial/technical), second-order convergence warning (Space Grotesk as "the new Inter" — vary the escape choice per project), quantified extreme-contrast thresholds (weight 100–200 vs 800–900, 3×+ size jumps), dominant-field + sharp-accent palette framing with IDE-theme/cultural-aesthetic inspiration, domain-derived aesthetic direction folded into the tone-extreme step (non-generic direction reframed as the DEFAULT), motion-budget allocation (one staggered page-load orchestration over scattered micro-interactions), and a right-altitude edge case for writing reusable design guidance (axes + decision logic, no hex hardcoding, no "make it look good"). Aurora-blob Instead-of row reconciled with Anthropic's atmospheric-background endorsement: the tell is ungrounded decoration on a neutral page, theme-earned depth passes. Impeccable README (github.com/pbakaus/impeccable, live-fetched) adds gray-text-on-colored-background and bounce/elastic-easing anti-patterns; tistory.com/1624's deeper Impeccable quotes NOT ingested (cited SKILL.md path 404s — repo restructured; command vocabulary unstable 17→23, only README-level rules taken). Also deliberately skipped: 16px body floor and "adapt don't delete" (third-party, no mechanism, unverifiable primary). frontend/index.md load-when extended (theme direction as default, LLM design-guidance authoring). Prohibition directives unchanged at 71; structure 252/13/0; body 85 lines.
diff --git a/wiki/frontend/accessibility/interactive-elements.md b/wiki/frontend/accessibility/interactive-elements.md
index 282d11e..49cbe8e 100644
--- a/wiki/frontend/accessibility/interactive-elements.md
+++ b/wiki/frontend/accessibility/interactive-elements.md
@@ -8,7 +8,7 @@ sources:
   - https://www.w3.org/TR/using-aria/
   - https://www.w3.org/WAI/ARIA/apg/patterns/
 last_verified: 2026-07-10
-related: [frontend-forms-validation-timing, frontend-agent-interfaces-agent-facing-tool-surfaces, frontend-design-anti-slop-visual-design]
+related: [frontend-forms-validation-timing, frontend-agent-interfaces-agent-facing-tool-surfaces, frontend-design-anti-slop-visual-design, frontend-design-responsive-layout]
 ---
 
 # Building Clickable and Keyboard-Operable UI
diff --git a/wiki/frontend/design/anti-slop-visual-design.md b/wiki/frontend/design/anti-slop-visual-design.md
index 2c35562..8316976 100644
--- a/wiki/frontend/design/anti-slop-visual-design.md
+++ b/wiki/frontend/design/anti-slop-visual-design.md
@@ -6,8 +6,10 @@ applies_to: [css, general]
 confidence: field-tested
 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)"
-last_verified: 2026-08-20
-related: [frontend-design-html-in-canvas, frontend-accessibility-interactive-elements]
+  - "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]
 ---
 
 # Making Web UI Look Designed, Not Generated
@@ -26,7 +28,11 @@ Work in this order — structure decisions precede visual ones:
    libraries before restyling anything; preserve them unless asked otherwise.
 2. Settle three inputs before code: the audience, the single action the page
    drives, and a tone extreme (editorial / brutalist / soft / utilitarian /
-   luxury / playful / technical). "Clean and modern" is not a tone.
+   luxury / playful / technical). "Clean and modern" is not a tone. Derive the
+   direction from the app's subject matter (an RPG tool gets dramatic palettes
+   and ornament; a trading tool gets terminal density) — the default output of
+   an unsteered generation is the generic theme, so committing to a
+   domain-derived direction IS the default here, not an upgrade.
 3. Pick the page's structure (heading placement, section rhythm, divider
    language) before any visual styling, and vary it between pages — two pages
    sharing the hero → 3-feature-grid → CTA rhythm read as one template no matter
@@ -45,7 +51,8 @@ Color:
 | Use OKLCH for every color | Perceptually uniform, so lightness is predictable; hsl/rgb lie about brightness |
 | One accent (two max), ≤3% of any viewport | Accent is a highlighter: active nav item, focus ring, link-hover underline, CTA border — not section backgrounds or giant button fills |
 | No pure `#000`/`#fff` | Tint paper and ink toward the anchor hue: light paper `oklch(96–98% 0.005–0.015 H)`, dark paper `oklch(12–16% 0.008–0.015 H)` |
-| Tint the grays toward the anchor hue | A warm accent with cool-gray body copy reads wrong even to viewers who can't name why |
+| Tint the grays toward the anchor hue | A warm accent with cool-gray body copy reads wrong even to viewers who can't name why; on colored surfaces, tint the text toward the surface hue too — neutral gray text on a colored background is a recognized generated-design tell |
+| One dominant color field, sharp minority accent | "Dominant colors with sharp accents outperform timid, evenly-distributed palettes" (Anthropic); draw palette direction from IDE themes and cultural aesthetics rather than generic web-palette generators |
 | Dark mode: elevation is lightness, not shadow | Higher surface ≈ +3% lightness per level; keep the hue fixed across modes; reduce body font-weight by ~50 to offset light-on-dark optical bolding |
 
 Typography, layout, motion, states:
@@ -53,10 +60,13 @@ Typography, layout, motion, states:
 | Rule | Detail |
 |------|--------|
 | Pair a distinctive display face with a refined body face | A single-font Inter/Roboto page is a template signal — the exception is a deliberate mono-only aesthetic |
+| Reject the training-data default fonts by name | Inter, Roboto, Open Sans, Lato, and system defaults are the distributional center an unsteered model converges on; replace from a feel category — code: JetBrains Mono/Space Grotesk, editorial: Playfair Display/Crimson Pro, technical: IBM Plex/Source Sans 3 — then use the pick decisively |
+| Vary the escape choice per project | Escaping one default only to converge on a new one (Space Grotesk as "the new Inter") is the documented second-order failure — treat any font you've reached twice in a row as the next default to reject |
+| Contrast by extremes, not moderate steps | Weight pairs from the ends (100–200 against 800–900, not 400 against 600); heading-to-body size jumps of 3×+, not 1.5×; display+mono or serif+geometric-sans pairings — moderate variation still reads generic |
 | Headings stay roman (`font-style: normal`) | An italicized emphasis word inside a heading is among the most reliable AI tells; carry emphasis with weight, accent color, or a drawn underline |
 | Bias the layout; vary section padding | Wall-to-wall centered columns and identical padding on every section read as template; breaking symmetry once is enough. Use a 4pt spacing scale with semantic tokens |
 | `font-variant-numeric: tabular-nums` on number columns | Proportional figures make prices/dates/metrics misalign vertically |
-| Animate `transform`/`opacity` only, with named easing tokens | Support `prefers-reduced-motion`; cut motion before adding it — one orchestrated entrance, then content is just there |
+| 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 |
 
@@ -68,6 +78,7 @@ Typography, layout, motion, states:
 | Restyling an existing app | Replace only the visual layer inside existing boundaries — keep routes, component ownership, copy intent, and information architecture; deleting production files needs explicit approval |
 | The brief genuinely needs icons | One icon library per project; emoji (✨ 🚀 ⚡) standing in for feature icons is the recognized AI default |
 | 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)` |
 
 ## Instead of
@@ -78,7 +89,7 @@ Typography, layout, motion, states:
 | Three equal columns of icon-above-heading-above-body feature cards | Vary column widths and card heights, pull icons inline, or use typographic rhythm with no cards | Every LLM emits this grid |
 | `min-height: 100vh` centered hero with one sentence and a big CTA | Content-height hero, biased left or right, with more than a sentence | The default LLM landing page |
 | Wordmark-left + inline links + CTA-right sticky nav, and a 4-column link footer | Shape nav and footer to the site's genre; the footer closes the page rather than cataloguing a sitemap | Both shapes are genre-blind template fingerprints |
-| Aurora blobs, floating 3D orbs, or decorative glassmorphism behind the hero | Solid surface, or a subtle two-stop gradient with faint grain | 2022-era generated-design defaults; audiences pattern-match them in milliseconds |
+| Aurora blobs, floating 3D orbs, or decorative glassmorphism behind the hero | Solid surface, a subtle two-stop gradient with faint grain, or a layered atmospheric background (gradients/geometry/texture) that belongs to the committed aesthetic | The tell is the ungrounded decoration pasted on a neutral page, not depth itself — atmosphere earned by the theme passes, the 2022 default doesn't |
 | `transition-all`, `hover:scale-105` on every card, scroll-triggered fade-up on every section | Specify transitioned properties; one hover signal per element; one entrance for the page | The page never settles; motion reads as templated |
 | Hand-building fake browser bars, phone frames, or IDE chrome around screenshots | A real screenshot in a `<figure>` with at most a hairline border | Redrawn chrome is always wrong in detail and reads as invented UI |
 | Lottie or Three.js for a simple or non-interactive visual | Hand-built CSS/SVG; 3D must be user-manipulable to earn its bundle | Runtime plus hundreds of KB for what CSS does in zero bytes |
diff --git a/wiki/frontend/design/responsive-layout.md b/wiki/frontend/design/responsive-layout.md
new file mode 100644
index 0000000..f83f0f1
--- /dev/null
+++ b/wiki/frontend/design/responsive-layout.md
@@ -0,0 +1,87 @@
+---
+id: frontend-design-responsive-layout
+domain: frontend
+category: design
+applies_to: [css, html, general]
+confidence: verified
+sources:
+  - https://web.dev/articles/responsive-web-design-basics
+  - https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Viewport_meta_element
+  - https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
+  - https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
+  - https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html
+  - https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
+  - https://web.dev/articles/min-max-clamp
+  - https://web.dev/patterns/layout/repeat-auto-minmax
+  - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
+  - https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img
+  - https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
+  - https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport
+  - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
+  - https://webkit.org/blog/7929/designing-websites-for-iphone-x/
+last_verified: 2026-08-21
+related: [frontend-design-anti-slop-visual-design, frontend-accessibility-interactive-elements, frontend-performance-bundle-and-assets]
+---
+
+# Making One Layout Work From 320px Phones to Desktop
+
+## When this applies
+
+Building or reviewing web UI that must render across viewport sizes (phone →
+desktop); choosing breakpoints, touch-target sizes, fluid type, or responsive
+images; a layout overflows horizontally, breaks on mobile, or fails a zoom/reflow
+accessibility check.
+
+## Do this
+
+Work through these in order — each later item assumes the earlier ones hold:
+
+| Case | Do |
+|------|----|
+| Any page intended for mobile | Ship exactly `<meta name="viewport" content="width=device-width, initial-scale=1">`. Without it, mobile browsers render into a ~980px virtual viewport and scale down, so width-based media queries never trigger |
+| Same meta tag, zoom settings | Leave pinch-zoom enabled: `user-scalable=no` and `maximum-scale=1` are forbidden because low-vision users need ≥2× zoom (WCAG minimum; 5× is the documented best practice) and iOS ignores the restriction anyway — omit both attributes |
+| Writing the stylesheet | Mobile-first: base styles target the smallest screen; layer wider layouts with `min-width` media queries. This minimizes overrides versus a desktop-first `max-width` cascade |
+| Choosing breakpoint values | Place a breakpoint where THIS content's layout breaks (expand the window until it does), not at device-catalog widths — device-based breakpoints rot as hardware ships |
+| A grid of cards/tiles must reflow by width | `grid-template-columns: repeat(auto-fit, minmax(<content-min>, 1fr))` — zero media queries; `auto-fit` collapses empty tracks and stretches the rest, `auto-fill` keeps empty tracks |
+| A component must respond to its container, not the viewport (sidebar vs main placement) | `@container` query with `container-type: inline-size` on the ancestor; keep an intrinsic grid/flex layout as the no-support fallback |
+| Sizing interactive targets | ≥24×24 CSS px per WCAG 2.2 AA (SC 2.5.8); 44×44 meets AAA (SC 2.5.5). A smaller target is compliant only when a 24px-diameter circle centered on it intersects no other target's circle — see [frontend-accessibility-interactive-elements] for the rest of the interactive contract |
+| Fluid type | `font-size: clamp(<min-rem>, <vw-based>, <max-rem>)`, then verify at 200% browser zoom before shipping — a clamp ceiling can stop text from reaching 200% of its original size, which fails WCAG 1.4.4 |
+| Serving images | `srcset` + `sizes` so the browser picks the resource for the slot's layout width; explicit `width`/`height` attributes on every `<img>` so space is reserved pre-load (prevents CLS; matters most on lazy-loaded images) |
+| Final gate before shipping | Render at 320px CSS width: all content and functions present with no horizontal scrolling (WCAG 1.4.10 reflow — 320px equals a 1280px desktop at 400% zoom) |
+
+## Edge cases
+
+| Case | Then |
+|------|------|
+| A full-height section uses `100vh` and content hides under the mobile URL bar | `vh` sizes to the largest viewport (chrome retracted). Use `dvh` (tracks the current chrome state, may reflow during scroll) or `svh` (smallest viewport — stable, may leave a gap when chrome retracts) |
+| UI is revealed only on hover | Gate it behind `@media (hover: hover)` and give touch users a tap-visible path — `hover: none` devices can only emulate hover via long-tap |
+| Edge-to-edge layout on notched/rounded-corner phones | Add `viewport-fit=cover` to the viewport meta, then `padding: max(<base>, env(safe-area-inset-left))` (and the other three insets) so content clears the sensor housing without losing its baseline padding |
+| A grid/flex track overflows the viewport because of one long unbreakable child (URL, image, `<pre>`) | Items default to `min-width: auto` ≈ their `min-content` size, so the track cannot shrink below the child. Use `minmax(0, 1fr)` for the track or `min-width: 0` on the item |
+| The layout passes but still "reads AI-generated" | Responsiveness is the floor, not the design — apply [frontend-design-anti-slop-visual-design] (its narrow-viewport row assumes this page's overflow fixes) |
+
+## Instead of
+
+| If you are about to | Do this instead | Why |
+|---------------------|-----------------|-----|
+| Copy breakpoints from a device list (375/768/1024/…) | Derive each breakpoint from where this content's layout fails | Device catalogs churn; content-driven breakpoints are fewer and don't rot |
+| Add `maximum-scale=1` to stop iOS input-focus zoom | Set the input's `font-size` to ≥16px so iOS has no reason to zoom | The attribute blocks low-vision zoom (WCAG ≥2×) and iOS ignores it since iOS 10 anyway |
+| Write one media query per column count for a card grid | `repeat(auto-fit, minmax(<min>, 1fr))` | The intrinsic grid covers every width, including ones you didn't test |
+| Give a track a fixed-px minimum: `minmax(200px, 1fr)` on a container that can be <200px | `minmax(0, 1fr)` plus `min-width` on the content that truly needs it | The px floor forces horizontal overflow on viewports narrower than the sum of floors |
+| Fix mobile layout bugs desktop-first, per bug report | Run the 320px no-horizontal-scroll gate once and fix what it surfaces | The gate is the WCAG 1.4.10 reflow criterion — piecemeal fixes miss views nobody reported |
+
+## Sources
+
+- https://web.dev/articles/responsive-web-design-basics — content-driven (not device-based) breakpoints; small-screen-first workflow
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Viewport_meta_element — ~980px virtual viewport without the meta tag; `user-scalable=no` harm; ≥2× zoom requirement, 5× best practice
+- https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html — SC 2.5.8: 24×24 CSS px AA minimum, 24px-circle spacing exception
+- https://www.w3.org/WAI/WCAG21/Understanding/target-size.html — SC 2.5.5: 44×44 CSS px AAA
+- https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html — 1.4.4: text must resize to 200% without loss
+- https://www.w3.org/WAI/WCAG21/Understanding/reflow.html — 1.4.10: no 2-D scrolling at 320 CSS px width
+- https://web.dev/articles/min-max-clamp — clamp() fluid type; clamp ceiling can fail 1.4.4
+- https://web.dev/patterns/layout/repeat-auto-minmax — auto-fit vs auto-fill semantics
+- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries — @container, container-type, fallback stance
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img — srcset/sizes selection; width/height reserve space against layout shift
+- https://developer.mozilla.org/en-US/docs/Web/CSS/min-width — `min-width: auto` → min-content minimum on grid/flex items (the overflow mechanism)
+- https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport — vh ≈ lvh; svh/dvh semantics
+- https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover — hover:none on touch (long-tap emulation only)
+- https://webkit.org/blog/7929/designing-websites-for-iphone-x/ — viewport-fit=cover + env(safe-area-inset-*) + max() pattern
diff --git a/wiki/frontend/index.md b/wiki/frontend/index.md
index 906ed86..c864fae 100644
--- a/wiki/frontend/index.md
+++ b/wiki/frontend/index.md
@@ -5,7 +5,8 @@ performance, component structure/composition, in-UI data fetching, async
 loading/error/empty UI states, bundle/asset load performance, form validation UX,
 XSS-safe output, client-side auth token handling, interactive-element accessibility,
 agent-facing tool surfaces (WebMCP tool registration), visual design decisions
-(color/typography/layout/motion styling, canvas effect layers).
+(color/typography/layout/motion styling, canvas effect layers, responsive
+layout across viewport sizes).
 
 Match your situation to a "load when" line; load only matching pages.
 
@@ -79,5 +80,6 @@ Match your situation to a "load when" line; load only matching pages.
 
 | Page | Load when |
 |------|-----------|
-| [anti-slop-visual-design](design/anti-slop-visual-design.md) | Styling or restyling web UI without a design spec; output looks "AI-generated" or template-like; choosing colors, fonts, page structure, or motion for new UI; reviewing a UI diff for template tells |
+| [anti-slop-visual-design](design/anti-slop-visual-design.md) | Styling or restyling web UI without a design spec; picking the theme/aesthetic direction for a new screen (the committed non-generic direction is the default, not an upgrade); output looks "AI-generated" or template-like; choosing colors, fonts, page structure, or motion for new UI; reviewing a UI diff for template tells; writing reusable design guidance for an LLM |
+| [responsive-layout](design/responsive-layout.md) | Building or reviewing UI that must work across viewport sizes (phone → desktop); choosing breakpoints, touch-target sizes, fluid type, or responsive images; a layout overflows horizontally or breaks on mobile; fixing a zoom/reflow accessibility failure (WCAG 1.4.4/1.4.10/2.5.8) |
 | [html-in-canvas](design/html-in-canvas.md) | Wanting shader/3D/canvas-composited effects on real interactive HTML (forms, buttons, sections); about to hand-draw UI widgets inside a canvas with manual hit-testing; adding a canvas effect layer to an existing page |
diff --git a/wiki/frontend/performance/bundle-and-assets.md b/wiki/frontend/performance/bundle-and-assets.md
index 6e321a0..a090cfb 100644
--- a/wiki/frontend/performance/bundle-and-assets.md
+++ b/wiki/frontend/performance/bundle-and-assets.md
@@ -11,7 +11,7 @@ sources:
   - https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading
   - https://web.dev/articles/font-best-practices
 last_verified: 2026-07-10
-related: [frontend-rendering-rerender-and-memoization]
+related: [frontend-rendering-rerender-and-memoization, frontend-design-responsive-layout]
 ---
 
 # Reducing First-Load Payload: Bundle, Images, Fonts