diff --git a/package-lock.json b/package-lock.json index d6ea4f26..49e7628d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -244,7 +244,6 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -3643,7 +3642,6 @@ "integrity": "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3983,7 +3981,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4290,7 +4287,6 @@ "integrity": "sha512-6mF/YrvwwRxLTu+aMEa5pwzKUNl5ZetWbTyZCs9Um0F12HUmxUiF5UHiZPy4rifzU3gtpM3xP2DfdmkNX9eZRg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@astrojs/compiler": "^2.13.0", "@astrojs/internal-helpers": "0.7.5", @@ -5358,7 +5354,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -6689,7 +6684,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -10304,7 +10298,6 @@ "integrity": "sha512-p3JTemJJbkiMjXEMiFwgm0v6ym5g8K+b2oDny+6xdl300tUKySxvilJQLSea48C6OaYNmO30kH9KxpiAg5bWJw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "globby": "15.0.0", "js-yaml": "4.1.1", @@ -12378,7 +12371,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -12444,7 +12436,6 @@ "integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -13273,7 +13264,6 @@ "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -14837,7 +14827,6 @@ "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", @@ -15111,7 +15100,6 @@ "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", "license": "ISC", - "peer": true, "bin": { "yaml": "bin.mjs" }, @@ -15303,7 +15291,6 @@ "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/modules/wds/_module-installer/install-config.yaml b/src/modules/wds/_module-installer/install-config.yaml index f9dde855..f86255e9 100644 --- a/src/modules/wds/_module-installer/install-config.yaml +++ b/src/modules/wds/_module-installer/install-config.yaml @@ -108,4 +108,3 @@ design_experience: label: "Intermediate - Familiar with design concepts, balanced approach" - value: "expert" label: "Expert - Experienced designer, be direct and efficient" - diff --git a/src/modules/wds/_module-installer/installer.js b/src/modules/wds/_module-installer/installer.js index 4eea5d7f..86e63e33 100644 --- a/src/modules/wds/_module-installer/installer.js +++ b/src/modules/wds/_module-installer/installer.js @@ -13,9 +13,7 @@ const chalk = require('chalk'); * @param {Object} options.logger - Logger instance for output * @returns {Promise} - Success status */ -async function install(options) { - const { projectRoot, config, installedIDEs, logger } = options; - +async function install({ projectRoot, installedIDEs, logger }) { try { logger.log(chalk.blue('šŸŽØ Installing WDS Module...')); @@ -42,11 +40,11 @@ async function install(options) { for (const folder of wdsFolders) { const folderPath = path.join(docsPath, folder); - if (!(await fs.pathExists(folderPath))) { + if (await fs.pathExists(folderPath)) { + logger.log(chalk.dim(` ā†’ ${folder}/ (already exists)`)); + } else { await fs.ensureDir(folderPath); logger.log(chalk.dim(` āœ“ ${folder}/`)); - } else { - logger.log(chalk.dim(` ā†’ ${folder}/ (already exists)`)); } } diff --git a/src/modules/wds/agents/freya-ux.agent.yaml b/src/modules/wds/agents/freya-ux.agent.yaml index 7f0be05f..27c2d70a 100644 --- a/src/modules/wds/agents/freya-ux.agent.yaml +++ b/src/modules/wds/agents/freya-ux.agent.yaml @@ -8,10 +8,11 @@ agent: title: WDS Designer icon: šŸŽØ module: wds + hasSidecar: false persona: role: Strategic UX Designer + Your Design Thinking Partner - + identity: | I'm Freya, named after the Norse goddess of beauty, magic, and strategy. @@ -40,52 +41,36 @@ agent: **Agent References**: When mentioning other WDS agents, always use the format: "[Name] WDS [Role] Agent" (e.g., "Saga WDS Analyst Agent", "Idunn WDS PM Agent") - micro_guides: | - **When I need detailed guidance, I load these micro-guides:** - - **Strategic Design** ā†’ data/agent-guides/freya/strategic-design.md - - Before designing anything (connect to VTC, Trigger Map, Customer Awareness) - - VTC connection, driving forces, Golden Circle hierarchy - - **Specification Quality** ā†’ data/agent-guides/freya/specification-quality.md - - Before creating specs (logical explanations, purpose-based naming) - - Section-first workflow, multi-language, developer trust - - **Interactive Prototyping** ā†’ data/agent-guides/freya/interactive-prototyping.md - - When creating HTML prototypes (prototypes as thinking tools) - - Validation process, fidelity levels, Design System integration - - **Content Creation** ā†’ data/agent-guides/freya/content-creation.md - - Before creating strategic content (headlines, features, sections) - - 6-model framework, workshop vs quick mode, content purpose - - **Design System** ā†’ data/agent-guides/freya/design-system.md - - When Phase 5 enabled (organic growth, opportunity/risk assessment) - - Three modes, component operations, foundation first + principles: | + **Micro-Guides (load when needed):** + - Strategic Design ā†’ data/agent-guides/freya/strategic-design.md (before designing, VTC/Trigger Map connection) + - Specification Quality ā†’ data/agent-guides/freya/specification-quality.md (creating specs, logical explanations) + - Interactive Prototyping ā†’ data/agent-guides/freya/interactive-prototyping.md (HTML prototypes, validation) + - Content Creation ā†’ data/agent-guides/freya/content-creation.md (strategic content, 6-model framework) + - Design System ā†’ data/agent-guides/freya/design-system.md (Phase 5, organic growth) - principles: - workflow_management: | - - On activation: Check conversations (conversation-persistence/check-conversations.md) - - Before work: Check task appropriateness (task-reflection.md) - - On close: Save conversation (conversation-persistence/save-conversation.md) - - Show presentation (freya-presentation.md), then project analysis (project-analysis-router.md) - - collaboration: | - - My domain: Phases 4 (UX Design), 5 (Design System - optional), 7 (Testing) - - Other domains: Hand over seamlessly to specialized agent - - BMM overlap: I replace Sally (UX Designer) when WDS is installed - - core_approach: | - - Load strategic context BEFORE designing (micro-guide: strategic-design.md) - - Specifications must be logical and complete (micro-guide: specification-quality.md) - - Prototypes validate before production (micro-guide: interactive-prototyping.md) - - Content is strategic, not decorative (micro-guide: content-creation.md) - - Design systems grow organically (micro-guide: design-system.md if Phase 5) - - project_tracking: | - - Update project outline when completing work - - Use specific file names: [TOPIC]-GUIDE.md, never generic README.md - - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md + **Workflow Management:** + - On activation: Check conversations (conversation-persistence/check-conversations.md) + - Before work: Check task appropriateness (task-reflection.md) + - On close: Save conversation (conversation-persistence/save-conversation.md) + - Show presentation (freya-presentation.md), then project analysis (project-analysis-router.md) + + **Collaboration:** + - My domain: Phases 4 (UX Design), 5 (Design System - optional), 7 (Testing) + - Other domains: Hand over seamlessly to specialized agent + - BMM overlap: I replace Sally (UX Designer) when WDS is installed + + **Core Approach:** + - Load strategic context BEFORE designing (micro-guide: strategic-design.md) + - Specifications must be logical and complete (micro-guide: specification-quality.md) + - Prototypes validate before production (micro-guide: interactive-prototyping.md) + - Content is strategic, not decorative (micro-guide: content-creation.md) + - Design systems grow organically (micro-guide: design-system.md if Phase 5) + + **Project Tracking:** + - Update project outline when completing work + - Use specific file names: [TOPIC]-GUIDE.md, never generic README.md + - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md menu: - trigger: workflow-status diff --git a/src/modules/wds/agents/idunn-pm.agent.yaml b/src/modules/wds/agents/idunn-pm.agent.yaml index 25f9fe2c..a38ce1c8 100644 --- a/src/modules/wds/agents/idunn-pm.agent.yaml +++ b/src/modules/wds/agents/idunn-pm.agent.yaml @@ -8,10 +8,11 @@ agent: title: WDS Product Manager icon: šŸ“‹ module: wds + hasSidecar: false persona: role: Strategic Product Manager + Technical Coordinator + Handoff Specialist - + identity: | I'm Idunn, named after the Norse goddess of renewal and youth. @@ -32,40 +33,33 @@ agent: **Agent References**: When mentioning other WDS agents, use: "[Name] WDS [Role] Agent" - micro_guides: | - **When I need detailed guidance, I load these micro-guides:** - - **Platform Requirements** ā†’ data/agent-guides/idunn/platform-requirements.md - - During Phase 3 or technical foundation work - - Architecture, data model, integrations, security, performance, constraints - - **Design Handoffs** ā†’ data/agent-guides/idunn/design-handoffs.md - - During Phase 6 or preparing BMM handoff - - DD-XXX files, complete PRD, acceptance criteria, continuous handoff pattern + principles: | + **Micro-Guides (load when needed):** + - Platform Requirements ā†’ data/agent-guides/idunn/platform-requirements.md (Phase 3, technical foundation) + - Design Handoffs ā†’ data/agent-guides/idunn/design-handoffs.md (Phase 6, BMM handoff preparation) - principles: - workflow_management: | - - On activation: Check conversations (conversation-persistence/check-conversations.md) - - Before work: Check task appropriateness (task-reflection.md) - - On close: Save conversation (conversation-persistence/save-conversation.md) - - Show presentation (idunn-presentation.md), then project analysis (project-analysis/instructions.md) - - collaboration: | - - My domain: Phases 3 (Platform Requirements), 6 (Design Deliveries) - - Other domains: Hand over seamlessly to specialized agent - - Note: I do NOT replace BMM PM Agent (different focus: technical foundation + handoffs) - - core_approach: | - - Technical foundation in parallel with design (micro-guide: platform-requirements.md) - - Package complete flows for BMM handoff (micro-guide: design-handoffs.md) - - Reference, don't duplicate (link to requirements, don't copy) - - Organize by value (epic-based, testable units) - - Continuous handoff pattern (don't wait for everything) - - project_tracking: | - - Update project outline when completing work - - File naming: [TOPIC]-GUIDE.md, DD-XXX-[epic-name].yaml - - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md + **Workflow Management:** + - On activation: Check conversations (conversation-persistence/check-conversations.md) + - Before work: Check task appropriateness (task-reflection.md) + - On close: Save conversation (conversation-persistence/save-conversation.md) + - Show presentation (idunn-presentation.md), then project analysis (project-analysis/instructions.md) + + **Collaboration:** + - My domain: Phases 3 (Platform Requirements), 6 (Design Deliveries) + - Other domains: Hand over seamlessly to specialized agent + - Note: I do NOT replace BMM PM Agent (different focus: technical foundation + handoffs) + + **Core Approach:** + - Technical foundation in parallel with design (micro-guide: platform-requirements.md) + - Package complete flows for BMM handoff (micro-guide: design-handoffs.md) + - Reference, don't duplicate (link to requirements, don't copy) + - Organize by value (epic-based, testable units) + - Continuous handoff pattern (don't wait for everything) + + **Project Tracking:** + - Update project outline when completing work + - File naming: [TOPIC]-GUIDE.md, DD-XXX-[epic-name].yaml + - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md menu: - trigger: workflow-status diff --git a/src/modules/wds/agents/saga-analyst.agent.yaml b/src/modules/wds/agents/saga-analyst.agent.yaml index 89c269ca..bdfd9bb4 100644 --- a/src/modules/wds/agents/saga-analyst.agent.yaml +++ b/src/modules/wds/agents/saga-analyst.agent.yaml @@ -8,7 +8,7 @@ agent: title: WDS Analyst icon: šŸ“š module: wds - version: "1.0.0" + hasSidecar: false persona: role: Strategic Business Analyst + Product Discovery Partner @@ -38,54 +38,44 @@ agent: **Agent References**: When mentioning other WDS agents, use: "[Name] WDS [Role] Agent" - micro_guides: | - **When I need detailed guidance, I load these micro-guides:** - - **Discovery Conversation** ā†’ data/agent-guides/saga/discovery-conversation.md - - During Product Brief, Alignment & Signoff, or any discovery work - - Natural listening pattern, reflection techniques, handling different user types - - **Trigger Mapping** ā†’ data/agent-guides/saga/trigger-mapping.md - - During Phase 2 or psychology analysis - - Business goals ā†’ users ā†’ driving forces, Feature Impact Analysis - - **Strategic Documentation** ā†’ data/agent-guides/saga/strategic-documentation.md - - When creating Product Brief, Project Outline, or documentation - - File naming, absolute paths, precision standards, maintenance + principles: | + **Micro-Guides (load when needed):** + - Discovery Conversation ā†’ data/agent-guides/saga/discovery-conversation.md (Product Brief, Alignment & Signoff) + - Trigger Mapping ā†’ data/agent-guides/saga/trigger-mapping.md (Phase 2, psychology analysis) + - Strategic Documentation ā†’ data/agent-guides/saga/strategic-documentation.md (documentation creation) - principles: - workflow_management: | - - On activation: Check conversations (conversation-persistence/check-conversations.md) - - Before work: Check task appropriateness (task-reflection.md) - - On close: Save conversation (conversation-persistence/save-conversation.md) - - Show presentation (saga-presentation.md), then project analysis (project-analysis/instructions.md) - - collaboration: | - - My domain: Phases 1 (Product Brief), 2 (Trigger Mapping) - - Other domains: Hand over seamlessly to specialized agent - - BMM overlap: I replace Mary (Analyst) when WDS is installed - - core_approach: | - - Discovery through conversation (micro-guide: discovery-conversation.md) - - Connect business to psychology (micro-guide: trigger-mapping.md) - - Create coordinating documentation (micro-guide: strategic-documentation.md) - - One question at a time, listen deeply - - Find and treat as bible: **/project-context.md - - project_tracking: | - - Create project outline during Product Brief (10 micro-steps) - - Use absolute paths: docs/A-Product-Brief/, docs/B-Trigger-Map/ - - Alliterative persona names: Harriet the Hairdresser, Marcus Manager - - File naming: [TOPIC]-GUIDE.md, never generic README.md - - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md - - working_rhythm: | + **Working Rhythm:** 1. You share an idea or question 2. I listen and reflect back naturally (in my own words) 3. I confirm understanding, then wait for your confirmation 4. Once confirmed, we explore solutions together 5. I structure insights into clear documentation + **Workflow Management:** + - On activation: Check conversations (conversation-persistence/check-conversations.md) + - Before work: Check task appropriateness (task-reflection.md) + - On close: Save conversation (conversation-persistence/save-conversation.md) + - Show presentation (saga-presentation.md), then project analysis (project-analysis/instructions.md) + + **Collaboration:** + - My domain: Phases 1 (Product Brief), 2 (Trigger Mapping) + - Other domains: Hand over seamlessly to specialized agent + - BMM overlap: I replace Mary (Analyst) when WDS is installed + + **Core Approach:** + - Discovery through conversation (micro-guide: discovery-conversation.md) + - Connect business to psychology (micro-guide: trigger-mapping.md) + - Create coordinating documentation (micro-guide: strategic-documentation.md) + - One question at a time, listen deeply + - Find and treat as bible: **/project-context.md + + **Project Tracking:** + - Create project outline during Product Brief (10 micro-steps) + - Use absolute paths: docs/A-Product-Brief/, docs/B-Trigger-Map/ + - Alliterative persona names: Harriet the Hairdresser, Marcus Manager + - File naming: [TOPIC]-GUIDE.md, never generic README.md + - See: workflows/00-system/FILE-NAMING-CONVENTIONS.md + menu: - trigger: workflow-status workflow: "{project-root}/{bmad_folder}/wds/workflows/workflow-status/workflow.yaml" diff --git a/src/modules/wds/docs/examples/WDS-Presentation/wds-workflow-status.yaml b/src/modules/wds/docs/examples/WDS-Presentation/wds-workflow-status.yaml index 6460c574..5870c5cb 100644 --- a/src/modules/wds/docs/examples/WDS-Presentation/wds-workflow-status.yaml +++ b/src/modules/wds/docs/examples/WDS-Presentation/wds-workflow-status.yaml @@ -51,7 +51,7 @@ workflow_status: - "01-product-brief.md" - "02-content-strategy.md" completed_date: "2025-12-24" - + phase_2_trigger_mapping: status: "complete" agent: "cascade-analyst" @@ -65,11 +65,11 @@ workflow_status: - "05-Key-Insights.md" - "06-Feature-Impact.md" completed_date: "2025-12-27" - + phase_3_prd_platform: status: "skipped" reason: "WordPress delivery - no platform PRD needed" - + phase_4_ux_design: status: "in-progress" agent: "freya-wds-designer" @@ -79,11 +79,11 @@ workflow_status: - "1.1-start-page/1.1-start-page.md" - "1.1-start-page/sketches/1-1-start-page-desktop-concept.jpg" notes: "Hero section complete, WDS Capabilities section specified, other sections TBD" - + phase_5_design_system: status: "skipped" reason: "Single page project - no design system needed" - + phase_6_design_deliveries: status: "pending" reason: "Awaiting UX design completion" @@ -108,4 +108,3 @@ current_scenario: - "Testimonials Section" - "CTA Section" - "Footer Section" - diff --git a/src/modules/wds/docs/learn-wds/00-course-overview.md b/src/modules/wds/docs/learn-wds/00-course-overview.md index ef0a0e04..5b5d7f4b 100644 --- a/src/modules/wds/docs/learn-wds/00-course-overview.md +++ b/src/modules/wds/docs/learn-wds/00-course-overview.md @@ -2,7 +2,7 @@ **Master the complete WDS methodology and become indispensable as a designer in the AI era** -https://www.youtube.com/watch?v=CQ5Aai_r-uo +[Watch the Course Introduction Video](https://www.youtube.com/watch?v=CQ5Aai_r-uo) --- diff --git a/src/modules/wds/docs/learn-wds/course-explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/docs/learn-wds/course-explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md index e0570de1..5e5a32e9 100644 --- a/src/modules/wds/docs/learn-wds/course-explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md +++ b/src/modules/wds/docs/learn-wds/course-explainers/00-getting-started-YOUTUBE-SHOW-NOTES.md @@ -1,7 +1,7 @@ # YouTube Show Notes: Module 00 - Getting Started with WDS **Video Link:** -https://youtu.be/qYPYx01YLUc + **Video Title:** Getting Started with Whiteport Design Studio - Your Path to Becoming a Linchpin Designer @@ -61,27 +61,27 @@ _To be added after video production based on transcript_ ### **This Module** šŸ“– **Module 00 Overview:** Getting Started Guide -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview/00-getting-started-overview.md + ### **Get Started with WDS** šŸŒŠ **WDS Presentation Page:** Learn about the methodology -https://whiteport.com/whiteport-design-studio/ + šŸ› ļø **Installation Guide:** Download IDE, Install WDS -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md + šŸ“– **Quick Start:** Get up and running fast -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/quick-start.md + šŸ“– **About WDS:** Philosophy and approach -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/about-wds.md + ### **Community & Support** šŸ’¬ **BMad Discord:** Real designers helping each other [Discord invite link] šŸ“– **GitHub Discussions:** Ask questions, share your journey -https://github.com/whiteport-collective/whiteport-design-studio/discussions + --- @@ -90,11 +90,11 @@ https://github.com/whiteport-collective/whiteport-design-studio/discussions **ā—€ļø Previous Module:** _This is the first module_ **ā–¶ļø Next Module:** Module 01 - Why WDS Matters -šŸ“ŗ Video: https://www.youtube.com/watch?v=Xhw5JB7mpxw -šŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/module-01-overview.md +šŸ“ŗ Video: +šŸ“– Documentation: **šŸ“š Full Course Overview:** -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md + --- diff --git a/src/modules/wds/docs/learn-wds/course-explainers/module-01-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/docs/learn-wds/course-explainers/module-01-YOUTUBE-SHOW-NOTES.md index e4fb6289..9dca7e28 100644 --- a/src/modules/wds/docs/learn-wds/course-explainers/module-01-YOUTUBE-SHOW-NOTES.md +++ b/src/modules/wds/docs/learn-wds/course-explainers/module-01-YOUTUBE-SHOW-NOTES.md @@ -1,7 +1,7 @@ # YouTube Show Notes: Module 01 - Why WDS Matters **Video Link:** -https://www.youtube.com/watch?v=Xhw5JB7mpxw + **Video Title:** Module 01: Why WDS Matters - Are You a Factory Worker or a Linchpin Designer? @@ -55,43 +55,43 @@ _To be added after video production based on transcript_ ### **This Module** šŸ“– **Module 01 Overview:** Complete lesson structure -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/module-01-overview.md + ### **Get Started with WDS** šŸŒŠ **WDS Presentation Page:** Learn about the methodology -https://whiteport.com/whiteport-design-studio/ + šŸ› ļø **Installation Guide:** Download IDE, Install WDS -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md + šŸ“– **About WDS:** Philosophy and approach -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/about-wds.md + ### **Recommended Reading** šŸ“š **Book:** "Linchpin: Are You Indispensable?" by Seth Godin (2010) -https://www.amazon.com/Linchpin-Are-You-Indispensable-ebook/dp/B00354Y9ZU + ### **Community & Support** šŸ’¬ **BMad Discord:** Join other linchpin designers [Discord invite link] šŸ“– **GitHub Discussions:** Ask questions, share your journey -https://github.com/whiteport-collective/whiteport-design-studio/discussions + --- ## šŸŽ“ Course Navigation **ā—€ļø Previous Module:** Module 00 - Getting Started -šŸ“ŗ Video: https://youtu.be/qYPYx01YLUc -šŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview/00-getting-started-overview.md +šŸ“ŗ Video: +šŸ“– Documentation: **ā–¶ļø Next Module:** Module 02 - Installation & Setup -šŸ“ŗ Video: https://www.youtube.com/watch?v=tYifpxFVVks -šŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md +šŸ“ŗ Video: +šŸ“– Documentation: **šŸ“š Full Course Overview:** -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md + --- diff --git a/src/modules/wds/docs/learn-wds/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/docs/learn-wds/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md index d526498d..6188b64f 100644 --- a/src/modules/wds/docs/learn-wds/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md +++ b/src/modules/wds/docs/learn-wds/course-explainers/module-02-YOUTUBE-SHOW-NOTES.md @@ -1,7 +1,7 @@ # YouTube Show Notes: Module 02 - Installation & Setup **Video Link:** -https://www.youtube.com/watch?v=tYifpxFVVks + **Video Title:** Module 02: Installation & Setup - From Zero to WDS-Ready in Under an Hour @@ -121,44 +121,44 @@ Your 8-phase WDS methodology folders: ### **This Module** šŸ“– **Module 02 Overview:** Complete lesson structure -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md + ### **Get Started with WDS** šŸŒŠ **WDS Presentation Page:** Learn about the methodology -https://whiteport.com/whiteport-design-studio/ + šŸ› ļø **Installation Guide:** Download IDE, Install WDS -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md + šŸ“– **Quick Start:** Get up and running fast -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/quick-start.md + ### **Download Links** -šŸ“„ **Download Cursor:** https://cursor.sh -šŸ“„ **Download VS Code:** https://code.visualstudio.com -šŸ“„ **GitHub:** https://github.com +šŸ“„ **Download Cursor:** +šŸ“„ **Download VS Code:** +šŸ“„ **GitHub:** ### **Community & Support** šŸ’¬ **BMad Discord:** Real designers helping each other [Discord invite link] šŸ“– **GitHub Discussions:** Ask questions, share your setup -https://github.com/whiteport-collective/whiteport-design-studio/discussions + --- ## šŸŽ“ Course Navigation **ā—€ļø Previous Module:** Module 01 - Why WDS Matters -šŸ“ŗ Video: https://www.youtube.com/watch?v=Xhw5JB7mpxw -šŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-01-why-wds-matters/module-01-overview.md +šŸ“ŗ Video: +šŸ“– Documentation: **ā–¶ļø Next Module:** Module 03 - Alignment & Signoff -šŸ“ŗ Video: https://www.youtube.com/watch?v=TKjOLlU8UCE -šŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/module-03-overview.md +šŸ“ŗ Video: +šŸ“– Documentation: **šŸ“š Full Course Overview:** -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md + --- diff --git a/src/modules/wds/docs/learn-wds/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md b/src/modules/wds/docs/learn-wds/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md index c4e0decf..a5137559 100644 --- a/src/modules/wds/docs/learn-wds/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md +++ b/src/modules/wds/docs/learn-wds/course-explainers/module-03-YOUTUBE-SHOW-NOTES.md @@ -1,7 +1,7 @@ # YouTube Show Notes: Module 03 - Alignment & Signoff **Video Link:** -https://www.youtube.com/watch?v=TKjOLlU8UCE + **Video Title:** Module 03: Alignment & Signoff - Get Stakeholder Buy-In for Your Design Projects @@ -58,49 +58,49 @@ _To be added after video production based on transcript_ ### **This Module** šŸ“– **Module 03 Overview:** Complete lesson structure -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/module-03-overview.md + šŸ“– **Tutorial 03:** Step-by-step hands-on guide -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-03-alignment-signoff/tutorial-03.md + ### **Deliverable Documentation** šŸ“– **Project Pitch:** What it is and how to create it -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/project-pitch.md + šŸ“– **Service Agreement:** Contract templates and guidance -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/deliverables/service-agreement.md + ### **WDS Workflows** šŸ“– **Alignment & Signoff Workflow:** Complete process guide -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/workflows/1-project-brief/alignment-signoff/workflow.md + ### **Get Started with WDS** šŸŒŠ **WDS Presentation Page:** Learn about the methodology -https://whiteport.com/whiteport-design-studio/ + šŸ› ļø **Installation Guide:** Download IDE, Install WDS -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/getting-started/installation.md + ### **Community & Support** šŸ’¬ **BMad Discord:** Share alignment documents, ask questions about contracts [Discord invite link] šŸ“– **GitHub Discussions:** Ask questions, share your journey -https://github.com/whiteport-collective/whiteport-design-studio/discussions + --- ## šŸŽ“ Course Navigation **ā—€ļø Previous Module:** Module 02 - Installation & Setup -šŸ“ŗ Video: https://www.youtube.com/watch?v=tYifpxFVVks -šŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-02-installation-setup/module-02-overview.md +šŸ“ŗ Video: +šŸ“– Documentation: **ā–¶ļø Next Module:** Module 04 - Product Brief (Coming Soon) -šŸ“– Documentation: https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/module-04-product-brief/tutorial-04.md +šŸ“– Documentation: **šŸ“š Full Course Overview:** -https://github.com/whiteport-collective/whiteport-design-studio/blob/main/src/modules/wds/docs/learn-wds/00-course-overview.md + --- diff --git a/src/modules/wds/workflows/00-system/wds-workflow-status-template.yaml b/src/modules/wds/workflows/00-system/wds-workflow-status-template.yaml index 890f3422..a87d05c7 100644 --- a/src/modules/wds/workflows/00-system/wds-workflow-status-template.yaml +++ b/src/modules/wds/workflows/00-system/wds-workflow-status-template.yaml @@ -31,7 +31,7 @@ project_structure: delivery: format: "{{delivery_format}}" # prd | wordpress | figma | prototype | direct-code | other target_platform: "{{target_platform}}" # wordpress | react | vue | html | custom - requires_prd: {{requires_prd}} # true | false + requires_prd: "{{requires_prd}}" # true | false description: "{{delivery_description}}" # Examples: # - "WordPress page editor code with markup and content sections" @@ -43,10 +43,10 @@ config: folder_prefix: "{{folder_prefix}}" # letters or numbers folder_case: "{{folder_case}}" # title or lowercase brief_level: "{{brief_level}}" # simplified or complete - include_design_system: { { include_design_system } } + include_design_system: "{{include_design_system}}" component_library: "{{component_library}}" specification_language: "{{specification_language}}" # Language for writing specs (EN, SE, etc.) - product_languages: { { product_languages } } # Array of languages product supports + product_languages: "{{product_languages}}" # Array of languages product supports # Folder mapping (generated based on config) folders: diff --git a/src/modules/wds/workflows/1-project-brief/alignment-signoff/section-guide.md b/src/modules/wds/workflows/1-project-brief/alignment-signoff/section-guide.md index 5c0eb0e5..359257ba 100644 --- a/src/modules/wds/workflows/1-project-brief/alignment-signoff/section-guide.md +++ b/src/modules/wds/workflows/1-project-brief/alignment-signoff/section-guide.md @@ -8,7 +8,7 @@ --- -### 1. The Realization +## 1. The Realization **Framework**: Problem-Agitate-Solve (PAS) - Start here @@ -45,7 +45,7 @@ --- -### 2. Why It Matters +## 2. Why It Matters **Framework**: Value Proposition Canvas + Impact - Understanding why this matters and who we help @@ -65,7 +65,7 @@ --- -### 3. How We See It Working +## 3. How We See It Working **Questions to explore**: - "How do you envision this working?" @@ -78,7 +78,7 @@ --- -### 4. Paths We Explored +## 4. Paths We Explored **Questions to explore**: - "What other ways could we approach this?" @@ -91,7 +91,7 @@ --- -### 5. Recommended Solution +## 5. Recommended Solution **Questions to explore**: - "Which approach do you prefer?" @@ -102,7 +102,7 @@ --- -### 6. The Path Forward +## 6. The Path Forward **Purpose**: Explain how the work will be done practically - which WDS phases will be used and the workflow approach. @@ -130,7 +130,7 @@ --- -### 7. The Value We'll Create +## 7. The Value We'll Create **Framework**: Business Case Framework - What's the return? @@ -157,7 +157,7 @@ --- -### 8. Cost of Inaction +## 8. Cost of Inaction **Framework**: Problem-Agitate-Solve (PAS) - Agitate the problem / Business Case Framework @@ -181,7 +181,7 @@ --- -### 9. Our Commitment +## 9. Our Commitment **Framework**: Business Case Framework - What are we committing to? @@ -201,7 +201,7 @@ --- -### 10. Summary +## 10. Summary **Questions to explore**: - "What are the key points?" diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.js b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.js index fa05561d..9fcf63aa 100644 --- a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.js +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.js @@ -1,9 +1,12 @@ +/* eslint-disable n/no-unsupported-features/node-builtins */ +/* global document, window */ + /** * PROTOTYPE DEV MODE - * + * * Developer/feedback mode that allows users to easily copy Object IDs to clipboard * for providing precise feedback on prototype elements. - * + * * Features: * - Toggle dev mode with button or Ctrl+E * - Prototype works NORMALLY when dev mode is on @@ -11,13 +14,13 @@ * - Visual highlights show what will be copied (green when Shift is held) * - Tooltip shows Object ID on hover * - Success feedback when copied - * + * * Usage: * 1. Include this script in your prototype HTML * 2. Add the HTML toggle button and tooltip (see HTML template) * 3. Add the CSS styles (see CSS template) * 4. Call initDevMode() on page load - * + * * How it works: * - Activate dev mode (Ctrl+E or click button) * - Hover over elements to see their Object IDs (gray outline) @@ -40,21 +43,28 @@ let currentHighlightedElement = null; // ============================================================================ function initDevMode() { - const toggleButton = document.getElementById('dev-mode-toggle'); - const tooltip = document.getElementById('dev-mode-tooltip'); - - if (!toggleButton || !tooltip) { - console.warn('āš ļø Dev Mode: Toggle button or tooltip not found'); - return; - } - - setupKeyboardShortcuts(); - setupToggleButton(toggleButton, tooltip); - setupHoverHighlight(tooltip); - setupClickCopy(); - - console.log('%cšŸ’” Dev Mode available: Press Ctrl+E or click the Dev Mode button', - 'color: #0066CC; font-weight: bold;'); + const toggleButton = document.querySelector('#dev-mode-toggle'); + const tooltip = document.querySelector('#dev-mode-tooltip'); + + if (!toggleButton || !tooltip) { + console.warn('āš ļø Dev Mode: Toggle button or tooltip not found'); + return; + } + + // Check if user agent supports clipboard API + if (typeof navigator !== 'undefined' && navigator.clipboard) { + // Clipboard API available + } else { + console.warn('āš ļø Clipboard API not supported in this browser'); + return; + } + + setupKeyboardShortcuts(); + setupToggleButton(toggleButton, tooltip); + setupHoverHighlight(tooltip); + setupClickCopy(); + + console.log('%cšŸ’” Dev Mode available: Press Ctrl+E or click the Dev Mode button', 'color: #0066CC; font-weight: bold;'); } // ============================================================================ @@ -62,39 +72,37 @@ function initDevMode() { // ============================================================================ function setupKeyboardShortcuts() { - // Track Shift key for container selection - document.addEventListener('keydown', function(e) { - if (e.key === 'Shift') { - // Don't activate if user is typing in a form field - if (isTypingInField()) { - return; - } - - shiftKeyPressed = true; - document.body.classList.add('shift-held'); - if (devModeActive) { - console.log('%cā¬†ļø Shift held: Click any element to copy its Object ID', - 'color: #10B981; font-weight: bold;'); - } - } - - // Ctrl+E toggle - if (e.ctrlKey && e.key === 'e') { - e.preventDefault(); - document.getElementById('dev-mode-toggle')?.click(); - } - }); - - document.addEventListener('keyup', function(e) { - if (e.key === 'Shift') { - shiftKeyPressed = false; - document.body.classList.remove('shift-held'); - if (devModeActive) { - console.log('%cā¬‡ļø Shift released: Prototype works normally (hold Shift to copy)', - 'color: #6b7280;'); - } - } - }); + // Track Shift key for container selection + document.addEventListener('keydown', (e) => { + if (e.key === 'Shift') { + // Don't activate if user is typing in a form field + if (isTypingInField()) { + return; + } + + shiftKeyPressed = true; + document.body.classList.add('shift-held'); + if (devModeActive) { + console.log('%cā¬†ļø Shift held: Click any element to copy its Object ID', 'color: #10B981; font-weight: bold;'); + } + } + + // Ctrl+E toggle + if (e.ctrlKey && e.key === 'e') { + e.preventDefault(); + document.querySelector('#dev-mode-toggle')?.click(); + } + }); + + document.addEventListener('keyup', (e) => { + if (e.key === 'Shift') { + shiftKeyPressed = false; + document.body.classList.remove('shift-held'); + if (devModeActive) { + console.log('%cā¬‡ļø Shift released: Prototype works normally (hold Shift to copy)', 'color: #6b7280;'); + } + } + }); } // ============================================================================ @@ -102,34 +110,39 @@ function setupKeyboardShortcuts() { // ============================================================================ function setupToggleButton(toggleButton, tooltip) { - toggleButton.addEventListener('click', function(e) { - e.stopPropagation(); - devModeActive = !devModeActive; - - // Update UI - document.body.classList.toggle('dev-mode-active', devModeActive); - toggleButton.classList.toggle('active', devModeActive); - - const statusText = toggleButton.querySelector('span'); - if (statusText) { - statusText.textContent = devModeActive ? 'Dev Mode: ON' : 'Dev Mode: OFF'; - } - - // Log status - console.log(`šŸ”§ Dev Mode: ${devModeActive ? 'ACTIVATED' : 'DEACTIVATED'}`); - - if (devModeActive) { - console.log('%cšŸ”§ DEV MODE ACTIVE', 'color: #0066CC; font-size: 16px; font-weight: bold;'); - console.log('%cāš ļø Hold SHIFT + Click any element to copy its Object ID', 'color: #FFB800; font-size: 14px; font-weight: bold;'); - console.log('%cWithout Shift: Prototype works normally', 'color: #6b7280;'); - console.log('%cPress Ctrl+E to toggle Dev Mode', 'color: #6b7280;'); - } else { - tooltip.style.display = 'none'; - if (currentHighlightedElement) { - clearHighlight(); - } - } - }); + toggleButton.addEventListener('click', function (e) { + e.stopPropagation(); + if (typeof globalThis !== 'undefined') { + globalThis.devModeActive = true; + } else if (globalThis.window !== undefined) { + globalThis.devModeActive = true; + } + devModeActive = !devModeActive; + + // Update UI + document.body.classList.toggle('dev-mode-active', devModeActive); + toggleButton.classList.toggle('active', devModeActive); + + const statusText = toggleButton.querySelector('span'); + if (statusText) { + statusText.textContent = devModeActive ? 'Dev Mode: ON' : 'Dev Mode: OFF'; + } + + // Log status + console.log(`šŸ”§ Dev Mode: ${devModeActive ? 'ACTIVATED' : 'DEACTIVATED'}`); + + if (devModeActive) { + console.log('%cšŸ”§ DEV MODE ACTIVE', 'color: #0066CC; font-size: 16px; font-weight: bold;'); + console.log('%cāš ļø Hold SHIFT + Click any element to copy its Object ID', 'color: #FFB800; font-size: 14px; font-weight: bold;'); + console.log('%cWithout Shift: Prototype works normally', 'color: #6b7280;'); + console.log('%cPress Ctrl+E to toggle Dev Mode', 'color: #6b7280;'); + } else { + tooltip.style.display = 'none'; + if (currentHighlightedElement) { + clearHighlight(); + } + } + }); } // ============================================================================ @@ -137,55 +150,55 @@ function setupToggleButton(toggleButton, tooltip) { // ============================================================================ function setupHoverHighlight(tooltip) { - // Show tooltip and highlight on hover - document.addEventListener('mouseover', function(e) { - if (!devModeActive) return; - - // Don't highlight if user is typing in a field - if (isTypingInField()) { - tooltip.style.display = 'none'; - clearHighlight(); - return; - } - - clearHighlight(); - - let element = findElementWithId(e.target); - - if (!element || !element.id || isSystemElement(element.id)) { - tooltip.style.display = 'none'; - return; - } - - // Highlight element - highlightElement(element, shiftKeyPressed); - currentHighlightedElement = element; - - // Show tooltip - const prefix = shiftKeyPressed ? 'āœ“ Click to Copy: ' : 'ā¬†ļø Hold Shift + Click: '; - tooltip.textContent = prefix + element.id; - tooltip.style.display = 'block'; - tooltip.style.background = shiftKeyPressed ? '#10B981' : '#6b7280'; - tooltip.style.color = '#fff'; - - updateTooltipPosition(e, tooltip); - }); - - // Update tooltip position on mouse move - document.addEventListener('mousemove', function(e) { - if (devModeActive && tooltip.style.display === 'block') { - updateTooltipPosition(e, tooltip); - } - }); - - // Clear highlight on mouse out - document.addEventListener('mouseout', function(e) { - if (!devModeActive) return; - if (e.target.id) { - tooltip.style.display = 'none'; - clearHighlight(); - } - }); + // Show tooltip and highlight on hover + document.addEventListener('mouseover', function (e) { + if (!devModeActive) return; + + // Don't highlight if user is typing in a field + if (isTypingInField()) { + tooltip.style.display = 'none'; + clearHighlight(); + return; + } + + clearHighlight(); + + let element = findElementWithId(e.target); + + if (!element || !element.id || isSystemElement(element.id)) { + tooltip.style.display = 'none'; + return; + } + + // Highlight element + highlightElement(element, shiftKeyPressed); + currentHighlightedElement = element; + + // Show tooltip + const prefix = shiftKeyPressed ? 'āœ“ Click to Copy: ' : 'ā¬†ļø Hold Shift + Click: '; + tooltip.textContent = prefix + element.id; + tooltip.style.display = 'block'; + tooltip.style.background = shiftKeyPressed ? '#10B981' : '#6b7280'; + tooltip.style.color = '#fff'; + + updateTooltipPosition(e, tooltip); + }); + + // Update tooltip position on mouse move + document.addEventListener('mousemove', function (e) { + if (devModeActive && tooltip.style.display === 'block') { + updateTooltipPosition(e, tooltip); + } + }); + + // Clear highlight on mouse out + document.addEventListener('mouseout', function (e) { + if (!devModeActive) return; + if (e.target.id) { + tooltip.style.display = 'none'; + clearHighlight(); + } + }); } // ============================================================================ @@ -193,45 +206,49 @@ function setupHoverHighlight(tooltip) { // ============================================================================ function setupClickCopy() { - // Use capture phase to intercept clicks with Shift - document.addEventListener('click', function(e) { - if (!devModeActive) return; - - // Allow toggle button to work normally - if (isToggleButton(e.target)) return; - - // ONLY copy if Shift is held - if (!shiftKeyPressed) { - // Let prototype work normally without Shift - return; - } - - // Don't intercept if user is clicking in/around a form field - if (isTypingInField() || isFormElement(e.target)) { - return; - } - - // Shift is held and not in a form field - intercept and copy - e.preventDefault(); - e.stopPropagation(); - e.stopImmediatePropagation(); - - let element = findElementWithId(e.target); - - if (!element || !element.id || isSystemElement(element.id)) { - console.log('āŒ No Object ID found'); - return false; - } - - // Copy to clipboard - const objectId = element.id; - copyToClipboard(objectId); - - // Show feedback - showCopyFeedback(element, objectId); - + // Use capture phase to intercept clicks with Shift + document.addEventListener( + 'click', + function (e) { + if (!devModeActive) return; + + // Allow toggle button to work normally + if (isToggleButton(e.target)) return; + + // ONLY copy if Shift is held + if (!shiftKeyPressed) { + // Let prototype work normally without Shift + return; + } + + // Don't intercept if user is clicking in/around a form field + if (isTypingInField() || isFormElement(e.target)) { + return; + } + + // Shift is held and not in a form field - intercept and copy + e.preventDefault(); + e.stopPropagation(); + e.stopImmediatePropagation(); + + let element = findElementWithId(e.target); + + if (!element || !element.id || isSystemElement(element.id)) { + console.log('āŒ No Object ID found'); return false; - }, true); // Capture phase + } + + // Copy to clipboard + const objectId = element.id; + copyToClipboard(objectId); + + // Show feedback + showCopyFeedback(element, objectId); + + return false; + }, + true, + ); // Capture phase } // ============================================================================ @@ -239,175 +256,125 @@ function setupClickCopy() { // ============================================================================ function findElementWithId(element) { - let current = element; - let attempts = 0; - - while (current && !current.id && attempts < 10) { - current = current.parentElement; - attempts++; - } - - return current; -} + let current = element; + let attempts = 0; -function findParentContainer(element) { - let current = element; - const maxLevels = 10; - let level = 0; - - // Try to find semantic container parent first - while (current && current.id !== 'app' && level < maxLevels) { - if (current.parentElement && current.parentElement.id) { - const parentId = current.parentElement.id; - const parent = current.parentElement; - - // Prefer semantic containers - if (parentId.includes('section') || - parentId.includes('content') || - parentId.includes('container') || - parentId.includes('group') || - parentId.includes('tabs') || - parentId.includes('widget') || - parentId.includes('modal') || - parent.classList.contains('section') || - parent.classList.contains('container') || - parent.classList.contains('group')) { - return parent; - } - } - current = current.parentElement; - level++; - } - - // Fallback: find any parent with ID - current = element.parentElement; - level = 0; - while (current && level < maxLevels) { - if (current.id && current.id !== 'app') { - return current; - } - current = current.parentElement; - level++; - } - - return element; + while (current && !current.id && attempts < 10) { + current = current.parentElement; + attempts++; + } + + return current; } function isSystemElement(id) { - const systemIds = ['app', 'dev-mode-toggle', 'dev-mode-tooltip']; - return systemIds.includes(id); + const systemIds = ['app', 'dev-mode-toggle', 'dev-mode-tooltip']; + return systemIds.includes(id); } function isToggleButton(element) { - return element.id === 'dev-mode-toggle' || - element.closest('#dev-mode-toggle') || - element.classList.contains('dev-mode-toggle'); + return element.id === 'dev-mode-toggle' || element.closest('#dev-mode-toggle') || element.classList.contains('dev-mode-toggle'); } function isTypingInField() { - const activeElement = document.activeElement; - if (!activeElement) return false; - - const tagName = activeElement.tagName.toLowerCase(); - const isEditable = activeElement.isContentEditable; - - // Check if user is currently typing in a form field - return tagName === 'input' || - tagName === 'textarea' || - tagName === 'select' || - isEditable; + const activeElement = document.activeElement; + if (!activeElement) return false; + + const tagName = activeElement.tagName.toLowerCase(); + const isEditable = activeElement.isContentEditable; + + // Check if user is currently typing in a form field + return tagName === 'input' || tagName === 'textarea' || tagName === 'select' || isEditable; } function isFormElement(element) { - if (!element) return false; - - const tagName = element.tagName.toLowerCase(); - const isEditable = element.isContentEditable; - - // Check if the clicked element is a form element - return tagName === 'input' || - tagName === 'textarea' || - tagName === 'select' || - isEditable; + if (!element) return false; + + const tagName = element.tagName.toLowerCase(); + const isEditable = element.isContentEditable; + + // Check if the clicked element is a form element + return tagName === 'input' || tagName === 'textarea' || tagName === 'select' || isEditable; } function highlightElement(element, isShiftHeld) { - const color = isShiftHeld ? '#10B981' : '#6b7280'; - const width = isShiftHeld ? '3px' : '2px'; - const offset = isShiftHeld ? '3px' : '2px'; - const shadowSpread = isShiftHeld ? '5px' : '2px'; - const shadowOpacity = isShiftHeld ? '0.4' : '0.2'; - - element.style.outline = `${width} solid ${color}`; - element.style.outlineOffset = offset; - element.style.boxShadow = `0 0 0 ${shadowSpread} rgba(${isShiftHeld ? '16, 185, 129' : '107, 114, 128'}, ${shadowOpacity})`; + const color = isShiftHeld ? '#10B981' : '#6b7280'; + const width = isShiftHeld ? '3px' : '2px'; + const offset = isShiftHeld ? '3px' : '2px'; + const shadowSpread = isShiftHeld ? '5px' : '2px'; + const shadowOpacity = isShiftHeld ? '0.4' : '0.2'; + + element.style.outline = `${width} solid ${color}`; + element.style.outlineOffset = offset; + element.style.boxShadow = `0 0 0 ${shadowSpread} rgba(${isShiftHeld ? '16, 185, 129' : '107, 114, 128'}, ${shadowOpacity})`; } function clearHighlight() { - if (currentHighlightedElement) { - currentHighlightedElement.style.outline = ''; - currentHighlightedElement.style.boxShadow = ''; - currentHighlightedElement = null; - } + if (currentHighlightedElement) { + currentHighlightedElement.style.outline = ''; + currentHighlightedElement.style.boxShadow = ''; + currentHighlightedElement = null; + } } function updateTooltipPosition(e, tooltip) { - const offset = 15; - let x = e.clientX + offset; - let y = e.clientY + offset; - - // Keep tooltip on screen - const rect = tooltip.getBoundingClientRect(); - if (x + rect.width > window.innerWidth) { - x = e.clientX - rect.width - offset; - } - if (y + rect.height > window.innerHeight) { - y = e.clientY - rect.height - offset; - } - - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; + const offset = 15; + let x = e.clientX + offset; + let y = e.clientY + offset; + + // Keep tooltip on screen + const rect = tooltip.getBoundingClientRect(); + if (x + rect.width > window.innerWidth) { + x = e.clientX - rect.width - offset; + } + if (y + rect.height > window.innerHeight) { + y = e.clientY - rect.height - offset; + } + + tooltip.style.left = x + 'px'; + tooltip.style.top = y + 'px'; } function copyToClipboard(text) { - if (navigator.clipboard && navigator.clipboard.writeText) { - navigator.clipboard.writeText(text) - .then(() => { - console.log(`šŸ“‹ Copied to clipboard: ${text}`); - }) - .catch(err => { - console.error('Failed to copy:', err); - fallbackCopy(text); - }); - } else { + if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) { + navigator.clipboard + .writeText(text) + .then(() => { + console.log(`šŸ“‹ Copied to clipboard: ${text}`); + }) + .catch((error) => { + console.error('Dev Mode error:', error); fallbackCopy(text); - } + }); + } else { + fallbackCopy(text); + } } function fallbackCopy(text) { - const textarea = document.createElement('textarea'); - textarea.value = text; - textarea.style.position = 'fixed'; - textarea.style.left = '-999999px'; - document.body.appendChild(textarea); - textarea.focus(); - textarea.select(); - - try { - document.execCommand('copy'); - console.log(`šŸ“‹ Copied (fallback): ${text}`); - } catch (err) { - console.error('Fallback copy failed:', err); - } - - document.body.removeChild(textarea); + const textarea = document.createElement('textarea'); + textarea.value = text; + textarea.style.position = 'fixed'; + textarea.style.left = '-999999px'; + document.body.append(textarea); + textarea.focus(); + textarea.select(); + + try { + document.execCommand('copy'); + console.log(`šŸ“‹ Copied (fallback): ${text}`); + } catch (error) { + console.error('Dev Mode error:', error); + } + + textarea.remove(); } function showCopyFeedback(element, objectId) { - // Create feedback overlay - const feedback = document.createElement('div'); - feedback.textContent = 'āœ“ Copied: ' + objectId; - feedback.style.cssText = ` + // Create feedback overlay + const feedback = document.createElement('div'); + feedback.textContent = 'āœ“ Copied: ' + objectId; + feedback.style.cssText = ` position: fixed; top: 50%; left: 50%; @@ -423,19 +390,19 @@ function showCopyFeedback(element, objectId) { animation: fadeInOut 1.5s ease-in-out; pointer-events: none; `; - - document.body.appendChild(feedback); - - setTimeout(() => { - document.body.removeChild(feedback); - }, 1500); - - // Flash element - const originalOutline = element.style.outline; - element.style.outline = '3px solid #10B981'; - setTimeout(() => { - element.style.outline = originalOutline; - }, 300); + + document.body.append(feedback); + + setTimeout(() => { + feedback.remove(); + }, 1500); + + // Flash element + const originalOutline = element.style.outline; + element.style.outline = '3px solid #10B981'; + setTimeout(() => { + element.style.outline = originalOutline; + }, 300); } // Add CSS animation @@ -448,17 +415,16 @@ style.textContent = ` 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } } `; -document.head.appendChild(style); +document.head.append(style); // ============================================================================ // EXPORT // ============================================================================ // Make available globally -window.initDevMode = initDevMode; +globalThis.initDevMode = initDevMode; -// Auto-initialize if this is included as module -if (typeof module !== 'undefined' && module.exports) { - module.exports = { initDevMode }; +// Export for use in other scripts +if (typeof globalThis !== 'undefined' && globalThis.exports) { + globalThis.exports = { initDevMode }; } - diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/demo-data-template.json b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/demo-data-template.json index 5dd2f42f..8a5956cb 100644 --- a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/demo-data-template.json +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/demo-data-template.json @@ -1,63 +1,63 @@ { - "user": { - "id": "demo-user-001", - "firstName": "[First Name]", - "lastName": "[Last Name]", - "email": "[email@example.com]", - "phoneNumber": "[+1234567890]", - "picture": "", - "role": "owner", - "createdAt": "2024-01-01T00:00:00.000Z", - "updatedAt": "2024-01-01T00:00:00.000Z" + "user": { + "id": "demo-user-001", + "firstName": "[First Name]", + "lastName": "[Last Name]", + "email": "[email@example.com]", + "phoneNumber": "[+1234567890]", + "picture": "", + "role": "owner", + "createdAt": "2024-01-01T00:00:00.000Z", + "updatedAt": "2024-01-01T00:00:00.000Z" + }, + "family": { + "id": "demo-family-001", + "name": "[Family Name]", + "description": "[Brief family description]", + "location": "[City, Country]", + "picture": "", + "ownerId": "demo-user-001", + "createdAt": "2024-01-01T00:00:00.000Z", + "updatedAt": "2024-01-01T00:00:00.000Z" + }, + "members": [ + { + "id": "demo-member-001", + "familyId": "demo-family-001", + "userId": "demo-user-001", + "firstName": "[Member 1 First Name]", + "lastName": "[Member 1 Last Name]", + "email": "[member1@example.com]", + "role": "owner", + "picture": "", + "createdAt": "2024-01-01T00:00:00.000Z" }, - "family": { - "id": "demo-family-001", - "name": "[Family Name]", - "description": "[Brief family description]", - "location": "[City, Country]", - "picture": "", - "ownerId": "demo-user-001", - "createdAt": "2024-01-01T00:00:00.000Z", - "updatedAt": "2024-01-01T00:00:00.000Z" - }, - "members": [ - { - "id": "demo-member-001", - "familyId": "demo-family-001", - "userId": "demo-user-001", - "firstName": "[Member 1 First Name]", - "lastName": "[Member 1 Last Name]", - "email": "[member1@example.com]", - "role": "owner", - "picture": "", - "createdAt": "2024-01-01T00:00:00.000Z" - }, - { - "id": "demo-member-002", - "familyId": "demo-family-001", - "userId": "demo-user-002", - "firstName": "[Member 2 First Name]", - "lastName": "[Member 2 Last Name]", - "email": "[member2@example.com]", - "role": "co-owner", - "picture": "", - "createdAt": "2024-01-02T00:00:00.000Z" - } - ], - "dogs": [ - { - "id": "demo-dog-001", - "familyId": "demo-family-001", - "name": "[Dog Name]", - "breed": "[Dog Breed]", - "gender": "male", - "birthDate": "2020-05-15", - "color": "[Color]", - "specialNeeds": "[Any special needs or notes]", - "picture": "", - "createdAt": "2024-01-01T00:00:00.000Z", - "updatedAt": "2024-01-01T00:00:00.000Z" - } - ], - "comment": "This is demo data that loads automatically when prototype is opened for the first time. Edit this file to change the demo data. All fields with empty strings ('') are optional." -} \ No newline at end of file + { + "id": "demo-member-002", + "familyId": "demo-family-001", + "userId": "demo-user-002", + "firstName": "[Member 2 First Name]", + "lastName": "[Member 2 Last Name]", + "email": "[member2@example.com]", + "role": "co-owner", + "picture": "", + "createdAt": "2024-01-02T00:00:00.000Z" + } + ], + "dogs": [ + { + "id": "demo-dog-001", + "familyId": "demo-family-001", + "name": "[Dog Name]", + "breed": "[Dog Breed]", + "gender": "male", + "birthDate": "2020-05-15", + "color": "[Color]", + "specialNeeds": "[Any special needs or notes]", + "picture": "", + "createdAt": "2024-01-01T00:00:00.000Z", + "updatedAt": "2024-01-01T00:00:00.000Z" + } + ], + "comment": "This is demo data that loads automatically when prototype is opened for the first time. Edit this file to change the demo data. All fields with empty strings ('') are optional." +} diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/work-file-template.yaml b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/work-file-template.yaml index 0ee47393..ad78976f 100644 --- a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/work-file-template.yaml +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/work-file-template.yaml @@ -13,7 +13,7 @@ metadata: complexity: "simple | medium | complex" estimated_sections: [Number] estimated_time: "[X] minutes" - + # Device Compatibility device_compatibility: type: "mobile-only | mobile-tablet | responsive | desktop-only" @@ -28,10 +28,10 @@ metadata: - width: 428 height: 926 device: "iPhone 14 Pro Max" - breakpoints: [] # For mobile-only, leave empty + breakpoints: [] # For mobile-only, leave empty touch_optimized: true hover_interactions: false - + dependencies: - "shared/prototype-api.js" - "shared/init.js" @@ -47,18 +47,18 @@ design_tokens: primary_hover: "#1d4ed8" success: "#10b981" error: "#ef4444" - + tailwind_config: theme_extend: colors: - '[project-name]': - 50: '#eff6ff' - 500: '#2563eb' - 600: '#1d4ed8' - 700: '#1e40af' + "[project-name]": + 50: "#eff6ff" + 500: "#2563eb" + 600: "#1d4ed8" + 700: "#1e40af" fontFamily: sans: "['Inter', 'system-ui', 'sans-serif']" - + components_available: - "image-crop (components/image-crop.js)" - "toast (components/toast.js)" @@ -92,9 +92,9 @@ demo_data_needed: firstName: "[Example]" lastName: "[Example]" email: "[example@email.com]" - + # Add other demo data needs (family, dogs, etc.) - + example_submission: # Example of completed form data field1: "[value]" @@ -108,12 +108,12 @@ object_ids: header: - "[page]-header-back" - "[page]-header-title" - + form_inputs: - "[page]-input-[field1]" - "[page]-input-[field2]" # Add all form fields - + actions: - "[page]-button-submit" # Add all action buttons @@ -141,7 +141,7 @@ sections: - "Mobile viewport (375px) looks correct" - "Tailwind styles applied correctly" placeholder_message: "šŸš§ Building the form... Check back in a few minutes!" - + - id: "section-2" name: "[Section Name]" scope: "[What this section adds]" @@ -156,7 +156,7 @@ sections: - "[Test 1]" - "[Test 2]" placeholder_message: "[What's coming next]" - + # Add sections 3-6+ as needed # ============================================================================ @@ -167,19 +167,19 @@ javascript_functions: initialization: - "initPage() - Page-specific initialization" - "[Other init functions]" - + form_handling: - "handleSubmit(event) - Form submission" - "validateForm() - Validate all fields" - "[Other form functions]" - + ui_interactions: - "[Interaction function 1]" - "[Interaction function 2]" - + api_calls: - "DogWeekAPI.[method]([params])" - + feedback: - "showToast(message, type)" - "setLoadingState(isLoading)" @@ -200,34 +200,34 @@ navigation: testing_checklist: functionality: - - [ ] All form fields work - - [ ] Validation shows errors correctly - - [ ] Submit button works - - [ ] Loading states display - - [ ] Success feedback shows - - [ ] Error handling works - - [ ] Navigation works (back, next) - - [ ] Data persists (reload page test) - + - "[ ] All form fields work" + - "[ ] Validation shows errors correctly" + - "[ ] Submit button works" + - "[ ] Loading states display" + - "[ ] Success feedback shows" + - "[ ] Error handling works" + - "[ ] Navigation works (back, next)" + - "[ ] Data persists (reload page test)" + mobile_testing: - - [ ] Viewport is correct width - - [ ] All tap targets min 44x44px - - [ ] Text is readable (min 16px) - - [ ] No horizontal scroll - - [ ] Touch gestures work (if applicable) - + - "[ ] Viewport is correct width" + - "[ ] All tap targets min 44x44px" + - "[ ] Text is readable (min 16px)" + - "[ ] No horizontal scroll" + - "[ ] Touch gestures work (if applicable)" + code_quality: - - [ ] All Object IDs present - - [ ] Console logs helpful - - [ ] No console errors - - [ ] Tailwind classes properly used - - [ ] Functions documented - + - "[ ] All Object IDs present" + - "[ ] Console logs helpful" + - "[ ] No console errors" + - "[ ] Tailwind classes properly used" + - "[ ] Functions documented" + accessibility: - - [ ] Keyboard navigation works - - [ ] Form labels present - - [ ] Error messages clear - - [ ] Focus states visible + - "[ ] Keyboard navigation works" + - "[ ] Form labels present" + - "[ ] Error messages clear" + - "[ ] Focus states visible" # ============================================================================ # MIGRATION NOTES (for production) @@ -262,4 +262,3 @@ definition_of_done: - "No console errors" - "Code is clean" - "Story files document all sections" - diff --git a/src/modules/wds/workflows/4-ux-design/workflow-new.yaml b/src/modules/wds/workflows/4-ux-design/workflow-new.yaml new file mode 100644 index 00000000..ac418533 --- /dev/null +++ b/src/modules/wds/workflows/4-ux-design/workflow-new.yaml @@ -0,0 +1,18 @@ +--- +name: UX Design Workflow +description: Transform ideas into detailed visual specifications through scenario-driven design using step-file architecture +main_config: "{project-root}/{bmad_folder}/wds/config.yaml" +web_bundle: true +--- +# Workflow configuration for UX Design process +# This workflow handles the complete UX design phase from concept to implementation + +phases: + - phase_1_project_brief + - phase_2_trigger_mapping + - phase_3_prd_platform + - phase_4_ux_design + - phase_5_design_system + - phase_6_design_deliveries + - phase_7_testing + - phase_8_ongoing_development diff --git a/src/modules/wds/workflows/4-ux-design/workflow.yaml b/src/modules/wds/workflows/4-ux-design/workflow.yaml index b5e5216f..ac418533 100644 --- a/src/modules/wds/workflows/4-ux-design/workflow.yaml +++ b/src/modules/wds/workflows/4-ux-design/workflow.yaml @@ -4,4 +4,15 @@ description: Transform ideas into detailed visual specifications through scenari main_config: "{project-root}/{bmad_folder}/wds/config.yaml" web_bundle: true --- +# Workflow configuration for UX Design process +# This workflow handles the complete UX design phase from concept to implementation +phases: + - phase_1_project_brief + - phase_2_trigger_mapping + - phase_3_prd_platform + - phase_4_ux_design + - phase_5_design_system + - phase_6_design_deliveries + - phase_7_testing + - phase_8_ongoing_development diff --git a/src/modules/wds/workflows/shared/vtc-workshop/vtc-template.yaml b/src/modules/wds/workflows/shared/vtc-workshop/vtc-template.yaml index 0d412dee..61b8a888 100644 --- a/src/modules/wds/workflows/shared/vtc-workshop/vtc-template.yaml +++ b/src/modules/wds/workflows/shared/vtc-workshop/vtc-template.yaml @@ -8,14 +8,14 @@ vtc: # ========================================== business_goal: primary: "500 newsletter signups in Q1" - secondary: "" # Optional: Secondary goal this also supports - + secondary: "" # Optional: Secondary goal this also supports + # ========================================== # SOLUTION # What are we building to achieve this goal? # ========================================== solution: "Landing page with trend insights lead magnet" - + # ========================================== # USER # Who is the primary user for this solution? @@ -25,34 +25,33 @@ vtc: description: "Hairdresser, ambitious, small-town salon owner" context: "Late evening, researching industry trends online" current_state: "Wants to stay ahead of local competitors" - priority: "" # Optional: Priority score from Trigger Map - + priority: "" # Optional: Priority score from Trigger Map + # ========================================== # DRIVING FORCES # What motivates this user? # ========================================== driving_forces: - # Positive: Wishes, aspirations, what they want to achieve positive: - "Wish to be the local beauty authority" - "Wish to attract premium clients" - "Wish to be seen as cutting-edge" - + # Negative: Fears, frustrations, what they want to avoid negative: - "Fear of missing industry trends" - "Fear of losing clients to trendier salons" - "Avoid appearing outdated" - + # ========================================== # CUSTOMER AWARENESS # Where user starts ā†’ where we move them # ========================================== customer_awareness: - start: "Problem Aware" # Knows: Need to stay current - end: "Product Aware" # Knows: Our newsletter helps - + start: "Problem Aware" # Knows: Need to stay current + end: "Product Aware" # Knows: Our newsletter helps + # Awareness stages: # - Unaware: Doesn't know problem exists # - Problem Aware: Knows problem, doesn't know solutions @@ -68,22 +67,22 @@ metadata: created_date: "2025-12-31" created_by: "Product Team" version: "1.0" - + # Source tracking - source: "creation" # "creation" (from scratch) or "trigger_map" (extracted) - trigger_map_path: "" # If extracted from Trigger Map, path to source - + source: "creation" # "creation" (from scratch) or "trigger_map" (extracted) + trigger_map_path: "" # If extracted from Trigger Map, path to source + # Priorities (if from Trigger Map) - business_goal_priority: "" # e.g., "1" or "High" - user_priority: "" # e.g., "1" or "High" - + business_goal_priority: "" # e.g., "1" or "High" + user_priority: "" # e.g., "1" or "High" + # Usage context - purpose: "product_pitch" # "product_pitch", "scenario", "prototype", etc. - phase: "Phase 1" # WDS phase where this VTC is used - + purpose: "product_pitch" # "product_pitch", "scenario", "prototype", etc. + phase: "Phase 1" # WDS phase where this VTC is used + # Related files related_documents: - - "" # Path to Product Brief, Scenario, etc. + - "" # Path to Product Brief, Scenario, etc. # ========================================== # NOTES & RATIONALE @@ -93,17 +92,17 @@ notes: | - Why this VTC was created - Key decisions made during workshop - Important insights captured - + Selection rationale (if from Trigger Map): - Why these specific driving forces were chosen - Why this user/goal combination - Any refinements made from original map - + Usage guidance: - How this VTC should inform design - What questions it should answer - Where it applies - + ALPHA FEEDBACK (please document): - Actual workshop duration: [X minutes] - Steps that were unclear: [which steps?] @@ -116,22 +115,22 @@ notes: | # Track changes from Trigger Map if applicable # ========================================== refinements: - - type: "" # "added", "modified", "clarified" - element: "" # What was changed - original: "" # Original from Trigger Map - updated: "" # Updated version in this VTC - reason: "" # Why the change was made + - type: "" # "added", "modified", "clarified" + element: "" # What was changed + original: "" # Original from Trigger Map + updated: "" # Updated version in this VTC + reason: "" # Why the change was made # ========================================== # VALIDATION CHECKLIST # ========================================== validation: - coherence: false # Does this tell a coherent story? - actionable: false # Can designers make decisions from this? - specific: false # Are driving forces specific enough? - realistic: false # Does awareness progression make sense? - measurable: false # Is business goal measurable? - focused: false # Is this focused (not trying to serve everyone)? + coherence: false # Does this tell a coherent story? + actionable: false # Can designers make decisions from this? + specific: false # Are driving forces specific enough? + realistic: false # Does awareness progression make sense? + measurable: false # Is business goal measurable? + focused: false # Is this focused (not trying to serve everyone)? # ========================================== # EXAMPLE APPLICATIONS @@ -140,21 +139,21 @@ validation: applications: # Examples of how this VTC guides design # Remove this section in actual VTC files - + content_examples: - element: "Hero headline" vtc_reasoning: "Addresses 'fear of missing trends' directly" result: "'Never Miss a Trend: Weekly Insights for Ambitious Stylists'" - + - element: "CTA button" vtc_reasoning: "Aspirational language matching 'wish to be authority'" result: "'Join the Authority Circle' (not just 'Subscribe')" - + design_examples: - element: "Visual style" vtc_reasoning: "User wants to be seen as cutting-edge" result: "Modern, premium aesthetic (not traditional salon look)" - + - element: "Social proof" vtc_reasoning: "Reduces 'fear of appearing outdated'" result: "Testimonials from successful salon owners" @@ -164,7 +163,7 @@ applications: # ========================================== # HOW TO USE THIS TEMPLATE: -# +# # 1. Copy this file to your project location: # - Product Pitch: docs/A-Product-Brief/vtc-primary.yaml # - Scenario: docs/D-UX-Design/[scenario-name]/vtc.yaml @@ -184,7 +183,7 @@ applications: # 6. When making design decisions, ask: # "Does this serve the business goal by triggering these driving forces # while moving the user forward in customer awareness?" -# +# # If yes ā†’ Good design decision # If no ā†’ Reconsider diff --git a/src/modules/wds/workflows/workflow-init/project-config.template.yaml b/src/modules/wds/workflows/workflow-init/project-config.template.yaml index b556bcfa..0b471c31 100644 --- a/src/modules/wds/workflows/workflow-init/project-config.template.yaml +++ b/src/modules/wds/workflows/workflow-init/project-config.template.yaml @@ -6,13 +6,13 @@ project: description: "{{PROJECT_DESCRIPTION}}" wds_version: "6.0" created: "{{DATE}}" - + # Project Structure - defines folder organization structure: type: "{{STRUCTURE_TYPE}}" # "landing_page" | "simple_website" | "web_application" scenarios: "{{STRUCTURE_SCENARIOS}}" # "single" | "multiple" pages: "{{STRUCTURE_PAGES}}" # "single" | "multiple" - + # Folder organization pattern # landing_page: 4-scenarios/1.1-page-name/ # simple_website: 4-scenarios/1.1-page/, 4-scenarios/1.2-page/ @@ -20,12 +20,12 @@ project: # Design System Configuration design_system: - enabled: { { DESIGN_SYSTEM_ENABLED } } # true | false + enabled: "{{DESIGN_SYSTEM_ENABLED}}" # true | false mode: "{{DESIGN_SYSTEM_MODE}}" # "none" | "custom" | "library" # If mode: custom figma: - enabled: { { FIGMA_ENABLED } } # true | false + enabled: "{{FIGMA_ENABLED}}" # true | false file_url: "{{FIGMA_URL}}" # Figma file URL (if applicable) # If mode: library @@ -39,17 +39,17 @@ sketching: # If tool: excalidraw excalidraw: - enabled: { { EXCALIDRAW_ENABLED } } # true | false + enabled: "{{EXCALIDRAW_ENABLED}}" # true | false # Auto-export to PNG/SVG on save - auto_export: { { AUTO_EXPORT } } # true | false + auto_export: "{{AUTO_EXPORT}}" # true | false # Load WDS component library - use_library: { { USE_LIBRARY } } # true | false + use_library: "{{USE_LIBRARY}}" # true | false # Grid settings - grid_size: { { GRID_SIZE } } # pixels (recommended: 20) - snap_to_grid: { { SNAP_TO_GRID } } # true | false + grid_size: "{{GRID_SIZE}}" # pixels (recommended: 20) + snap_to_grid: "{{SNAP_TO_GRID}}" # true | false # Default theme theme: "{{THEME}}" # "light" | "dark" @@ -69,13 +69,13 @@ output: workflow: # Phase 4: UX Design ux_design: - sketch_first: { { SKETCH_FIRST } } # true | false - ai_suggestions: { { AI_SUGGESTIONS } } # true | false + sketch_first: "{{SKETCH_FIRST}}" # true | false + ai_suggestions: "{{AI_SUGGESTIONS}}" # true | false # Phase 5: Design System design_system: - auto_extract: { { AUTO_EXTRACT } } # true | false - similarity_threshold: { { SIMILARITY_THRESHOLD } } # 0.0-1.0 (recommended: 0.7) + auto_extract: "{{AUTO_EXTRACT}}" # true | false + similarity_threshold: "{{SIMILARITY_THRESHOLD}}" # 0.0-1.0 (recommended: 0.7) # Team Configuration team: diff --git a/src/modules/wds/workflows/workflow-init/project-outline.template.yaml b/src/modules/wds/workflows/workflow-init/project-outline.template.yaml index 95470b28..57b43c7d 100644 --- a/src/modules/wds/workflows/workflow-init/project-outline.template.yaml +++ b/src/modules/wds/workflows/workflow-init/project-outline.template.yaml @@ -14,7 +14,7 @@ project: # Determines which workflow structure and phase naming to use methodology: type: "wds-v6" # wds-v6 | wps2c-v4 | custom - + # Methodology-specific instructions: # - wds-v6: Modern numbered phases (1-project-brief, 2-trigger-mapping, etc.) # Instructions: src/modules/wds/workflows/workflow-init/methodology-instructions/wds-v6-instructions.md @@ -24,7 +24,7 @@ methodology: # # - custom: Your own methodology (copy custom-methodology-template.md) # Instructions: Specify path to your custom file below - + custom_instructions_file: null # Only used if type: "custom" # Example: "docs/.custom-methodology.md" @@ -48,11 +48,11 @@ phases: intent: | Define project vision, positioning, goals, and success criteria. Establish foundation for all subsequent work. - + User's intentions for this phase: {{USER_INTENT_PHASE_1}} artifacts: [] # Files created in this phase - + phase_2_trigger_mapping: active: true # Set to FALSE for internal tools, technical products required: false @@ -66,12 +66,12 @@ phases: intent: | Identify target users, personas, business goals, and triggers. Critical for customer-facing products. Optional for internal tools. - + User's intentions for this phase: {{USER_INTENT_PHASE_2}} skip_reason: "" # e.g., "Internal tool - no external users" artifacts: [] - + phase_3_prd_platform: active: true required: true @@ -85,11 +85,11 @@ phases: intent: | Define technical architecture, data model, infrastructure. Foundation for implementation planning. - + User's intentions for this phase: {{USER_INTENT_PHASE_3}} artifacts: [] - + phase_4_ux_design: active: true required: true @@ -103,12 +103,12 @@ phases: intent: | Create page specifications, interactive prototypes, user flows. Core design work - defines what gets built. - + User's intentions for this phase: {{USER_INTENT_PHASE_4}} - + # Scenario-level tracking - scenarios: + scenarios: [] # Example structure - populated as scenarios are created: # - id: "01-customer-onboarding" # name: "Customer Onboarding" @@ -123,12 +123,12 @@ phases: # - "docs/4-ux-design/01-customer-onboarding/00-scenario-overview.md" # - "docs/4-ux-design/01-customer-onboarding/1.1-start-page.md" # - "docs/4-ux-design/01-customer-onboarding/sketches/*.excalidraw" - + scenarios_planned: 0 # Total number of scenarios planned scenarios_complete: 0 # Number fully specified current_scenario: null # Currently working on artifacts: [] - + phase_5_design_system: active: false # Often skipped for MVP, one-off pages, using component library required: false @@ -142,12 +142,12 @@ phases: intent: | Extract and document reusable components from scenarios. Optional - only needed for multi-product design consistency. - + User's intentions for this phase: {{USER_INTENT_PHASE_5}} skip_reason: "" # e.g., "Using shadcn/ui component library" artifacts: [] - + phase_6_design_deliveries: active: true required: false @@ -161,11 +161,11 @@ phases: intent: | Package design work for handoff to development team. Creates PRD, roadmap, and implementation guide. - + User's intentions for this phase: {{USER_INTENT_PHASE_6}} artifacts: [] - + phase_7_testing: active: true required: false @@ -179,11 +179,11 @@ phases: intent: | Validate implementation matches design specifications. Compare built product to prototypes and specs. - + User's intentions for this phase: {{USER_INTENT_PHASE_7}} artifacts: [] - + phase_8_ongoing_development: active: false # Only active for existing products required: false @@ -197,7 +197,7 @@ phases: intent: | Iterative improvements to existing products. Feature enhancements, optimization, evolution. - + User's intentions for this phase: {{USER_INTENT_PHASE_8}} skip_reason: "" # e.g., "New product - not yet in maintenance phase" @@ -208,10 +208,10 @@ project_type: category: "{{CATEGORY}}" # web-app | mobile-app | landing-page | design-system | internal-tool complexity: "{{COMPLEXITY}}" # simple | moderate | complex stage: "{{STAGE}}" # new-product | existing-product | redesign | feature-addition - + # Customer-facing or internal? customer_facing: true # Set to FALSE to skip phase 2 by default - + # Design system approach design_system_approach: "{{APPROACH}}" # none | library | custom design_library: "{{LIBRARY}}" # e.g., "shadcn/ui", "MUI", "custom" @@ -229,7 +229,7 @@ agent_behavior: skip_inactive_phases: true # Don't report on phases marked active: false focus_on_current_phase: true # Emphasize the next active phase suggest_phase_handoffs: true # Recommend switching to specialized agents - + # Status reporting style show_completion_percentage: false # Overall project % complete show_phase_estimates: false # Time estimates per phase @@ -238,12 +238,12 @@ agent_behavior: # Project-Specific Notes notes: | {{PROJECT_NOTES}} - + Example notes: - This is an internal tool, so we're skipping Trigger Mapping (Phase 2) - Using shadcn/ui library, so Design System (Phase 5) is minimal - MVP focus - Testing (Phase 7) will happen post-launch - + # Version Control & Update Log version: 1 last_updated: "{{DATE}}" @@ -267,171 +267,163 @@ update_history: # phase: "phase_4_ux_design" # changes: "Started Scenario 01: Customer Onboarding" ---- - +# ============================================================================ # AGENT INSTRUCTIONS FOR USING THIS FILE +# ============================================================================ -## During Project Initiation (Saga WDS Analyst Agent): - -**When creating the Product Brief**, walk through each phase and ask about user intentions: - -### Phase 1: Project Brief (Always included) -*No question - this is where we are now!* - -### Phase 2: Trigger Mapping -**Ask**: "What are your intentions for Trigger Mapping? This phase helps us identify target users, personas, and business goals. - -Is this a customer-facing product where understanding user triggers is critical? Or an internal tool where we might skip this phase?" - -**Capture**: User's answer ā†’ `{{USER_INTENT_PHASE_2}}` -**Decision**: Set `active: true` or `active: false` based on answer - -### Phase 3: PRD Platform -**Ask**: "What are your intentions for the technical foundation? Do you already have a tech stack in mind, or do you need help defining the architecture, data model, and infrastructure requirements?" - -**Capture**: User's answer ā†’ `{{USER_INTENT_PHASE_3}}` - -### Phase 4: UX Design -**Ask**: "What are your intentions for UX Design? How many user scenarios or flows do you envision? Are you thinking MVP-focused (2-3 core scenarios) or comprehensive (5+ scenarios)?" - -**Capture**: User's answer ā†’ `{{USER_INTENT_PHASE_4}}` -**Note**: Also capture estimated `scenarios_planned` number - -### Phase 5: Design System -**Ask**: "What are your intentions for a Design System? Are you: -- Using an existing component library (shadcn/ui, MUI)? -- Building custom components? -- Creating a multi-product design system? -- Skipping this for MVP?" - -**Capture**: User's answer ā†’ `{{USER_INTENT_PHASE_5}}` -**Decision**: Set `active: false` if skipping, add `skip_reason` - -### Phase 6: Design Deliveries -**Ask**: "What are your intentions for design deliveries? Will you be handing off to a development team, or implementing directly from specifications?" - -**Capture**: User's answer ā†’ `{{USER_INTENT_PHASE_6}}` - -### Phase 7: Testing -**Ask**: "What are your intentions for testing? Do you want to validate the implementation against design specs, or handle testing separately?" - -**Capture**: User's answer ā†’ `{{USER_INTENT_PHASE_7}}` - -### Phase 8: Ongoing Development -**Ask**: "Is this a new product or an existing product needing improvements?" - -**Capture**: User's answer ā†’ `{{USER_INTENT_PHASE_8}}` -**Decision**: Set `active: false` for new products - ---- - -## On Agent Activation (ALL WDS Agents): - -1. **CHECK** if `.wds-project-outline.yaml` exists in docs/ or project root -2. **READ** the outline to understand: - - Which phases are active - - User's intentions for each phase - - Current status of each phase - - What work has been completed - - What work is next -3. **SKIP** analysis of inactive phases (active: false) -4. **REPORT** status based on outline (much faster than folder scanning) - ---- - -## When Starting Scenario Work (Freya WDS Designer Agent): - -Add new scenario to the outline: - -```yaml -scenarios: - - id: "01-customer-onboarding" - name: "Customer Onboarding" - status: "in_progress" - pages_planned: 9 - pages_specified: 0 - pages_implemented: 0 - started_date: "2024-12-10" - completed_date: null - intent: "Onboard new users from landing page to active family" - artifacts: [] -``` - ---- - -## When Completing Scenario Work (Freya WDS Designer Agent): - -Update scenario status: - -```yaml - - id: "01-customer-onboarding" - name: "Customer Onboarding" - status: "complete" - pages_planned: 9 - pages_specified: 9 - pages_implemented: 5 - started_date: "2024-12-01" - completed_date: "2024-12-08" - intent: "Onboard new users from landing page to active family" - artifacts: - - "docs/4-ux-design/01-customer-onboarding/00-scenario-overview.md" - - "docs/4-ux-design/01-customer-onboarding/1.1-start-page.md" - - "docs/4-ux-design/01-customer-onboarding/sketches/*.excalidraw" -``` - -Update phase-level counters: -```yaml -scenarios_complete: 1 # Increment -``` - ---- - -## When Starting/Completing Phase Work (ALL Agents): - -**Starting:** -```yaml -status: "in_progress" -started_date: "2024-12-10" -``` - -**Completing:** -```yaml -status: "complete" -completed_date: "2024-12-10" -completed_by: "Freya WDS Designer Agent" -artifacts: - - "docs/4-ux-design/01-onboarding/*.md" -``` - -Add update history entry: -```yaml -update_history: - - date: "2024-12-10" - agent: "freya-designer" - action: "completed" - phase: "phase_4_ux_design" - changes: "Completed Scenario 01: 9 pages specified with prototypes" -``` - ---- - -## Benefits: - -āœ… **User-driven planning** - captures intentions upfront during project initiation -āœ… **5x faster agent activation** - no folder scanning needed -āœ… **Scenario-level tracking** - granular progress visibility within UX Design phase -āœ… **Always up to date** - agents update as they work -āœ… **Clear intent** - explains WHY phases are skipped AND user's goals for each phase -āœ… **Project memory** - tracks who did what and when -āœ… **Better recommendations** - agents know exactly what's next - ---- - -## File Location: - -- Preferred: `docs/.wds-project-outline.yaml` -- Fallback: `.wds-project-outline.yaml` (project root) -- Created by: Saga WDS Analyst Agent during Project Brief phase -- Updated by: ALL WDS agents as work progresses - +# During Project Initiation (Saga WDS Analyst Agent): +# +# When creating the Product Brief, walk through each phase and ask about user intentions: +# +# Phase 1: Project Brief (Always included) +# No question - this is where we are now! +# +# Phase 2: Trigger Mapping +# Ask: What are your intentions for Trigger Mapping? This phase helps us identify target users, personas, and business goals. +# Is this a customer-facing product where understanding user triggers is critical? Or an internal tool where we might skip this phase? +# +# Capture: User's answer ā†’ {{USER_INTENT_PHASE_2}} +# Decision: Set active: true or active: false based on answer +# +# Phase 3: PRD Platform +# Ask: What are your intentions for technical foundation? Do you already have a tech stack in mind, or do you need help defining architecture, data model, and infrastructure requirements? +# +# Capture: User's answer ā†’ {{USER_INTENT_PHASE_3}} +# +# Phase 4: UX Design +# Ask: What are your intentions for UX Design? How many user scenarios or flows do you envision? Are you thinking MVP-focused (2-3 core scenarios) or comprehensive (5+ scenarios)? +# +# Capture: User's answer ā†’ {{USER_INTENT_PHASE_4}} +# Note: Also capture estimated scenarios_planned number +# +# Phase 5: Design System +# Ask: What are your intentions for a Design System? Are you: +# - Using an existing component library (shadcn/ui, MUI)? +# - Building custom components? +# - Creating a multi-product design system? +# - Skipping this for MVP? +# +# Capture: User's answer ā†’ {{USER_INTENT_PHASE_5}} +# Decision: Set active: false if skipping, add skip_reason +# +# Phase 6: Design Deliveries +# Ask: What are your intentions for design deliveries? Will you be handing off to a development team, or implementing directly from specifications? +# +# Capture: User's answer ā†’ {{USER_INTENT_PHASE_6}} +# +# Phase 7: Testing +# Ask: What are your intentions for testing? Do you want to validate implementation against design specs, or handle testing separately? +# +# Capture: User's answer ā†’ {{USER_INTENT_PHASE_7}} +# +# Phase 8: Ongoing Development +# Ask: Is this a new product or an existing product needing improvements? +# +# Capture: User's answer ā†’ {{USER_INTENT_PHASE_8}} +# Decision: Set active: false for new products +# +# --------------------------------------------------------------------------- +# +# On Agent Activation (ALL WDS Agents): +# +# 1. CHECK if .wds-project-outline.yaml exists in docs/ or project root +# 2. READ the outline to understand: +# - Which phases are active +# - User's intentions for each phase +# - Current status of each phase +# - What work has been completed +# - What work is next +# 3. SKIP analysis of inactive phases (active: false) +# 4. REPORT status based on outline (much faster than folder scanning) +# +# --------------------------------------------------------------------------- +# +# When Starting Scenario Work (Freya WDS Designer Agent): +# +# Add new scenario to the outline: +# +# yaml +# scenarios: +# - id: "01-customer-onboarding" +# name: "Customer Onboarding" +# status: "in_progress" +# pages_planned: 9 +# pages_specified: 0 +# pages_implemented: 0 +# started_date: "2024-12-10" +# completed_date: null +# intent: "Onboard new users from landing page to active family" +# artifacts: [] +# +# --------------------------------------------------------------------------- +# +# When Completing Scenario Work (Freya WDS Designer Agent): +# +# Update scenario status: +# +# yaml +# - id: "01-customer-onboarding" +# name: "Customer Onboarding" +# status: "complete" +# pages_planned: 9 +# pages_specified: 9 +# pages_implemented: 5 +# started_date: "2024-12-01" +# completed_date: "2024-12-08" +# intent: "Onboard new users from landing page to active family" +# artifacts: +# - "docs/4-ux-design/01-customer-onboarding/00-scenario-overview.md" +# - "docs/4-ux-design/01-customer-onboarding/1.1-start-page.md" +# - "docs/4-ux-design/01-customer-onboarding/sketches/*.excalidraw" +# +# Update phase-level counters: +# yaml +# scenarios_complete: 1 # Increment +# +# --------------------------------------------------------------------------- +# +# When Starting/Completing Phase Work (ALL Agents): +# +# Starting: +# yaml +# status: "in_progress" +# started_date: "2024-12-10" +# +# Completing: +# yaml +# status: "complete" +# completed_date: "2024-12-10" +# completed_by: "Freya WDS Designer Agent" +# artifacts: +# - "docs/4-ux-design/01-onboarding/*.md" +# +# Add update history entry: +# yaml +# update_history: +# - date: "2024-12-10" +# agent: "freya-designer" +# action: "completed" +# phase: "phase_4_ux_design" +# changes: "Completed Scenario 01: 9 pages specified with prototypes" +# +# --------------------------------------------------------------------------- +# +# Benefits: +# +# āœ… User-driven planning - captures intentions upfront during project initiation +# āœ… 5x faster agent activation - no folder scanning needed +# āœ… Scenario-level tracking - granular progress visibility within UX Design phase +# āœ… Always up to date - agents update as they work +# āœ… Clear intent - explains WHY phases are skipped AND user's goals for each phase +# āœ… Project memory - tracks who did what and when +# āœ… Better recommendations - agents know exactly what's next +# +# --------------------------------------------------------------------------- +# +# File Location: +# +# - Preferred: docs/.wds-project-outline.yaml +# - Fallback: .wds-project-outline.yaml (project root) +# - Created by: Saga WDS Analyst Agent during Project Brief phase +# - Updated by: ALL WDS agents as work progresses