dreative 0.5.0 → 0.5.2

package/skill/dreative/skills/refined.md

@@ -1,102 +1,116 @@
-# Dreative Specialist Skill — Refined Clean Business
-
-Load this file when `plan.skills` includes `refined`, or the brief/prompt asks
-for a "clean modern business site", premium-but-calm marketing, DTC/e-commerce
-polish, "professional, not flashy", or names references like ch.maswitzerland.com
-or lovvelavva.com. This is the OPPOSITE pole from immersive/cinematic: quality
-expressed through restraint — spacing, photography, and type doing all the work,
-with motion barely above zero. Most real client work lands here; treat it as a
-craft discipline, not the absence of one.
-
-It EXTENDS DESIGN.md (everything applies; this file tightens the dials). It does
-NOT stack with `immersive`/`cinematic` — those are different registers. It pairs
-well with a light dose of `interaction` (press states, underline draws), the
-first tier of `motion` (one hero sequence, 2-3 in-view reveals), `ux` (this
-register's audience punishes broken function hardest), and media.md's quiet
-treatments only (ken-burns, curtain reveals, one hover-woken loop — imagery
-here is generated/sourced to ONE photographic grade, media.md §1).
-
-## 0. The register: expensive silence
-
-What separates premium-clean from generic-clean is not any element — it's the
-ratios:
-
-- **Whitespace is the brand.** Section padding 96-160px desktop / 56-80px
-  mobile; content max-width 1200-1320px with WIDE outer gutters; one idea per
-  viewport. If a section feels empty, that's the look working — resist filling.
-- **Photography carries the emotion.** Real product/lifestyle imagery, art-
-  directed to one consistent grade (one light temperature, one background
-  family). Full-bleed image sections alternate with contained text sections —
-  the rhythm image / text / image IS the page structure. Never decorate around
-  weak imagery; demand or generate better imagery instead.
-- **Type does hierarchy, color stays out of the way.** Near-monochrome palette:
-  warm or cool neutral family + ONE accent used almost exclusively on the
-  primary CTA and links. Backgrounds shift between 2-3 tints of the neutral
-  (e.g. white / #f6f5f2 / #111) to separate sections without borders.
-- **Motion whispers.** Motion dial effectively ≤ 4: fade-rise entrances
-  (300-400ms, once), a sticky nav that gains a hairline+blur, underline draws,
-  press states. No parallax beyond 4%, no pinning, no canvas. A single
-  restrained signature (a slow ken-burns on the hero image, or a marquee of
-  press logos) is the ceiling.
-
-## 1. Page anatomy (marketing/DTC form)
-
-The proven skeleton — vary the composition per DESIGN.md §5, not the order
-logic:
-
-1. **Hero**: one full-width image or split layout; headline ≤ 8 words stating
-   the value in plain language; one CTA. No feature bullets in the hero.
-2. **Credibility strip**: press/client logos, real marks, grayscale or
-   single-tint (lovvelavva runs Forbes/Women's Health/Real Simple here —
-   this section converts and belongs high on DTC pages).
-3. **Value sections** (2-4): alternating image/text, each making ONE claim
-   with 1-2 sentences of support. Icons only if custom-drawn; three-generic-
-   icon-cards is the tell this register must avoid most.
-4. **Product/collection grid**: large images, generous gaps (24-32px), minimal
-   card chrome — image, name, price/one-liner; hover = image swap or subtle
-   zoom-crop INSIDE a fixed frame (no card growth).
-5. **Social proof**: 1-3 real testimonials with names/photos, editorial layout
-   (big quote type), never a 3-card testimonial row.
-6. **Closing CTA**: calm full-width section, one sentence, one button.
-7. **Footer**: structured, generous, quiet — the footer's polish is a trust
-   signal in this register; give it real columns, legal, newsletter.
-
-E-commerce specifics: sticky add-to-cart on product pages (mobile bottom bar),
-price always visible, shipping/returns reassurance near the CTA, cart as a
-slide-over drawer not a page.
-
-## 2. The discovery-grid variant (cosmos.so-like)
-
-For content/discovery products (galleries, moodboards, catalogs): near-zero
-chrome around a masonry/justified image grid; dark or paper-white surface;
-images at native aspect ratios (never uniform crops); hover = slight lift +
-metadata fade-in on top of the image; infinite scroll with a sentinel loader;
-the search/filter bar is the only persistent UI. The product IS the grid —
-navigation, branding, and controls stay almost invisible until needed.
-
-## 3. What "modern" means here (2024+, not 2016 flat)
-
-- Hairline borders (1px, 8-12% alpha) instead of shadows for structure; the
-  2-3 stacked tinted shadows (interaction.md §3) reserved for genuinely
-  floating elements (dropdowns, drawers).
-- Larger type than feels safe: body 17-18px on marketing pages, display
-  clamped 2.5-4.5rem, tight leading. Small timid type is the #1 dated tell.
-- Radius system: one value family — either near-square (2-4px, editorial/
-  luxury) or soft (12-16px, DTC/consumer) — never mixed.
-- Buttons: solid accent primary + quiet text-link secondary. Pill shape only
-  in the consumer/DTC variant. No outlined-button armies.
-- Real `<img>`/`<picture>` with proper aspect-ratio boxes; no CSS-drawn
-  product mockups; `object-fit: cover` with art-directed focal points.
-
-## 4. Guardrails
-
-- If you're adding an effect to make a section interesting, the section's
-  content or imagery is the problem — fix that instead.
-- No gradient meshes, no glassmorphism cards, no floating blob backgrounds,
-  no emoji in UI copy: all instantly cheapen this register.
-- Accessibility floor is easy here — don't squander it: AA contrast on the
-  tinted neutrals (test the #767676-gray-on-white trap), visible focus,
-  semantic landmarks.
-- Performance IS the aesthetic: LCP image preloaded, fonts ≤ 2 files,
-  zero animation libraries unless motion is actually used — a clean site
-  that loads instantly reads as more premium than any effect.
+# Dreative Specialist Skill — Refined Clean Business
+
+## Contract
+
+Follow `../references/SKILL_CONTRACT.md`. Dependencies: `ux`, `mobile`; add
+`media` when photography is a primary material. Deliver a precise type/spacing/
+surface system, restrained signature detail, purposeful photography, complete
+states, and responsive proof. Do not confuse refined with generic minimalism.
+Done means hierarchy, copy, conversion flow, polish, and calm motion hold across
+desktop, keyboard, and phone.
+
+Use `../references/REFLEX_FONTS.json` through DESIGN.md's font procedure. Common
+product or editorial fonts remain valid when brand continuity, metrics, language,
+reference, variable-font capability, or performance specifically earns them;
+generic “clean and modern” reasoning does not.
+
+Load this file when `plan.skills` includes `refined`, or the brief/prompt asks
+for a "clean modern business site", premium-but-calm marketing, DTC/e-commerce
+polish, "professional, not flashy", or names references like ch.maswitzerland.com
+or lovvelavva.com. This is the OPPOSITE pole from immersive/cinematic: quality
+expressed through restraint — spacing, photography, and type doing all the work,
+with motion barely above zero. Most real client work lands here; treat it as a
+craft discipline, not the absence of one.
+
+It EXTENDS DESIGN.md (everything applies; this file tightens the dials). It does
+NOT stack with `immersive`/`cinematic` — those are different registers. It pairs
+well with a light dose of `interaction` (press states, underline draws), the
+first tier of `motion` (one hero sequence, 2-3 in-view reveals), `ux` (this
+register's audience punishes broken function hardest), and media.md's quiet
+treatments only (ken-burns, curtain reveals, one hover-woken loop — imagery
+here is generated/sourced to ONE photographic grade, media.md §4).
+
+## 0. The register: expensive silence
+
+What separates premium-clean from generic-clean is not any element — it's the
+ratios:
+
+- **Whitespace is the brand.** Section padding 96-160px desktop / 56-80px
+  mobile; content max-width 1200-1320px with WIDE outer gutters; one idea per
+  viewport. If a section feels empty, that's the look working — resist filling.
+- **Photography carries the emotion.** Real product/lifestyle imagery, art-
+  directed to one consistent grade (one light temperature, one background
+  family). Full-bleed image sections alternate with contained text sections —
+  the rhythm image / text / image IS the page structure. Never decorate around
+  weak imagery; demand or generate better imagery instead.
+- **Type does hierarchy, color stays out of the way.** Near-monochrome palette:
+  warm or cool neutral family + ONE accent used almost exclusively on the
+  primary CTA and links. Backgrounds shift between 2-3 tints of the neutral
+  (e.g. white / #f6f5f2 / #111) to separate sections without borders.
+- **Motion whispers.** Motion dial effectively ≤ 4: fade-rise entrances
+  (300-400ms, once), a sticky nav that gains a hairline+blur, underline draws,
+  press states. No parallax beyond 4%, no pinning, no canvas. A single
+  restrained signature (a slow ken-burns on the hero image, or a marquee of
+  press logos) is the ceiling.
+
+## 1. Page anatomy (marketing/DTC form)
+
+The proven skeleton — vary the composition per DESIGN.md §5, not the order
+logic:
+
+1. **Hero**: one full-width image or split layout; headline ≤ 8 words stating
+   the value in plain language; one CTA. No feature bullets in the hero.
+2. **Credibility strip**: press/client logos, real marks, grayscale or
+   single-tint (lovvelavva runs Forbes/Women's Health/Real Simple here —
+   this section converts and belongs high on DTC pages).
+3. **Value sections** (2-4): alternating image/text, each making ONE claim
+   with 1-2 sentences of support. Icons only if custom-drawn; three-generic-
+   icon-cards is the tell this register must avoid most.
+4. **Product/collection grid**: large images, generous gaps (24-32px), minimal
+   card chrome — image, name, price/one-liner; hover = image swap or subtle
+   zoom-crop INSIDE a fixed frame (no card growth).
+5. **Social proof**: 1-3 real testimonials with names/photos, editorial layout
+   (big quote type), never a 3-card testimonial row.
+6. **Closing CTA**: calm full-width section, one sentence, one button.
+7. **Footer**: structured, generous, quiet — the footer's polish is a trust
+   signal in this register; give it real columns, legal, newsletter.
+
+E-commerce specifics: sticky add-to-cart on product pages (mobile bottom bar),
+price always visible, shipping/returns reassurance near the CTA, cart as a
+slide-over drawer not a page.
+
+## 2. The discovery-grid variant (cosmos.so-like)
+
+For content/discovery products (galleries, moodboards, catalogs): near-zero
+chrome around a masonry/justified image grid; dark or paper-white surface;
+images at native aspect ratios (never uniform crops); hover = slight lift +
+metadata fade-in on top of the image; infinite scroll with a sentinel loader;
+the search/filter bar is the only persistent UI. The product IS the grid —
+navigation, branding, and controls stay almost invisible until needed.
+
+## 3. What "modern" means here (2024+, not 2016 flat)
+
+- Hairline borders (1px, 8-12% alpha) instead of shadows for structure; the
+  2-3 stacked tinted shadows (interaction.md §3) reserved for genuinely
+  floating elements (dropdowns, drawers).
+- Larger type than feels safe: body 17-18px on marketing pages, display
+  clamped 2.5-4.5rem, tight leading. Small timid type is the #1 dated tell.
+- Radius system: one value family — either near-square (2-4px, editorial/
+  luxury) or soft (12-16px, DTC/consumer) — never mixed.
+- Buttons: solid accent primary + quiet text-link secondary. Pill shape only
+  in the consumer/DTC variant. No outlined-button armies.
+- Real `<img>`/`<picture>` with proper aspect-ratio boxes; no CSS-drawn
+  product mockups; `object-fit: cover` with art-directed focal points.
+
+## 4. Guardrails
+
+- If you're adding an effect to make a section interesting, the section's
+  content or imagery is the problem — fix that instead.
+- No gradient meshes, no glassmorphism cards, no floating blob backgrounds,
+  no emoji in UI copy: all instantly cheapen this register.
+- Accessibility floor is easy here — don't squander it: AA contrast on the
+  tinted neutrals (test the #767676-gray-on-white trap), visible focus,
+  semantic landmarks.
+- Performance IS the aesthetic: LCP image preloaded, fonts ≤ 2 files,
+  zero animation libraries unless motion is actually used — a clean site
+  that loads instantly reads as more premium than any effect.

package/skill/dreative/skills/ux.md

@@ -1,144 +1,155 @@
-# Dreative Specialist Skill — Functional UX (everything works)
-
-Load this file when `plan.skills` includes `ux`, for ANY product-register page,
-and whenever a redesign touches navigation, forms, or stateful views. It EXTENDS
-DESIGN.md §9 (the product floor) into a full working-page contract. Its premise:
-a beautiful page where the menu doesn't open, a link 404s, or an effect eats
-clicks is a FAILED page — visual craft cannot compensate for broken function.
-This skill is the reason "immersive but broken" never ships: it defines what
-"works" means, mechanically, and the runtime verification pass (SKILL.md) tests
-against it.
-
-## 0. The working-page contract
-
-Every page you ship satisfies, verifiably:
-
-1. Every visible control does something real (or is explicitly disabled with a
-   reason). No dead buttons, no `href="#"`, no `onClick={() => {}}`.
-2. Every navigation target resolves — internal routes exist, anchors match real
-   ids, external links open safely (`rel="noopener"`, `target="_blank"` only
-   for true externals).
-3. Every stateful view renders all its states (loading/empty/error/success),
-   not just the happy path.
-4. Keyboard alone can operate everything a pointer can.
-5. Nothing decorative intercepts input, blocks scroll, or steals focus.
-
-## 1. Navigation
-
-- **Links resolve.** Before shipping, list every `href`/`to`/`navigate` target
-  and check each exists (route table, file, or real URL). A designed 404 is
-  still a 404.
-- **Active state**: the nav marks the current page/section (aria-current +
-  visual). Section-scroll pages update it via IntersectionObserver.
-- **Mobile menu is a component, not a hope**: opens AND closes (button, Esc,
-  backdrop click, and on route change); scroll-locks the body while open
-  (`overflow:hidden` on html, restore on close — with scrollbar-gutter
-  compensation so the page doesn't shift); traps focus while open and returns
-  focus to the trigger on close; the toggle reflects state
-  (`aria-expanded`, icon morph). Test the open→navigate→back sequence — stale
-  open menus after route changes are the #1 shipped-menu bug.
-- **Anchors under fixed headers**: every in-page anchor target gets
-  `scroll-margin-top` ≥ header height; smooth-scroll respects reduced-motion.
-- **Logo → home. Back button works** — spatial/SPA transitions must not break
-  history (immersive.md §1); modals and drawers close on back where users
-  expect it (mobile especially).
-- **Custom scroll (Lenis)** must not break anchors, keyboard scrolling
-  (space/PgDn/arrows), or focus-into-view; wire `lenis.scrollTo` for anchor
-  clicks and leave native behavior for the rest.
-
-## 2. Forms
-
-- Every form submits somewhere real, or is explicitly wired to a stub with a
-  visible success simulation — never a button that swallows the click.
-- Labels above inputs (placeholder-as-label banned, DESIGN.md §9);
-  autocomplete attributes on identity fields; correct `type`/`inputmode`
-  (email, tel, numeric) so mobile keyboards match.
-- Validate on submit first (not on first keystroke); after first submit,
-  re-validate per field on blur/change. Errors inline, next to the field,
-  specific ("Enter a valid email"), with `aria-describedby` wiring and focus
-  moved to the first invalid field.
-- Submit feedback: button enters loading state (spinner inside, fixed width,
-  interaction.md §5), double-submit prevented, success confirmed visibly
-  (inline message or state change — not just a toast that may be missed),
-  failure recoverable (inputs keep their values; never wipe a form on error).
-- Enter submits single-field forms (newsletter). Required fields marked; the
-  disabled-until-valid pattern only when errors show on hover/focus of the
-  disabled button, otherwise keep the button enabled and validate on click.
-
-## 3. State coverage (every data view)
-
-For each list/table/feed/detail view, all four states are designed and
-reachable: **loading** (skeleton shaped like the content, DESIGN.md §9),
-**empty** (teaches the interface: what this will show + the action that fills
-it — never a blank area or a lonely "No data"), **error** (what happened + a
-retry affordance), **populated** (including the long-content case: 100 items,
-40-character names, overflow handled per DESIGN.md §15). Async actions get
-optimistic UI only when low-stakes (DESIGN.md §6); destructive actions get
-confirmation and, ideally, undo instead of a scary modal.
-
-## 4. Keyboard, focus, and the hit-area audit
-
-- Full tab walk: every interactive element reachable in visual order, operable
-  (Enter/Space), with a visible `:focus-visible` ring (interaction.md §0), and
-  escapable (no traps outside intentional modal traps).
-- Whatever hover reveals, focus reveals (cards' secondary actions, hover-woken
-  media, dropdown menus). Custom gestures (drag, click-and-hold) always have a
-  plain keyboard/click equivalent (cinematic.md §2).
-- **The pointer-events audit** (the #1 cause of "cool but broken"): walk every
-  overlay in the stacking order — canvases, gradient/grain layers, custom
-  cursor layers, transition curtains, closed menus, preloaders — and verify
-  each is `pointer-events: none` (or removed from the DOM) whenever it is not
-  actively being interacted with. A finished preloader or a closed fullscreen
-  menu sitting at `opacity:0` with pointer-events on is an invisible wall over
-  the whole page. Then hit-test the controls: click every button/link at its
-  visual position — if something above it swallows the click, that's a §15
-  spatial-integrity fail, fix the layer not the button.
-- Modals/drawers: focus trapped inside, Esc closes, focus returns to trigger,
-  `aria-modal` + labelled; scrim click closes (unless data-loss risk).
-- Semantic HTML first: real `<button>`/`<a>`/`<nav>`/`<main>`/headings in
-  order — divs-with-onClick fail half this section automatically.
-
-## 5. Scroll and layout stability
-
-- Zero layout shift from async content: media boxes sized up front (media.md
-  §5), fonts `swap` with metric-compatible fallbacks, skeletons the same size
-  as what replaces them, no banners that push content after load.
-- Scroll restoration: back/forward returns to the previous position (default
-  browser behavior — don't break it with manual scroll-to-top on every route;
-  scroll to top only on forward navigation to a NEW page).
-- Fixed bars: content padded so nothing hides beneath them (DESIGN.md §15);
-  100dvh not 100vh; no horizontal body scroll at 320px.
-- Long pages get orientation aids: sticky nav or progress indication, and a
-  footer that actually ends the page (no infinite-feeling voids).
-
-## 6. Feedback and perceived performance
-
-- Every async action acknowledges input within 100ms (pressed state, spinner,
-  optimistic change) — silence after a click reads as broken even when it
-  works.
-- Toasts only for transient global events; they stack in ONE corner slot
-  (DESIGN.md §15), auto-dismiss ≥ 4s, pause on hover, and are `aria-live`.
-- Destructive/irreversible actions: confirm with specifics ("Delete 3 items?"),
-  never bare "Are you sure?"; prefer undo-toast over confirm-modal when safe.
-- Copy per DESIGN.md §8's UX-writing rules: buttons say what they do, errors
-  say what to do next.
-
-## 7. The functional audit (run at verification time)
-
-This is the checklist the runtime verification pass (SKILL.md) executes with
-browser tools — or walks mentally, file by file, when no browser exists:
-
-1. Click every nav link + the logo; confirm each lands where labeled.
-2. Open and close the mobile menu (both directions, plus Esc, plus navigate-
-   while-open) at 390px width.
-3. Submit each form empty → see inline errors; submit valid → see success
-   state; confirm no double-submit.
-4. Tab through the page start to finish; note any unreachable/invisible-focus/
-   trapped stop.
-5. Hit-test 5+ controls in effect-heavy regions (hero, canvas overlays,
-   floating elements) — every click must land.
-6. Trigger each data view's empty/error state if reachable (or verify the
-   branch exists in code).
-7. Console: zero uncaught errors during all of the above.
-
-Report the result as a pass/fail list, fix fails, re-run the failed items once.
+# Dreative Specialist Skill — Functional UX (everything works)
+
+## Contract
+
+Universal foundation: ux and baseline mobile apply to every web page.
+
+Follow `../references/SKILL_CONTRACT.md`. This universal foundation has no
+specialist dependency; pair it with `mobile` for all web delivery. Deliver the
+preservation manifest, state inventory, semantic/keyboard behavior, feedback,
+and functional audit evidence. It may never be deselected to fund visual work.
+Done means routes, controls, forms, states, focus, hit areas, and failure paths
+work without visual effects.
+
+Load this file when `plan.skills` includes `ux`, for ANY product-register page,
+and whenever a redesign touches navigation, forms, or stateful views. It EXTENDS
+DESIGN.md §9 (the product floor) into a full working-page contract. Its premise:
+a beautiful page where the menu doesn't open, a link 404s, or an effect eats
+clicks is a FAILED page — visual craft cannot compensate for broken function.
+This skill is the reason "immersive but broken" never ships: it defines what
+"works" means, mechanically, and the runtime verification pass (SKILL.md) tests
+against it.
+
+## 0. The working-page contract
+
+Every page you ship satisfies, verifiably:
+
+1. Every visible control does something real (or is explicitly disabled with a
+   reason). No dead buttons, no `href="#"`, no `onClick={() => {}}`.
+2. Every navigation target resolves — internal routes exist, anchors match real
+   ids, external links open safely (`rel="noopener"`, `target="_blank"` only
+   for true externals).
+3. Every stateful view renders all its states (loading/empty/error/success),
+   not just the happy path.
+4. Keyboard alone can operate everything a pointer can.
+5. Nothing decorative intercepts input, blocks scroll, or steals focus.
+
+## 1. Navigation
+
+- **Links resolve.** Before shipping, list every `href`/`to`/`navigate` target
+  and check each exists (route table, file, or real URL). A designed 404 is
+  still a 404.
+- **Active state**: the nav marks the current page/section (aria-current +
+  visual). Section-scroll pages update it via IntersectionObserver.
+- **Mobile menu is a component, not a hope**: opens AND closes (button, Esc,
+  backdrop click, and on route change); scroll-locks the body while open
+  (`overflow:hidden` on html, restore on close — with scrollbar-gutter
+  compensation so the page doesn't shift); traps focus while open and returns
+  focus to the trigger on close; the toggle reflects state
+  (`aria-expanded`, icon morph). Test the open→navigate→back sequence — stale
+  open menus after route changes are the #1 shipped-menu bug.
+- **Anchors under fixed headers**: every in-page anchor target gets
+  `scroll-margin-top` ≥ header height; smooth-scroll respects reduced-motion.
+- **Logo → home. Back button works** — spatial/SPA transitions must not break
+  history (immersive.md §2); modals and drawers close on back where users
+  expect it (mobile especially).
+- **Custom scroll (Lenis)** must not break anchors, keyboard scrolling
+  (space/PgDn/arrows), or focus-into-view; wire `lenis.scrollTo` for anchor
+  clicks and leave native behavior for the rest.
+
+## 2. Forms
+
+- Every form submits somewhere real, or is explicitly wired to a stub with a
+  visible success simulation — never a button that swallows the click.
+- Labels above inputs (placeholder-as-label banned, DESIGN.md §9);
+  autocomplete attributes on identity fields; correct `type`/`inputmode`
+  (email, tel, numeric) so mobile keyboards match.
+- Validate on submit first (not on first keystroke); after first submit,
+  re-validate per field on blur/change. Errors inline, next to the field,
+  specific ("Enter a valid email"), with `aria-describedby` wiring and focus
+  moved to the first invalid field.
+- Submit feedback: button enters loading state (spinner inside, fixed width,
+  interaction.md §5), double-submit prevented, success confirmed visibly
+  (inline message or state change — not just a toast that may be missed),
+  failure recoverable (inputs keep their values; never wipe a form on error).
+- Enter submits single-field forms (newsletter). Required fields marked; the
+  disabled-until-valid pattern only when errors show on hover/focus of the
+  disabled button, otherwise keep the button enabled and validate on click.
+
+## 3. State coverage (every data view)
+
+For each list/table/feed/detail view, all four states are designed and
+reachable: **loading** (skeleton shaped like the content, DESIGN.md §9),
+**empty** (teaches the interface: what this will show + the action that fills
+it — never a blank area or a lonely "No data"), **error** (what happened + a
+retry affordance), **populated** (including the long-content case: 100 items,
+40-character names, overflow handled per DESIGN.md §15). Async actions get
+optimistic UI only when low-stakes (DESIGN.md §6); destructive actions get
+confirmation and, ideally, undo instead of a scary modal.
+
+## 4. Keyboard, focus, and the hit-area audit
+
+- Full tab walk: every interactive element reachable in visual order, operable
+  (Enter/Space), with a visible `:focus-visible` ring (interaction.md §0), and
+  escapable (no traps outside intentional modal traps).
+- Whatever hover reveals, focus reveals (cards' secondary actions, hover-woken
+  media, dropdown menus). Custom gestures (drag, click-and-hold) always have a
+  plain keyboard/click equivalent (cinematic.md §3).
+- **The pointer-events audit** (the #1 cause of "cool but broken"): walk every
+  overlay in the stacking order — canvases, gradient/grain layers, custom
+  cursor layers, transition curtains, closed menus, preloaders — and verify
+  each is `pointer-events: none` (or removed from the DOM) whenever it is not
+  actively being interacted with. A finished preloader or a closed fullscreen
+  menu sitting at `opacity:0` with pointer-events on is an invisible wall over
+  the whole page. Then hit-test the controls: click every button/link at its
+  visual position — if something above it swallows the click, that's a §15
+  spatial-integrity fail, fix the layer not the button.
+- Modals/drawers: focus trapped inside, Esc closes, focus returns to trigger,
+  `aria-modal` + labelled; scrim click closes (unless data-loss risk).
+- Semantic HTML first: real `<button>`/`<a>`/`<nav>`/`<main>`/headings in
+  order — divs-with-onClick fail half this section automatically.
+
+## 5. Scroll and layout stability
+
+- Zero layout shift from async content: media boxes sized up front (media.md
+  §5), fonts `swap` with metric-compatible fallbacks, skeletons the same size
+  as what replaces them, no banners that push content after load.
+- Scroll restoration: back/forward returns to the previous position (default
+  browser behavior — don't break it with manual scroll-to-top on every route;
+  scroll to top only on forward navigation to a NEW page).
+- Fixed bars: content padded so nothing hides beneath them (DESIGN.md §15);
+  100dvh not 100vh; no horizontal body scroll at 320px.
+- Long pages get orientation aids: sticky nav or progress indication, and a
+  footer that actually ends the page (no infinite-feeling voids).
+
+## 6. Feedback and perceived performance
+
+- Every async action acknowledges input within 100ms (pressed state, spinner,
+  optimistic change) — silence after a click reads as broken even when it
+  works.
+- Toasts only for transient global events; they stack in ONE corner slot
+  (DESIGN.md §15), auto-dismiss ≥ 4s, pause on hover, and are `aria-live`.
+- Destructive/irreversible actions: confirm with specifics ("Delete 3 items?"),
+  never bare "Are you sure?"; prefer undo-toast over confirm-modal when safe.
+- Copy per DESIGN.md §8's UX-writing rules: buttons say what they do, errors
+  say what to do next.
+
+## 7. The functional audit (run at verification time)
+
+This is the checklist the runtime verification pass (SKILL.md) executes with
+browser tools — or walks mentally, file by file, when no browser exists:
+
+1. Click every nav link + the logo; confirm each lands where labeled.
+2. Open and close the mobile menu (both directions, plus Esc, plus navigate-
+   while-open) at 390px width.
+3. Submit each form empty → see inline errors; submit valid → see success
+   state; confirm no double-submit.
+4. Tab through the page start to finish; note any unreachable/invisible-focus/
+   trapped stop.
+5. Hit-test 5+ controls in effect-heavy regions (hero, canvas overlays,
+   floating elements) — every click must land.
+6. Trigger each data view's empty/error state if reachable (or verify the
+   branch exists in code).
+7. Console: zero uncaught errors during all of the above.
+
+Report the result as a pass/fail list, fix fails, re-run the failed items once.