diff --git a/.github/skills/design-thinking/demo-setup/SKILL.md b/.github/skills/design-thinking/demo-setup/SKILL.md new file mode 100644 index 000000000..4de9719ff --- /dev/null +++ b/.github/skills/design-thinking/demo-setup/SKILL.md @@ -0,0 +1,324 @@ +--- +name: demo-setup +description: 'Repeatable HVE Core demo setup that simulates DT Coach sessions with a customer persona and scaffolds a hi-fi prototype - Brought to you by microsoft/hve-core' +user-invocable: true +metadata: + authors: "microsoft/hve-core" + spec_version: "1.0" + last_updated: "2026-05-22" +--- + +# Demo Setup + +## Overview + +Creates demo-ready prototypes by guiding you through a simulated Design Thinking Coach session with a customer persona, then scaffolding a hi-fi prototype. The skill generates a customer persona brief with realistic conversation seeds, accelerates through DT Methods 1 through 6 with simulated customer dialogue, and hands off to the hifi-prototype skill for Method 7 scaffolding. The result is a complete, runnable demo with a presenter's walkthrough guide and a video script for recording. + +Primary audience: new users learning HVE Core tools. + +Core design constraints: + +* Every demo starts with a customer persona brief that drives the simulated conversation. +* DT Coach interactions use accelerated pacing (2 to 3 exchanges per method) for demo efficiency. +* The hifi-prototype skill handles all scaffold generation and experiment framing. +* Presenter's guide included so demos are repeatable without memorizing the flow. +* Demo video script generated for recording a polished walkthrough video. + +## Prerequisites + +* DT Coach agent accessible (provided by the HVE Core extension) +* hifi-prototype skill accessible (workspace `.github/skills/hifi-prototype/`) +* `.copilot-tracking/` directory exists at the workspace root + +## Quick Start + +Run a demo with custom inputs: + +1. Invoke `/demo-setup` with `customer={name}`, `industry={vertical}`, and optionally `persona` and `problem`. +2. The DT Coach walks through Methods 1 through 6 with a generated persona and conversation seeds. +3. At Method 7 the hifi-prototype skill scaffolds a runnable prototype. +4. Open `index.html` in a browser and follow the presenter's guide in `README.md`. + +## When to Use + +- Setting up a demo for a customer, partner, or internal team to showcase HVE Core tooling +- Onboarding new users who need to see the DT Coach and prototype workflow end to end +- Preparing a conference talk, workshop, or training session that walks through the tools +- Creating a reference demo that others can replicate independently + +## When Not to Use + +- Running a real Design Thinking engagement with actual stakeholders (use the DT Coach directly) +- Building a production prototype without the demo scaffolding and walkthrough +- Creating a static slide deck or documentation (use the canonical deck or PowerPoint skill) +- The audience already knows the tools and needs advanced workflow guidance + +## Inputs + +| Input | Required | Description | +|---------------|----------|-------------------------------------------------------------------------------------------| +| `customer` | Yes | Customer name or organization for the demo scenario | +| `industry` | Yes | Industry vertical (field service, government, healthcare, manufacturing, energy) | +| `persona` | No | End-user persona name and role. Generated from customer and industry context when omitted | +| `problem` | No | Brief problem statement. Inferred from industry patterns when omitted | +| `accelerated` | No | Whether to use accelerated DT method pacing for demo purposes. Defaults to `true` | + +## Customer Persona Brief Template + +The skill generates a customer persona brief before starting the DT Coach session. This brief drives all simulated customer interactions through Methods 1 through 6. + +Save location: `.copilot-tracking/dt/{project-slug}/context/customer-persona-brief.md` + +### Organization Profile + +| Field | Description | +|----------|---------------------------------------------------------------------| +| Name | Organization name | +| Industry | Industry vertical and sub-sector | +| Size | Employee count and scale indicators | +| Context | Business context, market position, and relevant operational details | + +### Persona Profile + +| Field | Description | +|--------------|-------------------------------------------------| +| Name | Full name of the persona | +| Role | Job title and department | +| Daily work | Typical workday activities and responsibilities | +| Frustrations | Top 3 to 5 pain points in current workflow | +| Goals | What success looks like for this person | + +### Problem Scenario + +| Field | Description | +|-----------------------|--------------------------------------------------------| +| Specific situation | Concrete instance of the problem occurring | +| Constraints | Budget, timeline, regulatory, or technical limitations | +| Stakeholders affected | Who else feels the impact of this problem | +| Existing workarounds | How the persona currently copes with the problem | + +### Conversation Seeds + +Conversation seeds provide realistic customer responses that the DT Coach uses during simulated interactions. Each seed matches the coaching focus of its method. + +| Method | Seed Focus | Example Response Pattern | +|------------------|------------------------------------------------------|--------------------------------------------------------------------------------------| +| M1 Scope | What the customer says about their problem initially | Describes the pain point in their own words, mentions what prompted the conversation | +| M2 Research | Daily workflow description and pain points | Walks through a typical day, highlights where things break down | +| M3 Synthesis | Reactions to synthesized themes | Confirms or challenges pattern accuracy, adds nuance from their experience | +| M4 Brainstorming | What excites and concerns them about ideas | Responds to feasibility, flags organizational constraints, identifies quick wins | +| M5 Concepts | Feedback on visual concepts | Reacts to desirability, viability, and feasibility of proposed solutions | +| M6 Lo-Fi | Reactions to paper prototypes | Points out usability friction, suggests workflow changes, identifies missing steps | + +### Domain Vocabulary + +Industry-specific terms the persona would naturally use in conversation. Include 10 to 15 terms with brief definitions for context. + +## Workflow + +Follow the six-step workflow to set up a complete HVE Core demo. Each step builds on the previous one. + +| Step | Name | Purpose | +|------|-----------------------------|------------------------------------------------------------------| +| 1 | Define Customer Scenario | Generate the customer context and persona brief from user inputs | +| 2 | Initialize DT Coach Session | Create project structure and start the coaching session | +| 3 | Guided DT Methods 1-6 | Accelerated coaching with simulated customer conversations | +| 4 | Prototype Scaffold | Transition to Method 7 and generate the runnable prototype | +| 5 | Demo Walkthrough Guide | Generate the presenter's guide and finalize the demo | +| 6 | Demo Video Script | Generate a narrated video script for recording the demo | + +### Step 1: Define Customer Scenario + +Accept customer context from user inputs and generate the persona brief. + +1. Generate a Customer Persona Brief from the `customer`, `industry`, `persona`, and `problem` inputs. +2. Fill all sections of the Customer Persona Brief Template, including conversation seeds tailored to the industry and problem. +3. Derive the project slug from the customer name: strip all characters except letters, digits, and spaces, collapse consecutive spaces, then lowercase and replace spaces with hyphens (for example, `Contoso Manufacturing` becomes `contoso-manufacturing`, `O'Brien & Co.` becomes `obrien-co`). If the resulting slug is empty, prompt the user for a valid customer name. +4. Save the brief to `.copilot-tracking/dt/{project-slug}/context/customer-persona-brief.md` using the project slug derived above. + +Checkpoint: persona brief exists with all sections populated. + +### Step 2: Initialize DT Coach Session + +Create the project structure and start the DT Coach session with demo context. + +1. Use the project slug derived in Step 1. +2. Initialize `coaching-state.md` with `initial_classification` set to `frozen` and add a `session_mode: demo` field under the `project` block to signal accelerated pacing. +3. Include at minimum these fields: `project.slug`, `project.name`, `project.initial_classification: frozen`, `project.session_mode: demo`, `current.method: 1`, `current.space: problem`, `current.phase: session-init`. +4. The DT Coach loads the customer persona brief as simulated customer context. +5. Begin Method 1 with the DT Coach greeting and session initialization. + +Checkpoint: coaching-state.md exists with demo `initial_classification` and Method 1 active. + +### Step 3: Guided DT Methods 1-6 (Accelerated Demo Mode) + +The DT Coach guides through each method with simulated customer conversations drawn from the persona brief. + +1. At each method, the persona brief's conversation seeds provide realistic customer responses. +2. In accelerated mode, each method completes in 2 to 3 exchanges (one user turn plus one coach response per exchange), compared to 10 or more in full coaching. +3. Key artifacts are generated at each method exit: + - M1: stakeholder map and scope summary + - M2: research notes and interview synthesis + - M3: theme clusters and problem statement + - M4: prioritized idea list + - M5: concept cards with desirability/feasibility/viability assessment + - M6: lo-fi prototype sketches and usability notes +4. At each method transition, highlight which HVE Core tool or feature is being demonstrated: + - M1 to M2: coaching state persistence and session recovery + - M2 to M3: artifact lineage across methods + - M3 to M4: problem-to-solution space transition + - M4 to M5: concept cards with D/F/V evaluation + - M5 to M6: canonical deck snapshot (optional) + - M6 to M7: hifi-prototype skill handoff + +Checkpoint: Methods 1 through 6 have generated artifacts in the coaching state. + +### Step 4: Prototype Scaffold (Method 7) + +Transition to Method 7 and invoke the hifi-prototype skill for scaffold generation. + +1. Invoke the hifi-prototype skill with the inputs from the Hifi-Prototype Input Mapping table below. +2. Populate the experiment card from DT session artifacts (hypothesis from M3 themes, success criteria from M5 concepts). +3. Generate the scaffold using demo template patterns from existing examples. +4. Fixture data derived from the persona brief and domain vocabulary. +5. Name the fixture file after the primary domain noun in plural form (for example, `machines.js`, `vehicles.js`, `patients.js`). +6. Include experiment banner on every page with hypothesis text. +7. Apply `[SIMULATED]` badges to all mock components. +8. Pre-wire telemetry for page views, clicks, and task timing. + +#### Hifi-Prototype Input Mapping + +| hifi-prototype Input | Source DT Artifact | Derivation | +|----------------------|----------------------------------------------|-------------------------------------------------------------------------------------| +| Hypothesis | M3 problem statement | Reframe as a testable prediction about user behavior | +| Success criteria | M5 concept D/F/V assessment | Convert desirability, feasibility, and viability ratings into measurable conditions | +| Stack preference | Always `html` | Default zero-install stack for demos | +| Simulation needs | M2 constraint catalog and M6 usability notes | List components that cannot be built live and require fixtures | +| Telemetry level | Always `basic` | Page views, clicks, and task timing for demo purposes | +| Storage | Always `files` | Zero-dependency demo default; avoids database setup | +| LLM provider | Always `none` | Demos use fixture data, not live LLM calls | + +Checkpoint: prototype runs locally by opening `index.html` in a browser. + +### Step 5: Demo Walkthrough Guide + +Generate a presenter's guide in the prototype README with everything needed to deliver the demo. + +1. Step-by-step demo narrative from DT Coach session through prototype walkthrough. +2. Key talking points at each stage of the demo. +3. Which HVE Core features are showcased at each step: + - DT Coach agent and coaching state management + - Customer persona brief and conversation simulation + - Experiment cards and hypothesis-driven development + - hifi-prototype skill and scaffold generation + - Telemetry instrumentation +4. Common audience questions and suggested responses. +5. Timing guidance (approximate duration per section). + +Checkpoint: README contains a complete presenter's walkthrough guide. + +### Step 6: Demo Video Script + +Generate a `demo-video-script.md` in the prototype directory with a complete narrated video script for recording the demo. + +1. Follow the structure in `references/demo-video-script-template.md` for the script layout. +2. Populate the Cold Open with a vivid scene showing the prototype in action and stating the persona's core pain point. +3. Write Section 1 (The Problem) using the customer persona brief: organization profile, frustrations, and the specific problem scenario. +4. Write Section 2 (Design Thinking Coach) walking through the DT artifacts generated in Step 3, highlighting coaching state persistence and artifact lineage. +5. Write Section 3 (The Experiment Card) narrating the hypothesis, success criteria, and failure criteria from the experiment card. +6. Write prototype demo sections (Sections 4 and 5) with screen-by-screen narration of the prototype workflow. Include visual cues in brackets describing what appears on screen and what the presenter clicks. +7. Write Section 6 (What You Just Saw) recapping the HVE Core tools demonstrated and their value. +8. Write Section 7 (Where to Start) introducing the three entry points: Task Researcher, RPI Agent, and DT Coach. Include a brief live demo prompt for each. +9. Write a Closing section and Production Notes table with recording setup details. +10. Target duration is 14 to 16 minutes. Distribute time across sections proportionally, with prototype demo sections receiving the most time. + +Checkpoint: `demo-video-script.md` exists with all sections populated and timing annotations. + +## Demo Scaffold Template + +Every demo scaffold follows a fixed structure. The hifi-prototype skill generates this layout with demo-specific content. + +```text +{project-slug}/ +├── experiment-card.md +├── README.md +├── demo-video-script.md +├── index.html +├── style.css +├── app.js +├── telemetry.js +└── sim/fixtures/{domain-data}.js +``` + +### Fixed Elements (same across all demos) + +| Element | Details | +|----------------------|----------------------------------------------------------------------| +| Experiment banner | Visible on every page with hypothesis text | +| CSS reset | System fonts, 2-color palette, dashed borders, 44px touch targets | +| Rough UI constraints | No shadows, gradients, or custom fonts | +| Telemetry skeleton | Page views, clicks, task timing, session UUID | +| `[SIMULATED]` badges | Applied to every mock component | +| Experiment card | Hypothesis, success criteria, failure criteria, simulation inventory | +| Demo video script | Narrated walkthrough with visual cues, timing, and production notes | + +### Variable Elements (customized per demo) + +| Element | Varies By | +|------------------|-----------------------------------------------------------| +| Accent color | Industry or customer brand association | +| Layout | Screen count and workflow shape (1 to 5 screens max) | +| Fixture schema | Domain-specific data structure in `sim/fixtures/` | +| Domain terms | Industry vocabulary in labels, headings, and fixture data | +| Hypothesis text | Derived from DT session Method 3 themes | +| Success criteria | Derived from DT session Method 5 concepts | + +## Integration with HVE Core Tools + +Each step of the demo workflow showcases specific HVE Core tools and features. + +| Tool / Feature | Where Showcased | Demo Talking Point | +|---------------------------|------------------------------------|-----------------------------------------------------------------| +| DT Coach agent | Methods 1-6 coaching | AI-guided Design Thinking with structured method progression | +| Customer persona brief | Step 1 scenario setup | Simulated customer conversations grounded in realistic personas | +| Coaching state management | Session persistence across methods | Session recovery, method tracking, and artifact lineage | +| hifi-prototype skill | Method 7 scaffold generation | Experiment-framed prototypes with hypothesis-driven development | +| Experiment cards | Prototype setup | Every prototype starts with a falsifiable hypothesis | +| Telemetry instrumentation | Prototype scaffold | Measurement built in from day one, not added later | +| Canonical deck (optional) | Method 1, 3, and 5 snapshots | Visual summaries at scope, synthesis, and concept milestones | + +## Validation + +- [ ] Customer persona brief exists and all sections are populated +- [ ] DT coaching state initialized with `initial_classification: frozen` and `session_mode: demo` +- [ ] Methods 1 through 6 have generated artifacts +- [ ] Experiment card has a falsifiable hypothesis and measurable success criteria +- [ ] Prototype scaffold runs locally by opening `index.html` +- [ ] Telemetry captures page views, clicks, and task timing +- [ ] README contains a complete presenter's walkthrough guide +- [ ] Demo video script exists with all sections, visual cues, and timing annotations +- [ ] All simulated components display `[SIMULATED]` badges +- [ ] Experiment banner visible on every prototype page + +## Troubleshooting + +| Issue | Cause | Solution | +|------------------------------------------------|----------------------------------------------|---------------------------------------------------------------------------------------------------------------------------| +| Persona brief feels generic | Insufficient industry context provided | Add specific domain vocabulary and 3 to 5 concrete workflow details to the inputs | +| DT Coach exits accelerated mode | Coaching state missing `session_mode: demo` | Verify coaching-state.md has `session_mode: demo` under the project block in Step 2 | +| Prototype scaffold missing telemetry | hifi-prototype skill not invoked correctly | Ensure the experiment card is complete before triggering Method 7 transition | +| Audience confuses demo with real product | Missing simulation labels | Every mock component requires a visible `[SIMULATED]` badge; check the validation list | +| Demo takes too long to present | Full coaching mode active | Set `accelerated` input to `true` (default) for 2 to 3 exchanges per method | +| Fixture data does not match domain | Conversation seeds missing domain vocabulary | Update the Domain Vocabulary section of the persona brief before starting the session | +| Demo video script too long | Too many prototype screens narrated | Limit prototype demo to 2 to 3 key screens; reference additional screens briefly without full narration | +| Video script feels disconnected from prototype | Script written before scaffold finalized | Generate the video script after Step 5 completes so all prototype screens and the README are available as source material | + +## Demo Video Script Template + +The demo video script follows a fixed section structure with narrator text (blockquoted) and visual stage directions (bracketed). See `references/demo-video-script-template.md` for the full template, section-by-section script structure, authoring rules, and content derivation guidance. Copy that file to the prototype directory as `demo-video-script.md` in Step 6 and fill in the placeholders. + +> Brought to you by microsoft/hve-core + +--- + +*🤖 Crafted with precision by ✨Copilot following brilliant human instruction, then carefully refined by our team of discerning human reviewers.* diff --git a/.github/skills/design-thinking/demo-setup/references/demo-video-script-template.md b/.github/skills/design-thinking/demo-setup/references/demo-video-script-template.md new file mode 100644 index 000000000..c5399157a --- /dev/null +++ b/.github/skills/design-thinking/demo-setup/references/demo-video-script-template.md @@ -0,0 +1,267 @@ +--- +title: Demo Video Script Template +description: Reusable template for HVE Core demo video scripts with section structure, visual cue format, and timing guidance +--- + +## How to Use This Template + +This template provides both the structural reference for authoring a demo video script and a fillable scaffold. Copy this file to the prototype directory as `demo-video-script.md`, then replace the `{{placeholder}}` text with content derived from the customer persona brief, DT artifacts, experiment card, and prototype screens. + +### Script Structure + +| Section | Duration | Content | +|---|---|---| +| Video Details | — | Metadata table: title, subtitle, target duration, audience, tone | +| Cold Open | 0:30 | Show the running prototype; narrate the persona's pain in their own words | +| Section 1: The Problem | 1:30 | Walk through the persona brief on screen; highlight frustrations and the specific scenario | +| Section 2: Design Thinking Coach | 2:30 | Show the DT artifacts directory; narrate key method outputs and coaching state | +| Section 3: The Experiment Card | 1:00 | Open the experiment card; narrate hypothesis, success criteria, and failure criteria | +| Section 4+: Prototype Demo | 4:00 | Screen-by-screen narration of the prototype; one section per major screen | +| What You Just Saw | 1:30 | Recap the five HVE Core capabilities demonstrated | +| Where to Start | 4:00 | Three entry points with live demo prompts for Task Researcher, RPI Agent, and DT Coach | +| Closing | 0:30 | Summary statement and call to action | +| Production Notes | — | Recording setup table: tool, browser, theme, font size, resolution, pre-recording steps | + +### Section Authoring Rules + +* Visual cues appear in `**[VISUAL: description]**` format before the narrator text they accompany. +* Narrator text uses blockquote format (`>`) for spoken words. +* Demo prompts (text the presenter types on screen) appear in a dedicated code block labeled with the prompt context. +* Each prototype demo section covers one screen of the prototype. Name the section after the screen (for example, "Order Queue Demo" or "Dashboard Demo"). +* Timing annotations appear in parentheses in each section heading (for example, `## COLD OPEN (0:00 - 0:30)`). +* The "Where to Start" section includes three subsections, one per agent, each with a typed prompt and narration of the agent's response. +* Production Notes table includes at minimum: screen recording tool, browser, VS Code theme, font size, resolution, and any pre-recording reset steps (for example, clearing localStorage). + +### Content Derivation + +| Script Section | Source Artifact | +|---|---| +| Cold Open scene | Prototype `index.html` primary screen | +| The Problem narration | Customer persona brief: frustrations, problem scenario, constraints | +| DT Coach walkthrough | `.copilot-tracking/dt/{slug}/` artifact directory and coaching-state.md | +| Experiment Card | `experiment-card.md` hypothesis and criteria | +| Prototype Demo screens | Each `.html` file in the scaffold, walked through in workflow order | +| What You Just Saw | Integration with HVE Core Tools table from the demo-setup skill | +| Where to Start | Standard three-agent intro: Task Researcher, RPI Agent, DT Coach | + +--- + +## Video Details + +| Field | Value | +|------------------|--------------------------------------------------------------------------------| +| Title | {{title — action-oriented statement about the demo outcome}} | +| Subtitle | HVE Core Design Thinking + Prototyping Workflow | +| Target duration | 14-16 minutes | +| Audience | {{audience — who will watch this recording}} | +| Tone | Conversational, confident, practitioner-to-practitioner | + +--- + +## COLD OPEN (0:00 - 0:30) + +**[VISUAL: Browser showing the prototype primary screen with key UI elements visible]** + +> {{Vivid description of the persona's daily pain in their own words. Show the running prototype as the backdrop. End with a hook: "We built this in under an hour using two HVE Core tools. Let me show you how."}} + +--- + +## SECTION 1: THE PROBLEM (0:30 - 2:00) + +**[VISUAL: VS Code, open to `customer-persona-brief.md`, scrolling through the Organization and Persona Profile sections]** + +> {{Introduce the persona: name, role, organization, scale. Ground the viewer in who this person is and what their day looks like.}} + +**[VISUAL: Highlight the "Frustrations" section of the persona brief]** + +> {{Walk through the top 3 frustrations. Be specific with numbers, names, and workflow details.}} + +**[VISUAL: Highlight the "Problem Scenario" section]** + +> {{Narrate one concrete instance of the problem occurring. Include the cascading consequences.}} + +**[VISUAL: Cut to the problem statement in `method-03-problem-statement.md`]** + +> {{State the problem statement as synthesized by the DT Coach. Frame it as a question: "Can [proposed solution] change that?"}} + +--- + +## SECTION 2: DESIGN THINKING COACH (2:00 - 4:30) + +**[VISUAL: VS Code file explorer showing the `.copilot-tracking/dt/{slug}/` directory with all method artifacts visible]** + +> {{Introduce the DT Coach: "Before writing any code, we ran a Design Thinking coaching session." Mention methods 1-6 and structured artifacts.}} + +**[VISUAL: Open `method-01-stakeholder-map.md`]** + +> {{Method 1 highlight: Who are the stakeholders? What insight emerged from mapping them?}} + +**[VISUAL: Open `coaching-state.md`, highlight the transition log]** + +> {{Coaching state persistence: session recovery, method tracking, artifact lineage. "If I close VS Code and come back tomorrow, the DT Coach picks up exactly where we left off."}} + +**[VISUAL: Open `method-03-theme-clusters.md`]** + +> {{Method 3 highlight: What themes emerged from synthesis? List 2-3 key themes with evidence.}} + +**[VISUAL: Open `method-05-concept-cards.md`, show the D/F/V summary table]** + +> {{Method 5 highlight: Desirability, feasibility, viability assessment. What was the verdict?}} + +**[VISUAL: Brief pause on the full `.copilot-tracking/dt/{slug}/` file tree]** + +> {{Summary: "Six methods. Ten artifacts. A validated problem, a testable hypothesis, and a clear concept. All before a single line of prototype code."}} + +--- + +## SECTION 3: THE EXPERIMENT CARD (4:30 - 5:30) + +**[VISUAL: Open `experiment-card.md` in VS Code]** + +> {{Introduce the experiment card concept: "This is not a requirements doc. It is a hypothesis with explicit success and failure criteria."}} + +**[VISUAL: Highlight the hypothesis]** + +> {{Read the hypothesis verbatim or paraphrase closely.}} + +**[VISUAL: Highlight the success criteria table]** + +> {{Walk through 2-3 key success criteria that are observable and measurable.}} + +**[VISUAL: Highlight the failure criteria]** + +> {{Explain what would prove the hypothesis wrong. "A good experiment is falsifiable."}} + +--- + +## SECTION 4: PROTOTYPE DEMO — PRIMARY SCREEN (5:30 - 7:30) + +**[VISUAL: Browser, `index.html` — primary screen visible]** + +> {{Describe the persona's new workflow. Narrate what each UI element means and how it maps to the problem statement.}} + +**[VISUAL: Interact with the primary screen — click buttons, hover elements, show state changes]** + +> {{Walk through 2-3 key interactions. Show the happy path first, then edge cases with lower confidence or flagged items.}} + +**[VISUAL: Point out the experiment banner and [SIMULATED] badges]** + +> {{Acknowledge the prototype constraints: "The simulated badge reminds us this is a prototype. The real architecture would [describe production approach]. But the prototype proved the workflow works before we invest."}} + +--- + +## SECTION 5: PROTOTYPE DEMO — SECONDARY SCREEN (7:30 - 9:30) + +**[VISUAL: Browser, secondary screen (e.g., review, pipeline, closeout)]** + +> {{Describe the second key screen. What does it show? How does the persona use it?}} + +**[VISUAL: Walk through the interaction flow on this screen]** + +> {{Narrate the specific interactions: approvals, overrides, confirmations. Show how the persona completes their core task.}} + +**[VISUAL: Show completion state or confirmation]** + +> {{Describe the endpoint: "The task is complete. The [action] is confirmed."}} + +--- + +## SECTION 6: WHAT YOU JUST SAW (9:30 - 11:00) + +> Let me recap what we covered. + +> First, the DT Coach agent. It guided us through six Design Thinking methods with a simulated customer persona. Every method produced a structured artifact. Those artifacts are reusable. They are the institutional memory of the design process. + +> Second, coaching state management. The session is persistent. You can close VS Code, come back next week, and the coach picks up where you left off. Method progress, artifact lineage, transition rationale: all tracked. + +> Third, the experiment card. Every prototype starts with a hypothesis written before any code. Success criteria you can observe. Failure criteria that tell you when to pivot. This is not a feature backlog. It is a falsifiable experiment. + +> Fourth, the prototype skill. It generated the scaffold in minutes. Intentionally rough UI so stakeholders react to the workflow, not the colors. Simulated badges on every mock component so nobody confuses this with a product. + +> And fifth, telemetry from day one. Page views, clicks, task timing, session IDs. When you run this prototype with real users, you get measurement data automatically. + +> The whole thing runs by opening a single HTML file. No servers, no cloud accounts, no API keys. + +--- + +## SECTION 7: WHERE TO START (11:00 - 15:00) + +**[VISUAL: VS Code command palette or agent selector showing the three agents]** + +> So you have seen the workflow end to end. The natural question is: where do I start? HVE Core gives you three entry points depending on where you are in your work. + +### Task Researcher Demo (11:00 - 12:30) + +**[VISUAL: VS Code with the Task Researcher agent active]** + +> If you are joining an existing project or picking up unfamiliar code, start with the **Task Researcher**. Point it at a codebase and it maps the architecture, identifies patterns, surfaces dependencies, and answers your questions grounded in what is actually there. + +**[DEMO: Ask the Task Researcher]** + +Prompt to type: + +> "I just opened this repo for the first time. Give me a technical overview — what does this project do, what's the tech stack, how is it organized, and where should I start if I want to add a new {{domain feature}}?" + +**[VISUAL: Watch the Task Researcher read files, scan directories, and synthesize a structured overview.]** + +> {{Narrate what the researcher does and the quality of its grounded output.}} + +### RPI Agent Demo (12:30 - 14:00) + +**[VISUAL: VS Code with rpi-agent active]** + +> When you are ready to build, reach for the **RPI Agent**. RPI stands for Research, Plan, Implement. It breaks your task into phases: the researcher gathers context, the planner writes a step-by-step implementation plan, and the implementor executes each phase. + +**[DEMO: Ask the RPI Agent]** + +Prompt to type: + +> "Add a telemetry dashboard page (telemetry-dashboard.html) that reads captured events from localStorage and visualizes: {{2-3 metrics relevant to the prototype's experiment card}}." + +**[VISUAL: Watch the RPI agent research, plan, and implement. Show the finished dashboard.]** + +> {{Narrate the three phases and the final result.}} + +### DT Coach Recap (14:00 - 14:30) + +**[VISUAL: VS Code with DT Coach agent active]** + +> And if you are starting from scratch, that is where the **DT Coach** comes in. It walks you through Design Thinking methods to make sure you are solving the right problem before you build anything. + +> One more thing. In this demo we used a generated persona brief to simulate the customer conversations. But in real engagements, you feed it real context. Drop a meeting transcript into the `context/` folder and the coach grounds its coaching in what was actually said. + +### Connecting the Three (14:30 - 15:00) + +**[VISUAL: Simple diagram or text overlay showing the three agents]** + +> Three starting points. Exploring existing code? Task Researcher. Building the next feature? RPI Agent. Validating a new idea from scratch? DT Coach. They work independently, but they also connect. The DT Coach's experiment card feeds the RPI Agent's planning. The Task Researcher grounds both of them in what is actually in the codebase. + +--- + +## CLOSING (15:00 - 15:30) + +**[VISUAL: VS Code showing the full `.copilot-tracking/dt/{slug}/` directory alongside the prototype files]** + +> {{Summarize the journey: persona to prototype. Name the key tools. Invite the viewer to try with their own scenario.}} + +> Thanks for watching. + +--- + +## Production Notes + +| Item | Detail | +|----------------------|---------------------------------------------------------------------------| +| Screen recording tool | OBS or VS Code screen recorder extension | +| Browser | Chrome with DevTools closed, zoom at 100% | +| VS Code theme | Default dark or light — keep it familiar | +| Font size | VS Code editor font 14px minimum for readability | +| Resolution | 1920x1080 or 2560x1440 | +| localStorage | Run `localStorage.clear()` in DevTools before each take | +| Pauses | Leave 1-2 second pauses at section transitions for editing | +| B-roll opportunities | File explorer navigation, coaching state YAML scrolling, status bar updates | + + +--- + +*🤖 Crafted with precision by ✨Copilot following brilliant human instruction, then carefully refined by our team of discerning human reviewers.* diff --git a/collections/design-thinking.collection.md b/collections/design-thinking.collection.md index dca7f9028..ece62387f 100644 --- a/collections/design-thinking.collection.md +++ b/collections/design-thinking.collection.md @@ -84,4 +84,10 @@ Coaching identity, quality constraints, and methodology instructions for AI-enha | **design-thinking/dt-subagent-handoff** | DT subagent handoff workflow: readiness assessment, artifact compilation, and handoff validation via subagent dispatch | | **shared/hve-core-location** | Important: hve-core is the repository containing this instruction file; Guidance: if a referenced prompt, instructions, agent, or script is missing in the current directory, fall back to this hve-core location by walking up this file's directory tree. | +### Skills + +| Name | Description | +|----------------|-------------------------------------------------------------------------------------------------------------------------| +| **demo-setup** | Repeatable HVE Core demo setup that simulates DT Coach sessions with a customer persona and scaffolds a hi-fi prototype | + diff --git a/collections/design-thinking.collection.yml b/collections/design-thinking.collection.yml index f9cedd74e..287a6516a 100644 --- a/collections/design-thinking.collection.yml +++ b/collections/design-thinking.collection.yml @@ -16,6 +16,11 @@ items: kind: agent maturity: preview + # Skills + - path: .github/skills/design-thinking/demo-setup + kind: skill + maturity: preview + # Prompts - path: .github/prompts/design-thinking/dt-start-project.prompt.md kind: prompt diff --git a/collections/hve-core-all.collection.md b/collections/hve-core-all.collection.md index 2a16f68ef..e6bd3fa1f 100644 --- a/collections/hve-core-all.collection.md +++ b/collections/hve-core-all.collection.md @@ -269,6 +269,7 @@ Use this edition when you want access to everything without choosing a focused c |-------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | **adr-author** | Authoring skill for Architecture Decision Records (ADRs) supporting capture, from-planner-handoff, and adopt-template entry modes with selectable Y-Statement or MADR v4.0.0 output templates, supersession lineage, and ASR trigger evaluation - Brought to you by microsoft/hve-core. | | **customer-card-render** | Generate customer-card PowerPoint content YAML from Design Thinking canonical artifacts and build using the shared PowerPoint skill pipeline | +| **demo-setup** | Repeatable HVE Core demo setup that simulates DT Coach sessions with a customer persona and scaffolds a hi-fi prototype | | **gh-code-scanning** | Retrieves and groups GitHub code scanning alerts by rule and severity using the gh CLI | | **gitlab** | Manage GitLab merge requests and pipelines with a Python CLI | | **hve-core-installer** | Decision-driven installer for HVE-Core with 6 clone-based installation methods, extension quick-install, environment detection, and agent customization workflows | diff --git a/collections/hve-core-all.collection.yml b/collections/hve-core-all.collection.yml index 082fea78a..0ed123726 100644 --- a/collections/hve-core-all.collection.yml +++ b/collections/hve-core-all.collection.yml @@ -594,6 +594,9 @@ items: - path: .github/skills/coding-standards/python-foundational kind: skill maturity: experimental +- path: .github/skills/design-thinking/demo-setup + kind: skill + maturity: preview - path: .github/skills/experimental/customer-card-render kind: skill - path: .github/skills/experimental/powerpoint diff --git a/plugins/design-thinking/.github/plugin/plugin.json b/plugins/design-thinking/.github/plugin/plugin.json index 7df0d0ca0..c70c05528 100644 --- a/plugins/design-thinking/.github/plugin/plugin.json +++ b/plugins/design-thinking/.github/plugin/plugin.json @@ -7,5 +7,8 @@ ], "commands": [ "commands/design-thinking/" + ], + "skills": [ + "skills/design-thinking/" ] } \ No newline at end of file diff --git a/plugins/design-thinking/README.md b/plugins/design-thinking/README.md index baead2d07..95e46651a 100644 --- a/plugins/design-thinking/README.md +++ b/plugins/design-thinking/README.md @@ -91,6 +91,12 @@ Coaching identity, quality constraints, and methodology instructions for AI-enha | **design-thinking/dt-subagent-handoff** | DT subagent handoff workflow: readiness assessment, artifact compilation, and handoff validation via subagent dispatch | | **shared/hve-core-location** | Important: hve-core is the repository containing this instruction file; Guidance: if a referenced prompt, instructions, agent, or script is missing in the current directory, fall back to this hve-core location by walking up this file's directory tree. | +### Skills + +| Name | Description | +|----------------|-------------------------------------------------------------------------------------------------------------------------| +| **demo-setup** | Repeatable HVE Core demo setup that simulates DT Coach sessions with a customer persona and scaffolds a hi-fi prototype | + ## Install @@ -175,6 +181,12 @@ copilot plugin install design-thinking@hve-core | dt-curriculum-scenario-manufacturing.instructions | Manufacturing reference scenario for DT learning - factory floor improvement project used across all 9 curriculum modules | | hve-core-location.instructions | Important: hve-core is the repository containing this instruction file; Guidance: if a referenced prompt, instructions, agent, or script is missing in the current directory, fall back to this hve-core location by walking up this file's directory tree. | +## Skills + +| Skill | Description | +|------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------| +| demo-setup | Repeatable HVE Core demo setup that simulates DT Coach sessions with a customer persona and scaffolds a hi-fi prototype - Brought to you by microsoft/hve-core | + --- > Source: [microsoft/hve-core](https://github.com/microsoft/hve-core) diff --git a/plugins/hve-core-all/.github/plugin/plugin.json b/plugins/hve-core-all/.github/plugin/plugin.json index 330e6d293..de8f6fc13 100644 --- a/plugins/hve-core-all/.github/plugin/plugin.json +++ b/plugins/hve-core-all/.github/plugin/plugin.json @@ -32,6 +32,7 @@ ], "skills": [ "skills/coding-standards/", + "skills/design-thinking/", "skills/experimental/", "skills/github/", "skills/gitlab/", diff --git a/plugins/hve-core-all/README.md b/plugins/hve-core-all/README.md index 3f4862946..6ad2cc385 100644 --- a/plugins/hve-core-all/README.md +++ b/plugins/hve-core-all/README.md @@ -274,6 +274,7 @@ Use this edition when you want access to everything without choosing a focused c |-------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | **adr-author** | Authoring skill for Architecture Decision Records (ADRs) supporting capture, from-planner-handoff, and adopt-template entry modes with selectable Y-Statement or MADR v4.0.0 output templates, supersession lineage, and ASR trigger evaluation - Brought to you by microsoft/hve-core. | | **customer-card-render** | Generate customer-card PowerPoint content YAML from Design Thinking canonical artifacts and build using the shared PowerPoint skill pipeline | +| **demo-setup** | Repeatable HVE Core demo setup that simulates DT Coach sessions with a customer persona and scaffolds a hi-fi prototype | | **gh-code-scanning** | Retrieves and groups GitHub code scanning alerts by rule and severity using the gh CLI | | **gitlab** | Manage GitLab merge requests and pipelines with a Python CLI | | **hve-core-installer** | Decision-driven installer for HVE-Core with 6 clone-based installation methods, extension quick-install, environment detection, and agent customization workflows | @@ -555,6 +556,7 @@ copilot plugin install hve-core-all@hve-core | Skill | Description | |---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | python-foundational | Foundational Python best practices, idioms, and code quality fundamentals - Brought to you by microsoft/hve-core | +| demo-setup | Repeatable HVE Core demo setup that simulates DT Coach sessions with a customer persona and scaffolds a hi-fi prototype - Brought to you by microsoft/hve-core | | customer-card-render | Generate customer-card PowerPoint content YAML from Design Thinking canonical artifacts and build using the shared PowerPoint skill pipeline - Brought to you by microsoft/hve-core | | powerpoint | PowerPoint slide deck generation and management using python-pptx with YAML-driven content and styling - Brought to you by microsoft/hve-core | | tts-voiceover | Text-to-speech voice-over generation from YAML speaker notes using Azure Speech SDK with SSML pronunciation control - Brought to you by microsoft/hve-core |