F Kitchen Sink

UX audit rules

Studio title matches app rail

Rule handbook metadata

Rule
DET.STUDIO.TITLE_NAV_MATCH · lane deterministic
Page status
current
page_version
0ec643185b306af74e2a5bfc821af6fd0e0fd2249a940be66f6d3cdb0b4db714
generated_at
2026-08-13T00:00:00.000Z
registry_fingerprint
aef1de6082cf0f50d463783c843dee0ffb9132fbd5ed4ea6e5bb3f031f359c72

How this rule is fixed

Not in the deterministic fixer pilot registry (stub or not yet wired). Use the After example below as the target state and remediate manually or extend pilot-registry.json.

Detection module: docs/design/ux-audit/deterministic-design-rules.md#det-studio-title_nav_match. Scroll down for Before / After examples and Evidence and remediation steps.

Purpose

Forge Studio SPAs use a persistent app rail (.fc-app-rail) plus a workspace H1. When the rail says Watchlists but the H1 says Tickers, operators lose sense of place and automated PDCA scoring flags a critical identity defect.

DET.STUDIO.TITLE_NAV_MATCH compares normalized text from h1 and the active rail label (.fc-app-rail__btn--active .fc-app-rail__label or [aria-current="page"]). Rail subtitle mismatches are minor at most when H1 already matches the active destination.

Plan: Walk each route in the Studio manifest. Do: Rename H1 to match the active rail label; keep mechanism detail in the lead paragraph. Check: page.json shows matching h1 and active_rail_label. Adjust: If marketing copy needs a longer title, shorten H1 and move prose to p below.

Passing signals

  • h1 text equals active rail label after lowercasing and stripping punctuation (e.g. both Watchlists).
  • data-testid on page header and rail active state for Playwright (DET.STUDIO.TESTID).
  • Breadcrumb or tab selection agrees with H1 when present.

Failing signals

  • H1 Tickers with rail Watchlists (classic Forge Market defect).
  • H1 empty while rail shows a label (DET.STUDIO.H1 may also fire).
  • H1 names a sub-tab job while rail names the parent hub without tabs demoting the mismatch.

Before example

Before (failing example)

Tickers

Harvest EDGAR filings into the pipeline API.

After example

After (passing example)

Watchlists

Review and compare the issuers you are tracking.

Evidence and remediation

  • Studio UX PDCA: tools/studio-ux-pdca/score-page.mjs on page.json from capture-page.mjs.
  • Remediation: rename H1 in the React page component; prefer KS Cap shell header slot.
  • Related axis: page_identity in assessment.json.