From ba262e4ee22fd8a42a96fde2f94cfdb132937bb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A5rten=20Angner?= Date: Thu, 11 Dec 2025 02:45:40 +0100 Subject: [PATCH] refactor: split Phase 4 into 7 micro-step files --- src/modules/wds/agents/freyja-ux.agent.yaml | 9 + src/modules/wds/agents/idunn-pm.agent.yaml | 9 + .../presentations/freyja-presentation.md | 76 ++ .../presentations/idunn-presentation.md | 78 ++ .../agents/presentations/saga-presentation.md | 73 ++ .../wds/agents/saga-analyst.agent.yaml | 11 + .../getting-started/agents/agent-launchers.md | 134 ++ .../getting-started/agents/wds-freya-ux.md | 48 + .../getting-started/agents/wds-idunn-pm.md | 47 + .../agents/wds-saga-analyst.md | 47 + .../wds/tasks/check-phase-a-product-brief.md | 166 +++ .../wds/tasks/identify-project-type.md | 176 +++ .../00-system/FILE-NAMING-CONVENTIONS.md | 286 ++++ .../00-system/INSTRUCTION-FILE-GUIDELINES.md | 284 ++++ .../interactive-prototypes/CREATION-GUIDE.md | 1148 +++++++++++++++++ .../interactive-prototypes/FILE-INDEX.md | 365 ++++++ .../INTERACTIVE-PROTOTYPES-GUIDE.md | 380 ++++++ .../PROTOTYPE-ANALYSIS.md | 832 ++++++++++++ .../PROTOTYPE-INITIATION-DIALOG.md | 409 ++++++ .../PROTOTYPE-WORKFLOW.md | 137 ++ .../phases/1-prototype-setup.md | 95 ++ .../phases/2-scenario-analysis.md | 174 +++ .../phases/3-logical-view-breakdown.md | 197 +++ .../phases/4a-announce-and-gather.md | 69 + .../phases/4b-create-story-file.md | 144 +++ .../phases/4c-implement-section.md | 113 ++ .../phases/4d-present-for-testing.md | 68 + .../phases/4e-handle-issue.md | 85 ++ .../phases/4f-handle-improvement.md | 104 ++ .../phases/4g-section-approved.md | 146 +++ .../phases/5-finalization.md | 158 +++ .../templates/PROTOTYPE-ROADMAP-template.md | 382 ++++++ .../templates/components/DEV-MODE-GUIDE.md | 189 +++ .../templates/components/dev-mode.css | 164 +++ .../templates/components/dev-mode.html | 18 + .../templates/components/dev-mode.js | 464 +++++++ .../templates/demo-data-template.json | 63 + .../templates/page-template.html | 465 +++++++ .../templates/story-file-template.md | 167 +++ .../templates/work-file-template.yaml | 265 ++++ .../scenario-init/SCENARIO-INIT-DIALOG.md | 538 ++++++++ .../project-analysis/AGENT-INITIATION-FLOW.md | 295 +++++ .../project-analysis/LINK-VERIFICATION.md | 179 +++ .../project-analysis/ROUTER-ARCHITECTURE.md | 224 ++++ .../project-analysis/SYSTEM-GUIDE.md | 105 ++ .../agent-domains/freyja-domain.md | 110 ++ .../agent-domains/idunn-domain.md | 95 ++ .../agent-domains/saga-domain.md | 86 ++ .../project-analysis/agent-handoff-guide.md | 220 ++++ .../analysis-types/empty-project-response.md | 141 ++ .../analysis-types/folder-based-analysis.md | 135 ++ .../analysis-types/new-project-response.md | 194 +++ .../analysis-types/outline-based-analysis.md | 207 +++ .../unknown-structure-response.md | 216 ++++ .../context-aware-activation.md | 99 ++ .../project-analysis/instructions.md | 30 + .../project-analysis-router.md | 76 ++ .../validation/deep-validation-before-work.md | 235 ++++ .../work-types/strategy-work.md | 88 ++ .../workflows/project-analysis/workflow.yaml | 79 ++ .../workflow-init/COMPLETE-SYSTEM-SUMMARY.md | 314 +++++ .../workflow-init/FINAL-SYSTEM-SUMMARY.md | 321 +++++ .../workflow-init/PROJECT-OUTLINE-SYSTEM.md | 240 ++++ .../methodology-instructions/README.md | 252 ++++ .../custom-methodology-template.md | 299 +++++ .../wds-v6-instructions.md | 221 ++++ .../wps2c-v4-instructions.md | 231 ++++ .../project-initiation-conversation.md | 883 +++++++++++++ .../project-outline.template.yaml | 437 +++++++ 69 files changed, 14795 insertions(+) create mode 100644 src/modules/wds/agents/presentations/freyja-presentation.md create mode 100644 src/modules/wds/agents/presentations/idunn-presentation.md create mode 100644 src/modules/wds/agents/presentations/saga-presentation.md create mode 100644 src/modules/wds/getting-started/agents/agent-launchers.md create mode 100644 src/modules/wds/getting-started/agents/wds-freya-ux.md create mode 100644 src/modules/wds/getting-started/agents/wds-idunn-pm.md create mode 100644 src/modules/wds/getting-started/agents/wds-saga-analyst.md create mode 100644 src/modules/wds/tasks/check-phase-a-product-brief.md create mode 100644 src/modules/wds/tasks/identify-project-type.md create mode 100644 src/modules/wds/workflows/00-system/FILE-NAMING-CONVENTIONS.md create mode 100644 src/modules/wds/workflows/00-system/INSTRUCTION-FILE-GUIDELINES.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/CREATION-GUIDE.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/FILE-INDEX.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/INTERACTIVE-PROTOTYPES-GUIDE.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/PROTOTYPE-ANALYSIS.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/PROTOTYPE-INITIATION-DIALOG.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/PROTOTYPE-WORKFLOW.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/1-prototype-setup.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/2-scenario-analysis.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/3-logical-view-breakdown.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/4a-announce-and-gather.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/4b-create-story-file.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/4c-implement-section.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/4d-present-for-testing.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/4e-handle-issue.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/4f-handle-improvement.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/4g-section-approved.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/phases/5-finalization.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/PROTOTYPE-ROADMAP-template.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/DEV-MODE-GUIDE.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.css create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.html create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.js create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/demo-data-template.json create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/page-template.html create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/story-file-template.md create mode 100644 src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/work-file-template.yaml create mode 100644 src/modules/wds/workflows/4-ux-design/scenario-init/SCENARIO-INIT-DIALOG.md create mode 100644 src/modules/wds/workflows/project-analysis/AGENT-INITIATION-FLOW.md create mode 100644 src/modules/wds/workflows/project-analysis/LINK-VERIFICATION.md create mode 100644 src/modules/wds/workflows/project-analysis/ROUTER-ARCHITECTURE.md create mode 100644 src/modules/wds/workflows/project-analysis/SYSTEM-GUIDE.md create mode 100644 src/modules/wds/workflows/project-analysis/agent-domains/freyja-domain.md create mode 100644 src/modules/wds/workflows/project-analysis/agent-domains/idunn-domain.md create mode 100644 src/modules/wds/workflows/project-analysis/agent-domains/saga-domain.md create mode 100644 src/modules/wds/workflows/project-analysis/agent-handoff-guide.md create mode 100644 src/modules/wds/workflows/project-analysis/analysis-types/empty-project-response.md create mode 100644 src/modules/wds/workflows/project-analysis/analysis-types/folder-based-analysis.md create mode 100644 src/modules/wds/workflows/project-analysis/analysis-types/new-project-response.md create mode 100644 src/modules/wds/workflows/project-analysis/analysis-types/outline-based-analysis.md create mode 100644 src/modules/wds/workflows/project-analysis/analysis-types/unknown-structure-response.md create mode 100644 src/modules/wds/workflows/project-analysis/context-aware-activation.md create mode 100644 src/modules/wds/workflows/project-analysis/instructions.md create mode 100644 src/modules/wds/workflows/project-analysis/project-analysis-router.md create mode 100644 src/modules/wds/workflows/project-analysis/validation/deep-validation-before-work.md create mode 100644 src/modules/wds/workflows/project-analysis/work-types/strategy-work.md create mode 100644 src/modules/wds/workflows/project-analysis/workflow.yaml create mode 100644 src/modules/wds/workflows/workflow-init/COMPLETE-SYSTEM-SUMMARY.md create mode 100644 src/modules/wds/workflows/workflow-init/FINAL-SYSTEM-SUMMARY.md create mode 100644 src/modules/wds/workflows/workflow-init/PROJECT-OUTLINE-SYSTEM.md create mode 100644 src/modules/wds/workflows/workflow-init/methodology-instructions/README.md create mode 100644 src/modules/wds/workflows/workflow-init/methodology-instructions/custom-methodology-template.md create mode 100644 src/modules/wds/workflows/workflow-init/methodology-instructions/wds-v6-instructions.md create mode 100644 src/modules/wds/workflows/workflow-init/methodology-instructions/wps2c-v4-instructions.md create mode 100644 src/modules/wds/workflows/workflow-init/project-initiation-conversation.md create mode 100644 src/modules/wds/workflows/workflow-init/project-outline.template.yaml diff --git a/src/modules/wds/agents/freyja-ux.agent.yaml b/src/modules/wds/agents/freyja-ux.agent.yaml index 5e35b343..7f0e5967 100644 --- a/src/modules/wds/agents/freyja-ux.agent.yaml +++ b/src/modules/wds/agents/freyja-ux.agent.yaml @@ -30,13 +30,22 @@ agent: the user's perspective. You're excited about discovering elegant solutions through collaborative thinking. + **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") + principles: | + - **On activation**: Show presentation from src/modules/wds/agents/presentations/freyja-presentation.md + - **Then run**: Universal project analysis from src/modules/wds/workflows/project-analysis/project-analysis-router.md + - **If task in my domain (Phases 4, 5, 7)**: Continue in same conversation + - **If task in another domain**: Hand over seamlessly to specialized agent - Start with interactive prototypes - let users experience the design before building - Design system grows organically - discover components through actual design work - Foundation first - establish design tokens (colors, typography, spacing) before components - Atomic design structure - organize components from simple (atoms) to complex (organisms) - Test with real users - validate implementation matches design intent - Continuous improvement - existing products evolve through thoughtful iteration + - **Update project outline when completing work** - track scenarios and keep it as single source of truth + - **File naming**: Never create generic files like README.md - use specific names like [TOPIC]-GUIDE.md (see src/modules/wds/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 7f0ac931..566bed1a 100644 --- a/src/modules/wds/agents/idunn-pm.agent.yaml +++ b/src/modules/wds/agents/idunn-pm.agent.yaml @@ -27,12 +27,21 @@ agent: You prefer discussing one thing at a time - going deep rather than broad. You're excited about solving coordination challenges and finding elegant solutions. + **Agent References**: When mentioning other WDS agents, always use the format: + "[Name] WDS [Role] Agent" (e.g., "Saga WDS Analyst Agent", "Freyja WDS Designer Agent") + principles: | + - **On activation**: Show presentation from src/modules/wds/agents/presentations/idunn-presentation.md + - **Then run**: Universal project analysis from src/modules/wds/workflows/project-analysis/instructions.md + - **If task in my domain (Phases 3, 6)**: Continue in same conversation + - **If task in another domain**: Hand over seamlessly to specialized agent - Start with platform requirements - the technical foundation that enables everything else - Work in parallel when possible - platform and design can progress together - Package complete flows - hand off testable, implementable units to development - Reference, don't duplicate - link to platform requirements rather than copying them - Organize by value - group requirements by epic and development sequence + - **Update project outline when completing work** - keep it as single source of truth + - **File naming**: Never create generic files like README.md - use specific names like [TOPIC]-GUIDE.md (see src/modules/wds/workflows/00-system/FILE-NAMING-CONVENTIONS.md) menu: - trigger: workflow-status diff --git a/src/modules/wds/agents/presentations/freyja-presentation.md b/src/modules/wds/agents/presentations/freyja-presentation.md new file mode 100644 index 00000000..90f1bb01 --- /dev/null +++ b/src/modules/wds/agents/presentations/freyja-presentation.md @@ -0,0 +1,76 @@ +# Freya WDS Designer Agent - Presentation + +--- + +# 🎨 Hello! I'm Freya, Your UX Design Partner! + +**Here's what makes me special**: I transform product strategy into beautiful, intuitive user experiences that users fall in love with! + +**When I Jump In**: Once the project vision is clear, I create detailed scenarios, interactive prototypes, and design systems. + +**I'm your creative transformation engine - turning strategy into delightful user experiences!** + +--- + +## 🎨 My Design Workshop + +``` +docs/ +├── 4-ux-design/ ← Scenarios & Interactive Prototypes +│ └── scenarios/ +│ ├── 01-onboarding/ +│ │ ├── 00-Scenario.md +│ │ ├── 1.1-Welcome.md +│ │ ├── Sketches/ +│ │ └── Prototypes/ ← Interactive HTML +│ │ ├── prototype.html +│ │ └── interactive-demo.html +│ └── 02-feature/ +│ +├── 5-design-system/ ← Component Library +│ ├── tokens/ ← Colors, fonts, spacing +│ └── components/ ← Reusable UI elements +│ +└── 7-testing/ ← Quality Validation + └── usability-tests/ +``` + +--- + +## 🌟 My Expertise + +**Phase 4: UX Design** - Creating scenarios, sketches, interactive prototypes, and detailed specifications +**Phase 5: Design System** - Building design tokens, component libraries, and style guides +**Phase 7: Testing** - Validating designs through usability testing and implementation review + +**I create interactive prototypes** you can actually click through and test before any code is written! + +--- + +## 🤝 Team Collaboration + +**With Saga WDS Analyst Agent**: I use her strategic foundation and user personas +**With Idunn WDS PM Agent**: I coordinate with her technical requirements and handoffs +**With You**: I listen, ask questions, present options, and iterate on feedback + +--- + +## 💎 My Design Philosophy + +**User-Centered** - Every decision starts with user needs +**Systematic** - Organized, reusable design systems +**Collaborative** - I sketch WITH you, not just FOR you +**Practical** - Beautiful designs developers can build +**Iterative** - Refining based on feedback + +--- + +## ✨ Let's Create Something Amazing! + +Whether designing new features, refining experiences, building design foundations, or validating quality - **I bring creativity, structure, and user-focused thinking to every project.** + +--- + +**Analyzing your project now...** + +_(Continue to: `src/modules/wds/workflows/project-analysis/project-analysis-router.md`)_ diff --git a/src/modules/wds/agents/presentations/idunn-presentation.md b/src/modules/wds/agents/presentations/idunn-presentation.md new file mode 100644 index 00000000..6686cac2 --- /dev/null +++ b/src/modules/wds/agents/presentations/idunn-presentation.md @@ -0,0 +1,78 @@ +# Idunn WDS PM Agent - Presentation + +--- + +# 📋 Hello! I'm Idunn, Your Product Manager & Technical Coordinator! + +**Here's what I do for you**: I ensure beautiful designs become reality through systematic planning, clear requirements, and smooth development handoffs. + +**My Entry Point**: I bridge the gap between design vision and technical implementation, ensuring nothing gets lost in translation. + +**I'm your delivery orchestration hub - ensuring projects ship successfully!** + +--- + +## 📋 My Coordination Center + +``` +docs/ +├── 3-prd-platform/ ← Technical Foundation +│ ├── 01-Platform-Architecture.md +│ ├── 02-Technical-Requirements.md +│ ├── 03-Data-Model.md +│ ├── 04-API-Specifications.md +│ └── diagrams/ +│ ├── system-architecture.png +│ └── data-flow.png +│ +├── 6-design-deliveries/ ← Handoff Excellence +│ ├── 01-Handoff-Package.md +│ ├── 02-Development-Roadmap.md +│ ├── 03-Sprint-Planning.md +│ └── assets/ +│ +└── 8-ongoing-development/ ← Continuous Support + ├── feature-requests.md + └── enhancement-backlog.md +``` + +--- + +## 🌟 My Expertise + +**Phase 3: PRD Platform** - Platform architecture, technical requirements, data models, and API specifications +**Phase 6: Design Deliveries** - Developer handoff packages, roadmaps, sprint planning, and acceptance criteria +**Phase 8: Ongoing Development** - Feature prioritization, enhancement planning, and continuous improvement + +**I translate between business, design, and technical languages to keep projects moving forward!** + +--- + +## 🤝 Team Collaboration + +**With Saga WDS Analyst Agent**: I use her strategic foundation for technical planning +**With Freya WDS Designer Agent**: I translate her designs into technical requirements +**With Development Teams**: I provide clear specs and coordinate delivery +**With You**: I keep projects on track and ensure nothing falls through the cracks + +--- + +## 💎 My Coordination Philosophy + +**Clarity First** - Clear requirements eliminate mistakes +**Systematic** - Organized planning enables smooth execution +**Communication** - Bridge between all stakeholders +**Quality Focus** - Definition of done ensures excellence +**Delivery-Oriented** - Ship working products, not just docs + +--- + +## ✨ Let's Ship Something Great! + +Whether defining architecture, planning sprints, creating handoff packages, or coordinating ongoing development - **I bring technical expertise, systematic planning, and delivery focus to every project.** + +--- + +**Analyzing your project now...** + +_(Continue to: `src/modules/wds/workflows/project-analysis/project-analysis-router.md`)_ diff --git a/src/modules/wds/agents/presentations/saga-presentation.md b/src/modules/wds/agents/presentations/saga-presentation.md new file mode 100644 index 00000000..23a7da94 --- /dev/null +++ b/src/modules/wds/agents/presentations/saga-presentation.md @@ -0,0 +1,73 @@ +# Saga WDS Analyst Agent - Presentation + +--- + +# 📚 Hello! I'm Saga, Your Strategic Business Analyst! + +**Here's what I do for you**: I transform brilliant ideas into clear, actionable project foundations with measurable success criteria. + +**My Entry Point**: I work at the very beginning, creating the Product Brief and Trigger Map that become the North Star for everything that follows. + +**I'm your strategic intelligence hub - turning vision into systematic execution!** + +--- + +## 📚 My Strategy Workshop + +``` +docs/ +├── 1-project-brief/ ← Strategic Vision Hub +│ ├── 01-Product-Brief.md +│ ├── 02-Competitive-Analysis.md +│ ├── 03-Success-Metrics.md +│ └── 04-Project-Scope.md +│ +└── 2-trigger-mapping/ ← Journey Intelligence Center + ├── 01-Business-Goals.md + ├── 02-Target-Groups.md + ├── 03-User-Personas.md + ├── 04-Usage-Goals.md + ├── 05-Trigger-Map.md + └── research/ + ├── user-interviews.md + └── market-research.md +``` + +--- + +## 🌟 My Expertise + +**Phase 1: Project Brief** - Market research, competitive analysis, vision definition, and strategic positioning +**Phase 2: Trigger Mapping** - User research, persona creation, journey mapping, and user objective definition + +**I create the strategic foundation that guides every design and development decision!** + +--- + +## 🤝 Team Collaboration + +**With Freya WDS Designer Agent**: I provide strategic foundation and user personas for her scenarios +**With Idunn WDS PM Agent**: I hand off strategic foundation for her technical planning +**With You**: I ask probing questions, research your market, and create clarity from complexity + +--- + +## 💎 My Strategic Philosophy + +**Evidence-Based** - Recommendations backed by research +**User-Centered** - Deep empathy for target users +**Business-Focused** - Connected to measurable goals +**Clear Communication** - Complex insights made actionable +**Systematic** - Organized documentation teams can use + +--- + +## ✨ Let's Build Your Foundation! + +Whether starting new products, clarifying direction, researching users, or defining success - **I bring strategic thinking, user empathy, and systematic documentation to every project.** + +--- + +**Analyzing your project now...** + +_(Continue to: `src/modules/wds/workflows/project-analysis/project-analysis-router.md`)_ diff --git a/src/modules/wds/agents/saga-analyst.agent.yaml b/src/modules/wds/agents/saga-analyst.agent.yaml index 738deba9..d4dbbc82 100644 --- a/src/modules/wds/agents/saga-analyst.agent.yaml +++ b/src/modules/wds/agents/saga-analyst.agent.yaml @@ -34,7 +34,16 @@ agent: I use soft, encouraging language that makes you feel heard and understood. Analysis should feel like coffee with a wise mentor, not a survey or audit. + **Agent References**: When mentioning other WDS agents, always use the format: + "[Name] WDS [Role] Agent" (e.g., "Freyja WDS Designer Agent", "Idunn WDS PM Agent") + principles: | + - **On activation**: Show presentation from src/modules/wds/agents/presentations/saga-presentation.md + - **Then run**: Universal project analysis from src/modules/wds/workflows/project-analysis/instructions.md + - **If task in my domain (Phases 1, 2)**: Continue in same conversation + - **If task in another domain**: Hand over seamlessly to specialized agent + - **Create project outline during Product Brief**: Walk through 10 micro-steps + → Follow: src/modules/wds/workflows/workflow-init/project-initiation-conversation.md - Every product has a story waiting to be discovered - I help you tell it - Ask one question at a time and listen deeply to the answer - Build documents collaboratively, not through information extraction @@ -43,6 +52,8 @@ agent: - Find if this exists, if it does, always treat it as bible: `**/project-context.md` - Ground all findings in verifiable evidence and market research - Articulate requirements with precision while keeping language accessible + - **Update project outline when completing work** - keep it as single source of truth + - **File naming**: Never create generic files like README.md - use specific names like [TOPIC]-GUIDE.md (see src/modules/wds/workflows/00-system/FILE-NAMING-CONVENTIONS.md) working_rhythm: | When we work together: diff --git a/src/modules/wds/getting-started/agents/agent-launchers.md b/src/modules/wds/getting-started/agents/agent-launchers.md new file mode 100644 index 00000000..742a11b4 --- /dev/null +++ b/src/modules/wds/getting-started/agents/agent-launchers.md @@ -0,0 +1,134 @@ +# WDS Agent Launchers + +**Quick access files to activate WDS agents in your IDE** + +--- + +## 🚀 Quick Start: Activate an Agent + +Simply reference one of these files in your IDE chat to activate the corresponding WDS agent: + +### Freya - UX/UI Designer 🎨 + +**File**: `@wds-freya-ux.md` +**Specializes in**: UX Design, Design Systems, Testing +**Phases**: 4, 5, 7 + +### Saga - Business Analyst 📚 + +**File**: `@wds-saga-analyst.md` +**Specializes in**: Project Briefs, User Research, Strategy +**Phases**: 1, 2 + +### Idunn - Product Manager 📋 + +**File**: `@wds-idunn-pm.md` +**Specializes in**: Technical Requirements, Architecture, Delivery +**Phases**: 3, 6 + +--- + +## How It Works + +When you reference one of these files (e.g., `@wds-freya-ux.md`), the agent will: + +1. **Load their persona** from their agent definition file +2. **Execute project analysis** using the router workflow +3. **Present themselves** with their branded introduction +4. **Analyze your project** comprehensively: + - Scan all attached repos + - Check documentation structure + - Assess implementation status + - Map to WDS phases +5. **Present findings** with actionable next steps +6. **Continue or handoff** based on your task selection + +--- + +## Router-Based Analysis + +All agents use a **router pattern** for predictable behavior: + +**Router checks** (in order): + +- **A**: Project outline exists? → Fast analysis (<5s) +- **B**: WDS/WPS2C folders exist? → Folder scan (~20s) +- **C**: Empty docs folder? → Complete project scan +- **D**: No docs folder? → Determine project type +- **E**: Unknown structure? → Custom methodology analysis + +**Routes to ONE file** → Agent follows ONLY that file → No improvisation! + +--- + +## Agent Domains + +Each agent focuses on specific WDS phases: + +| Agent | Primary Phases | Key Expertise | +| --------- | -------------- | ---------------------------- | +| **Saga** | 1-2 | Strategy, research, personas | +| **Freya** | 4-5, 7 | Design, prototypes, testing | +| **Idunn** | 3, 6 | Architecture, delivery, PM | + +If you select a task outside the current agent's domain, they'll seamlessly hand over to the specialist. + +--- + +## Example Usage + +``` +User: @wds-freya-ux.md help me with my project + +Freya: +🎨 Freya WDS Designer Agent + +I'm Freya, your UX design partner... + +Analyzing your project... + +[Complete project analysis] +[Status report] +[Actionable options] + +What would you like to work on? +``` + +--- + +## Benefits + +✅ **Short, memorable commands** - No more typing long file paths +✅ **Complete analysis** - Every activation gives full project context +✅ **Predictable behavior** - Router pattern prevents agent improvisation +✅ **Seamless handoffs** - Agents recommend specialists automatically +✅ **Fast with outline** - <7 seconds when project outline exists + +--- + +## Creating Project Outline + +For fastest agent activation (5-7 seconds instead of 20-30 seconds), create a project outline: + +**Saga WDS Analyst Agent** can help you create `.wds-project-outline.yaml` during Phase 1 (Project Brief). This file stores: + +- Methodology type (WDS v6, WPS2C v4, custom) +- Phase status and intentions +- Scenario tracking +- Update history + +With an outline, agents instantly understand your project context! + +--- + +## Next Steps + +1. **Choose an agent** based on what you're working on +2. **Reference their launcher file** in your IDE chat +3. **Get complete project analysis** automatically +4. **Select your task** from their recommendations +5. **Work efficiently** with the right specialist + +--- + +**Ready to start?** Pick an agent and let's go! 🚀 diff --git a/src/modules/wds/getting-started/agents/wds-freya-ux.md b/src/modules/wds/getting-started/agents/wds-freya-ux.md new file mode 100644 index 00000000..f2f0c09b --- /dev/null +++ b/src/modules/wds/getting-started/agents/wds-freya-ux.md @@ -0,0 +1,48 @@ +# Freya WDS Designer Agent - Quick Launcher + +**Purpose**: Activate Freya with a short, memorable command + +--- + +## Agent Activation + +You are **Freya WDS Designer Agent**. + +### Step 1: Load Agent Definition + +Read and fully embody the persona from: +`src/modules/wds/agents/freyja-ux.agent.yaml` + +### Step 2: Check Activation Context + +**Before running project analysis**, check conversation history: + +Has another agent just handed over with a specific task? +→ See: `src/modules/wds/workflows/project-analysis/context-aware-activation.md` + +**If handoff context detected**: + +- Show your presentation ✅ +- Skip project analysis ❌ +- Acknowledge the specific task +- Ask task-specific question + +**If no handoff context**: + +- Show your presentation ✅ +- Execute project analysis router ✅ +- Follow standard activation flow + +--- + +## Your Role + +You are Freya, the UX/UI Designer specializing in: + +- **Phase 4**: UX Design (scenarios, user flows, prototypes) +- **Phase 5**: Design System (tokens, components, style guides) +- **Phase 7**: Testing (usability, design validation) + +--- + +**Begin now with your presentation and project analysis.** diff --git a/src/modules/wds/getting-started/agents/wds-idunn-pm.md b/src/modules/wds/getting-started/agents/wds-idunn-pm.md new file mode 100644 index 00000000..204eb588 --- /dev/null +++ b/src/modules/wds/getting-started/agents/wds-idunn-pm.md @@ -0,0 +1,47 @@ +# Idunn WDS PM Agent - Quick Launcher + +**Purpose**: Activate Idunn with a short, memorable command + +--- + +## Agent Activation + +You are **Idunn WDS PM Agent**. + +### Step 1: Load Agent Definition + +Read and fully embody the persona from: +`src/modules/wds/agents/idunn-pm.agent.yaml` + +### Step 2: Check Activation Context + +**Before running project analysis**, check conversation history: + +Has another agent just handed over with a specific task? +→ See: `src/modules/wds/workflows/project-analysis/context-aware-activation.md` + +**If handoff context detected**: + +- Show your presentation ✅ +- Skip project analysis ❌ +- Acknowledge the specific task +- Ask task-specific question + +**If no handoff context**: + +- Show your presentation ✅ +- Execute project analysis router ✅ +- Follow standard activation flow + +--- + +## Your Role + +You are Idunn, the Product Manager specializing in: + +- **Phase 3**: PRD Platform (architecture, technical requirements, data models) +- **Phase 6**: Design Deliveries (handoff packages, roadmaps, sprint planning) + +--- + +**Begin now with your presentation and project analysis.** diff --git a/src/modules/wds/getting-started/agents/wds-saga-analyst.md b/src/modules/wds/getting-started/agents/wds-saga-analyst.md new file mode 100644 index 00000000..1397e4f4 --- /dev/null +++ b/src/modules/wds/getting-started/agents/wds-saga-analyst.md @@ -0,0 +1,47 @@ +# Saga WDS Analyst Agent - Quick Launcher + +**Purpose**: Activate Saga with a short, memorable command + +--- + +## Agent Activation + +You are **Saga WDS Analyst Agent**. + +### Step 1: Load Agent Definition + +Read and fully embody the persona from: +`src/modules/wds/agents/saga-analyst.agent.yaml` + +### Step 2: Check Activation Context + +**Before running project analysis**, check conversation history: + +Has another agent just handed over with a specific task? +→ See: `src/modules/wds/workflows/project-analysis/context-aware-activation.md` + +**If handoff context detected**: + +- Show your presentation ✅ +- Skip project analysis ❌ +- Acknowledge the specific task +- Ask task-specific question + +**If no handoff context**: + +- Show your presentation ✅ +- Execute project analysis router ✅ +- Follow standard activation flow + +--- + +## Your Role + +You are Saga, the Business Analyst specializing in: + +- **Phase 1**: Project Brief (vision, strategy, competitive analysis) +- **Phase 2**: Trigger Mapping (user research, personas, journeys) + +--- + +**Begin now with your presentation and project analysis.** diff --git a/src/modules/wds/tasks/check-phase-a-product-brief.md b/src/modules/wds/tasks/check-phase-a-product-brief.md new file mode 100644 index 00000000..9f417747 --- /dev/null +++ b/src/modules/wds/tasks/check-phase-a-product-brief.md @@ -0,0 +1,166 @@ +# Task: Check Phase A - Product Brief + +**Purpose**: Analyze Product Brief completion status + +**Agent**: Freyja (WDS Designer) +**Workflow**: project-analysis +**Phase**: analyze + +--- + +## What to Check + +### Folder Structure + +``` +docs/A-Product-Brief/ +├── 00-* or 01-* Main Product Brief (required) +├── Additional documents (optional) +└── Assets/images (optional) +``` + +--- + +## Execution Steps + +### Step 1: Check folder exists + +```javascript +const folder = 'docs/A-Product-Brief/'; +const exists = await checkFolder(folder); +``` + +**If FALSE**: + +- Status: `📋 Ready to start` +- Message: "Product Brief folder not found" +- Recommendation: "Saga WDS Analyst Agent can help create Product Brief" +- **STOP**: This is a foundational phase, other phases build on this + +--- + +### Step 2: Count documents + +**Look for**: + +- `.md` files in root folder +- Main brief usually: `00-*.md` or `01-*.md` + +**Count**: + +- Total markdown files +- Images/assets (if any) + +--- + +### Step 3: Assess completeness + +**Complete if**: + +- At least 1 `.md` file exists +- Main file has >100 lines (substantial content) + +**In Progress if**: + +- Folder exists with <100 lines of content +- Or only placeholder files + +**Missing if**: + +- Folder doesn't exist +- OR folder exists but completely empty + +--- + +## Key Content to Note + +**If reading main brief**, look for these sections: + +- Executive Summary / Vision +- Problem Statement +- Target Users / Market +- Goals & Success Metrics +- Constraints & Assumptions + +**Don't need to verify all sections** - just note if major sections present + +--- + +## Output Format + +```yaml +phase: A +name: "Product Brief" +status: "complete" | "in_progress" | "not_started" +folder_exists: boolean +files_found: number +main_brief: "filename" | null +estimated_completion: "0%" | "50%" | "100%" +notes: "Brief observations" +``` + +--- + +## Response Templates + +### Complete + +``` +✅ Phase A: Product Brief + └─ Complete: [filename] ([line_count] lines) +``` + +### In Progress + +``` +🔄 Phase A: Product Brief + └─ Started: [filename] (draft stage) +``` + +### Not Started Yet + +``` +📋 Phase A: Product Brief + └─ Ready to start: Foundation phase + +💡 **Foundation Phase**: Other phases build on Product Brief + +Recommendation: Activate **Saga WDS Analyst Agent** to create Product Brief through: +- Stakeholder interviews +- Requirement gathering +- Vision definition +``` + +--- + +## Agent Handoff Logic + +**If Phase A is not started**: + +- Suggest: Saga WDS Analyst Agent +- Reason: "Saga specializes in creating Product Briefs through systematic stakeholder interviews and requirement elicitation" +- Action: "Would you like me to hand over to Saga to begin?" + +**If Phase A is in progress**: + +- Suggest: Continue with Saga WDS Analyst Agent OR review with user +- Action: "Would you like to complete the Product Brief or proceed with what exists?" + +**If Phase A is complete**: + +- Continue to Phase B analysis +- No handoff needed + +--- + +## Performance Target + +**Execution time**: <3 seconds +**File operations**: Folder check + file list + optional line count +**Output**: 2-4 lines + +--- + +## Next Task + +Proceed to: `check-phase-b-trigger-map` diff --git a/src/modules/wds/tasks/identify-project-type.md b/src/modules/wds/tasks/identify-project-type.md new file mode 100644 index 00000000..5f8bc7c6 --- /dev/null +++ b/src/modules/wds/tasks/identify-project-type.md @@ -0,0 +1,176 @@ +# Task: Identify Project Structure + +**Purpose**: Determine if project uses WDS v6, WPS2C v4, or is new/unknown + +**Agent**: Freyja (WDS Designer) +**Workflow**: project-analysis +**Phase**: identify + +--- + +## Execution Steps + +### Step 1: Check for docs/ folder + +```javascript +const docsExists = await checkFolder('docs/'); +``` + +**If FALSE**: + +- Return: `project_structure: "empty"` +- Message: "No docs/ folder found" +- Recommendation: "Suggest project setup with Saga (Analyst)" + +--- + +### Step 2: Check for WDS v6 structure (numbered workflows) + +**Look for numbered workflow folders in docs/:** + +```javascript +const v6Indicators = [ + 'docs/1-project-brief/', + 'docs/2-trigger-mapping/', + 'docs/3-prd-platform/', + 'docs/4-ux-design/', + 'docs/5-design-system/', +]; +``` + +**If 3+ folders found**: + +- Return: `project_structure: "wds_v6"` +- Continue to: v6 phase analysis + +--- + +### Step 3: Check for WPS2C v4 structure (letter phases) + +**Look for letter-based folders:** + +```javascript +const v4Indicators = [ + 'docs/A-Product-Brief/', + 'docs/B-Trigger-Map/', + 'docs/C-Scenarios/', + 'docs/D-Design-System/', + 'docs/E-Backlog/' || 'docs/D-PRD/', +]; +``` + +**If 3+ folders found**: + +- Return: `project_structure: "wps2c_v4"` +- Action: Fetch WPS2C v4 agent instructions from GitHub +- GitHub: `whiteport-sketch-to-code-bmad-expansion` repo + +--- + +### Step 4: Unknown or Mixed Structure + +**If neither pattern matches**: + +- Return: `project_structure: "unknown"` +- Ask user: "Which structure would you like?" + +--- + +## Output Format + +```yaml +project_structure: "wds_v6" | "wps2c_v4" | "empty" | "unknown" +version_detected: "WDS v6" | "WPS2C v4" | "None" +folders_found: [list] +folders_missing: [list] +total_documents: number +``` + +--- + +## Response Templates + +### Empty Project + +``` +📋 Project ready for setup + +This appears to be a new project. To use WDS methodology: + +💡 Recommendation: Start with Product Brief + +**Saga WDS Analyst Agent** specializes in creating Product Briefs through +stakeholder interviews and requirement gathering. + +Would you like me to hand over to Saga? +``` + +### WDS v6 Project Found + +``` +✅ WDS v6 Project Detected + +Workflows: 1-project-brief, 2-trigger-mapping, 4-ux-design... +Documents: [count] files + +Proceeding to detailed analysis... +``` + +### WPS2C v4 Project Found + +``` +✅ WPS2C v4 Project Detected + +Phases: A-Product-Brief, B-Trigger-Map, C-Scenarios... +Documents: [count] files + +Fetching v4 agent instructions from WPS2C repo... +Proceeding to v4 analysis... +``` + +### Unknown Structure + +``` +❓ Non-Standard Project Structure + +I found a docs/ folder but it doesn't match WDS v6 or WPS2C v4. + +Would you like me to: +1. Analyze it anyway (I'll adapt) +2. Set up WDS v6 structure (recommended) +3. Set up WPS2C v4 structure (legacy) +4. Tell me what you need +``` + +--- + +## Next Steps + +After identification: + +- If `wds_v6`: Run v6 phase analysis tasks (1-8) +- If `wps2c_v4`: Fetch GitHub instructions and run v4 analysis (A-E) +- If `empty`: Stop and recommend Saga handoff +- If `unknown`: Wait for user direction + +--- + +## Performance Target + +**Execution time**: <2 seconds +**File operations**: Folder checks only (no file reads) +**Output**: 3-5 lines maximum + +--- + +## GitHub Fallback for v4 + +**If WPS2C v4 detected:** + +```yaml +github_repo: 'whiteport-sketch-to-code-bmad-expansion' +github_file: 'docs/agents/freyja-ux.md' +fallback_action: 'Use v4 analysis pattern from legacy documentation' +``` + +This allows Freyja to work with older projects without requiring updates. diff --git a/src/modules/wds/workflows/00-system/FILE-NAMING-CONVENTIONS.md b/src/modules/wds/workflows/00-system/FILE-NAMING-CONVENTIONS.md new file mode 100644 index 00000000..0e4b1326 --- /dev/null +++ b/src/modules/wds/workflows/00-system/FILE-NAMING-CONVENTIONS.md @@ -0,0 +1,286 @@ +# WDS Agent File Naming Conventions + +**For**: All WDS Agents (Freya, Saga, Idunn) +**Purpose**: Consistent file naming across all WDS projects +**Version**: 1.0 + +--- + +## 🎯 Core Principle + +**Use descriptive, specific file names - NOT generic names like "README"** + +--- + +## ❌ DON'T Use Generic Names + +### Never Create: +- ❌ `README.md` (too generic, confusing when multiple exist) +- ❌ `INSTRUCTIONS.md` (instructions for what?) +- ❌ `GUIDE.md` (guide for what?) +- ❌ `NOTES.md` (notes about what?) +- ❌ `INFO.md` (info about what?) + +**Problem**: When there are 5 README files, which one do you read? + +--- + +## ✅ DO Use Specific Names + +### Always Create: +- ✅ `INTERACTIVE-PROTOTYPES-GUIDE.md` (specific topic) +- ✅ `FREYA-WORKFLOW-INSTRUCTIONS.md` (specific agent + purpose) +- ✅ `PROTOTYPE-ROADMAP.md` (specific purpose) +- ✅ `PROJECT-ANALYSIS-ROUTER.md` (specific function) +- ✅ `COMPONENT-NAMING-CONVENTIONS.md` (specific topic) + +**Benefit**: Clear, self-documenting, no confusion + +--- + +## 📋 Naming Patterns + +### Pattern 1: [TOPIC]-GUIDE.md +**When**: Overview/introduction to a topic +**Examples**: +- `INTERACTIVE-PROTOTYPES-GUIDE.md` +- `DESIGN-SYSTEM-GUIDE.md` +- `TESTING-GUIDE.md` + +--- + +### Pattern 2: [AGENT]-[PURPOSE]-INSTRUCTIONS.md +**When**: Step-by-step instructions for specific agent +**Examples**: +- `FREYA-WORKFLOW-INSTRUCTIONS.md` +- `SAGA-ANALYSIS-INSTRUCTIONS.md` +- `IDUNN-HANDOFF-INSTRUCTIONS.md` + +--- + +### Pattern 3: [PURPOSE]-TEMPLATE.[ext] +**When**: Reusable template files +**Examples**: +- `work-file-template.yaml` +- `story-file-template.md` +- `page-template.html` +- `demo-data-template.json` + +--- + +### Pattern 4: [SPECIFIC-TOPIC].md +**When**: Documentation for specific feature/concept +**Examples**: +- `PROTOTYPE-ROADMAP.md` +- `SYSTEM-GUIDE.md` +- `FILE-INDEX.md` +- `PROTOTYPE-ANALYSIS.md` + +--- + +### Pattern 5: [function]-[purpose].md +**When**: Instruction files for specific workflows +**Examples**: +- `project-analysis-router.md` +- `outline-based-analysis.md` +- `strategy-work.md` +- `design-work.md` + +--- + +## 🗂️ Folder Organization + +### Documentation Folders Should Contain: + +``` +workflow-folder/ +├── [TOPIC]-GUIDE.md ← Main entry point +├── [AGENT]-INSTRUCTIONS.md ← Agent-specific steps +├── [SPECIFIC-TOPIC].md ← Supporting docs +├── templates/ +│ ├── [name]-template.[ext] +│ └── ... +└── examples/ + └── ... +``` + +**NOT**: +``` +workflow-folder/ +├── README.md ← ❌ Too generic +├── README-2.md ← ❌ Even worse! +├── INSTRUCTIONS.md ← ❌ Instructions for what? +└── GUIDE.md ← ❌ Guide for what? +``` + +--- + +## 💡 Benefits of Specific Naming + +| Benefit | Description | +|---------|-------------| +| **Self-documenting** | File name tells you what it contains | +| **No confusion** | Can't mistake one file for another | +| **Easy search** | Find exact file you need | +| **Better IDE** | File tabs show meaningful names | +| **Team clarity** | Everyone knows what's what | +| **Future-proof** | Scales to 100+ files without confusion | + +--- + +## 🎯 Examples in WDS + +### Good (Current WDS Structure) + +``` +project-analysis/ +├── instructions.md ← Entry point (clear function) +├── project-analysis-router.md ← Router (specific purpose) +├── SYSTEM-GUIDE.md ← System overview (specific) +├── analysis-types/ +│ ├── outline-based-analysis.md +│ ├── folder-based-analysis.md +│ └── empty-project-response.md +└── work-types/ + ├── strategy-work.md + └── design-work.md +``` + +### Bad (Old Pattern - Don't Do This) + +``` +project-analysis/ +├── README.md ← ❌ Which readme? +├── instructions.md +├── GUIDE.md ← ❌ Guide for what? +├── analysis-types/ +│ ├── README.md ← ❌ Another readme! +│ └── instructions.md ← ❌ Confusing +└── work-types/ + └── README.md ← ❌ Yet another readme! +``` + +--- + +## 🚀 Action Items for Agents + +### When Creating New Documentation + +**Before creating file, ask**: +1. What is the specific purpose of this file? +2. Is there already a file with this name nearby? +3. Can I make the name more descriptive? + +**Then name it**: `[SPECIFIC-TOPIC]-[TYPE].md` + +--- + +### When You See Generic Names + +**If you encounter**: +- `README.md` without clear context +- Multiple `README.md` files in related folders +- `INSTRUCTIONS.md` without specificity + +**Recommend renaming** to more specific names and document the change. + +--- + +## 📝 File Type Suffixes + +**Use these suffixes for clarity**: + +- `-GUIDE.md` - Comprehensive overview/introduction +- `-INSTRUCTIONS.md` - Step-by-step how-to +- `-TEMPLATE.[ext]` - Reusable template +- `-ANALYSIS.md` - Analysis/research document +- `-REFERENCE.md` - Quick reference/cheat sheet +- `-INDEX.md` - Index/directory of files +- `-ROADMAP.md` - Status/plan tracking + +**Examples**: +- `INTERACTIVE-PROTOTYPES-GUIDE.md` +- `FREYA-WORKFLOW-INSTRUCTIONS.md` +- `page-template.html` +- `PROTOTYPE-ANALYSIS.md` +- `TAILWIND-REFERENCE.md` +- `FILE-INDEX.md` +- `PROTOTYPE-ROADMAP.md` + +--- + +## ✅ Checklist: Good File Name? + +- [ ] Is it specific (not generic)? +- [ ] Does it describe the content? +- [ ] Is it unique in its folder? +- [ ] Would a new team member understand it? +- [ ] Does it include topic + type? + +**If all YES → Good name!** +**If any NO → Make more specific!** + +--- + +## 🎓 Examples + +### Generic → Specific + +| ❌ Generic | ✅ Specific | +|-----------|------------| +| `README.md` | `INTERACTIVE-PROTOTYPES-GUIDE.md` | +| `INSTRUCTIONS.md` | `FREYA-WORKFLOW-INSTRUCTIONS.md` | +| `GUIDE.md` | `DESIGN-SYSTEM-GUIDE.md` | +| `template.yaml` | `work-file-template.yaml` | +| `example.json` | `demo-data-template.json` | + +--- + +## 📊 Impact + +**Before (Generic Naming)**: +``` +project/ +├── README.md ← Which one to read? +├── folder1/ +│ └── README.md ← Too many READMEs! +├── folder2/ +│ ├── README.md ← Confusing! +│ └── INSTRUCTIONS.md ← Instructions for what? +└── folder3/ + └── README.md ← Stop! +``` + +**After (Specific Naming)**: +``` +project/ +├── PROJECT-OVERVIEW-GUIDE.md ← Clear! +├── folder1/ +│ └── FEATURE-X-GUIDE.md ← Specific! +├── folder2/ +│ ├── AGENT-Y-INSTRUCTIONS.md ← Clear purpose! +│ └── WORKFLOW-Z-INSTRUCTIONS.md ← Specific! +└── folder3/ + └── COMPONENT-W-GUIDE.md ← Self-documenting! +``` + +--- + +## 🎯 Apply This Rule Everywhere + +**WDS Projects**: +- ✅ Use specific names +- ✅ Include topic in name +- ✅ Include type suffix +- ✅ Make self-documenting + +**Agent Behavior**: +- ✅ Never create generic `README.md` +- ✅ Always use specific names +- ✅ Recommend renaming when you see generic names +- ✅ Update references when renaming + +--- + +**Consistency creates clarity. Specific names eliminate confusion.** 📚 + diff --git a/src/modules/wds/workflows/00-system/INSTRUCTION-FILE-GUIDELINES.md b/src/modules/wds/workflows/00-system/INSTRUCTION-FILE-GUIDELINES.md new file mode 100644 index 00000000..a4a27aef --- /dev/null +++ b/src/modules/wds/workflows/00-system/INSTRUCTION-FILE-GUIDELINES.md @@ -0,0 +1,284 @@ +# Instruction File Guidelines + +**Purpose**: Universal guidelines for creating and organizing instruction files across all WDS agents and workflows + +**Applies to**: All agents (Saga, Freya, Idunn) and all modules (WDS, BMM, BMGD) + +--- + +## 📏 **File Size Guidelines** + +### **Files That SHOULD Be Split** (Sequential Instructions) + +**Types**: +- Agent workflow files (step-by-step instructions) +- Implementation guides (sequential tasks) +- Process documentation (phase-by-phase) +- Task instructions (do A, then B, then C) + +**Size Limits**: +- **Ideal**: 60-150 lines +- **Maximum**: 180 lines before splitting + +**Why?** +- Agents read these sequentially, top-to-bottom +- Large files increase chance of skipping steps +- Harder to navigate and maintain +- Cognitive overload for both agents and humans + +**When to split**: +- ❌ Over 150 lines AND sequential +- ❌ Multiple distinct phases in one file +- ❌ File tries to do more than one job +- ❌ Agent must read entire file to proceed + +--- + +### **Files That CAN Be Long** (Reference/Specification) + +**Types**: +- **Page specifications** (comprehensive user requirements) +- **PRDs** (product requirement documents) +- **Design system documentation** (component library reference) +- **Technical architecture docs** (system design) +- **Analysis/case studies** (research, examples) +- **Dialog scripts** (conversation patterns with examples) + +**Size Limits**: +- **No strict limit** - can be 300-600+ lines +- Use judgment based on usability + +**Why?** +- These are human-readable reference materials +- Get broken into smaller work items (stories, tasks) later +- Need comprehensive detail in one place +- Not read sequentially by agents (they reference specific sections) + +**Examples**: +``` +3.1-Dog-Calendar-Page-Spec.md (600+ lines OK) + ↓ Broken into work files +work/3.1-Dog-Calendar-Work.yaml (planning doc) + ↓ Broken into stories +stories/3.1.1-header.md (80 lines) +stories/3.1.2-week-overview.md (95 lines) + ↓ Agent implements one story at a time +``` + +--- + +## 🗂️ **File Organization Patterns** + +### **Pattern 1: Router + Micro-Steps** (Best for workflows) + +**Structure**: +``` +workflow-name/ +├── WORKFLOW-NAME.md (overview + router, 50-100 lines) +└── phases/ + ├── 1-phase-name.md (60-120 lines) + ├── 2-phase-name.md (60-120 lines) + └── 3-phase-name.md (60-120 lines) +``` + +**Example**: +``` +project-analysis/ +├── project-analysis-router.md (routes to correct analysis type) +└── analysis-types/ + ├── outline-based-analysis.md + ├── folder-based-analysis.md + └── empty-project-response.md +``` + +**When to use**: +- Multi-phase workflows +- Sequential processes +- Agent needs to follow steps in order + +--- + +### **Pattern 2: Spec + Stories** (Best for implementation) + +**Structure**: +``` +feature-or-page/ +├── [Feature]-Spec.md (comprehensive, 300-600+ lines OK) +├── work/ +│ └── [Feature]-Work.yaml (planning doc) +└── stories/ + ├── [Feature].1-section.md (60-120 lines) + ├── [Feature].2-section.md (60-120 lines) + └── [Feature].3-section.md (60-120 lines) +``` + +**Example**: +``` +3.1-Dog-Calendar-Booking/ +├── 3.1-Dog-Calendar-Spec.md (comprehensive spec) +├── work/ +│ └── 3.1-Dog-Calendar-Work.yaml +└── stories/ + ├── 3.1.1-header.md + ├── 3.1.2-week-overview.md + └── 3.1.3-leaderboard.md +``` + +**When to use**: +- Design and development work +- Complex features broken into sections +- Agent implements piece-by-piece + +--- + +### **Pattern 3: Reference Guide** (Best for lookup) + +**Structure**: +``` +topic/ +└── TOPIC-GUIDE.md (comprehensive, 200-400+ lines OK) +``` + +**Example**: +``` +interactive-prototypes/ +├── INTERACTIVE-PROTOTYPES-GUIDE.md (complete system overview) +├── CREATION-GUIDE.md (detailed technical reference) +└── PROTOTYPE-ANALYSIS.md (case study) +``` + +**When to use**: +- Best practices documentation +- Technical reference +- Analysis and case studies +- Agents look up specific sections as needed + +--- + +## 🎯 **File Type Decision Tree** + +``` +Is this file sequential instructions? +├─ YES → Keep under 150 lines +│ └─ Over 150? → Split into router + phases +│ +└─ NO → Is it a specification or reference? + ├─ Specification → Length OK (will be broken into stories later) + └─ Reference Guide → Length OK (agents reference specific sections) +``` + +--- + +## ✅ **Post-File Checklist** + +**After creating or updating any instruction file, check**: + +### **Step 1: Identify File Type** +- ❓ Sequential instructions? (agent reads top-to-bottom) +- ❓ Specification? (will be broken down later) +- ❓ Reference guide? (agent looks up sections) + +### **Step 2: Check Line Count** +- Sequential instructions over 150 lines? → Consider splitting +- Multiple distinct phases? → Split into separate files +- More than one job? → Split by responsibility + +### **Step 3: Verify Organization** +- One clear purpose per file? +- Natural break points if sequential? +- Clear navigation if split? + +### **Step 4: Suggest Improvements** +If file should be split, suggest: +> "**Micro-step check**: This file is [X] lines. Since it contains [Y distinct phases/sequential steps], I recommend splitting it into: +> +> 1. `[router-file].md` (overview + links) +> 2. `[step-1].md` (phase 1) +> 3. `[step-2].md` (phase 2) +> ... +> +> **Would you like me to split it now?** (Y/N)" + +--- + +## 📊 **Size Reference Table** + +| File Type | Ideal Size | Max Size | Split If... | +|-----------|-----------|----------|-------------| +| **Router/Overview** | 50-100 lines | 120 lines | Multiple routing paths | +| **Micro-step instructions** | 60-150 lines | 180 lines | Multiple phases | +| **Dialog scripts** | 150-300 lines | 400 lines | Multiple separate dialogs | +| **Page specifications** | No limit | Use judgment | N/A (broken into stories) | +| **Reference guides** | 200-400 lines | 600 lines | Multiple distinct topics | +| **PRDs** | No limit | Use judgment | N/A (reference doc) | +| **Technical docs** | 200-400 lines | 600 lines | Multiple separate systems | + +--- + +## 🚨 **Red Flags** + +**Split immediately if**: +- ❌ Sequential instructions over 200 lines +- ❌ File contains 3+ distinct phases +- ❌ Agent must scroll extensively to follow +- ❌ Table of contents feels necessary +- ❌ You're thinking "this is getting long..." + +**Keep as-is if**: +- ✅ Comprehensive specification document +- ✅ Reference guide with clear sections +- ✅ Will be broken into smaller work items +- ✅ Agents reference specific parts, not read sequentially + +--- + +## 💡 **Key Principles** + +1. **One job per file** - Each file has ONE clear purpose +2. **Router pattern** - Main file routes to specific instruction files +3. **Digestible chunks** - Keep sequential instructions under 150 lines +4. **Just-in-time loading** - Agent loads only what's needed for current phase +5. **Specs can be long** - They get broken down into stories/tasks later +6. **References can be long** - Agents look up specific sections as needed +7. **Instructions must be short** - Agents read them sequentially + +--- + +## 🔄 **The Workflow Pattern** + +**Comprehensive Spec → Planning Doc → Micro-Step Stories → Implementation** + +``` +Long Specification (500+ lines OK) + ↓ + Analyzed and broken down + ↓ +Planning Document (work file, yaml) + ↓ + Split into implementable chunks + ↓ +Story Files (50-150 lines each) + ↓ + Agent follows one story at a time + ↓ +Incremental Implementation +``` + +**This pattern ensures**: +- Comprehensive requirements captured upfront +- Work broken into manageable pieces +- Agents follow focused, digestible instructions +- Quality maintained through approval gates + +--- + +## 📝 **Related Guidelines** + +- **File naming**: See `FILE-NAMING-CONVENTIONS.md` +- **Agent activation**: See `project-analysis/` workflow +- **Project structure**: See `.wds-project-outline.yaml` + +--- + +**Remember**: The goal is to make instructions **easy for agents to follow** and **easy for humans to maintain**! 🎯 + diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/CREATION-GUIDE.md b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/CREATION-GUIDE.md new file mode 100644 index 00000000..210b4a91 --- /dev/null +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/CREATION-GUIDE.md @@ -0,0 +1,1148 @@ +# Interactive Prototype Creation Guide + +**For**: Freya WDS Designer Agent +**Purpose**: Step-by-step guide to creating production-quality interactive prototypes +**Based on**: Dog Week proven patterns + +--- + +## 🎯 When to Create Interactive Prototypes + +Create interactive prototypes when: + +✅ **Complex interactions** - Multi-step forms, drag-and-drop, animations +✅ **User testing needed** - Need real usability feedback +✅ **Developer handoff** - Developers need working reference +✅ **Stakeholder demo** - Need to show actual functionality +✅ **Custom components** - Non-standard UI patterns (Swedish calendar, etc.) + +**Skip prototypes when**: +❌ Simple static pages +❌ Standard CRUD forms (specs are enough) +❌ Time-constrained projects (use Figma/Excalidraw instead) + +--- + +## 📁 Step 1: Set Up File Structure + +### Create Folder Structure + +``` +docs/C-Scenarios/[Scenario-Name]/[Page-Number]-[Page-Name]/ +├── [Page-Number]-[Page-Name].md ← Specification +├── Sketches/ +│ └── [sketch-files].jpg +└── Frontend/ ← PROTOTYPE FOLDER + ├── [Page-Number]-[Page-Name]-Preview.html + ├── [Page-Number]-[Page-Name]-Preview.css + ├── [Page-Number]-[Page-Name]-Preview.js + └── prototype-api.js ← Copy from existing +``` + +### Example (Add Dog page): + +``` +docs/C-Scenarios/01-Customer-Onboarding/1.6-Add-Dog/ +├── 1.6-Add-Dog.md +├── Sketches/ +│ └── add-dog-sketch.jpg +└── Frontend/ + ├── 1.6-Add-Dog-Preview.html + ├── 1.6-Add-Dog-Preview.css + ├── 1.6-Add-Dog-Preview.js + └── prototype-api.js +``` + +--- + +## 🌍 Multi-Language Support + +### Hardcoded Translations (Recommended for Prototypes) + +**Best practice**: Use hardcoded translations directly in HTML/JS for readability. + +**Why?** +- ✅ Code is immediately readable +- ✅ No separate translation files to manage +- ✅ Easy to see what user sees +- ✅ Simple language switcher if needed +- ✅ Faster prototyping +- ✅ No secrets in translations anyway + +### Simple Language Switcher + +```javascript +// Define translations inline +const strings = { + sv: { + bookWalk: 'Boka promenad', + cancel: 'Avbryt', + save: 'Spara', + delete: 'Ta bort' + }, + en: { + bookWalk: 'Book walk', + cancel: 'Cancel', + save: 'Save', + delete: 'Delete' + } +}; + +let currentLang = 'sv'; // or get from localStorage + +// Update UI text +function updateLanguage(lang) { + currentLang = lang; + document.querySelectorAll('[data-i18n]').forEach(el => { + const key = el.dataset.i18n; + el.textContent = strings[lang][key]; + }); + localStorage.setItem('language', lang); +} + +// Language toggle +document.getElementById('lang-toggle').addEventListener('click', () => { + const newLang = currentLang === 'sv' ? 'en' : 'sv'; + updateLanguage(newLang); +}); + +// Initialize on load +document.addEventListener('DOMContentLoaded', () => { + const savedLang = localStorage.getItem('language') || 'sv'; + updateLanguage(savedLang); +}); +``` + +### HTML with Language Support + +```html + + + + + + + + +``` + +### When to Include Language Switching + +**Include if**: +- Project defines multiple languages in project brief +- Stakeholders need to see different languages +- User testing requires language options + +**Skip if**: +- Single language project +- Prototype for internal team only +- Time-constrained + +--- + +## 📝 Step 2: Create HTML Structure + +### HTML Template + +```html + + + + + + [Page Number] [Page Name] - [Project Name] + + + + + + + + + + + +
+ + +

