Page Layout & Interaction Consistency — refactor-chain · Web lane · step 04

Bundle: refactor-chain (self-diagnosing, self-healing fix-it pipeline). Phase: do-the-work (web lane) · Prerequisite: refactor-web-03-components · Next: refactor-web-05-naming. Adaptivity / conditional: framework-adaptive — the harness signals registry (scripts/lib/signals.mjs + languages.mjs under ~/.claude/skills/refactor-chain/scripts/) identifies the UI framework (React, Vue, Svelte, Angular, or plain DOM) and every rule is expressed and fixed in that framework's idiom.

Purpose

Make every screen in the app behave like it belongs to the same product. This skill audits page structure (surface hierarchy, dialog and drawer proportions, pinned toolbars, spacing rhythm) and interaction feel (scrollbars, hover affordances, truncation, notifications), then either reports violations with fixes or generates a new page scaffold that already passes the audit. All dimensions are expressed as design tokens and ratio thresholds — never bare pixel constants — so the standard survives theme and density changes.

When to use

• A layout audit is requested: "check the page layout", "does this screen follow our conventions", "dialog/drawer sizing review".
• An interaction audit is requested: "scrollbar rules", "hover states", "toast behavior", "why do notifications feel inconsistent".
• A new screen is needed: "generate a workspace page", "scaffold a drawer form", "give me a standard confirm dialog".
• The orchestrator reaches step 04 of the web lane.