diff --git a/src/workflows/4-ux-design/data/specification-audit-workflow.md b/src/workflows/4-ux-design/data/specification-audit-workflow.md index b7e921f80..f209797de 100644 --- a/src/workflows/4-ux-design/data/specification-audit-workflow.md +++ b/src/workflows/4-ux-design/data/specification-audit-workflow.md @@ -309,7 +309,31 @@ This is especially important for storyboards and multi-state specifications wher - Error messages - Loading indicators -### B. Design System Integration (if enabled) +### B. Cross-Page Duplicate Detection + +**Purpose:** Compare sections across all pages in the scenario and flag identical or near-identical content that should be shared components. + +**Process:** +1. Collect all section definitions from completed page specs in the scenario +2. Compare sections by structure (heading patterns, object types, layout) +3. Flag matches: + - **Exact duplicate** — identical section structure and content across 2+ pages (e.g., navigation header, footer) + - **Near duplicate** — same structure with minor content differences (e.g., hero sections with different text but identical layout) + - **Repeated pattern** — same object types appearing in multiple pages (e.g., card grids, form fields) + +**Checklist:** +- [ ] All completed pages in scenario scanned +- [ ] Exact duplicates flagged with source pages listed +- [ ] Near duplicates flagged with diff summary +- [ ] Repeated patterns identified +- [ ] Extraction recommendation for each finding (extract / leave as-is / parameterize) + +**Severity:** +- **Critical** — Exact duplicate in 3+ pages (must extract) +- **Warning** — Exact duplicate in 2 pages or near duplicate in 3+ (should extract) +- **Suggestion** — Repeated pattern (consider extracting) + +### C. Design System Integration (if enabled) **Checklist:** - [ ] All components added to design system @@ -322,6 +346,7 @@ This is especially important for storyboards and multi-state specifications wher - [ ] Component variants documented ### Output +- Cross-page duplicate report (from B) - List of components needing extraction - Design system gaps - Component hierarchy recommendations diff --git a/src/workflows/4-ux-design/workflow-dream.md b/src/workflows/4-ux-design/workflow-dream.md index b5774cb9a..01bb03d7a 100644 --- a/src/workflows/4-ux-design/workflow-dream.md +++ b/src/workflows/4-ux-design/workflow-dream.md @@ -100,8 +100,23 @@ Page [NN.step] complete! What would you like to do? When the user chooses [N], the flow is: 1. **Outline the next page** — Ask: "What's the point of this page?" and "What does the user do to move forward?" (same as Phase 3's [O] dialog) -2. **Create the page folder** with boilerplate spec and Sketches/ subfolder -3. **Design the page** — run steps 08-15 for this page -4. **After completion** — present this menu again +2. **Component Extraction Check** (2nd+ page only) — see below +3. **Create the page folder** with boilerplate spec and Sketches/ subfolder +4. **Design the page** — run steps 08-15 for this page +5. **After completion** — present this menu again This loop continues until all pages in the scenario are designed or the user chooses to stop. + +### Component Extraction Check (2nd+ Page) + +**Trigger:** Automatically runs when starting the 2nd or later page in a scenario. + +**Purpose:** Identify repeating elements across pages and suggest extracting them as shared components before they multiply. + +**Dream mode behavior:** +1. Scan completed page specs silently +2. If shared elements found, auto-extract them as shared components (log decisions) +3. Reference shared components in subsequent page specs instead of duplicating definitions +4. Include extraction summary in the final review presentation + +**Key principle:** In Dream mode, extract automatically and report in the summary. The user reviews component decisions alongside page decisions. diff --git a/src/workflows/4-ux-design/workflow-suggest.md b/src/workflows/4-ux-design/workflow-suggest.md index 9e83f1222..086902fd0 100644 --- a/src/workflows/4-ux-design/workflow-suggest.md +++ b/src/workflows/4-ux-design/workflow-suggest.md @@ -92,8 +92,37 @@ Page [NN.step] complete! What would you like to do? When the user chooses [N], the flow is: 1. **Outline the next page** — Ask: "What's the point of this page?" and "What does the user do to move forward?" (same as Phase 3's [O] dialog) -2. **Create the page folder** with boilerplate spec and Sketches/ subfolder -3. **Design the page** — run steps 08-15 for this page -4. **After completion** — present this menu again +2. **Component Extraction Check** (2nd+ page only) — see below +3. **Create the page folder** with boilerplate spec and Sketches/ subfolder +4. **Design the page** — run steps 08-15 for this page +5. **After completion** — present this menu again This loop continues until all pages in the scenario are designed or the user chooses to stop. + +### Component Extraction Check (2nd+ Page) + +**Trigger:** Automatically runs when starting the 2nd or later page in a scenario. + +**Purpose:** Identify repeating elements across pages and suggest extracting them as shared components before they multiply. + +**Process:** + +1. **Scan completed page specs** in the current scenario's `pages/` folder +2. **Identify common patterns** across completed pages: + - Navigation headers / footers + - Repeated form fields or input patterns + - Shared section layouts (e.g., hero, card grids) + - Identical UI elements (buttons, modals, alerts) +3. **If shared elements found**, present briefly: + ``` + I noticed these elements appear across your completed pages: + - [element] — used in [page 1], [page 2] + - [element] — used in [page 1], [page 2] + + Want me to extract these as shared components now, or continue and handle it later? + [E] Extract now → routes to [M] Manage Design System + [L] Later — continue with page design + ``` +4. **If no shared elements found** (or this is only the 2nd page with minimal overlap), skip silently and continue to page design. + +**Key principle:** Don't block the design flow. This is a brief check, not a deep audit. The user can always choose [L] to defer.