Bug: Slug mismatch between product-loader and shape-section skill when section title contains &

[artyomsv]

Summary

When a section title contains an ampersand (&), the slugify() function in product-loader.ts and the /shape-section skill produce different folder slugs, causing the app to fail to link roadmap sections to their artifacts (spec, data, screen designs, screenshots).

Steps to Reproduce

  1. Run /product-vision and define a section with & in the title, e.g. "Fiscal & Quality Audit"
  2. Run /shape-section for that section — it creates folders at:
    - product/sections/fiscal-quality-audit/
    - src/sections/fiscal-quality-audit/
  3. Run /design-screen — components are created inside src/sections/fiscal-quality-audit/
  4. Open the Design OS app and navigate to the section

Expected Behavior

The section should display its spec, sample data, screen designs, and screenshots in the Design OS UI.

Actual Behavior

The section card appears in the roadmap but shows no spec, no data, no screen designs, and no screenshots. Clicking into the section shows an empty state.

Root Cause

There are two different slug generation approaches that produce inconsistent results:

1. src/lib/product-loader.ts (lines 28-34) — used at runtime to generate section IDs from roadmap titles:

function slugify(str: string): string {
return str
.toLowerCase()
.replace(/\s+&\s+/g, '-and-') // Converts " & " to "-and-"
.replace(/[^a-z0-9]+/g, '-')
.replace(/(^-|-$)/g, '')
}

"Fiscal & Quality Audit" → "fiscal-and-quality-audit"

2. The /shape-section skill — uses a simpler implicit slugification when creating folders:

The skill instructions say "The section-id is the slug version of the section title (lowercase, hyphens instead of spaces)", but the LLM executing the skill drops the & entirely rather than converting it to "and".

"Fiscal & Quality Audit" → "fiscal-quality-audit"

The runtime code looks for artifacts at /product/sections/fiscal-and-quality-audit/ but the files actually live at /product/sections/fiscal-quality-audit/ — so nothing is found.

Impact

Any section title containing & will be broken. The section will appear in the roadmap list but all its artifacts (spec, data, screen designs, screenshots) will be invisible in the UI.