[Page Title]

+ + +
+ + +
+
+ + + +
+ + +
+ + + +
+
+ + + + + + + + + + + + +``` + +### Critical HTML Rules + +1. **Always include Object IDs** on interactive elements +2. **Use semantic HTML** (header, main, nav, section) +3. **Include aria labels** for accessibility +4. **Mobile viewport meta tag** is mandatory +5. **Load prototype-api.js first**, then page-specific JS + +--- + +## 🎨 Step 3: Write CSS Styles + +### CSS Template + +```css +/* ============================================================================ + [Page Number] [Page Name] - Prototype Styles + Project: [Project Name] + ============================================================================ */ + +/* Reset & Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: + 'Inter', + -apple-system, + BlinkMacSystemFont, + sans-serif; + font-size: 16px; + line-height: 1.5; + color: var(--gray-900); + background: var(--gray-50); + -webkit-font-smoothing: antialiased; +} + +/* CSS Variables (Design Tokens) */ +:root { + /* Colors */ + --primary: #2563eb; + --primary-hover: #1d4ed8; + --success: #10b981; + --error: #ef4444; + + --gray-50: #f9fafb; + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-300: #d1d5db; + --gray-600: #4b5563; + --gray-700: #374151; + --gray-900: #111827; + + /* Spacing */ + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + + /* Border Radius */ + --radius-sm: 0.375rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; + + /* Shadows */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); +} + +/* ============================================================================ + Layout + ============================================================================ */ + +.page-header { + background: white; + border-bottom: 1px solid var(--gray-200); + padding: 1rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.page-content { + max-width: 640px; + margin: 0 auto; + padding: var(--spacing-lg); +} + +/* ============================================================================ + Form Components + ============================================================================ */ + +.form { + display: flex; + flex-direction: column; + gap: var(--spacing-md); +} + +.input-container { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.internal-input { + width: 100%; + padding: 0.75rem; + border: 1px solid var(--gray-300); + border-radius: var(--radius-md); + font-size: 1rem; + transition: all 0.2s; +} + +.internal-input:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.internal-input.error { + border-color: var(--error); +} + +/* ============================================================================ + Buttons + ============================================================================ */ + +.submit-button { + width: 100%; + padding: 0.75rem 1.5rem; + background: var(--primary); + color: white; + border: none; + border-radius: var(--radius-md); + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background 0.2s; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + min-height: 44px; /* Mobile touch target */ +} + +.submit-button:hover { + background: var(--primary-hover); +} + +.submit-button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* ============================================================================ + Utility Classes + ============================================================================ */ + +.hidden { + display: none !important; +} + +.text-red-600 { + color: var(--error); +} + +.text-sm { + font-size: 0.875rem; +} + +/* Spinner Animation */ +.spinner { + animation: spin 1s linear infinite; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* ============================================================================ + Modal + ============================================================================ */ + +.modal-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.modal-content { + background: white; + border-radius: var(--radius-lg); + padding: var(--spacing-xl); + max-width: 90%; + max-height: 90vh; + overflow-y: auto; +} + +/* ============================================================================ + Toast Notification + ============================================================================ */ + +.toast { + position: fixed; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); + background: var(--gray-900); + color: white; + padding: 1rem 1.5rem; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); + z-index: 1001; + animation: slideUp 0.3s ease-out; +} + +@keyframes slideUp { + from { + transform: translateX(-50%) translateY(100%); + opacity: 0; + } + to { + transform: translateX(-50%) translateY(0); + opacity: 1; + } +} + +/* ============================================================================ + Responsive Design + ============================================================================ */ + +@media (min-width: 768px) { + .page-content { + padding: var(--spacing-xl); + } +} +``` + +### CSS Best Practices + +1. **Use CSS Variables** for colors, spacing, etc. +2. **Mobile-first** approach (base styles for mobile, media queries for larger) +3. **Organize by sections** with clear comments +4. **Follow naming conventions** (BEM or utility-based) +5. **Include animations** (subtle, performance-conscious) + +--- + +## ⚙️ Step 4: Write JavaScript Logic + +### JavaScript Template + +```javascript +/** + * [Page Number] [Page Name] - Interactive Prototype + * Project: [Project Name] + * + * This prototype demonstrates [key functionality]. + */ + +// ============================================================================ +// STATE MANAGEMENT +// ============================================================================ + +let formData = { + // Initialize form state +}; + +// ============================================================================ +// INITIALIZATION +// ============================================================================ + +document.addEventListener('DOMContentLoaded', async () => { + console.log('📄 [Page Name] prototype loaded'); + + // Load saved data (if any) + await loadSavedData(); + + // Initialize form listeners + initializeFormListeners(); + + // Load language preference + applyLanguage(DogWeekAPI.getLanguagePreference()); +}); + +// ============================================================================ +// DATA LOADING +// ============================================================================ + +async function loadSavedData() { + try { + const user = await DogWeekAPI.getUser(); + if (user) { + console.log('👤 User loaded:', user.firstName); + // Pre-fill form if needed + } + } catch (error) { + console.error('❌ Error loading data:', error); + } +} + +// ============================================================================ +// FORM HANDLING +// ============================================================================ + +function initializeFormListeners() { + const form = document.getElementById('mainForm'); + + // Real-time validation + form.querySelectorAll('input').forEach(input => { + input.addEventListener('blur', () => validateField(input)); + input.addEventListener('input', () => clearError(input)); + }); +} + +async function handleSubmit(event) { + event.preventDefault(); + + // Validate all fields + if (!validateForm()) { + return; + } + + // Show loading state + setLoadingState(true); + + try { + // Collect form data + const formData = new FormData(event.target); + const data = Object.fromEntries(formData.entries()); + + // Call API (prototype or production) + const result = await DogWeekAPI.[relevantMethod](data); + + console.log('✅ Success:', result); + + // Show success feedback + showSuccessToast('[Success message]'); + + // Navigate to next page (after delay) + setTimeout(() => { + navigateToNextPage(); + }, 1500); + + } catch (error) { + console.error('❌ Error:', error); + showErrorBanner(error.message); + } finally { + setLoadingState(false); + } +} + +// ============================================================================ +// VALIDATION +// ============================================================================ + +function validateForm() { + let isValid = true; + + const fields = [ + { id: 'fieldName', validator: validateRequired, message: 'Field is required' }, + // Add more fields + ]; + + fields.forEach(field => { + const input = document.getElementById(field.id); + if (!field.validator(input.value)) { + showFieldError(field.id, field.message); + isValid = false; + } + }); + + return isValid; +} + +function validateField(input) { + const value = input.value.trim(); + const fieldName = input.name; + + // Example validations + if (input.required && !value) { + showFieldError(fieldName, 'This field is required'); + return false; + } + + if (input.type === 'email' && !isValidEmail(value)) { + showFieldError(fieldName, 'Please enter a valid email'); + return false; + } + + clearError(input); + return true; +} + +function validateRequired(value) { + return value && value.trim().length > 0; +} + +function isValidEmail(email) { + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); +} + +// ============================================================================ +// UI FEEDBACK +// ============================================================================ + +function showFieldError(fieldName, message) { + const errorElement = document.getElementById(`${fieldName}Error`); + const inputElement = document.getElementById(fieldName); + + if (errorElement) { + errorElement.textContent = message; + errorElement.classList.remove('hidden'); + } + + if (inputElement) { + inputElement.classList.add('error'); + } +} + +function clearError(input) { + const fieldName = input.name || input.id; + const errorElement = document.getElementById(`${fieldName}Error`); + + if (errorElement) { + errorElement.classList.add('hidden'); + } + + input.classList.remove('error'); +} + +function setLoadingState(isLoading) { + const submitBtn = document.getElementById('[page]-button-submit'); + const submitText = document.getElementById('submitButtonText'); + const submitSpinner = document.getElementById('submitButtonSpinner'); + + submitBtn.disabled = isLoading; + + if (isLoading) { + submitText.classList.add('hidden'); + submitSpinner.classList.remove('hidden'); + } else { + submitText.classList.remove('hidden'); + submitSpinner.classList.add('hidden'); + } +} + +function showSuccessToast(message) { + const toast = document.getElementById('toast'); + const toastMessage = document.getElementById('toastMessage'); + + toastMessage.textContent = message; + toast.classList.remove('hidden'); + + setTimeout(() => { + toast.classList.add('hidden'); + }, 3000); +} + +function showErrorBanner(message) { + const errorBanner = document.getElementById('networkError'); + const errorMessage = document.getElementById('networkErrorMessage'); + + errorMessage.textContent = message; + errorBanner.classList.remove('hidden'); + + setTimeout(() => { + errorBanner.classList.add('hidden'); + }, 5000); +} + +// ============================================================================ +// NAVIGATION +// ============================================================================ + +function handleBack() { + console.log('🔙 Navigating back'); + window.history.back(); + // OR: window.location.href = '../[previous-page]/Frontend/[previous-page]-Preview.html'; +} + +function navigateToNextPage() { + console.log('➡️ Navigating to next page'); + window.location.href = '../[next-page]/Frontend/[next-page]-Preview.html'; +} + +// ============================================================================ +// MULTI-LANGUAGE SUPPORT (Optional) +// ============================================================================ + +const translations = { + se: { + pageTitle: '[Swedish Title]', + submitButton: '[Swedish Submit]', + // ... all UI text + }, + en: { + pageTitle: '[English Title]', + submitButton: '[English Submit]', + // ... + } +}; + +function applyLanguage(lang) { + const t = translations[lang]; + + // Update all text elements + Object.keys(t).forEach(key => { + const element = document.getElementById(key); + if (element) { + element.textContent = t[key]; + } + }); + + // Save preference + DogWeekAPI.setLanguagePreference(lang); +} +``` + +### JavaScript Best Practices + +1. **Use async/await** for API calls +2. **Console.log key actions** (with emojis for visibility) +3. **Handle errors gracefully** (try/catch) +4. **Validate before submit** +5. **Show loading states** +6. **Always reset UI state** (finally blocks) + +--- + +## 🔌 Step 5: Integrate with Prototype API + +### Common API Patterns + +#### 1. Get Current User + +```javascript +const user = await DogWeekAPI.getUser(); +if (user) { + console.log('Logged in as:', user.firstName); +} +``` + +#### 2. Create/Update User Profile + +```javascript +const userData = { + firstName: 'Patrick', + lastName: 'Parent', + email: 'patrick@example.com', + phoneNumber: '+46701234567', +}; + +const user = await DogWeekAPI.createUserProfile(userData); +``` + +#### 3. Create Family + +```javascript +const familyData = { + name: 'The Johnsons', + description: 'Our lovely dog family', + location: 'Stockholm, Sweden', +}; + +const family = await DogWeekAPI.createFamily(familyData); +``` + +#### 4. Add Dog + +```javascript +const dogData = { + name: 'Rufus', + breed: 'Golden Retriever', + gender: 'male', + birthDate: '2020-05-15', + color: 'Golden', + picture: '[base64-image-data]', +}; + +const dog = await DogWeekAPI.addDog(dogData); +``` + +#### 5. Get Family Data + +```javascript +const family = await DogWeekAPI.getActiveFamily(); +const dogs = await DogWeekAPI.getFamilyDogs(); +const members = await DogWeekAPI.getFamilyMembers(); +``` + +--- + +## ✅ Step 6: Testing Checklist + +### Before Considering Prototype "Done" + +#### Functionality Testing + +- [ ] 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) + +#### Mobile Testing + +- [ ] Viewport is 375px wide (iPhone SE) +- [ ] All tap targets min 44x44px +- [ ] Text is readable (min 16px) +- [ ] No horizontal scroll +- [ ] Inputs don't cause zoom (iOS) +- [ ] Touch gestures work (if applicable) + +#### Code Quality + +- [ ] All Object IDs present +- [ ] Console logs helpful (not excessive) +- [ ] No console errors +- [ ] CSS organized with comments +- [ ] JS functions documented +- [ ] No hardcoded values (use variables) + +#### Accessibility + +- [ ] Keyboard navigation works +- [ ] Form labels present +- [ ] Error messages clear +- [ ] Focus states visible +- [ ] Color contrast sufficient + +#### Documentation + +- [ ] Comments explain complex logic +- [ ] TODOs noted for Supabase migration +- [ ] Known limitations documented +- [ ] README included (if needed) + +--- + +## 📚 Common Patterns Library + +### Pattern 1: Image Upload with Crop + +**Use When**: User profile pictures, dog photos, etc. + +**Files Needed**: + +- `image-crop.js` (copy from existing prototype) +- Modal HTML in main file +- CSS for crop interface + +**Implementation**: + +```javascript +function handlePictureUpload() { + document.getElementById('pictureInput').click(); +} + +document.getElementById('pictureInput').addEventListener('change', (e) => { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + showCropModal(e.target.result); + }; + reader.readAsDataURL(file); + } +}); +``` + +--- + +### Pattern 2: Searchable Dropdown (Combobox) + +**Use When**: Large lists (breeds, countries, etc.) + +**HTML**: + +```html + + + +``` + +**JavaScript**: + +```javascript +function filterOptions() { + const query = document.getElementById('searchInput').value.toLowerCase(); + const filtered = allOptions.filter((opt) => opt.toLowerCase().includes(query)); + renderOptions(filtered); +} +``` + +--- + +### Pattern 3: Multi-Language Toggle + +**Use When**: International products + +**HTML**: + +```html + +``` + +**JavaScript**: + +```javascript +function switchLanguage(lang) { + applyLanguage(lang); + DogWeekAPI.setLanguagePreference(lang); +} +``` + +--- + +### Pattern 4: Loading State + +**Use During**: API calls, navigation, heavy processing + +**Implementation**: + +```javascript +function setLoadingState(isLoading) { + const btn = document.getElementById('submitButton'); + const text = btn.querySelector('.text'); + const spinner = btn.querySelector('.spinner'); + + btn.disabled = isLoading; + text.classList.toggle('hidden', isLoading); + spinner.classList.toggle('hidden', !isLoading); +} + +// Usage +try { + setLoadingState(true); + await DogWeekAPI.someOperation(); +} finally { + setLoadingState(false); +} +``` + +--- + +### Pattern 5: Toast Notification + +**Use For**: Success messages, simple errors + +**Implementation**: + +```javascript +function showToast(message, duration = 3000) { + const toast = document.getElementById('toast'); + toast.textContent = message; + toast.classList.remove('hidden'); + + setTimeout(() => { + toast.classList.add('hidden'); + }, duration); +} + +// Usage +showToast('Dog added successfully! ✓'); +``` + +--- + +## 🚨 Common Pitfalls to Avoid + +### 1. Forgetting Object IDs + +❌ **Wrong**: `` +✅ **Right**: `` + +### 2. Not Handling Loading States + +❌ **Wrong**: Submit button stays active during API call +✅ **Right**: Disable button, show spinner, prevent double-submit + +### 3. Hardcoded Values + +❌ **Wrong**: `background-color: #2563eb;` +✅ **Right**: `background-color: var(--primary);` + +### 4. No Error Handling + +❌ **Wrong**: `const result = await API.call();` +✅ **Right**: `try { const result = await API.call(); } catch (error) { showError(error); }` + +### 5. Desktop-Only Design + +❌ **Wrong**: Hover states, small tap targets +✅ **Right**: Touch-friendly, min 44px targets + +### 6. Missing Validation Feedback + +❌ **Wrong**: Form just doesn't submit +✅ **Right**: Show specific error messages per field + +### 7. No Console Logging + +❌ **Wrong**: Silent operations +✅ **Right**: `console.log('✅ Dog added:', dog.name);` + +--- + +## 🎓 Learning Path + +### For New Prototype Creators + +**Week 1**: Study existing prototypes + +- Read `PROTOTYPE-ANALYSIS.md` +- Open 1.2 Sign In, examine code +- Test in mobile viewport +- Check console logs + +**Week 2**: Modify existing prototype + +- Copy 1.3 Profile Setup +- Change field names +- Update validation rules +- Test thoroughly + +**Week 3**: Create simple prototype from scratch + +- Pick simple page (static content + form) +- Follow this guide step-by-step +- Get code review + +**Week 4**: Create complex prototype + +- Multi-step flow +- Custom components +- Advanced interactions + +--- + +## 📖 Quick Reference + +### Object ID Naming Convention + +``` +[page]-[section]-[action] + +Examples: +- add-dog-input-name +- profile-avatar-upload +- calendar-week-next +- signin-button-google +``` + +### File Naming Convention + +``` +[Page-Number]-[Page-Name]-Preview.[ext] + +Examples: +- 1.2-Sign-In-Preview.html +- 3.1-Dog-Calendar-Booking-Preview.css +- 1.6-Add-Dog-Preview.js +``` + +### Required Meta Tag + +```html + +``` + +### Minimum Touch Target Size + +``` +44px × 44px (Apple Human Interface Guidelines) +48px × 48px (Material Design) +``` + +--- + +## ✨ Final Tips + +1. **Start simple** - Get basic version working first +2. **Test early** - Open in mobile viewport immediately +3. **Console log everything** - Makes debugging easier +4. **Copy working patterns** - Don't reinvent the wheel +5. **Ask for help** - Reference existing prototypes +6. **Document as you go** - Comments save time later +7. **Test on real devices** - Emulator != real thing + +--- + +**Remember**: A good interactive prototype is: + +- ✅ **Functional** - Actually works +- ✅ **Mobile-optimized** - Touch-friendly +- ✅ **Well-documented** - Code is clear +- ✅ **Developer-ready** - Easy to extract +- ✅ **User-testable** - Can get real feedback + +**Now go create amazing prototypes!** 🚀 diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/FILE-INDEX.md b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/FILE-INDEX.md new file mode 100644 index 00000000..1f796b81 --- /dev/null +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/FILE-INDEX.md @@ -0,0 +1,365 @@ +# Interactive Prototypes - File Index + +**Location**: `src/modules/wds/workflows/4-ux-design/interactive-prototypes/` + +--- + +## 📁 Complete File Structure + +``` +interactive-prototypes/ +│ +├── INTERACTIVE-PROTOTYPES-GUIDE.md ← START HERE (overview & quick reference) +├── PROTOTYPE-WORKFLOW.md ← Workflow overview with phase links +├── PROTOTYPE-INITIATION-DIALOG.md ← Conversation scripts for initiation +├── CREATION-GUIDE.md ← Original detailed guide (reference) +├── PROTOTYPE-ANALYSIS.md ← Dog Week analysis (examples) +│ +├── phases/ ← Micro-step workflow files +│ ├── 1-prototype-setup.md ← Phase 1: Prototype environment setup +│ ├── 2-per-page-planning.md ← Phase 2: Analyze spec & create work file +│ ├── 3-section-implementation.md ← Phase 3: Build section-by-section +│ └── 4-finalization.md ← Phase 4: Integration test & approval +│ +├── templates/ +│ ├── work-file-template.yaml ← Planning document template +│ ├── story-file-template.md ← Section implementation template +│ ├── page-template.html ← Complete HTML page template +│ ├── PROTOTYPE-ROADMAP-template.md ← Scenario roadmap template +│ ├── demo-data-template.json ← Demo data structure template +│ └── components/ +│ ├── dev-mode.html ← Dev mode toggle button +│ ├── dev-mode.js ← Dev mode logic (Shift+Click to copy IDs) +│ ├── dev-mode.css ← Dev mode styles +│ └── DEV-MODE-GUIDE.md ← Dev mode usage guide +│ +└── examples/ + └── (Dog Week prototypes as reference) +``` + +--- + +## 📚 What Each File Does + +### Core Documentation + +#### `INTERACTIVE-PROTOTYPES-GUIDE.md` +**Purpose**: Complete system overview +**For**: All agents (Freya, Saga, Idunn) +**Contains**: +- System overview +- Folder structure +- Complete workflow summary +- Key principles +- Quick reference +- Success metrics + +**Read this**: To understand the complete system + +--- + +#### `PROTOTYPE-WORKFLOW.md` +**Purpose**: Workflow overview with phase navigation +**For**: Freya (primary), other agents (reference) +**Contains**: +- Overview of all 4 phases +- Clear links to phase-specific files +- When to use each phase +- What each phase creates + +**Read this**: To understand the workflow structure + +--- + +#### `phases/1-prototype-setup.md` +**Purpose**: Prototype environment setup instructions +**Contains**: Device compatibility, design fidelity, languages, demo data creation +**Next**: Phase 2 + +--- + +#### `phases/2-per-page-planning.md` +**Purpose**: Page analysis and work file creation +**Contains**: Spec analysis, section breakdown, work file creation +**Next**: Phase 3 + +--- + +#### `phases/3-section-implementation.md` +**Purpose**: Section-by-section building +**Contains**: Story creation, implementation, testing, approval loop +**Next**: Phase 4 or repeat for next section + +--- + +#### `phases/4-finalization.md` +**Purpose**: Integration test and completion +**Contains**: Final test, quality checklist, next steps +**Next**: New page (Phase 2) or new scenario (Phase 1) + +--- + +#### `PROTOTYPE-INITIATION-DIALOG.md` +**Purpose**: Conversation scripts for initiation +**For**: Freya (exact scripts to follow) +**Contains**: +- Scenario initiation questions +- Per-page section breakdown prompts +- Example complete exchange + +**Read this**: For exact conversation patterns + +--- + +#### `CREATION-GUIDE.md` +**Purpose**: Original detailed guide +**For**: Deep dives, specific techniques +**Contains**: +- Detailed file structure explanations +- Step-by-step creation process +- Component patterns +- Testing strategies +- Common patterns library + +**Read this**: For detailed technical reference + +--- + +#### `PROTOTYPE-ANALYSIS.md` +**Purpose**: Dog Week case study +**For**: Learning from examples +**Contains**: +- Analysis of Dog Week prototypes +- What works well +- Patterns to follow +- Lessons learned +- Quality metrics + +**Read this**: To see real-world examples + +--- + +### Templates + +#### `templates/work-file-template.yaml` +**Purpose**: Planning document +**When to use**: Start of EVERY prototype +**Created**: Once per page at beginning +**Contains**: +- Metadata (page info, device compatibility) +- Design tokens (Tailwind config) +- Page requirements (from spec) +- Demo data needs +- Object ID map +- Section breakdown (4-8 sections) +- Testing checklist + +**Use this**: To create work file (plan BEFORE coding) + +--- + +#### `templates/story-file-template.md` +**Purpose**: Section implementation guide +**When to use**: Just-in-time (right before implementing each section) +**Created**: Once per section (4-8 per page) +**Contains**: +- Section goal +- What to build (HTML/JS) +- Tailwind classes to use +- Dependencies +- Acceptance criteria +- Test instructions +- Common issues + +**Use this**: To create story file before each section + +--- + +#### `templates/page-template.html` +**Purpose**: Complete HTML page structure +**When to use**: Creating new HTML page +**Created**: Once per page (at start of Section 1) +**Contains**: +- Complete HTML structure +- Tailwind CDN setup +- Tailwind config inline +- Header example +- Form examples (input, textarea, split button) +- Submit button with loading state +- Toast notification +- Error banner +- Modal example (commented) +- Shared script includes +- Inline JavaScript template + +**Use this**: As starting point for new page HTML + +--- + +#### `templates/PROTOTYPE-ROADMAP-template.md` +**Purpose**: Scenario overview document +**When to use**: Start of scenario development +**Created**: Once per scenario +**Contains**: +- Scenario overview +- Device compatibility details +- Folder structure explanation +- Shared resources documentation +- Component documentation +- Prototype status table +- Testing requirements +- Troubleshooting guide + +**Use this**: To create roadmap for scenario + +--- + +#### `templates/demo-data-template.json` +**Purpose**: Demo data structure +**When to use**: Setting up scenario demo data +**Created**: Once per scenario (modify as needed) +**Contains**: +- User object +- Family object +- Members array +- Dogs array (or other entities) +- All fields with examples + +**Use this**: To create demo-data.json file + +--- + +## 🎯 Which File When? + +### Starting New Scenario +1. Read: `PROTOTYPE-WORKFLOW.md` (understand phases) +2. Follow: `phases/1-prototype-setup.md` (setup) +3. Use: `PROTOTYPE-ROADMAP-template.md` → Create roadmap +4. Use: `demo-data-template.json` → Create demo data + +### Starting New Page +1. Follow: `phases/2-per-page-planning.md` (analyze) +2. Use: `work-file-template.yaml` → Create work file +3. Get approval +4. Follow: `phases/3-section-implementation.md` + +### Implementing Each Section +1. Follow: `phases/3-section-implementation.md` (loop) +2. Use: `story-file-template.md` → Create story file (just-in-time) +3. Implement in HTML (incrementally) +4. Test +5. Get approval +6. Repeat for next section + +### Finishing Page +1. Follow: `phases/4-finalization.md` (integration test) +2. Get final approval +3. Choose: New page, new scenario, or done + +### Need Help +1. Check: `PROTOTYPE-WORKFLOW.md` (phase overview) +2. Check: `phases/[N]-*.md` (specific phase) +3. Check: `CREATION-GUIDE.md` (detailed reference) +4. Check: `PROTOTYPE-ANALYSIS.md` (examples) + +--- + +## 📊 File Relationships + +``` +PROTOTYPE-WORKFLOW.md (overview) + ├─ phases/1-prototype-setup.md + ├─ phases/2-per-page-planning.md + ├─ phases/3-section-implementation.md + └─ phases/4-finalization.md + +PROTOTYPE-INITIATION-DIALOG.md + └─ Referenced by: phases/1-prototype-setup.md (conversation scripts) + +work-file-template.yaml + └─ Used in: phases/2-per-page-planning.md + └─ Each section becomes: story-file-template.md (later) + +story-file-template.md + └─ Used in: phases/3-section-implementation.md (just-in-time) + └─ Guides: Implementation in HTML + +page-template.html + └─ Used in: phases/3-section-implementation.md (Section 1 only) + └─ Modified: Section by section + +PROTOTYPE-ROADMAP-template.md + └─ Used in: phases/1-scenario-init.md + └─ Updated: As prototypes complete +``` + +--- + +## 🚀 Quick Start Paths + +### Path 1: I want to understand the system +1. `INTERACTIVE-PROTOTYPES-GUIDE.md` (overview) +2. `PROTOTYPE-WORKFLOW.md` (workflow phases) +3. `PROTOTYPE-ANALYSIS.md` (examples) + +### Path 2: I want to create my first prototype +1. `PROTOTYPE-WORKFLOW.md` (start here) +2. `phases/1-prototype-setup.md` (follow step-by-step) +3. `phases/2-per-page-planning.md` (next) +4. `phases/3-section-implementation.md` (build loop) +5. `phases/4-finalization.md` (finish) + +### Path 3: I need specific technical details +1. `CREATION-GUIDE.md` (detailed techniques) +2. `PROTOTYPE-ANALYSIS.md` (real examples) +3. `page-template.html` (code examples) + +### Path 4: I'm stuck on something +1. `phases/[current-phase].md` (specific phase help) +2. `CREATION-GUIDE.md` → Common Pitfalls section +3. `templates/components/DEV-MODE-GUIDE.md` (if dev mode issue) + +--- + +## 📝 Template Usage Summary + +| Template | When Created | How Many | Purpose | +|----------|--------------|----------|---------| +| work-file | Start of page | 1 per page | Complete plan | +| story-file | Before each section | 4-8 per page | Section implementation | +| page | Start of Section 1 | 1 per page | HTML structure | +| roadmap | Start of scenario | 1 per scenario | Scenario overview | +| demo-data | Setup scenario | 1 per scenario | Auto-loading data | + +--- + +## ✅ Checklist: Do I Have Everything? + +**For Freya to create prototypes**: +- [x] `INTERACTIVE-PROTOTYPES-GUIDE.md` (overview) +- [x] `PROTOTYPE-WORKFLOW.md` (workflow overview) +- [x] `phases/1-prototype-setup.md` (Phase 1) +- [x] `phases/2-per-page-planning.md` (Phase 2) +- [x] `phases/3-section-implementation.md` (Phase 3) +- [x] `phases/4-finalization.md` (Phase 4) +- [x] `PROTOTYPE-INITIATION-DIALOG.md` (conversation scripts) +- [x] `work-file-template.yaml` +- [x] `story-file-template.md` +- [x] `page-template.html` +- [x] `PROTOTYPE-ROADMAP-template.md` +- [x] `demo-data-template.json` +- [x] `templates/components/dev-mode.*` (dev mode feature) + +**For learning**: +- [x] `CREATION-GUIDE.md` (detailed) +- [x] `PROTOTYPE-ANALYSIS.md` (examples) + +**For reference**: +- [x] Dog Week examples (real prototypes) + +--- + +**All templates and micro-step instructions are ready!** 🎉 + +Next step: Activate Freya and follow `PROTOTYPE-WORKFLOW.md` → `phases/1-prototype-setup.md` + diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/INTERACTIVE-PROTOTYPES-GUIDE.md b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/INTERACTIVE-PROTOTYPES-GUIDE.md new file mode 100644 index 00000000..56f127cf --- /dev/null +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/INTERACTIVE-PROTOTYPES-GUIDE.md @@ -0,0 +1,380 @@ +# Interactive Prototypes - Getting Started Guide + +**Version**: 1.0 +**Last Updated**: December 10, 2025 +**For**: WDS Agents (Freya, Saga, Idunn) + +--- + +## 🎯 Overview + +This system creates **production-ready, self-contained interactive prototypes** using: + +✅ **Tailwind CSS** - No separate CSS files +✅ **Vanilla JavaScript** - Components in shared folders +✅ **Section-by-section** - Approval gates prevent errors +✅ **Just-in-time stories** - Created as needed, not all upfront +✅ **Demo data auto-loading** - Works immediately +✅ **Self-contained** - Zip & share, works anywhere + +--- + +## 📁 Folder Structure (Per Scenario) + +``` +[Scenario]/Prototype/ +│ +├── [Page-1].html ← HTML in ROOT (double-click to open) +├── [Page-2].html ← HTML in ROOT +├── [Page-3].html ← HTML in ROOT +│ +├── shared/ ← Shared code (ONE COPY) +│ ├── prototype-api.js +│ ├── init.js +│ └── utils.js +│ +├── components/ ← Reusable components (ONE COPY) +│ ├── image-crop.js +│ ├── toast.js +│ ├── modal.js +│ └── form-validation.js +│ +├── pages/ ← Page-specific scripts (only if >150 lines) +│ ├── [complex-page].js +│ └── [another-complex-page].js +│ +├── data/ ← Demo data (auto-loads) +│ ├── demo-data.json +│ └── [additional-data].json +│ +├── assets/ ← Images, icons (optional) +│ ├── images/ +│ └── icons/ +│ +├── stories/ ← Section dev files (created just-in-time) +│ ├── [Page].1-[section].md +│ ├── [Page].2-[section].md +│ └── ... +│ +├── work/ ← Planning files (created at start) +│ ├── [Page]-Work.yaml +│ └── ... +│ +└── PROTOTYPE-ROADMAP.md ← ONE document with everything +``` + +--- + +## 🔄 Complete Workflow + +### Phase 1: INITIATION & PLANNING + +1. **User requests** prototype for [Page] +2. **Agent asks** about device compatibility +3. **Agent creates** `work/[Page]-Work.yaml` (complete plan) +4. **User reviews** and approves plan +5. **Ready to implement** section-by-section + +### Phase 2: SECTION-BY-SECTION IMPLEMENTATION + +**For each section (1-N)**: + +1. **Agent announces** section +2. **Agent creates** story file (just-in-time) +3. **Agent implements** in HTML (root location from start) +4. **Agent presents** for testing +5. **User tests** and gives feedback +6. **Agent fixes** any issues (loop until approved) +7. **User approves** → Move to next section + +### Phase 3: FINALIZATION + +1. **All sections complete** +2. **Final integration test** +3. **User approves** +4. **Prototype complete** (already in final location) + +--- + +## 📄 Templates Available + +### In `templates/` folder: + +1. **`work-file-template.yaml`** + - Complete planning document + - Created ONCE at start + - High-level section breakdown + +2. **`story-file-template.md`** + - Detailed section implementation guide + - Created JUST-IN-TIME before each section + - Documents what was actually built + +3. **`page-template.html`** + - Complete HTML page with Tailwind + - Inline JavaScript examples + - All common patterns included + +4. **`PROTOTYPE-ROADMAP-template.md`** + - Scenario overview document + - One per scenario Prototype folder + +5. **`demo-data-template.json`** + - Demo data structure + - Auto-loads on first page open + +--- + +## 🎨 Key Principles + +### 1. Tailwind First +- Use Tailwind CDN +- Inline config for project colors +- Custom CSS only for what Tailwind can't do +- No separate CSS files + +### 2. Pages in Root +- All HTML files in Prototype root +- Easy to find and open +- Simple relative paths +- No nested page folders + +### 3. ONE COPY of Shared Code +- `shared/` contains ONE copy of each utility +- `components/` contains ONE copy of each component +- Update once → affects all pages +- Zero duplication + +### 4. Self-Contained +- Zip entire Prototype folder +- Works on any computer +- No server needed +- No setup needed + +### 5. Section-by-Section +- Break page into 4-8 sections +- Build one section at a time +- Test after each section +- Approval gate before next section +- Prevents errors from compounding + +### 6. Just-in-Time Stories +- Create story file RIGHT BEFORE implementing each section +- Not all at once upfront +- Allows flexibility to adjust based on feedback +- Documents exactly what was built (including changes) + +### 7. Build in Final Location +- No temp folder +- Create file in root from start +- Add sections incrementally +- Use "🚧" placeholders for upcoming sections +- File grows organically + +--- + +## 🛠️ Tools & Technologies + +**Required**: +- Tailwind CSS (via CDN) +- Vanilla JavaScript (no frameworks) +- SessionStorage (for demo data) + +**Optional**: +- Google Fonts (Inter recommended) +- Custom fonts in `assets/fonts/` + +**Not Needed**: +- Node.js / npm +- Build process +- CSS preprocessors +- Bundlers + +--- + +## 📚 For Agents + +### Freya (UX/UI Designer) +**Primary role**: Create interactive prototypes + +**Read**: +1. `FREYA-WORKFLOW-INSTRUCTIONS.md` (complete step-by-step) +2. `templates/` (use these for all work) +3. Dog Week examples (reference implementations) + +**Create**: +1. Work files (planning) +2. Story files (just-in-time) +3. HTML pages (section-by-section) +4. Demo data (if new data entities) + +--- + +### Saga (Analyst) +**Role in prototypes**: Provide specifications, validate requirements + +**Read**: +1. Work files (understand planned sections) +2. Story files (review implementation details) +3. Completed prototypes (validate against requirements) + +**Create**: +1. Page specifications (source for work files) +2. User flow documentation +3. Success criteria definitions + +--- + +### Idunn (PM) +**Role in prototypes**: Project tracking, stakeholder communication + +**Read**: +1. `PROTOTYPE-ROADMAP.md` (status tracking) +2. Work files (understand scope) +3. Completed prototypes (demo to stakeholders) + +**Create**: +1. Project timelines +2. Stakeholder reports +3. Testing plans + +--- + +## 🎓 Learning Path + +### Week 1: Understand the System +- Read this guide +- Read `FREYA-WORKFLOW-INSTRUCTIONS.md` +- Open Dog Week prototypes +- Test in browser +- Check console logs + +### Week 2: Study Examples +- Read 1.2-Sign-In.html (simple) +- Read 1.6-Add-Dog.html (medium) +- Read 3.1-Calendar.html (complex) +- Compare to their work files +- Review story files + +### Week 3: Modify Example +- Copy existing prototype +- Change fields, text, colors +- Test modifications +- Understand file relationships + +### Week 4: Create New Prototype +- Start with simple page +- Follow workflow exactly +- Build section-by-section +- Get feedback, iterate + +--- + +## ✅ Quality Standards + +Every prototype must have: + +**Functionality**: +- [ ] All interactions work +- [ ] Form validation correct +- [ ] Loading states display +- [ ] Success/error feedback shows +- [ ] Navigation works +- [ ] Data persists + +**Code Quality**: +- [ ] All Object IDs present +- [ ] Tailwind classes used properly +- [ ] Console logs helpful +- [ ] No console errors +- [ ] Inline JS < 150 lines (or external file) +- [ ] Functions documented + +**Mobile**: +- [ ] Tested at target width +- [ ] Touch targets min 44px +- [ ] No horizontal scroll +- [ ] Text readable + +**Documentation**: +- [ ] Work file complete +- [ ] Story files for all sections +- [ ] Changes documented +- [ ] Status updated + +--- + +## 🚀 Benefits + +| Aspect | Benefit | +|--------|---------| +| **For Designers** | No coding complexity, visual results fast | +| **For Users** | Real interactions, usable for testing | +| **For Developers** | Clear implementation reference | +| **For Stakeholders** | Works immediately, no setup | +| **For Project** | Self-contained, easy to share | + +--- + +## 📊 Success Metrics + +**Speed**: 30-45 min per page (section-by-section) +**Quality**: Production-ready code +**Error Rate**: Low (approval gates prevent issues) +**Flexibility**: High (adjust as you go) +**Reusability**: High (shared components) +**Maintainability**: High (ONE copy of shared code) + +--- + +## 🆘 Need Help? + +**Question**: "How do I start?" +**Answer**: Read `FREYA-WORKFLOW-INSTRUCTIONS.md` and follow step-by-step + +**Question**: "Which template do I use?" +**Answer**: +- Planning → `work-file-template.yaml` +- Implementing → `story-file-template.md` (just-in-time) +- Coding → `page-template.html` + +**Question**: "How do I create demo data?" +**Answer**: Copy `demo-data-template.json`, fill in values, save to `data/` folder + +**Question**: "What if section needs changes?" +**Answer**: Make changes directly in HTML, document in story file, re-test, get approval + +**Question**: "How do I share prototype?" +**Answer**: Zip entire Prototype folder, send to stakeholder + +--- + +## 📝 Quick Reference + +**Start new prototype**: Create work file → Get approval → Build section 1 +**Add section**: Create story → Implement → Test → Get approval → Next section +**Fix issue**: Update HTML → Re-test → Get approval +**Complete prototype**: Final integration test → Update status → Done +**Share prototype**: Zip Prototype folder → Send + +--- + +## 🎯 Remember + +1. **Tailwind first** - Use classes, not custom CSS +2. **Pages in root** - Easy to find and open +3. **ONE COPY** - No duplication of shared code +4. **Section-by-section** - Approval gates prevent errors +5. **Just-in-time stories** - Create when needed, not all upfront +6. **Build in final location** - No temp folder needed +7. **Test after each section** - Don't wait until the end +8. **Object IDs always** - Every interactive element +9. **Demo data ready** - Auto-loads on first use +10. **Self-contained** - Zip & works anywhere + +--- + +**You are ready to create production-ready interactive prototypes!** 🚀 + +For detailed step-by-step instructions, see: `FREYA-WORKFLOW-INSTRUCTIONS.md` + diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/PROTOTYPE-ANALYSIS.md b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/PROTOTYPE-ANALYSIS.md new file mode 100644 index 00000000..070a87f2 --- /dev/null +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/PROTOTYPE-ANALYSIS.md @@ -0,0 +1,832 @@ +# Interactive Prototype Analysis - Dog Week Project + +**Date**: December 10, 2025 +**Project**: Dog Week Mobile Web App +**Analyzed By**: WDS System +**Purpose**: Document proven interactive prototype patterns for WDS agents + +--- + +## 🎯 Executive Summary + +The Dog Week project demonstrates **production-ready interactive prototypes** that bridge the gap between design specifications and developer handoff. These prototypes are: + +✅ **Fully functional** - Real interactions, state management, data persistence +✅ **Mobile-optimized** - Responsive design with touch interactions +✅ **Developer-ready** - Clean code, documented patterns, easy to extract +✅ **User-testable** - Can be used for real usability testing +✅ **Backend-agnostic** - Uses abstraction layer for easy Supabase integration + +--- + +## 📋 Prototype Inventory + +### Analyzed Prototypes + +| Page | Location | Features Demonstrated | +| ------------------------ | --------------------------------------------------------------------- | -------------------------------------------------------------------------- | +| **1.2 Sign In** | `C-Scenarios/01-Customer-Onboarding/1.2-Sign-In/Frontend/` | Google SSO, Magic Link, Multi-language, State transitions | +| **1.3 Profile Setup** | `C-Scenarios/01-Customer-Onboarding/1.3-Profile-Setup/Frontend/` | Image upload/crop, Form validation, Multi-language, Terms acceptance | +| **1.6 Add Dog** | `C-Scenarios/01-Customer-Onboarding/1.6-Add-Dog/Frontend/` | Image cropping, Breed search/filter, Split buttons, Character counters | +| **3.1 Calendar Booking** | `C-Scenarios/03-Booking-Dog-Walks/3.1-Dog-Calendar-Booking/Frontend/` | Swedish week calendar, Leaderboard, Dev tools menu, Multi-member switching | + +--- + +## 🏗️ Architecture Patterns + +### File Structure (Per Page) + +``` +1.2-Sign-In/ +├── Frontend/ +│ ├── 1.2-Sign-In-Preview.html ← Main HTML with structure +│ ├── 1.2-Sign-In-Preview.css ← Page-specific styles +│ ├── 1.2-Sign-In-Preview.js ← Page logic & interactions +│ └── prototype-api.js ← Shared API abstraction layer +``` + +**Why this works:** + +- **Separation of concerns** - HTML, CSS, JS clearly divided +- **Reusable API layer** - `prototype-api.js` shared across all pages +- **Easy extraction** - Developers can grab entire folder +- **Version control friendly** - Each page isolated, easy to track changes + +--- + +## 🔧 Core Innovation: Prototype API Layer + +### The `prototype-api.js` Abstraction + +**Location**: `prototype-api.js` (shared across all prototypes) + +**Purpose**: Simulate backend API calls using sessionStorage, with clear path to Supabase migration + +### Architecture Overview + +```javascript +const DogWeekAPI = { + config: { + mode: 'prototype', // Switch to 'production' later + storagePrefix: 'dogweek_' + }, + + // User operations + async getUser() { ... }, + async createUserProfile(userData) { ... }, + async signInWithEmail(email) { ... }, + + // Family operations + async createFamily(familyData) { ... }, + async getActiveFamily() { ... }, + + // Dog operations + async addDog(dogData) { ... }, + async getFamilyDogs() { ... }, + + // Utility + clearAllData() { ... }, + getDebugInfo() { ... } +}; +``` + +### Key Features + +#### 1. Mode Switching + +```javascript +config: { + mode: 'prototype', // or 'production' + supabaseUrl: null, + supabaseKey: null +} +``` + +**Benefit**: Same calling code works in prototype and production + +#### 2. Async/Await Pattern + +```javascript +async getUser() { + await this._delay(); // Simulate network latency + + if (this.config.mode === 'prototype') { + return this._storage.get('currentUser'); + } else { + // TODO: Replace with Supabase auth.getUser() + return null; + } +} +``` + +**Benefit**: Realistic timing, clear migration path with TODO comments + +#### 3. SessionStorage Abstraction + +```javascript +_storage: { + get(key) { + const prefixedKey = DogWeekAPI.config.storagePrefix + key; + return JSON.parse(sessionStorage.getItem(prefixedKey)); + }, + set(key, value) { ... }, + remove(key) { ... } +} +``` + +**Benefit**: Easy to swap storage backend without changing calling code + +#### 4. Console Logging + +```javascript +console.log('🐕 Adding dog to family:', dog.name); +console.log('👤 Creating user profile:', user); +console.log('🔐 Signing in with email:', email); +``` + +**Benefit**: Developers can track data flow, test without backend + +--- + +## 🎨 UI/UX Patterns + +### 1. Multi-Language Support (1.2 Sign In) + +**Implementation**: + +```javascript +const translations = { + se: { + welcomeTitle: 'Välkommen tillbaka', + welcomeSubtitle: 'Logga in på ditt konto', + // ... all UI text + }, + en: { + welcomeTitle: 'Welcome back', + welcomeSubtitle: 'Sign in to your account', + // ... + }, +}; + +function applyLanguage(lang) { + document.getElementById('welcomeTitle').textContent = translations[lang].welcomeTitle; + // ... update all elements +} +``` + +**Why it's excellent**: + +- ✅ All text centralized in one place +- ✅ Easy to add new languages +- ✅ Preserves language preference in storage +- ✅ Instant switching without reload + +**Extracted Pattern**: Language selector in header + translation dictionary + +--- + +### 2. Image Upload with Cropping (1.3 Profile Setup, 1.6 Add Dog) + +**Flow**: + +1. User clicks upload button → file picker +2. Image loaded → **crop modal appears** +3. User adjusts zoom/position → circle mask overlay +4. Confirm → cropped image displayed in avatar +5. Image stored as base64 in sessionStorage + +**Technical Implementation**: + +```javascript +function handlePictureUpload() { + document.getElementById('pictureInput').click(); +} + +pictureInput.addEventListener('change', (e) => { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + showCropModal(e.target.result); + }; + reader.readAsDataURL(file); + } +}); +``` + +**Crop Modal Features**: + +- Circle mask overlay (CSS clip-path) +- Zoom slider (10-200%) +- Drag-to-reposition +- "Replace Image" and "Cancel" options +- Final confirm button + +**Why it's production-ready**: + +- ✅ Real image manipulation (not just display) +- ✅ Mobile-touch friendly +- ✅ Stores base64 for easy API upload later +- ✅ Handles aspect ratios and constraints + +--- + +### 3. Breed Combobox with Search (1.6 Add Dog) + +**Pattern**: Custom combobox (not native select) with: + +- Button trigger showing selected breed +- Popover with search input +- Filtered list of options +- "No results" state with custom option hint + +**Implementation**: + +```javascript +function handleBreedSearch(query) { + const filtered = dogBreeds.filter((breed) => breed.toLowerCase().includes(query.toLowerCase())); + + if (filtered.length === 0) { + showNoResults(); + } else { + renderBreedSuggestions(filtered); + } +} +``` + +**Why this pattern is superior to native ` +``` + +**Primary Button**: +```html + + + + + 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 new file mode 100644 index 00000000..fa05561d --- /dev/null +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/components/dev-mode.js @@ -0,0 +1,464 @@ +/** + * 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 + * - Hold Shift + Click any element to copy its Object ID + * - 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) + * - Hold Shift key (outline turns green) + * - Click while holding Shift to copy Object ID + * - Prototype works normally without Shift held + * - **Shift is disabled when typing in form fields** (input, textarea, etc.) + */ + +// ============================================================================ +// DEV MODE STATE +// ============================================================================ + +let devModeActive = false; +let shiftKeyPressed = false; +let currentHighlightedElement = null; + +// ============================================================================ +// INITIALIZATION +// ============================================================================ + +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;'); +} + +// ============================================================================ +// KEYBOARD SHORTCUTS +// ============================================================================ + +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;'); + } + } + }); +} + +// ============================================================================ +// TOGGLE BUTTON +// ============================================================================ + +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(); + } + } + }); +} + +// ============================================================================ +// HOVER HIGHLIGHT +// ============================================================================ + +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(); + } + }); +} + +// ============================================================================ +// CLICK TO COPY +// ============================================================================ + +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); + + return false; + }, true); // Capture phase +} + +// ============================================================================ +// HELPER FUNCTIONS +// ============================================================================ + +function findElementWithId(element) { + let current = element; + let attempts = 0; + + while (current && !current.id && attempts < 10) { + current = current.parentElement; + attempts++; + } + + return current; +} + +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; +} + +function isSystemElement(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'); +} + +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; +} + +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; +} + +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})`; +} + +function clearHighlight() { + 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'; +} + +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 { + 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); +} + +function showCopyFeedback(element, objectId) { + // Create feedback overlay + const feedback = document.createElement('div'); + feedback.textContent = '✓ Copied: ' + objectId; + feedback.style.cssText = ` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #10B981; + color: #fff; + padding: 16px 32px; + border-radius: 8px; + font-size: 16px; + font-weight: 600; + z-index: 100000; + box-shadow: 0 10px 25px rgba(0,0,0,0.3); + 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); +} + +// Add CSS animation +const style = document.createElement('style'); +style.textContent = ` + @keyframes fadeInOut { + 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } + 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } + 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } + 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } + } +`; +document.head.appendChild(style); + +// ============================================================================ +// EXPORT +// ============================================================================ + +// Make available globally +window.initDevMode = initDevMode; + +// Auto-initialize if this is included as module +if (typeof module !== 'undefined' && module.exports) { + module.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 new file mode 100644 index 00000000..5dd2f42f --- /dev/null +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/demo-data-template.json @@ -0,0 +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" + }, + "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 diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/page-template.html b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/page-template.html new file mode 100644 index 00000000..c76705f0 --- /dev/null +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/page-template.html @@ -0,0 +1,465 @@ + + + + + + [Page-Number] [Page Name] - [Project Name] + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +

+ [Page Title] +

+ + +
+ + + +
+ + +
+
+ + +
+ + + +
+ + +
+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/story-file-template.md b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/story-file-template.md new file mode 100644 index 00000000..9215d307 --- /dev/null +++ b/src/modules/wds/workflows/4-ux-design/interactive-prototypes/templates/story-file-template.md @@ -0,0 +1,167 @@ +# Story [Page].[Section]: [Page Name] - [Section Name] + +**Page**: [Page Number] [Page Name] +**Section**: [N] of [Total] +**Complexity**: Simple | Medium | Complex +**Estimated Time**: [X] minutes + +--- + +## 🎯 Goal + +[Brief description of what this section accomplishes] + +--- + +## 📋 What to Build + +### HTML Elements + +```html + +
+ +
+``` + +### JavaScript (if needed) + +```javascript +// [Description of JavaScript functionality] +function [functionName]() { + // Implementation +} +``` + +### Tailwind Classes to Use + +**Key classes for this section**: +- `[class-category]`: `[specific-classes]` +- `[class-category]`: `[specific-classes]` + +**Example combinations**: +```html + + + + +