demo-vscode

IMPORTANT: VS Code Ownership

Before starting, tell the user:

This skill will take full control of your VS Code window for screenshot capture. Do NOT interact with VS Code while this is running — any clicks or keystrokes will break the automation. Work in a different app (browser, other terminal) while this runs.

Goal

Produce 3 screenshot images for a developer tip page, ready to share on Slack:

1. Insights card — Key Insights block from the tip page
2. Actions card — Action Items block from the tip page
3. VS Code demo — Live demonstration of the tip concept in VS Code

Flow

digraph demo_vscode {
  "Parse URL & derive slug" [shape=box];
  "Navigate to tip page" [shape=box];
  "Wait for page load" [shape=box];
  "Extract block text" [shape=box];
  "Screenshot block 1" [shape=box];
  "Screenshot block 2" [shape=box];
  "Spawn demo-planner" [shape=box];
  "Plan valid?" [shape=diamond];
  "Execute VS Code demo" [shape=box];
  "Screenshot VS Code" [shape=box];
  "Report" [shape=doublecircle];

  "Parse URL & derive slug" -> "Navigate to tip page";
  "Navigate to tip page" -> "Wait for page load";
  "Wait for page load" -> "Extract block text";
  "Extract block text" -> "Screenshot block 1";
  "Screenshot block 1" -> "Screenshot block 2";
  "Screenshot block 2" -> "Spawn demo-planner";
  "Spawn demo-planner" -> "Plan valid?";
  "Plan valid?" -> "Execute VS Code demo" [label="yes"];
  "Plan valid?" -> "Spawn demo-planner" [label="retry (max 2)"];
  "Execute VS Code demo" -> "Screenshot VS Code";
  "Screenshot VS Code" -> "Report";
}

Node Details

Parse URL & derive slug

Extract the slug from the URL path. Example:

• URL: https://easingthemes.github.io/dx-aem-flow/learn/tldr/the-three-tools-you-need-to-know/
• Slug: the-three-tools-you-need-to-know

Create output directory: tools/screenshots/<slug>/

Navigate to tip page

mcp__playwright__browser_navigate(url: "<tip-url>")

Wait for page load

Wait for the tip blocks to render. Playwright's browser_wait_for waits on text / textGone / time (seconds) — not a CSS selector. Wait for visible tip-card text, or fall back to a short settle: