chore(visual-quickstart): rename output to docs/ and build on Node

- Rename the generated site folder visual-quickstart/ -> docs/
- Replace the Python build launcher with build-visual-quickstart.js (Node)
- Rename watch-comic.js -> watch-visual-quickstart.js; update package.json
  scripts to build:visual-quickstart / watch:visual-quickstart
- Regenerate the site via the Node engine: accessibility pass (skip link,
  panel aria text, focus states, forced-colors), crimson accent, caption
  'Read in course' pill, and a generic top-level art: config in content.yaml

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: DanWahlin

.github/scripts/build-comic.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+/**
+ * Build the docs visual quickstart site from its content file.
+ *
+ * Usage:
+ *   npm run build:visual-quickstart
+ *
+ * Edit the words in docs/content.yaml, then run this to regenerate
+ * the HTML/CSS into docs/. Do NOT hand-edit the generated *.html -
+ * it is overwritten on every build.
+ *
+ * The rendering engine (SVG visual quickstart frames, speech bubbles, auto-placement, etc.)
+ * lives in the reusable visual-quickstart-generator skill; this is a thin launcher that
+ * points that engine at this repo's content file and output dir.
+ *
+ * Optional env overrides:
+ *   VISUAL_QUICKSTART_SKILL_DIR  path to the visual-quickstart-generator skill folder
+ */
+
+const { spawnSync } = require('child_process');
+const { existsSync } = require('fs');
+const { join } = require('path');
+const os = require('os');
+
+const repoRoot = join(__dirname, '..', '..'); // .github/scripts -> repo root
+const docsDir = join(repoRoot, 'docs');
+const contentFile = join(docsDir, 'content.yaml');
+
+const skillDir =
+  process.env.VISUAL_QUICKSTART_SKILL_DIR ||
+  join(os.homedir(), '.copilot', 'skills', 'visual-quickstart-generator');
+const buildScript = join(skillDir, 'scripts', 'build_site.js');
+
+if (!existsSync(buildScript)) {
+  console.error(
+    `\u2716 Visual quickstart engine not found at:\n  ${buildScript}\n` +
+      'Set VISUAL_QUICKSTART_SKILL_DIR to the visual-quickstart-generator skill folder, or install the skill.',
+  );
+  process.exit(1);
+}
+if (!existsSync(contentFile)) {
+  console.error(`\u2716 Content file not found:\n  ${contentFile}`);
+  process.exit(1);
+}
+
+console.log(`Building visual quickstart from ${contentFile}`);
+const result = spawnSync(process.execPath, [buildScript], {
+  stdio: 'inherit',
+  env: { ...process.env, VISUAL_QUICKSTART_DOCS: docsDir, VISUAL_QUICKSTART_CONTENT: contentFile },
+});
+
+if (result.error) {
+  console.error(`\u2716 Failed to run the engine: ${result.error.message}`);
+  process.exit(1);
+}
+process.exit(result.status ?? 0);

.github/scripts/build-visual-quickstart.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
 /**
- * Watch visual-quickstart/content.yaml and rebuild the comic site on every save.
+ * Watch docs/content.yaml and rebuild the visual quickstart site on every save.
  *
  * Usage:
- *   npm run watch:comic
+ *   npm run watch:visual-quickstart
  *
  * Leave this running while you edit content.yaml. Each time you save the file,
- * the comic HTML/CSS is regenerated automatically (same as `npm run build:comic`).
+ * the visual quickstart HTML/CSS is regenerated automatically (same as `npm run build:visual-quickstart`).
  * Press Ctrl+C to stop.
  *
  * Zero dependencies: uses Node's built-in fs.watch. It watches the directory and
@@ -19,9 +19,9 @@ const { watch, existsSync } = require('fs');
 const { join } = require('path');
 
 const repoRoot = join(__dirname, '..', '..'); // .github/scripts -> repo root
-const docsDir = join(repoRoot, 'visual-quickstart');
+const docsDir = join(repoRoot, 'docs');
 const contentFile = join(docsDir, 'content.yaml');
-const buildScript = join(__dirname, 'build-comic.js');
+const buildScript = join(__dirname, 'build-visual-quickstart.js');
 const WATCHED = 'content.yaml';
 const DEBOUNCE_MS = 200;
 

.github/scripts/watch-comic.js …ithub/scripts/watch-visual-quickstart.js.github/scripts/watch-comic.js renamed to .github/scripts/watch-visual-quickstart.js .github/scripts/watch-comic.js renamed to .github/scripts/watch-visual-quickstart.js

@@ -1,17 +1,17 @@
 /*
   AUTO-GENERATED - DO NOT EDIT THIS FILE.
-  It is regenerated by the comic-strip-site skill (build_site.py) and your
+  It is regenerated by the visual-quickstart-generator skill (build_site.js) and your
   edits here will be overwritten on the next build.
   
   How to make changes:
     - WORDS (page/tab titles, nav labels, site chrome, subtitle, CTA, footer,
       captions, character dialogue, terminal commands, chapter list): edit
-      visual-quickstart/content.yaml (see its top-level `site:` section)
-    - STYLES (CSS): edit the CSS block in build_site.py
-    - HTML STRUCTURE / layout: edit the page templates in build_site.py
+      docs/content.yaml (see its top-level `site:` section)
+    - STYLES (CSS): edit templates/style.css in the skill
+    - HTML STRUCTURE / layout: edit the page templates in build_site.js
       (index_page / chapter_page / banner / nav / panel)
   
-  Then rebuild:  npm run build:comic
+  Then rebuild:  npm run build:visual-quickstart
 */
 :root{
   --ink:#1f2937; --cream:#fdf3df; --card:#fce9c7; --teal:#0c7a7a; --accent:#be123c;