canicode 0.9.1 → 0.10.1

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
-import { existsSync, mkdirSync, writeFileSync, readFileSync, statSync, readdirSync, renameSync, chmodSync, copyFileSync } from 'fs';
-import { join, resolve, dirname, basename } from 'path';
+import { existsSync, mkdirSync, writeFileSync, readFileSync, statSync, copyFileSync, readdirSync, renameSync, chmodSync } from 'fs';
+import { join, resolve, dirname, basename, relative } from 'path';
 import pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
 import { createRequire } from 'module';
@@ -10,7 +10,8 @@ import { randomUUID } from 'crypto';
 import { homedir } from 'os';
 import { z } from 'zod';
 import { writeFile, readFile } from 'fs/promises';
-import { pathToFileURL } from 'url';
+import { createInterface } from 'readline/promises';
+import { pathToFileURL, fileURLToPath } from 'url';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1369,7 +1370,14 @@ var EVENTS = {
   MCP_TOOL_CALLED: `${EVENT_PREFIX}mcp_tool_called`,
   // CLI
   CLI_COMMAND: `${EVENT_PREFIX}cli_command`,
-  CLI_INIT: `${EVENT_PREFIX}cli_init`
+  CLI_INIT: `${EVENT_PREFIX}cli_init`,
+  // Roundtrip (ADR-012)
+  // Wiring point for the roundtrip helper's `telemetry` callback. No Node-side
+  // orchestrator reads this yet — the helper ships in a sandbox-pure IIFE that
+  // cannot import `core/monitoring` directly, so the event fires through a
+  // caller-supplied callback. Define the typed name here so a future consumer
+  // has a single place to wire it up.
+  ROUNDTRIP_DEFINITION_WRITE_SKIPPED: `${EVENT_PREFIX}roundtrip_definition_write_skipped`
 };
 
 // src/core/monitoring/capture.ts
@@ -1511,8 +1519,8 @@ CANICODE DOCUMENTATION (v${pkg.version})
 
   canicode docs setup      Full setup guide (CLI, MCP, Skills)
   canicode docs config     Config override guide + example
-  canicode docs implement  Design-to-code package guide
   canicode docs scoring    Scoring model explanation
+  canicode docs rules      Pointer to rule list (canicode list-rules)
 
 Full documentation: github.com/let-sunny/canicode#readme
 `.trimStart());
@@ -1530,7 +1538,7 @@ CANICODE SETUP GUIDE
 
   Setup:
     canicode init --token figd_xxxxxxxxxxxxx
-    (saved to ~/.canicode/config.json, reports go to ~/.canicode/reports/)
+    (saves token + installs skills \u2014 see section 2 for --no-skills)
 
   Use:
     canicode analyze "https://www.figma.com/design/ABC123/MyDesign?node-id=1-234"
@@ -1545,14 +1553,27 @@ CANICODE SETUP GUIDE
     ~/.canicode/reports/report-YYYY-MM-DD-HH-mm-<filekey>.html
 
 \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501
- 2. CLAUDE CODE SKILL (requires FIGMA_TOKEN)
+ 2. CLAUDE CODE SKILLS (requires FIGMA_TOKEN)
 \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501
 
   Setup:
-    cp -r .claude/skills/canicode /your-project/.claude/skills/
+    canicode init --token figd_xxxxxxxxxxxxx
+    (installs three skills into ./.claude/skills/ alongside the token)
+
+  Installed skills:
+    canicode             Lightweight CLI wrapper
+    canicode-gotchas     Standalone gotcha survey
+    canicode-roundtrip   Full analyze -> gotcha -> apply roundtrip
+
+  Flags:
+    --global      Install to ~/.claude/skills/ instead of ./.claude/skills/
+    --no-skills   Skip skill install (token only \u2014 legacy behavior)
+    --force       Overwrite existing skill files without prompting
 
   Use (in Claude Code):
     /canicode https://www.figma.com/design/ABC123/MyDesign?node-id=1-234
+    /canicode-gotchas <url>      Run a gotcha survey
+    /canicode-roundtrip <url>    Analyze, fix gotchas in Figma, re-analyze
 
 \u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501
  TOKEN PRIORITY
@@ -1618,7 +1639,7 @@ OPTIONS
   --output <dir>      Output directory (default: /tmp/canicode-visual-compare)
   --width <px>        Logical viewport width in CSS px (omit = infer from Figma PNG \xF7 export scale)
   --height <px>       Logical viewport height in CSS px (omit = infer from Figma PNG \xF7 export scale)
-  --figma-scale <n>   Figma Images API scale (default: 2, matches save-fixture @2x PNGs)
+  --figma-scale <n>   Figma Images API scale (default: 2, matches calibrate-save-fixture @2x PNGs)
 
 OUTPUT FILES
   /tmp/canicode-visual-compare/
@@ -1678,46 +1699,17 @@ USE CASES
   Quick design structure inspection
 `.trimStart());
 }
-function printDocsImplement() {
+function printDocsRules() {
   console.log(`
-DESIGN-TO-CODE IMPLEMENTATION GUIDE
+RULES
 
-Prepare everything an AI needs to implement a Figma design as code.
+  Run 'canicode list-rules' for the full table of rule IDs, scores, and severity.
 
-USAGE
-  canicode implement <figma-url-or-fixture> [options]
+  Customize per-rule via config:
+    canicode docs config
 
-OPTIONS
-  --prompt <path>      Custom prompt file (default: built-in HTML+CSS)
-  --image-scale <n>    Image export scale: 2 for PC (default), 3 for mobile
-  --output <dir>       Output directory (default: ./canicode-implement/)
-  --token <token>      Figma API token (for live URLs)
-
-OUTPUT
-  canicode-implement/
-    analysis.json      Analysis report with issues and scores
-    design-tree.txt    DOM-like tree with CSS styles (~N tokens)
-    images/            PNG assets with human-readable names (hero-banner@2x.png)
-    vectors/           SVG assets for vector nodes
-    PROMPT.md          Stack-specific code generation prompt
-
-WORKFLOW
-  1. Run: canicode implement ./my-fixture --prompt ./my-react-prompt.md
-  2. Feed design-tree.txt + PROMPT.md to your AI assistant
-  3. AI generates code matching the design pixel-perfectly
-  4. Verify with: canicode visual-compare ./output.html --figma-url <url>
-
-CUSTOM PROMPT
-  Default prompt generates HTML+CSS. For your own stack:
-  1. Write a prompt file (e.g. my-react-prompt.md)
-  2. Pass it: canicode implement ./fixture --prompt ./my-react-prompt.md
-  The design-tree.txt format is stack-agnostic \u2014 your prompt just needs
-  to describe how to convert it to your target framework.
-
-IMAGE SCALE
-  --image-scale 2     PC/desktop (default) \u2014 @2x retina
-  --image-scale 3     Mobile \u2014 @3x retina
-  SVG vectors are scale-independent and always included.
+  Full reference:
+    https://github.com/let-sunny/canicode/blob/main/docs/CUSTOMIZATION.md
 `.trimStart());
 }
 function printDocsScoring() {
@@ -1740,8 +1732,8 @@ var DOCS_TOPICS = {
   install: printDocsSetup,
   // alias
   config: printDocsConfig,
-  implement: printDocsImplement,
   scoring: printDocsScoring,
+  rules: printDocsRules,
   "visual-compare": printDocsVisualCompare,
   "design-tree": printDocsDesignTree
 };
@@ -1936,6 +1928,44 @@ function getConfigsWithPreset(preset) {
   }
   return configs;
 }
+var RULE_ANNOTATION_PROPERTIES = {
+  "missing-size-constraint": {
+    default: [{ type: "width" }, { type: "height" }]
+  },
+  "irregular-spacing": {
+    bySubType: {
+      gap: [{ type: "itemSpacing" }],
+      padding: [{ type: "padding" }]
+    }
+  },
+  "fixed-size-in-auto-layout": {
+    default: [{ type: "width" }, { type: "height" }, { type: "layoutMode" }]
+  },
+  "raw-value": {
+    bySubType: {
+      color: [{ type: "fills" }],
+      font: [
+        { type: "fontSize" },
+        { type: "fontFamily" },
+        { type: "fontWeight" },
+        { type: "lineHeight" }
+      ],
+      spacing: [{ type: "itemSpacing" }, { type: "padding" }]
+    }
+  },
+  "absolute-position-in-auto-layout": {
+    default: [{ type: "layoutMode" }]
+  }
+};
+function getAnnotationProperties(ruleId, subType) {
+  const entry = RULE_ANNOTATION_PROPERTIES[ruleId];
+  if (!entry) return void 0;
+  if (subType !== void 0 && entry.bySubType) {
+    const match = entry.bySubType[subType];
+    if (match) return match;
+  }
+  return entry.default;
+}
 function getRuleOption(ruleId, optionKey, defaultValue) {
   const config2 = RULE_CONFIGS[ruleId];
   if (!config2.options) return defaultValue;
@@ -3036,6 +3066,10 @@ defineRule({
 });
 
 // src/core/rules/naming/index.ts
+function capitalize(s) {
+  if (!s) return s;
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
 function detectNamingConvention(name) {
   if (/^[a-z]+(-[a-z]+)*$/.test(name)) return "kebab-case";
   if (/^[a-z]+(_[a-z]+)*$/.test(name)) return "snake_case";
@@ -3161,6 +3195,7 @@ var inconsistentNamingConventionCheck = (node, context) => {
       ruleId: inconsistentNamingConventionDef.id,
       nodeId: node.id,
       nodePath: context.path.join(" > "),
+      suggestedName: suggested,
       ...inconsistentNamingMsg(node.name, nodeConvention, dominantConvention, suggested)
     };
   }
@@ -3198,6 +3233,7 @@ var nonStandardNamingCheck = (node, context) => {
             subType: "state-name",
             nodeId: node.id,
             nodePath: context.path.join(" > "),
+            suggestedName: capitalize(suggestion),
             ...nonStandardNamingMsg.stateName(node.name, opt, suggestion)
           };
         }
@@ -3889,8 +3925,97 @@ async function loadFromApi(fileKey, nodeId, token) {
   return { file, nodeId };
 }
 
+// src/core/adapters/instance-id-parser.ts
+function isInstanceChildNodeId(nodeId) {
+  return nodeId.startsWith("I") && nodeId.includes(";");
+}
+function parseInstanceChildNodeId(nodeId) {
+  if (!isInstanceChildNodeId(nodeId)) return null;
+  const segments = nodeId.split(";");
+  if (segments.length < 2) return null;
+  const parentInstanceId = segments[0].replace(/^I/, "");
+  const sourceNodeId = segments[segments.length - 1];
+  if (!parentInstanceId || !sourceNodeId) return null;
+  return { parentInstanceId, sourceNodeId };
+}
+
+// src/core/gotcha/apply-context.ts
+var STRATEGY_BY_RULE = {
+  // Strategy A — property modification
+  "no-auto-layout": "property-mod",
+  "fixed-size-in-auto-layout": "property-mod",
+  "missing-size-constraint": "property-mod",
+  "irregular-spacing": "property-mod",
+  "non-semantic-name": "property-mod",
+  // Strategy B — structural modification (needs user confirmation)
+  "non-layout-container": "structural-mod",
+  "deep-nesting": "structural-mod",
+  "missing-component": "structural-mod",
+  "detached-instance": "structural-mod",
+  // Strategy C — annotation only
+  "absolute-position-in-auto-layout": "annotation",
+  "variant-structure-mismatch": "annotation",
+  // Strategy D — auto-fix lower-severity issues from analyze output
+  "non-standard-naming": "auto-fix",
+  "inconsistent-naming-convention": "auto-fix",
+  "raw-value": "auto-fix",
+  "missing-interaction-state": "auto-fix",
+  "missing-prototype": "auto-fix"
+};
+function resolveTargetProperty(ruleId, subType) {
+  switch (ruleId) {
+    case "no-auto-layout":
+      return ["layoutMode", "itemSpacing"];
+    case "fixed-size-in-auto-layout":
+      if (subType === "horizontal") return "layoutSizingHorizontal";
+      return ["layoutSizingHorizontal", "layoutSizingVertical"];
+    case "missing-size-constraint":
+      if (subType === "wrap") return "minWidth";
+      if (subType === "max-width") return "maxWidth";
+      return ["minWidth", "maxWidth"];
+    case "irregular-spacing":
+      if (subType === "gap") return "itemSpacing";
+      return ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
+    case "non-semantic-name":
+      return "name";
+    case "non-layout-container":
+      return "layoutMode";
+    case "non-standard-naming":
+    case "inconsistent-naming-convention":
+      return "name";
+    case "deep-nesting":
+    case "missing-component":
+    case "detached-instance":
+    case "absolute-position-in-auto-layout":
+    case "variant-structure-mismatch":
+    case "raw-value":
+    case "missing-interaction-state":
+    case "missing-prototype":
+      return void 0;
+  }
+}
+function computeApplyContext(violation, instanceContext) {
+  const ruleId = violation.ruleId;
+  const applyStrategy = STRATEGY_BY_RULE[ruleId] ?? "annotation";
+  const targetProperty = resolveTargetProperty(ruleId, violation.subType);
+  const annotationProperties = getAnnotationProperties(
+    ruleId,
+    violation.subType
+  );
+  const parsed = parseInstanceChildNodeId(violation.nodeId);
+  const isInstanceChild = parsed !== null || isInstanceChildNodeId(violation.nodeId);
+  const sourceChildId = instanceContext?.sourceNodeId ?? parsed?.sourceNodeId;
+  return {
+    applyStrategy,
+    ...targetProperty !== void 0 ? { targetProperty } : {},
+    ...annotationProperties !== void 0 ? { annotationProperties } : {},
+    isInstanceChild,
+    ...sourceChildId !== void 0 ? { sourceChildId } : {}
+  };
+}
+
 // package.json
-var version2 = "0.9.1";
+var version2 = "0.10.1";
 
 // src/core/engine/scoring.ts
 function computeTotalScorePerCategory(configs) {
@@ -3919,6 +4044,9 @@ function calculateGrade(percentage) {
   if (percentage >= 50) return "D";
   return "F";
 }
+function isReadyForCodeGen(grade) {
+  return grade === "S" || grade === "A+" || grade === "A";
+}
 function clamp(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
@@ -4066,14 +4194,24 @@ function buildResultJson(fileName, result, scores, options) {
     const id = issue.violation.ruleId;
     issuesByRule[id] = (issuesByRule[id] ?? 0) + 1;
   }
-  const issues = result.issues.map((issue) => ({
-    ruleId: issue.violation.ruleId,
-    ...issue.violation.subType && { subType: issue.violation.subType },
-    severity: issue.config.severity,
-    nodeId: issue.violation.nodeId,
-    nodePath: issue.violation.nodePath,
-    message: issue.violation.message
-  }));
+  const issues = result.issues.map((issue) => {
+    const applyContext = computeApplyContext(issue.violation);
+    const suggestedName = issue.violation.suggestedName;
+    return {
+      ruleId: issue.violation.ruleId,
+      ...issue.violation.subType && { subType: issue.violation.subType },
+      severity: issue.config.severity,
+      nodeId: issue.violation.nodeId,
+      nodePath: issue.violation.nodePath,
+      message: issue.violation.message,
+      applyStrategy: applyContext.applyStrategy,
+      ...applyContext.targetProperty !== void 0 ? { targetProperty: applyContext.targetProperty } : {},
+      ...applyContext.annotationProperties !== void 0 ? { annotationProperties: applyContext.annotationProperties } : {},
+      ...suggestedName !== void 0 ? { suggestedName } : {},
+      isInstanceChild: applyContext.isInstanceChild,
+      ...applyContext.sourceChildId !== void 0 ? { sourceChildId: applyContext.sourceChildId } : {}
+    };
+  });
   const json = {
     version: version2,
     analyzedAt: result.analyzedAt,
@@ -4082,6 +4220,8 @@ function buildResultJson(fileName, result, scores, options) {
     nodeCount: result.nodeCount,
     maxDepth: result.maxDepth,
     issueCount: result.issues.length,
+    isReadyForCodeGen: isReadyForCodeGen(scores.overall.grade),
+    blockingIssueCount: scores.summary.blocking,
     scores: {
       overall: scores.overall,
       categories: scores.byCategory
@@ -5470,20 +5610,369 @@ Report saved: ${outputPath}`);
     }
   });
 }
-var SaveFixtureOptionsSchema = z.object({
-  output: z.string().optional(),
-  api: z.boolean().optional(),
+z.object({
+  ruleId: z.string(),
+  question: z.string(),
+  hint: z.string(),
+  example: z.string()
+});
+var GOTCHA_QUESTIONS = {
+  // ── Pixel Critical (blocking) ──
+  "no-auto-layout": {
+    ruleId: "no-auto-layout",
+    question: 'Frame "{nodeName}" has no Auto Layout. How should this area be laid out?',
+    hint: "Describe the flex direction, gap, and alignment",
+    example: "Vertical flex, gap 16px, items centered"
+  },
+  "absolute-position-in-auto-layout": {
+    ruleId: "absolute-position-in-auto-layout",
+    question: '"{nodeName}" uses absolute positioning inside an Auto Layout parent. Is this an intentional overlay, or should it flow with the layout?',
+    hint: "Specify if this is a badge/overlay, or should be part of the normal flow",
+    example: "This is a notification badge \u2014 position absolute, top-right corner"
+  },
+  "non-layout-container": {
+    ruleId: "non-layout-container",
+    question: '"{nodeName}" is a Group/Section used as a layout container. What layout structure should it have?',
+    hint: "Describe the intended layout: flex direction, wrap, gap",
+    example: "Horizontal flex, gap 12px, wrap on mobile"
+  },
+  // ── Responsive Critical (risk) ──
+  "fixed-size-in-auto-layout": {
+    ruleId: "fixed-size-in-auto-layout",
+    question: '"{nodeName}" has a fixed size inside Auto Layout. Should it be responsive?',
+    hint: "Specify which axis should be flexible (width, height, or both)",
+    example: "Width should FILL the parent, height can stay fixed"
+  },
+  "missing-size-constraint": {
+    ruleId: "missing-size-constraint",
+    question: '"{nodeName}" uses FILL sizing without min/max constraints. What are the size boundaries?',
+    hint: "Provide min-width, max-width, or both",
+    example: "min-width 320px, max-width 1200px"
+  },
+  // ── Code Quality (risk) ──
+  "missing-component": {
+    ruleId: "missing-component",
+    question: '"{nodeName}" appears to be a repeated structure. Should it be a reusable component?',
+    hint: "Describe if this should be extracted as a component and what props it needs",
+    example: "Yes, extract as ProductCard component with title, image, and price props"
+  },
+  "detached-instance": {
+    ruleId: "detached-instance",
+    question: '"{nodeName}" looks like a detached component instance. Should it use the original component or is it a new variant?',
+    hint: "Specify whether to restore the component link or create a new variant",
+    example: "This is a new variant \u2014 create a 'compact' variant of the original component"
+  },
+  "variant-structure-mismatch": {
+    ruleId: "variant-structure-mismatch",
+    question: '"{nodeName}" has variants with different child structures. Which structure is the canonical one?',
+    hint: "Describe which variant has the correct structure, or if they should all match",
+    example: "Default variant is canonical \u2014 other variants should toggle child visibility instead of adding/removing elements"
+  },
+  "deep-nesting": {
+    ruleId: "deep-nesting",
+    question: '"{nodeName}" is deeply nested. Can some intermediate layers be flattened or extracted?',
+    hint: "Identify which wrapper layers are unnecessary or should become sub-components",
+    example: "The inner wrapper is just for spacing \u2014 flatten it and use padding instead"
+  },
+  // ── Token Management ──
+  "raw-value": {
+    ruleId: "raw-value",
+    question: '"{nodeName}" uses raw values without design tokens. What tokens should be used?',
+    hint: "Specify the token names or variable references for colors, fonts, spacing, etc.",
+    example: "Use $color-primary for the fill, $font-body for the text style"
+  },
+  "irregular-spacing": {
+    ruleId: "irregular-spacing",
+    question: '"{nodeName}" has spacing values that are off the design grid. What should the correct spacing be?',
+    hint: "Provide the intended spacing value aligned to the grid system",
+    example: "Gap should be 16px (4pt grid), not 15px"
+  },
+  // ── Interaction ──
+  "missing-interaction-state": {
+    ruleId: "missing-interaction-state",
+    question: '"{nodeName}" appears interactive but is missing state variants. What interaction states are needed?',
+    hint: "List the needed states: Hover, Active, Disabled, Focus",
+    example: "Needs Hover (darken 10%) and Disabled (opacity 50%, no pointer events)"
+  },
+  "missing-prototype": {
+    ruleId: "missing-prototype",
+    question: '"{nodeName}" looks interactive but has no prototype interaction. What should happen on click/interaction?',
+    hint: "Describe the interaction behavior: navigation, overlay, state change, etc.",
+    example: "On click, navigate to the product detail page"
+  },
+  // ── Semantic ──
+  "non-standard-naming": {
+    ruleId: "non-standard-naming",
+    question: '"{nodeName}" uses non-standard state names. What naming convention should be followed?',
+    hint: "Specify the expected state name format (e.g., Hover, Disabled, Active)",
+    example: 'Use "Hover" instead of "hover_v1", "Disabled" instead of "off"'
+  },
+  "non-semantic-name": {
+    ruleId: "non-semantic-name",
+    question: '"{nodeName}" has a non-semantic name. What is the purpose of this element?',
+    hint: "Provide a descriptive name that reflects the element's role in the UI",
+    example: 'Rename "Frame 12" to "HeroSection" or "ProductGrid"'
+  },
+  "inconsistent-naming-convention": {
+    ruleId: "inconsistent-naming-convention",
+    question: '"{nodeName}" uses a different naming convention than its siblings. Which convention should be used?',
+    hint: "Choose one: camelCase, kebab-case, PascalCase, or Title Case",
+    example: "Use PascalCase for all component layers (e.g., CardTitle, CardBody)"
+  }
+};
+
+// src/core/gotcha/survey-generator.ts
+var NODE_PATH_SEPARATOR = " > ";
+function generateGotchaSurvey(result, scores) {
+  const grade = scores.overall.grade;
+  const relevantIssues = result.issues.filter(
+    (issue) => issue.config.severity === "blocking" || issue.config.severity === "risk"
+  );
+  const deduped = deduplicateSiblingIssues(relevantIssues);
+  const sorted = stableSortBySeverity(deduped);
+  const questions = sorted.map((issue) => mapToQuestion(issue, result.file)).filter((q) => q !== null);
+  return {
+    designGrade: grade,
+    isReadyForCodeGen: isReadyForCodeGen(grade),
+    questions
+  };
+}
+function deduplicateSiblingIssues(issues) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const issue of issues) {
+    const parentPath = getParentPath(issue.violation.nodePath);
+    const key = `${parentPath}||${issue.violation.ruleId}`;
+    if (!seen.has(key)) {
+      seen.add(key);
+      result.push(issue);
+    }
+  }
+  return result;
+}
+function getParentPath(nodePath) {
+  const lastSep = nodePath.lastIndexOf(NODE_PATH_SEPARATOR);
+  if (lastSep === -1) return "";
+  return nodePath.slice(0, lastSep);
+}
+function getNodeName(nodePath) {
+  const lastSep = nodePath.lastIndexOf(NODE_PATH_SEPARATOR);
+  if (lastSep === -1) return nodePath;
+  return nodePath.slice(lastSep + NODE_PATH_SEPARATOR.length);
+}
+function stableSortBySeverity(issues) {
+  const blocking = [];
+  const risk = [];
+  for (const issue of issues) {
+    if (issue.config.severity === "blocking") {
+      blocking.push(issue);
+    } else {
+      risk.push(issue);
+    }
+  }
+  return [...blocking, ...risk];
+}
+function mapToQuestion(issue, file) {
+  const ruleId = issue.violation.ruleId;
+  const template = GOTCHA_QUESTIONS[ruleId];
+  if (!template) return null;
+  const nodeName = getNodeName(issue.violation.nodePath);
+  const instanceContext = buildInstanceContext(issue.violation.nodeId, file);
+  const applyContext = computeApplyContext(
+    issue.violation,
+    instanceContext ?? void 0
+  );
+  const suggestedName = issue.violation.suggestedName;
+  return {
+    nodeId: issue.violation.nodeId,
+    nodeName,
+    ruleId,
+    severity: issue.config.severity,
+    question: template.question.replace("{nodeName}", nodeName),
+    hint: template.hint,
+    example: template.example,
+    ...instanceContext ? { instanceContext } : {},
+    applyStrategy: applyContext.applyStrategy,
+    ...applyContext.targetProperty !== void 0 ? { targetProperty: applyContext.targetProperty } : {},
+    ...applyContext.annotationProperties !== void 0 ? { annotationProperties: applyContext.annotationProperties } : {},
+    ...suggestedName !== void 0 ? { suggestedName } : {},
+    isInstanceChild: applyContext.isInstanceChild,
+    ...applyContext.sourceChildId !== void 0 ? { sourceChildId: applyContext.sourceChildId } : {}
+  };
+}
+function buildInstanceContext(nodeId, file) {
+  const parts = parseInstanceChildNodeId(nodeId);
+  if (!parts) return null;
+  const parentInstance = findNodeById2(file.document, parts.parentInstanceId);
+  const componentId = parentInstance?.componentId;
+  const componentName = componentId ? file.components[componentId]?.name : void 0;
+  return {
+    parentInstanceNodeId: parts.parentInstanceId,
+    sourceNodeId: parts.sourceNodeId,
+    ...componentId ? { sourceComponentId: componentId } : {},
+    ...componentName ? { sourceComponentName: componentName } : {}
+  };
+}
+function findNodeById2(node, id) {
+  if (node.id === id) return node;
+  if (node.children) {
+    for (const child of node.children) {
+      const found = findNodeById2(child, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+// src/cli/commands/gotcha-survey.ts
+var GotchaSurveyOptionsSchema = z.object({
+  preset: z.enum(["relaxed", "dev-friendly", "ai-ready", "strict"]).optional(),
   token: z.string().optional(),
-  imageScale: z.string().optional(),
-  name: z.string().optional()
+  config: z.string().optional(),
+  targetNodeId: z.string().optional(),
+  json: z.boolean().optional()
+});
+async function runGotchaSurvey(input, options) {
+  const { file, nodeId } = await loadFile(input, options.token);
+  const effectiveNodeId = options.targetNodeId ?? nodeId;
+  let configs = options.preset ? { ...getConfigsWithPreset(options.preset) } : { ...RULE_CONFIGS };
+  if (options.config) {
+    const configFile = await loadConfigFile(options.config);
+    configs = mergeConfigs(configs, configFile);
+  }
+  const result = analyzeFile(file, {
+    configs,
+    ...effectiveNodeId ? { targetNodeId: effectiveNodeId } : {}
+  });
+  const scores = calculateScores(result, configs);
+  return generateGotchaSurvey(result, scores);
+}
+function formatHumanSummary(survey) {
+  const lines = [
+    `Design grade: ${survey.designGrade}`,
+    `Ready for code generation: ${survey.isReadyForCodeGen ? "yes" : "no"}`,
+    `Questions: ${survey.questions.length}`
+  ];
+  if (survey.questions.length > 0) {
+    lines.push("");
+    lines.push("Use --json to get the full GotchaSurvey JSON for programmatic use.");
+  }
+  return lines.join("\n");
+}
+function registerGotchaSurvey(cli2) {
+  cli2.command("gotcha-survey <input>", "Generate a gotcha survey from a Figma design analysis").option("--preset <preset>", "Analysis preset (relaxed | dev-friendly | ai-ready | strict)").option("--token <token>", "Figma API token (or use FIGMA_TOKEN env var)").option("--config <path>", "Path to config JSON file (override rule scores/settings)").option("--target-node-id <id>", "Scope analysis to a specific node ID").option("--json", "Output GotchaSurvey JSON to stdout (same format as MCP)").example("  canicode gotcha-survey https://www.figma.com/design/ABC123/MyDesign --json").example("  canicode gotcha-survey ./fixtures/my-design --json").action(async (input, rawOptions) => {
+    const parseResult = GotchaSurveyOptionsSchema.safeParse(rawOptions);
+    if (!parseResult.success) {
+      const msg = parseResult.error.issues.map((i) => `--${i.path.join(".")}: ${i.message}`).join("\n");
+      console.error(`
+Invalid options:
+${msg}`);
+      process.exit(1);
+    }
+    const options = parseResult.data;
+    const analysisStart = Date.now();
+    trackEvent(EVENTS.ANALYSIS_STARTED, {
+      source: isJsonFile(input) || isFixtureDir(input) ? "fixture" : "figma",
+      tool: "gotcha-survey"
+    });
+    const log = options.json ? console.error.bind(console) : console.log.bind(console);
+    try {
+      if (!options.token && !getFigmaToken() && !isJsonFile(input) && !isFixtureDir(input)) {
+        throw new Error(
+          "canicode is not configured. Run 'canicode init --token YOUR_TOKEN' first."
+        );
+      }
+      const survey = await runGotchaSurvey(input, options);
+      if (options.json) {
+        console.log(JSON.stringify(survey, null, 2));
+      } else {
+        log(formatHumanSummary(survey));
+      }
+      trackEvent(EVENTS.ANALYSIS_COMPLETED, {
+        grade: survey.designGrade,
+        questionCount: survey.questions.length,
+        isReadyForCodeGen: survey.isReadyForCodeGen,
+        duration: Date.now() - analysisStart,
+        tool: "gotcha-survey"
+      });
+    } catch (error) {
+      trackError(
+        error instanceof Error ? error : new Error(String(error)),
+        { command: "gotcha-survey", input }
+      );
+      trackEvent(EVENTS.ANALYSIS_FAILED, {
+        error: error instanceof Error ? error.message : String(error),
+        duration: Date.now() - analysisStart,
+        tool: "gotcha-survey"
+      });
+      console.error(
+        "\nError:",
+        error instanceof Error ? error.message : String(error)
+      );
+      process.exitCode = 1;
+    }
+  });
+}
+function registerDesignTree(cli2) {
+  cli2.command(
+    "design-tree <input>",
+    "Generate a DOM-like design tree from a Figma file or fixture"
+  ).option("--token <token>", "Figma API token (or use FIGMA_TOKEN env var)").option("--output <path>", "Output file path (default: stdout)").option("--vector-dir <path>", "Directory with SVG files for VECTOR nodes (auto-detected from fixture path)").option("--image-dir <path>", "Directory with image PNGs for IMAGE fill nodes (auto-detected from fixture path)").example("  canicode design-tree ./fixtures/my-design").example("  canicode design-tree https://www.figma.com/design/ABC/File?node-id=1-234 --output tree.txt").action(async (input, options) => {
+    try {
+      const { file } = await loadFile(input, options.token);
+      const fixtureBase = isJsonFile(input) ? dirname(resolve(input)) : resolve(input);
+      let vectorDir = options.vectorDir;
+      if (!vectorDir) {
+        const autoDir = resolve(fixtureBase, "vectors");
+        if (existsSync(autoDir)) vectorDir = autoDir;
+      }
+      let imageDir = options.imageDir;
+      if (!imageDir) {
+        const autoDir = resolve(fixtureBase, "images");
+        if (existsSync(autoDir)) imageDir = autoDir;
+      }
+      const { generateDesignTreeWithStats: generateDesignTreeWithStats2 } = await Promise.resolve().then(() => (init_design_tree(), design_tree_exports));
+      const treeOptions = {
+        ...vectorDir ? { vectorDir } : {},
+        ...imageDir ? { imageDir } : {}
+      };
+      const stats = generateDesignTreeWithStats2(file, treeOptions);
+      if (options.output) {
+        const outputDir = dirname(resolve(options.output));
+        if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true });
+        const { writeFile: writeFileAsync } = await import('fs/promises');
+        await writeFileAsync(resolve(options.output), stats.tree, "utf-8");
+        console.log(`Design tree saved: ${resolve(options.output)} (${Math.round(stats.bytes / 1024)}KB, ~${stats.estimatedTokens} tokens)`);
+      } else {
+        console.log(stats.tree);
+      }
+    } catch (error) {
+      console.error("\nError:", error instanceof Error ? error.message : String(error));
+      process.exitCode = 1;
+    }
+  });
+}
+var positiveCliNumber = z.union([z.string(), z.number()]).transform((v) => Number(v)).refine(Number.isFinite, "must be a valid number").refine((v) => v > 0, "must be positive");
+var figmaScaleNumber = z.union([z.string(), z.number()]).transform((v) => Number(v)).refine(Number.isFinite, "must be a valid number").refine((v) => v >= 1, "must be >= 1");
+var VisualCompareCliOptionsSchema = z.object({
+  figmaUrl: z.string().optional(),
+  figmaScreenshot: z.string().optional(),
+  token: z.string().optional(),
+  output: z.string().optional(),
+  width: positiveCliNumber.optional(),
+  height: positiveCliNumber.optional(),
+  figmaScale: figmaScaleNumber.optional(),
+  expandRoot: z.boolean().optional()
 });
-function registerSaveFixture(cli2) {
+
+// src/cli/commands/visual-compare.ts
+function registerVisualCompare(cli2) {
   cli2.command(
-    "save-fixture <input>",
-    "Save Figma design as a fixture directory for offline analysis"
-  ).option("--output <path>", "Output directory (default: fixtures/<name>/)").option("--name <name>", "Fixture name (default: extracted from URL)").option("--token <token>", "Figma API token (or use FIGMA_TOKEN env var)").option("--image-scale <n>", "Image export scale: 2 for PC (default), 3 for mobile").example("  canicode save-fixture https://www.figma.com/design/ABC123/MyDesign?node-id=1-234").example("  canicode save-fixture https://www.figma.com/design/ABC123/MyDesign?node-id=1-234 --image-scale 3").action(async (input, rawOptions) => {
+    "visual-compare <codePath>",
+    "Compare rendered code against Figma screenshot (pixel-level similarity)"
+  ).option("--figma-url <url>", "Figma URL with node-id (required for API fetch)").option("--figma-screenshot <path>", "Local Figma screenshot file (skips API fetch)").option("--token <token>", "Figma API token (or use FIGMA_TOKEN env var)").option("--output <dir>", "Output directory for screenshots and diff (default: /tmp/canicode-visual-compare)").option("--width <px>", "Logical viewport width in CSS px (default: infer from Figma PNG \xF7 export scale)").option("--height <px>", "Logical viewport height in CSS px (default: infer from Figma PNG \xF7 export scale)").option("--figma-scale <n>", "Figma export scale (default: 2, matches calibrate-save-fixture / @2x PNGs)").option("--expand-root", "Replace root element's fixed width with 100% before rendering (for responsive comparison)").example("  canicode visual-compare ./generated/index.html --figma-url 'https://www.figma.com/design/ABC/File?node-id=1-234'").action(async (codePath, rawOptions) => {
     try {
-      const parseResult = SaveFixtureOptionsSchema.safeParse(rawOptions);
+      const parseResult = VisualCompareCliOptionsSchema.safeParse(rawOptions);
       if (!parseResult.success) {
         const msg = parseResult.error.issues.map((i) => `--${i.path.join(".")}: ${i.message}`).join("\n");
         console.error(`
@@ -5492,453 +5981,20 @@ ${msg}`);
         process.exit(1);
       }
       const options = parseResult.data;
-      if (!isFigmaUrl(input)) {
-        throw new Error("save-fixture requires a Figma URL as input.");
+      if (!options.figmaUrl && !options.figmaScreenshot) {
+        console.error("Error: --figma-url or --figma-screenshot is required");
+        process.exitCode = 1;
+        return;
       }
-      if (options.imageScale !== void 0) {
-        const scale = Number(options.imageScale);
-        if (!Number.isFinite(scale) || scale < 1 || scale > 4) {
-          console.error("Error: --image-scale must be 1-4 (2 for PC, 3 for mobile)");
-          process.exit(1);
-        }
+      if (options.figmaUrl && !parseFigmaUrl(options.figmaUrl).nodeId) {
+        console.warn("Warning: --figma-url has no node-id. Results may be inaccurate for full files.");
+        console.warn("Tip: Add ?node-id=XXX to target a specific section.\n");
       }
-      if (!parseFigmaUrl(input).nodeId) {
-        console.warn("\nWarning: No node-id specified. Saving entire file as fixture.");
-        console.warn("Tip: Add ?node-id=XXX to save a specific section.\n");
-      }
-      const { file } = await loadFile(input, options.token);
-      file.sourceUrl = input;
-      const fixtureName = options.name ?? file.fileKey;
-      const fixtureDir = resolve(options.output ?? `fixtures/${fixtureName}`);
-      mkdirSync(fixtureDir, { recursive: true });
-      const figmaTokenForComponents = options.token ?? getFigmaToken();
-      if (figmaTokenForComponents) {
-        const { FigmaClient: FC } = await Promise.resolve().then(() => (init_figma_client(), figma_client_exports));
-        const { resolveComponentDefinitions: resolveComponentDefinitions2, resolveInteractionDestinations: resolveInteractionDestinations2 } = await Promise.resolve().then(() => (init_component_resolver(), component_resolver_exports));
-        const componentClient = new FC({ token: figmaTokenForComponents });
-        try {
-          const definitions = await resolveComponentDefinitions2(componentClient, file.fileKey, file.document);
-          const count = Object.keys(definitions).length;
-          if (count > 0) {
-            file.componentDefinitions = definitions;
-            console.log(`Resolved ${count} component master node tree(s)`);
-          }
-          const interactionDests = await resolveInteractionDestinations2(componentClient, file.fileKey, file.document, file.componentDefinitions);
-          const destCount = Object.keys(interactionDests).length;
-          if (destCount > 0) {
-            file.interactionDestinations = interactionDests;
-            console.log(`Resolved ${destCount} interaction destination(s)`);
-          }
-        } catch {
-          console.warn("Warning: failed to resolve component definitions (continuing)");
-        }
-      }
-      const dataPath = resolve(fixtureDir, "data.json");
-      await writeFile(dataPath, JSON.stringify(file, null, 2), "utf-8");
-      console.log(`Fixture saved: ${fixtureDir}/`);
-      console.log(`  data.json: ${file.name} (${countNodes2(file.document)} nodes)`);
-      const figmaToken = options.token ?? getFigmaToken();
-      if (figmaToken) {
-        const { FigmaClient: FigmaClient2 } = await Promise.resolve().then(() => (init_figma_client(), figma_client_exports));
-        const client = new FigmaClient2({ token: figmaToken });
-        const { nodeId } = parseFigmaUrl(input);
-        const rootNodeId = nodeId?.replace(/-/g, ":") ?? file.document.id;
-        try {
-          const imageUrls = await client.getNodeImages(file.fileKey, [rootNodeId], { format: "png", scale: 2 });
-          const url = imageUrls[rootNodeId];
-          if (url) {
-            const resp = await fetch(url);
-            if (resp.ok) {
-              const buffer = Buffer.from(await resp.arrayBuffer());
-              const { writeFile: writeFileSync6 } = await import('fs/promises');
-              await writeFileSync6(resolve(fixtureDir, "screenshot.png"), buffer);
-              console.log(`  screenshot.png: saved`);
-            }
-          }
-        } catch {
-          console.warn("  screenshot.png: failed to download (continuing)");
-        }
-        const vectorNodes = collectVectorNodes(file.document);
-        if (vectorNodes.length > 0) {
-          const vectorDir = resolve(fixtureDir, "vectors");
-          mkdirSync(vectorDir, { recursive: true });
-          const svgUrls = await client.getNodeImages(
-            file.fileKey,
-            vectorNodes.map((n) => n.id),
-            { format: "svg" }
-          );
-          const mapping = {};
-          const usedNames = /* @__PURE__ */ new Map();
-          let downloaded = 0;
-          for (const { id, name } of vectorNodes) {
-            let base = sanitizeFilename(name);
-            const count = usedNames.get(base) ?? 0;
-            usedNames.set(base, count + 1);
-            if (count > 0) base = `${base}-${count + 1}`;
-            const filename = `${base}.svg`;
-            mapping[id] = filename;
-            const svgUrl = svgUrls[id];
-            if (!svgUrl) continue;
-            try {
-              const resp = await fetch(svgUrl);
-              if (resp.ok) {
-                const svg = await resp.text();
-                await writeFile(resolve(vectorDir, filename), svg, "utf-8");
-                downloaded++;
-              }
-            } catch {
-            }
-          }
-          await writeFile(resolve(vectorDir, "mapping.json"), JSON.stringify(mapping, null, 2), "utf-8");
-          console.log(`  vectors/: ${downloaded}/${vectorNodes.length} SVGs`);
-        }
-        const imageNodes = collectImageNodes(file.document);
-        if (imageNodes.length > 0) {
-          const imgScale = options.imageScale !== void 0 ? Number(options.imageScale) : 2;
-          const imageDir = resolve(fixtureDir, "images");
-          mkdirSync(imageDir, { recursive: true });
-          const imageFills = await client.getImageFills(file.fileKey);
-          const usedNames = /* @__PURE__ */ new Map();
-          const mapping = {};
-          let imgDownloaded = 0;
-          for (const { id, name, imageRef } of imageNodes) {
-            let base = sanitizeFilename(name);
-            const count = usedNames.get(base) ?? 0;
-            usedNames.set(base, count + 1);
-            if (count > 0) base = `${base}-${count + 1}`;
-            const filename = `${base}@${imgScale}x.png`;
-            mapping[id] = filename;
-            if (!imageRef) continue;
-            const imgUrl = imageFills[imageRef];
-            if (!imgUrl) continue;
-            try {
-              const resp = await fetch(imgUrl);
-              if (resp.ok) {
-                const buf = Buffer.from(await resp.arrayBuffer());
-                await writeFile(resolve(imageDir, filename), buf);
-                imgDownloaded++;
-              }
-            } catch {
-            }
-          }
-          await writeFile(
-            resolve(imageDir, "mapping.json"),
-            JSON.stringify(mapping, null, 2),
-            "utf-8"
-          );
-          console.log(`  images/: ${imgDownloaded}/${imageNodes.length} PNGs (@${imgScale}x)`);
-        }
-      }
-    } catch (error) {
-      console.error(
-        "\nError:",
-        error instanceof Error ? error.message : String(error)
-      );
-      process.exitCode = 1;
-    }
-  });
-}
-function registerDesignTree(cli2) {
-  cli2.command(
-    "design-tree <input>",
-    "Generate a DOM-like design tree from a Figma file or fixture"
-  ).option("--token <token>", "Figma API token (or use FIGMA_TOKEN env var)").option("--output <path>", "Output file path (default: stdout)").option("--vector-dir <path>", "Directory with SVG files for VECTOR nodes (auto-detected from fixture path)").option("--image-dir <path>", "Directory with image PNGs for IMAGE fill nodes (auto-detected from fixture path)").example("  canicode design-tree ./fixtures/my-design").example("  canicode design-tree https://www.figma.com/design/ABC/File?node-id=1-234 --output tree.txt").action(async (input, options) => {
-    try {
-      const { file } = await loadFile(input, options.token);
-      const fixtureBase = isJsonFile(input) ? dirname(resolve(input)) : resolve(input);
-      let vectorDir = options.vectorDir;
-      if (!vectorDir) {
-        const autoDir = resolve(fixtureBase, "vectors");
-        if (existsSync(autoDir)) vectorDir = autoDir;
-      }
-      let imageDir = options.imageDir;
-      if (!imageDir) {
-        const autoDir = resolve(fixtureBase, "images");
-        if (existsSync(autoDir)) imageDir = autoDir;
-      }
-      const { generateDesignTreeWithStats: generateDesignTreeWithStats2 } = await Promise.resolve().then(() => (init_design_tree(), design_tree_exports));
-      const treeOptions = {
-        ...vectorDir ? { vectorDir } : {},
-        ...imageDir ? { imageDir } : {}
-      };
-      const stats = generateDesignTreeWithStats2(file, treeOptions);
-      if (options.output) {
-        const outputDir = dirname(resolve(options.output));
-        if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true });
-        const { writeFile: writeFileAsync } = await import('fs/promises');
-        await writeFileAsync(resolve(options.output), stats.tree, "utf-8");
-        console.log(`Design tree saved: ${resolve(options.output)} (${Math.round(stats.bytes / 1024)}KB, ~${stats.estimatedTokens} tokens)`);
-      } else {
-        console.log(stats.tree);
-      }
-    } catch (error) {
-      console.error("\nError:", error instanceof Error ? error.message : String(error));
-      process.exitCode = 1;
-    }
-  });
-}
-var ImplementOptionsSchema = z.object({
-  token: z.string().optional(),
-  output: z.string().optional(),
-  prompt: z.string().optional(),
-  imageScale: z.string().optional()
-});
-function registerImplement(cli2) {
-  cli2.command(
-    "implement <input>",
-    "Prepare design-to-code package: analysis + design tree + assets + prompt"
-  ).option("--token <token>", "Figma API token (or use FIGMA_TOKEN env var)").option("--output <dir>", "Output directory (default: ./canicode-implement/)").option("--prompt <path>", "Custom prompt file (default: built-in HTML+CSS prompt)").option("--image-scale <n>", "Image export scale: 2 for PC (default), 3 for mobile").example("  canicode implement ./fixtures/my-design").example("  canicode implement ./fixtures/my-design --prompt ./my-react-prompt.md --image-scale 3").action(async (input, rawOptions) => {
-    try {
-      const parseResult = ImplementOptionsSchema.safeParse(rawOptions);
-      if (!parseResult.success) {
-        const msg = parseResult.error.issues.map((i) => `--${i.path.join(".")}: ${i.message}`).join("\n");
-        console.error(`
-Invalid options:
-${msg}`);
-        process.exit(1);
-      }
-      const options = parseResult.data;
-      if (options.imageScale !== void 0) {
-        const scale = Number(options.imageScale);
-        if (!Number.isFinite(scale) || scale < 1 || scale > 4) {
-          console.error("Error: --image-scale must be 1-4 (2 for PC, 3 for mobile)");
-          process.exit(1);
-        }
-      }
-      if (isFigmaUrl(input) && !parseFigmaUrl(input).nodeId) {
-        console.warn("Warning: No node-id in Figma URL. Implementation package will cover the entire file.");
-        console.warn("Tip: Add ?node-id=XXX to target a specific section.\n");
-      }
-      const outputDir = resolve(options.output ?? "canicode-implement");
-      mkdirSync(outputDir, { recursive: true });
-      console.log("\nPreparing implementation package...\n");
-      const { file } = await loadFile(input, options.token);
-      console.log(`Design: ${file.name}`);
-      const result = analyzeFile(file);
-      const scores = calculateScores(result);
-      const resultJson = buildResultJson(file.name, result, scores, { fileKey: file.fileKey });
-      await writeFile(resolve(outputDir, "analysis.json"), JSON.stringify(resultJson, null, 2), "utf-8");
-      console.log(`  analysis.json: ${result.issues.length} issues, grade ${scores.overall.grade}`);
-      const fixtureBase = isJsonFile(input) || isFixtureDir(input) ? isJsonFile(input) ? dirname(resolve(input)) : resolve(input) : void 0;
-      let vectorDir = fixtureBase ? resolve(fixtureBase, "vectors") : void 0;
-      let imageDir = fixtureBase ? resolve(fixtureBase, "images") : void 0;
-      if (vectorDir && existsSync(vectorDir)) {
-        const vecOutputDir = resolve(outputDir, "vectors");
-        mkdirSync(vecOutputDir, { recursive: true });
-        const { readdirSync: readdirSync3, copyFileSync: copyFileSync2 } = await import('fs');
-        const vecFiles = readdirSync3(vectorDir).filter((f) => f.endsWith(".svg") || f === "mapping.json");
-        for (const f of vecFiles) {
-          copyFileSync2(resolve(vectorDir, f), resolve(vecOutputDir, f));
-        }
-        vectorDir = vecOutputDir;
-        console.log(`  vectors/: ${vecFiles.length} SVGs copied`);
-      }
-      if (imageDir && existsSync(imageDir)) {
-        const imgOutputDir = resolve(outputDir, "images");
-        mkdirSync(imgOutputDir, { recursive: true });
-        const { readdirSync: readdirSync3, copyFileSync: copyFileSync2 } = await import('fs');
-        const imgFiles = readdirSync3(imageDir).filter((f) => f.endsWith(".png") || f.endsWith(".jpg") || f.endsWith(".json"));
-        for (const f of imgFiles) {
-          copyFileSync2(resolve(imageDir, f), resolve(imgOutputDir, f));
-        }
-        imageDir = imgOutputDir;
-        const pngCount = imgFiles.filter((f) => f.endsWith(".png")).length;
-        console.log(`  images/: ${pngCount} assets copied`);
-      }
-      if (isFigmaUrl(input) && !fixtureBase) {
-        const figmaToken = options.token ?? getFigmaToken();
-        if (figmaToken) {
-          const imgScale = options.imageScale !== void 0 ? Number(options.imageScale) : 2;
-          const { FigmaClient: FigmaClient2 } = await Promise.resolve().then(() => (init_figma_client(), figma_client_exports));
-          const client = new FigmaClient2({ token: figmaToken });
-          const { nodeId } = parseFigmaUrl(input);
-          const rootNodeId = nodeId?.replace(/-/g, ":") ?? file.document.id;
-          try {
-            const screenshotUrls = await client.getNodeImages(file.fileKey, [rootNodeId], { format: "png", scale: 2 });
-            const screenshotUrl = screenshotUrls[rootNodeId];
-            if (screenshotUrl) {
-              const resp = await fetch(screenshotUrl);
-              if (resp.ok) {
-                const buf = Buffer.from(await resp.arrayBuffer());
-                await writeFile(resolve(outputDir, "screenshot.png"), buf);
-                console.log(`  screenshot.png: saved`);
-              }
-            }
-          } catch {
-            console.warn("  screenshot.png: failed to download (continuing)");
-          }
-          const vectorNodes = collectVectorNodes(file.document);
-          if (vectorNodes.length > 0) {
-            const vecOutDir = resolve(outputDir, "vectors");
-            mkdirSync(vecOutDir, { recursive: true });
-            try {
-              const svgUrls = await client.getNodeImages(
-                file.fileKey,
-                vectorNodes.map((n) => n.id),
-                { format: "svg" }
-              );
-              const mapping = {};
-              const usedNames = /* @__PURE__ */ new Map();
-              let downloaded = 0;
-              for (const { id, name } of vectorNodes) {
-                let base = sanitizeFilename(name);
-                const count = usedNames.get(base) ?? 0;
-                usedNames.set(base, count + 1);
-                if (count > 0) base = `${base}-${count + 1}`;
-                const filename = `${base}.svg`;
-                mapping[id] = filename;
-                const svgUrl = svgUrls[id];
-                if (!svgUrl) continue;
-                try {
-                  const resp = await fetch(svgUrl);
-                  if (resp.ok) {
-                    const svg = await resp.text();
-                    await writeFile(resolve(vecOutDir, filename), svg, "utf-8");
-                    downloaded++;
-                  }
-                } catch {
-                }
-              }
-              await writeFile(resolve(vecOutDir, "mapping.json"), JSON.stringify(mapping, null, 2), "utf-8");
-              console.log(`  vectors/: ${downloaded}/${vectorNodes.length} SVGs`);
-            } catch {
-              console.warn("  vectors/: failed to download (continuing)");
-            }
-          }
-          const imgNodes = collectImageNodes(file.document);
-          if (imgNodes.length > 0) {
-            const imgOutDir = resolve(outputDir, "images");
-            mkdirSync(imgOutDir, { recursive: true });
-            try {
-              const imageFills = await client.getImageFills(file.fileKey);
-              const mapping = {};
-              const usedNames = /* @__PURE__ */ new Map();
-              let downloaded = 0;
-              for (const { id, name, imageRef } of imgNodes) {
-                let base = sanitizeFilename(name);
-                const count = usedNames.get(base) ?? 0;
-                usedNames.set(base, count + 1);
-                if (count > 0) base = `${base}-${count + 1}`;
-                const filename = `${base}@${imgScale}x.png`;
-                mapping[id] = filename;
-                if (!imageRef) continue;
-                const imgUrl = imageFills[imageRef];
-                if (!imgUrl) continue;
-                try {
-                  const resp = await fetch(imgUrl);
-                  if (resp.ok) {
-                    const buf = Buffer.from(await resp.arrayBuffer());
-                    await writeFile(resolve(imgOutDir, filename), buf);
-                    downloaded++;
-                  }
-                } catch {
-                }
-              }
-              await writeFile(resolve(imgOutDir, "mapping.json"), JSON.stringify(mapping, null, 2), "utf-8");
-              imageDir = imgOutDir;
-              console.log(`  images/: ${downloaded}/${imgNodes.length} PNGs (@${imgScale}x)`);
-            } catch {
-              console.warn("  images/: failed to download (continuing)");
-            }
-          }
-          const vecOutCheck = resolve(outputDir, "vectors");
-          if (existsSync(vecOutCheck)) vectorDir = vecOutCheck;
-        }
-      }
-      const { generateDesignTreeWithStats: generateDesignTreeWithStats2 } = await Promise.resolve().then(() => (init_design_tree(), design_tree_exports));
-      const treeOptions = {
-        ...vectorDir && existsSync(vectorDir) ? { vectorDir } : {},
-        ...imageDir && existsSync(imageDir) ? { imageDir } : {}
-      };
-      const stats = generateDesignTreeWithStats2(file, treeOptions);
-      await writeFile(resolve(outputDir, "design-tree.txt"), stats.tree, "utf-8");
-      console.log(`  design-tree.txt: ~${stats.estimatedTokens} tokens`);
-      if (options.prompt) {
-        const { readFile: rf } = await import('fs/promises');
-        const customPrompt = await rf(resolve(options.prompt), "utf-8");
-        await writeFile(resolve(outputDir, "PROMPT.md"), customPrompt, "utf-8");
-        console.log(`  PROMPT.md: custom (${options.prompt})`);
-      } else {
-        const { readFile: rf } = await import('fs/promises');
-        const { dirname: dirnameFn, resolve: resolveFn } = await import('path');
-        const { fileURLToPath } = await import('url');
-        const cliDir = dirnameFn(fileURLToPath(import.meta.url));
-        const projectRoot = resolveFn(cliDir, "../..");
-        const altRoot = resolveFn(cliDir, "..");
-        let prompt = "";
-        for (const root of [projectRoot, altRoot]) {
-          const p = resolveFn(root, ".claude/skills/design-to-code/PROMPT.md");
-          try {
-            prompt = await rf(p, "utf-8");
-            break;
-          } catch {
-          }
-        }
-        if (prompt) {
-          await writeFile(resolve(outputDir, "PROMPT.md"), prompt, "utf-8");
-          console.log(`  PROMPT.md: default (html-css)`);
-        } else {
-          console.warn("  PROMPT.md: built-in prompt not found (skipped)");
-        }
-      }
-      console.log(`
-${"=".repeat(50)}`);
-      console.log(`Implementation package ready: ${outputDir}/`);
-      console.log(`  Grade: ${scores.overall.grade} (${scores.overall.percentage}%)`);
-      console.log(`  Issues: ${result.issues.length}`);
-      console.log(`  Design tree: ~${stats.estimatedTokens} tokens`);
-      console.log(`${"=".repeat(50)}`);
-      console.log(`
-Next: Feed design-tree.txt + PROMPT.md to your AI assistant.`);
-    } catch (error) {
-      console.error("\nError:", error instanceof Error ? error.message : String(error));
-      process.exitCode = 1;
-    }
-  });
-}
-var positiveCliNumber = z.union([z.string(), z.number()]).transform((v) => Number(v)).refine(Number.isFinite, "must be a valid number").refine((v) => v > 0, "must be positive");
-var figmaScaleNumber = z.union([z.string(), z.number()]).transform((v) => Number(v)).refine(Number.isFinite, "must be a valid number").refine((v) => v >= 1, "must be >= 1");
-var VisualCompareCliOptionsSchema = z.object({
-  figmaUrl: z.string().optional(),
-  figmaScreenshot: z.string().optional(),
-  token: z.string().optional(),
-  output: z.string().optional(),
-  width: positiveCliNumber.optional(),
-  height: positiveCliNumber.optional(),
-  figmaScale: figmaScaleNumber.optional(),
-  expandRoot: z.boolean().optional()
-});
-
-// src/cli/commands/visual-compare.ts
-function registerVisualCompare(cli2) {
-  cli2.command(
-    "visual-compare <codePath>",
-    "Compare rendered code against Figma screenshot (pixel-level similarity)"
-  ).option("--figma-url <url>", "Figma URL with node-id (required for API fetch)").option("--figma-screenshot <path>", "Local Figma screenshot file (skips API fetch)").option("--token <token>", "Figma API token (or use FIGMA_TOKEN env var)").option("--output <dir>", "Output directory for screenshots and diff (default: /tmp/canicode-visual-compare)").option("--width <px>", "Logical viewport width in CSS px (default: infer from Figma PNG \xF7 export scale)").option("--height <px>", "Logical viewport height in CSS px (default: infer from Figma PNG \xF7 export scale)").option("--figma-scale <n>", "Figma export scale (default: 2, matches save-fixture / @2x PNGs)").option("--expand-root", "Replace root element's fixed width with 100% before rendering (for responsive comparison)").example("  canicode visual-compare ./generated/index.html --figma-url 'https://www.figma.com/design/ABC/File?node-id=1-234'").action(async (codePath, rawOptions) => {
-    try {
-      const parseResult = VisualCompareCliOptionsSchema.safeParse(rawOptions);
-      if (!parseResult.success) {
-        const msg = parseResult.error.issues.map((i) => `--${i.path.join(".")}: ${i.message}`).join("\n");
-        console.error(`
-Invalid options:
-${msg}`);
-        process.exit(1);
-      }
-      const options = parseResult.data;
-      if (!options.figmaUrl && !options.figmaScreenshot) {
-        console.error("Error: --figma-url or --figma-screenshot is required");
-        process.exitCode = 1;
-        return;
-      }
-      if (options.figmaUrl && !parseFigmaUrl(options.figmaUrl).nodeId) {
-        console.warn("Warning: --figma-url has no node-id. Results may be inaccurate for full files.");
-        console.warn("Tip: Add ?node-id=XXX to target a specific section.\n");
-      }
-      const token = options.token ?? getFigmaToken();
-      if (!token && !options.figmaScreenshot) {
-        console.error("Error: Figma token required. Use --token or set FIGMA_TOKEN env var (or use --figma-screenshot for local files).");
-        process.exitCode = 1;
-        return;
+      const token = options.token ?? getFigmaToken();
+      if (!token && !options.figmaScreenshot) {
+        console.error("Error: Figma token required. Use --token or set FIGMA_TOKEN env var (or use --figma-screenshot for local files).");
+        process.exitCode = 1;
+        return;
       }
       const { visualCompare: visualCompare2 } = await Promise.resolve().then(() => (init_visual_compare(), visual_compare_exports));
       const hasViewportOverride = options.width !== void 0 || options.height !== void 0;
@@ -5975,13 +6031,150 @@ ${msg}`);
       );
       process.exitCode = 1;
     }
-  });
+  });
+}
+var InstallSkillsOptionsSchema = z.object({
+  target: z.enum(["project", "global"]),
+  force: z.boolean(),
+  cwd: z.string().optional(),
+  sourceDir: z.string().optional()
+});
+var SKILL_NAMES = ["canicode", "canicode-gotchas", "canicode-roundtrip"];
+function defaultSourceDir() {
+  return fileURLToPath(new URL("../../skills/", import.meta.url));
+}
+async function installSkills(rawOptions) {
+  const options = InstallSkillsOptionsSchema.parse(rawOptions);
+  const sourceDir = options.sourceDir ?? defaultSourceDir();
+  if (!existsSync(sourceDir)) {
+    throw new Error(
+      `Bundled skills directory not found: ${sourceDir}
+If you are developing canicode, run 'pnpm build' first.
+If you installed canicode from npm, please file a bug report \u2014 the tarball is missing skills/.`
+    );
+  }
+  const cwd = options.cwd ?? process.cwd();
+  const targetDir = options.target === "global" ? join(homedir(), ".claude", "skills") : join(cwd, ".claude", "skills");
+  mkdirSync(targetDir, { recursive: true });
+  const summary = {
+    installed: [],
+    overwritten: [],
+    skipped: [],
+    targetDir
+  };
+  const ops = [];
+  for (const skillName of SKILL_NAMES) {
+    const srcSkillDir = join(sourceDir, skillName);
+    if (!existsSync(srcSkillDir)) {
+      throw new Error(`Bundled skill directory missing: ${srcSkillDir}`);
+    }
+    const destSkillDir = join(targetDir, skillName);
+    mkdirSync(destSkillDir, { recursive: true });
+    const files = listFilesRecursive(srcSkillDir);
+    for (const relPath of files) {
+      const src = join(srcSkillDir, relPath);
+      const dest = join(destSkillDir, relPath);
+      mkdirSync(dirname(dest), { recursive: true });
+      const label = join(skillName, relPath);
+      let action;
+      if (!existsSync(dest)) {
+        action = "install";
+      } else if (options.force) {
+        action = "force-overwrite";
+      } else {
+        action = "needs-decision";
+      }
+      ops.push({ src, dest, label, action });
+    }
+  }
+  const candidates = ops.filter((op) => op.action === "needs-decision");
+  const decisions = candidates.length > 0 ? await promptOverwriteBatch(candidates.map((op) => ({ label: op.label, dest: op.dest }))) : /* @__PURE__ */ new Map();
+  for (const op of ops) {
+    if (op.action === "install") {
+      copyFileSync(op.src, op.dest);
+      summary.installed.push(op.label);
+    } else if (op.action === "force-overwrite") {
+      copyFileSync(op.src, op.dest);
+      summary.overwritten.push(op.label);
+    } else {
+      const decision = decisions.get(op.label) ?? "skip";
+      if (decision === "overwrite") {
+        copyFileSync(op.src, op.dest);
+        summary.overwritten.push(op.label);
+      } else {
+        summary.skipped.push(op.label);
+      }
+    }
+  }
+  return summary;
+}
+function listFilesRecursive(dir) {
+  const out = [];
+  const walk = (current) => {
+    for (const entry of readdirSync(current)) {
+      const full = join(current, entry);
+      const stat = statSync(full);
+      if (stat.isDirectory()) {
+        walk(full);
+      } else if (stat.isFile()) {
+        out.push(relative(dir, full));
+      }
+    }
+  };
+  walk(dir);
+  return out;
+}
+async function promptOverwriteBatch(candidates) {
+  const decisions = /* @__PURE__ */ new Map();
+  if (!process.stdin.isTTY || !process.stdout.isTTY) {
+    for (const { label } of candidates) {
+      decisions.set(label, "skip");
+    }
+    return decisions;
+  }
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    let mode = "ask";
+    for (const { label, dest } of candidates) {
+      if (mode === "all") {
+        decisions.set(label, "overwrite");
+        continue;
+      }
+      if (mode === "none") {
+        decisions.set(label, "skip");
+        continue;
+      }
+      const answer = (await rl.question(
+        `File exists: ${dest}. Overwrite? [y/N/a=all/s=skip-all] `
+      )).trim().toLowerCase();
+      if (answer === "a") {
+        decisions.set(label, "overwrite");
+        mode = "all";
+      } else if (answer === "s") {
+        decisions.set(label, "skip");
+        mode = "none";
+      } else if (answer.startsWith("y")) {
+        decisions.set(label, "overwrite");
+      } else {
+        decisions.set(label, "skip");
+      }
+    }
+  } finally {
+    rl.close();
+  }
+  return decisions;
 }
+
+// src/cli/commands/init.ts
 var InitOptionsSchema = z.object({
-  token: z.string().optional()
+  token: z.string().optional(),
+  global: z.boolean().optional(),
+  // cac maps `--no-skills` to `skills: false` (mirrors `--no-telemetry`).
+  skills: z.boolean().optional(),
+  force: z.boolean().optional()
 });
 function registerInit(cli2) {
-  cli2.command("init", "Set up canicode with Figma API token").option("--token <token>", "Save Figma API token to ~/.canicode/").action((rawOptions) => {
+  cli2.command("init", "Set up canicode with Figma API token").option("--token <token>", "Save Figma API token and install Claude Code skills to .claude/skills/").option("--global", "Install skills to ~/.claude/skills/ instead of ./.claude/skills/").option("--no-skills", "Skip skill installation (token only)").option("--force", "Overwrite existing skill files without prompting (also for non-TTY/CI)").action(async (rawOptions) => {
     try {
       const parseResult = InitOptionsSchema.safeParse(rawOptions);
       if (!parseResult.success) {
@@ -5996,14 +6189,60 @@ ${msg}`);
         initAiready(options.token);
         console.log(`  Config saved: ${getConfigPath()}`);
         console.log(`  Reports will be saved to: ${getReportsDir()}/`);
-        console.log(`
+        let skillStepOk = true;
+        let skillSummary;
+        if (options.skills !== false) {
+          try {
+            const summary = await installSkills({
+              target: options.global ? "global" : "project",
+              force: options.force ?? false
+            });
+            console.log(`
+  Skills installed to: ${summary.targetDir}/`);
+            console.log(`    installed:   ${summary.installed.length}`);
+            console.log(`    overwritten: ${summary.overwritten.length}`);
+            console.log(`    skipped:     ${summary.skipped.length}`);
+            if (summary.skipped.length > 0) {
+              console.log(`  (Re-run with --force to overwrite skipped files.)`);
+            }
+            skillSummary = {
+              installed: summary.installed.length,
+              overwritten: summary.overwritten.length,
+              skipped: summary.skipped.length
+            };
+          } catch (skillError) {
+            console.error(
+              `
+  Skill install failed: ${skillError instanceof Error ? skillError.message : String(skillError)}`
+            );
+            process.exitCode = 1;
+            skillStepOk = false;
+          }
+        }
+        trackEvent(EVENTS.CLI_INIT, {
+          skillsRequested: options.skills !== false,
+          skillStepOk,
+          target: options.global ? "global" : "project",
+          force: options.force ?? false,
+          ...skillSummary ?? {}
+        });
+        if (skillStepOk) {
+          console.log(`
   Next: canicode analyze "https://www.figma.com/design/..."`);
+        }
         return;
       }
       console.log(`CANICODE SETUP
 `);
       console.log(`  canicode init --token YOUR_FIGMA_TOKEN`);
       console.log(`  Get token: figma.com > Settings > Personal access tokens
+`);
+      console.log(`Skills:`);
+      console.log(`  --token also installs three Claude Code skills into ./.claude/skills/`);
+      console.log(`  (canicode, canicode-gotchas, canicode-roundtrip).`);
+      console.log(`  --global       Install to ~/.claude/skills/ instead`);
+      console.log(`  --no-skills    Skip skill install (token only)`);
+      console.log(`  --force        Overwrite existing skill files without prompting
 `);
       console.log(`After setup:`);
       console.log(`  canicode analyze "https://www.figma.com/design/..."`);
@@ -6102,35 +6341,24 @@ function registerListRules(cli2) {
   });
 }
 
-// src/cli/commands/prompt.ts
-function registerPrompt(cli2) {
-  cli2.command("prompt", "Output the standard design-to-code prompt for AI code generation").action(async () => {
-    try {
-      const { readFile: readFile3 } = await import('fs/promises');
-      const { dirname: dirnameFn, resolve: resolveFn } = await import('path');
-      const { fileURLToPath } = await import('url');
-      const __dirname = dirnameFn(fileURLToPath(import.meta.url));
-      const paths = [
-        resolveFn(__dirname, "../../.claude/skills/design-to-code/PROMPT.md"),
-        resolveFn(__dirname, "../.claude/skills/design-to-code/PROMPT.md")
-      ];
-      for (const p of paths) {
-        try {
-          const content = await readFile3(p, "utf-8");
-          console.log(content);
-          return;
-        } catch {
-        }
-      }
-      console.error("Prompt file not found");
-      process.exitCode = 1;
-      return;
-    } catch (error) {
-      console.error("Error:", error instanceof Error ? error.message : String(error));
-      process.exitCode = 1;
-    }
-  });
-}
+// src/cli/internal-commands.ts
+var INTERNAL_COMMANDS = [
+  "calibrate-analyze",
+  "calibrate-evaluate",
+  "calibrate-implement",
+  "calibrate-gap-report",
+  "calibrate-run",
+  "calibrate-gather-evidence",
+  "calibrate-finalize-debate",
+  "calibrate-enrich-evidence",
+  "calibrate-prune-evidence",
+  "calibrate-save-fixture",
+  "fixture-list",
+  "fixture-done",
+  "design-tree-strip",
+  "html-postprocess",
+  "code-metrics"
+];
 var DifficultySchema = z.enum(["easy", "moderate", "hard", "failed"]);
 var RuleRelatedStruggleSchema = z.object({
   ruleId: z.string(),
@@ -7092,7 +7320,7 @@ function enrichCalibrationEvidence(reviews, fixture, evidencePath = DEFAULT_CALI
   writeJsonArray(evidencePath, enriched);
 }
 
-// src/agents/orchestrator.ts
+// src/agents/calibration-compute.ts
 function normalizeActualImpact(impact) {
   const mapping = {
     none: "easy",
@@ -7943,7 +8171,7 @@ function registerCalibrateGapReport(cli2) {
 function registerCalibrateRun(cli2) {
   cli2.command(
     "calibrate-run <input>",
-    "Run full calibration pipeline (analysis-only, conversion via /calibrate-loop)"
+    "Run full calibration pipeline (analysis-only, conversion via /calibrate)"
   ).option("--token <token>", "Figma API token (or use FIGMA_TOKEN env var)").option("--max-nodes <count>", "Max nodes to convert", { default: 5 }).option("--sampling <strategy>", "Sampling strategy (all | top-issues | random)", { default: "top-issues" }).action(async (input, options) => {
     try {
       const figmaToken = options.token ?? getFigmaToken();
@@ -7963,7 +8191,7 @@ function registerCalibrateRun(cli2) {
       console.log("\nCalibration complete (analysis-only).");
       console.log(`  Grade: ${analysisOutput.scoreReport.overall.grade} (${analysisOutput.scoreReport.overall.percentage}%)`);
       console.log(`  Nodes with issues: ${analysisOutput.nodeIssueSummaries.length}`);
-      console.log("  Note: Use /calibrate-loop in Claude Code for full pipeline with visual comparison.");
+      console.log("  Note: Use /calibrate in Claude Code for full pipeline with visual comparison.");
     } catch (error) {
       console.error(
         "\nError:",
@@ -8726,66 +8954,449 @@ function registerDesignTreeStrip(cli2) {
         await writeFile(outputPath, stripped, "utf-8");
         console.log(`  ${type}.txt (${Math.round(Buffer.byteLength(stripped) / 1024)}KB)`);
       }
-      console.log(`Stripped ${types.length} design-tree variants \u2192 ${outputDir}`);
+      console.log(`Stripped ${types.length} design-tree variants \u2192 ${outputDir}`);
+    } catch (error) {
+      console.error("\nError:", error instanceof Error ? error.message : String(error));
+      process.exitCode = 1;
+    }
+  });
+}
+function sanitizeHtml(html) {
+  let result = html;
+  result = result.replace(/^\/\/\s*filename:.*\n/i, "");
+  result = result.replace(/<script[\s\S]*?<\/script>/gi, "");
+  result = result.replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "");
+  result = result.replace(
+    /\s+(href|src|xlink:href)\s*=\s*(?:"\s*javascript:[^"]*"|'\s*javascript:[^']*'|javascript:[^\s>]+)/gi,
+    (_, attr) => ` ${attr}="#"`
+  );
+  return result;
+}
+function injectLocalFont(html) {
+  const fontPath = resolve("assets/fonts/Inter.var.woff2");
+  if (!existsSync(fontPath)) return html;
+  const fontUrl = pathToFileURL(fontPath).href;
+  const fontCss = `@font-face { font-family: "Inter"; src: url("${fontUrl}") format("woff2"); font-weight: 100 900; }`;
+  let result = html;
+  result = result.replace(/<link[^>]*fonts\.googleapis\.com[^>]*>/gi, "");
+  result = result.replace(/<link[^>]*fonts\.gstatic\.com[^>]*>/gi, "");
+  if (result.includes("<style>")) {
+    result = result.replace("<style>", `<style>
+${fontCss}
+`);
+  } else if (result.includes("</head>")) {
+    result = result.replace("</head>", `<style>${fontCss}</style>
+</head>`);
+  }
+  return result;
+}
+
+// src/cli/commands/internal/html-postprocess.ts
+function registerHtmlPostprocess(cli2) {
+  cli2.command(
+    "html-postprocess <input>",
+    "[internal] Sanitize HTML and inject local fonts"
+  ).option("--output <path>", "Output path (default: overwrite input)").action(async (input, options) => {
+    try {
+      const inputPath = resolve(input);
+      if (!existsSync(inputPath)) {
+        console.error(`Error: Input file not found: ${inputPath}`);
+        process.exitCode = 1;
+        return;
+      }
+      const raw = readFileSync(inputPath, "utf-8");
+      const html = injectLocalFont(sanitizeHtml(raw));
+      const outputPath = options.output ? resolve(options.output) : inputPath;
+      await writeFile(outputPath, html, "utf-8");
+      console.log(JSON.stringify({
+        inputPath,
+        outputPath,
+        inputBytes: Buffer.byteLength(raw, "utf-8"),
+        outputBytes: Buffer.byteLength(html, "utf-8")
+      }));
+    } catch (error) {
+      console.error("\nError:", error instanceof Error ? error.message : String(error));
+      process.exitCode = 1;
+    }
+  });
+}
+var SaveFixtureOptionsSchema = z.object({
+  output: z.string().optional(),
+  api: z.boolean().optional(),
+  token: z.string().optional(),
+  imageScale: z.string().optional(),
+  name: z.string().optional()
+});
+function registerCalibrateSaveFixture(cli2) {
+  cli2.command(
+    "calibrate-save-fixture <input>",
+    "Save Figma design as a fixture directory for calibration"
+  ).option("--output <path>", "Output directory (default: fixtures/<name>/)").option("--name <name>", "Fixture name (default: extracted from URL)").option("--token <token>", "Figma API token (or use FIGMA_TOKEN env var)").option("--image-scale <n>", "Image export scale: 2 for PC (default), 3 for mobile").example("  canicode calibrate-save-fixture https://www.figma.com/design/ABC123/MyDesign?node-id=1-234").example("  canicode calibrate-save-fixture https://www.figma.com/design/ABC123/MyDesign?node-id=1-234 --image-scale 3").action(async (input, rawOptions) => {
+    try {
+      const parseResult = SaveFixtureOptionsSchema.safeParse(rawOptions);
+      if (!parseResult.success) {
+        const msg = parseResult.error.issues.map((i) => `--${i.path.join(".")}: ${i.message}`).join("\n");
+        console.error(`
+Invalid options:
+${msg}`);
+        process.exit(1);
+      }
+      const options = parseResult.data;
+      if (!isFigmaUrl(input)) {
+        throw new Error("calibrate-save-fixture requires a Figma URL as input.");
+      }
+      if (options.imageScale !== void 0) {
+        const scale = Number(options.imageScale);
+        if (!Number.isFinite(scale) || scale < 1 || scale > 4) {
+          console.error("Error: --image-scale must be 1-4 (2 for PC, 3 for mobile)");
+          process.exit(1);
+        }
+      }
+      if (!parseFigmaUrl(input).nodeId) {
+        console.warn("\nWarning: No node-id specified. Saving entire file as fixture.");
+        console.warn("Tip: Add ?node-id=XXX to save a specific section.\n");
+      }
+      const { file } = await loadFile(input, options.token);
+      file.sourceUrl = input;
+      const fixtureName = options.name ?? file.fileKey;
+      const fixtureDir = resolve(options.output ?? `fixtures/${fixtureName}`);
+      mkdirSync(fixtureDir, { recursive: true });
+      const figmaTokenForComponents = options.token ?? getFigmaToken();
+      if (figmaTokenForComponents) {
+        const { FigmaClient: FC } = await Promise.resolve().then(() => (init_figma_client(), figma_client_exports));
+        const { resolveComponentDefinitions: resolveComponentDefinitions2, resolveInteractionDestinations: resolveInteractionDestinations2 } = await Promise.resolve().then(() => (init_component_resolver(), component_resolver_exports));
+        const componentClient = new FC({ token: figmaTokenForComponents });
+        try {
+          const definitions = await resolveComponentDefinitions2(componentClient, file.fileKey, file.document);
+          const count = Object.keys(definitions).length;
+          if (count > 0) {
+            file.componentDefinitions = definitions;
+            console.log(`Resolved ${count} component master node tree(s)`);
+          }
+          const interactionDests = await resolveInteractionDestinations2(componentClient, file.fileKey, file.document, file.componentDefinitions);
+          const destCount = Object.keys(interactionDests).length;
+          if (destCount > 0) {
+            file.interactionDestinations = interactionDests;
+            console.log(`Resolved ${destCount} interaction destination(s)`);
+          }
+        } catch {
+          console.warn("Warning: failed to resolve component definitions (continuing)");
+        }
+      }
+      const dataPath = resolve(fixtureDir, "data.json");
+      await writeFile(dataPath, JSON.stringify(file, null, 2), "utf-8");
+      console.log(`Fixture saved: ${fixtureDir}/`);
+      console.log(`  data.json: ${file.name} (${countNodes2(file.document)} nodes)`);
+      const figmaToken = options.token ?? getFigmaToken();
+      if (figmaToken) {
+        const { FigmaClient: FigmaClient2 } = await Promise.resolve().then(() => (init_figma_client(), figma_client_exports));
+        const client = new FigmaClient2({ token: figmaToken });
+        const { nodeId } = parseFigmaUrl(input);
+        const rootNodeId = nodeId?.replace(/-/g, ":") ?? file.document.id;
+        try {
+          const imageUrls = await client.getNodeImages(file.fileKey, [rootNodeId], { format: "png", scale: 2 });
+          const url = imageUrls[rootNodeId];
+          if (url) {
+            const resp = await fetch(url);
+            if (resp.ok) {
+              const buffer = Buffer.from(await resp.arrayBuffer());
+              const { writeFile: writeFileSync6 } = await import('fs/promises');
+              await writeFileSync6(resolve(fixtureDir, "screenshot.png"), buffer);
+              console.log(`  screenshot.png: saved`);
+            }
+          }
+        } catch {
+          console.warn("  screenshot.png: failed to download (continuing)");
+        }
+        const vectorNodes = collectVectorNodes(file.document);
+        if (vectorNodes.length > 0) {
+          const vectorDir = resolve(fixtureDir, "vectors");
+          mkdirSync(vectorDir, { recursive: true });
+          const svgUrls = await client.getNodeImages(
+            file.fileKey,
+            vectorNodes.map((n) => n.id),
+            { format: "svg" }
+          );
+          const mapping = {};
+          const usedNames = /* @__PURE__ */ new Map();
+          let downloaded = 0;
+          for (const { id, name } of vectorNodes) {
+            let base = sanitizeFilename(name);
+            const count = usedNames.get(base) ?? 0;
+            usedNames.set(base, count + 1);
+            if (count > 0) base = `${base}-${count + 1}`;
+            const filename = `${base}.svg`;
+            mapping[id] = filename;
+            const svgUrl = svgUrls[id];
+            if (!svgUrl) continue;
+            try {
+              const resp = await fetch(svgUrl);
+              if (resp.ok) {
+                const svg = await resp.text();
+                await writeFile(resolve(vectorDir, filename), svg, "utf-8");
+                downloaded++;
+              }
+            } catch {
+            }
+          }
+          await writeFile(resolve(vectorDir, "mapping.json"), JSON.stringify(mapping, null, 2), "utf-8");
+          console.log(`  vectors/: ${downloaded}/${vectorNodes.length} SVGs`);
+        }
+        const imageNodes = collectImageNodes(file.document);
+        if (imageNodes.length > 0) {
+          const imgScale = options.imageScale !== void 0 ? Number(options.imageScale) : 2;
+          const imageDir = resolve(fixtureDir, "images");
+          mkdirSync(imageDir, { recursive: true });
+          const imageFills = await client.getImageFills(file.fileKey);
+          const usedNames = /* @__PURE__ */ new Map();
+          const mapping = {};
+          let imgDownloaded = 0;
+          for (const { id, name, imageRef } of imageNodes) {
+            let base = sanitizeFilename(name);
+            const count = usedNames.get(base) ?? 0;
+            usedNames.set(base, count + 1);
+            if (count > 0) base = `${base}-${count + 1}`;
+            const filename = `${base}@${imgScale}x.png`;
+            mapping[id] = filename;
+            if (!imageRef) continue;
+            const imgUrl = imageFills[imageRef];
+            if (!imgUrl) continue;
+            try {
+              const resp = await fetch(imgUrl);
+              if (resp.ok) {
+                const buf = Buffer.from(await resp.arrayBuffer());
+                await writeFile(resolve(imageDir, filename), buf);
+                imgDownloaded++;
+              }
+            } catch {
+            }
+          }
+          await writeFile(
+            resolve(imageDir, "mapping.json"),
+            JSON.stringify(mapping, null, 2),
+            "utf-8"
+          );
+          console.log(`  images/: ${imgDownloaded}/${imageNodes.length} PNGs (@${imgScale}x)`);
+        }
+      }
     } catch (error) {
-      console.error("\nError:", error instanceof Error ? error.message : String(error));
+      console.error(
+        "\nError:",
+        error instanceof Error ? error.message : String(error)
+      );
       process.exitCode = 1;
     }
   });
 }
-function sanitizeHtml(html) {
-  let result = html;
-  result = result.replace(/^\/\/\s*filename:.*\n/i, "");
-  result = result.replace(/<script[\s\S]*?<\/script>/gi, "");
-  result = result.replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "");
-  result = result.replace(
-    /\s+(href|src|xlink:href)\s*=\s*(?:"\s*javascript:[^"]*"|'\s*javascript:[^']*'|javascript:[^\s>]+)/gi,
-    (_, attr) => ` ${attr}="#"`
-  );
-  return result;
-}
-function injectLocalFont(html) {
-  const fontPath = resolve("assets/fonts/Inter.var.woff2");
-  if (!existsSync(fontPath)) return html;
-  const fontUrl = pathToFileURL(fontPath).href;
-  const fontCss = `@font-face { font-family: "Inter"; src: url("${fontUrl}") format("woff2"); font-weight: 100 900; }`;
-  let result = html;
-  result = result.replace(/<link[^>]*fonts\.googleapis\.com[^>]*>/gi, "");
-  result = result.replace(/<link[^>]*fonts\.gstatic\.com[^>]*>/gi, "");
-  if (result.includes("<style>")) {
-    result = result.replace("<style>", `<style>
-${fontCss}
-`);
-  } else if (result.includes("</head>")) {
-    result = result.replace("</head>", `<style>${fontCss}</style>
-</head>`);
-  }
-  return result;
-}
-
-// src/cli/commands/internal/html-postprocess.ts
-function registerHtmlPostprocess(cli2) {
+var ImplementOptionsSchema = z.object({
+  token: z.string().optional(),
+  output: z.string().optional(),
+  prompt: z.string().optional(),
+  imageScale: z.string().optional()
+});
+function registerCalibrateImplement(cli2) {
   cli2.command(
-    "html-postprocess <input>",
-    "[internal] Sanitize HTML and inject local fonts"
-  ).option("--output <path>", "Output path (default: overwrite input)").action(async (input, options) => {
+    "calibrate-implement <input>",
+    "Prepare design-to-code package for calibration: analysis + design tree + assets + prompt"
+  ).option("--token <token>", "Figma API token (or use FIGMA_TOKEN env var)").option("--output <dir>", "Output directory (default: ./canicode-implement/)").option("--prompt <path>", "Custom prompt file (default: built-in HTML+CSS prompt)").option("--image-scale <n>", "Image export scale: 2 for PC (default), 3 for mobile").example("  canicode calibrate-implement ./fixtures/my-design").example("  canicode calibrate-implement ./fixtures/my-design --prompt ./my-react-prompt.md --image-scale 3").action(async (input, rawOptions) => {
     try {
-      const inputPath = resolve(input);
-      if (!existsSync(inputPath)) {
-        console.error(`Error: Input file not found: ${inputPath}`);
-        process.exitCode = 1;
-        return;
+      const parseResult = ImplementOptionsSchema.safeParse(rawOptions);
+      if (!parseResult.success) {
+        const msg = parseResult.error.issues.map((i) => `--${i.path.join(".")}: ${i.message}`).join("\n");
+        console.error(`
+Invalid options:
+${msg}`);
+        process.exit(1);
       }
-      const raw = readFileSync(inputPath, "utf-8");
-      const html = injectLocalFont(sanitizeHtml(raw));
-      const outputPath = options.output ? resolve(options.output) : inputPath;
-      await writeFile(outputPath, html, "utf-8");
-      console.log(JSON.stringify({
-        inputPath,
-        outputPath,
-        inputBytes: Buffer.byteLength(raw, "utf-8"),
-        outputBytes: Buffer.byteLength(html, "utf-8")
-      }));
+      const options = parseResult.data;
+      if (options.imageScale !== void 0) {
+        const scale = Number(options.imageScale);
+        if (!Number.isFinite(scale) || scale < 1 || scale > 4) {
+          console.error("Error: --image-scale must be 1-4 (2 for PC, 3 for mobile)");
+          process.exit(1);
+        }
+      }
+      if (isFigmaUrl(input) && !parseFigmaUrl(input).nodeId) {
+        console.warn("Warning: No node-id in Figma URL. Implementation package will cover the entire file.");
+        console.warn("Tip: Add ?node-id=XXX to target a specific section.\n");
+      }
+      const outputDir = resolve(options.output ?? "canicode-implement");
+      mkdirSync(outputDir, { recursive: true });
+      console.log("\nPreparing implementation package...\n");
+      const { file } = await loadFile(input, options.token);
+      console.log(`Design: ${file.name}`);
+      const result = analyzeFile(file);
+      const scores = calculateScores(result);
+      const resultJson = buildResultJson(file.name, result, scores, { fileKey: file.fileKey });
+      await writeFile(resolve(outputDir, "analysis.json"), JSON.stringify(resultJson, null, 2), "utf-8");
+      console.log(`  analysis.json: ${result.issues.length} issues, grade ${scores.overall.grade}`);
+      const fixtureBase = isJsonFile(input) || isFixtureDir(input) ? isJsonFile(input) ? dirname(resolve(input)) : resolve(input) : void 0;
+      let vectorDir = fixtureBase ? resolve(fixtureBase, "vectors") : void 0;
+      let imageDir = fixtureBase ? resolve(fixtureBase, "images") : void 0;
+      if (vectorDir && existsSync(vectorDir)) {
+        const vecOutputDir = resolve(outputDir, "vectors");
+        mkdirSync(vecOutputDir, { recursive: true });
+        const { readdirSync: readdirSync4, copyFileSync: copyFileSync3 } = await import('fs');
+        const vecFiles = readdirSync4(vectorDir).filter((f) => f.endsWith(".svg") || f === "mapping.json");
+        for (const f of vecFiles) {
+          copyFileSync3(resolve(vectorDir, f), resolve(vecOutputDir, f));
+        }
+        vectorDir = vecOutputDir;
+        console.log(`  vectors/: ${vecFiles.length} SVGs copied`);
+      }
+      if (imageDir && existsSync(imageDir)) {
+        const imgOutputDir = resolve(outputDir, "images");
+        mkdirSync(imgOutputDir, { recursive: true });
+        const { readdirSync: readdirSync4, copyFileSync: copyFileSync3 } = await import('fs');
+        const imgFiles = readdirSync4(imageDir).filter((f) => f.endsWith(".png") || f.endsWith(".jpg") || f.endsWith(".json"));
+        for (const f of imgFiles) {
+          copyFileSync3(resolve(imageDir, f), resolve(imgOutputDir, f));
+        }
+        imageDir = imgOutputDir;
+        const pngCount = imgFiles.filter((f) => f.endsWith(".png")).length;
+        console.log(`  images/: ${pngCount} assets copied`);
+      }
+      if (isFigmaUrl(input) && !fixtureBase) {
+        const figmaToken = options.token ?? getFigmaToken();
+        if (figmaToken) {
+          const imgScale = options.imageScale !== void 0 ? Number(options.imageScale) : 2;
+          const { FigmaClient: FigmaClient2 } = await Promise.resolve().then(() => (init_figma_client(), figma_client_exports));
+          const client = new FigmaClient2({ token: figmaToken });
+          const { nodeId } = parseFigmaUrl(input);
+          const rootNodeId = nodeId?.replace(/-/g, ":") ?? file.document.id;
+          try {
+            const screenshotUrls = await client.getNodeImages(file.fileKey, [rootNodeId], { format: "png", scale: 2 });
+            const screenshotUrl = screenshotUrls[rootNodeId];
+            if (screenshotUrl) {
+              const resp = await fetch(screenshotUrl);
+              if (resp.ok) {
+                const buf = Buffer.from(await resp.arrayBuffer());
+                await writeFile(resolve(outputDir, "screenshot.png"), buf);
+                console.log(`  screenshot.png: saved`);
+              }
+            }
+          } catch {
+            console.warn("  screenshot.png: failed to download (continuing)");
+          }
+          const vectorNodes = collectVectorNodes(file.document);
+          if (vectorNodes.length > 0) {
+            const vecOutDir = resolve(outputDir, "vectors");
+            mkdirSync(vecOutDir, { recursive: true });
+            try {
+              const svgUrls = await client.getNodeImages(
+                file.fileKey,
+                vectorNodes.map((n) => n.id),
+                { format: "svg" }
+              );
+              const mapping = {};
+              const usedNames = /* @__PURE__ */ new Map();
+              let downloaded = 0;
+              for (const { id, name } of vectorNodes) {
+                let base = sanitizeFilename(name);
+                const count = usedNames.get(base) ?? 0;
+                usedNames.set(base, count + 1);
+                if (count > 0) base = `${base}-${count + 1}`;
+                const filename = `${base}.svg`;
+                mapping[id] = filename;
+                const svgUrl = svgUrls[id];
+                if (!svgUrl) continue;
+                try {
+                  const resp = await fetch(svgUrl);
+                  if (resp.ok) {
+                    const svg = await resp.text();
+                    await writeFile(resolve(vecOutDir, filename), svg, "utf-8");
+                    downloaded++;
+                  }
+                } catch {
+                }
+              }
+              await writeFile(resolve(vecOutDir, "mapping.json"), JSON.stringify(mapping, null, 2), "utf-8");
+              console.log(`  vectors/: ${downloaded}/${vectorNodes.length} SVGs`);
+            } catch {
+              console.warn("  vectors/: failed to download (continuing)");
+            }
+          }
+          const imgNodes = collectImageNodes(file.document);
+          if (imgNodes.length > 0) {
+            const imgOutDir = resolve(outputDir, "images");
+            mkdirSync(imgOutDir, { recursive: true });
+            try {
+              const imageFills = await client.getImageFills(file.fileKey);
+              const mapping = {};
+              const usedNames = /* @__PURE__ */ new Map();
+              let downloaded = 0;
+              for (const { id, name, imageRef } of imgNodes) {
+                let base = sanitizeFilename(name);
+                const count = usedNames.get(base) ?? 0;
+                usedNames.set(base, count + 1);
+                if (count > 0) base = `${base}-${count + 1}`;
+                const filename = `${base}@${imgScale}x.png`;
+                mapping[id] = filename;
+                if (!imageRef) continue;
+                const imgUrl = imageFills[imageRef];
+                if (!imgUrl) continue;
+                try {
+                  const resp = await fetch(imgUrl);
+                  if (resp.ok) {
+                    const buf = Buffer.from(await resp.arrayBuffer());
+                    await writeFile(resolve(imgOutDir, filename), buf);
+                    downloaded++;
+                  }
+                } catch {
+                }
+              }
+              await writeFile(resolve(imgOutDir, "mapping.json"), JSON.stringify(mapping, null, 2), "utf-8");
+              imageDir = imgOutDir;
+              console.log(`  images/: ${downloaded}/${imgNodes.length} PNGs (@${imgScale}x)`);
+            } catch {
+              console.warn("  images/: failed to download (continuing)");
+            }
+          }
+          const vecOutCheck = resolve(outputDir, "vectors");
+          if (existsSync(vecOutCheck)) vectorDir = vecOutCheck;
+        }
+      }
+      const { generateDesignTreeWithStats: generateDesignTreeWithStats2 } = await Promise.resolve().then(() => (init_design_tree(), design_tree_exports));
+      const treeOptions = {
+        ...vectorDir && existsSync(vectorDir) ? { vectorDir } : {},
+        ...imageDir && existsSync(imageDir) ? { imageDir } : {}
+      };
+      const stats = generateDesignTreeWithStats2(file, treeOptions);
+      await writeFile(resolve(outputDir, "design-tree.txt"), stats.tree, "utf-8");
+      console.log(`  design-tree.txt: ~${stats.estimatedTokens} tokens`);
+      if (options.prompt) {
+        const { readFile: rf } = await import('fs/promises');
+        const customPrompt = await rf(resolve(options.prompt), "utf-8");
+        await writeFile(resolve(outputDir, "PROMPT.md"), customPrompt, "utf-8");
+        console.log(`  PROMPT.md: custom (${options.prompt})`);
+      } else {
+        const { readFile: rf } = await import('fs/promises');
+        const { dirname: dirnameFn, resolve: resolveFn } = await import('path');
+        const { fileURLToPath: fileURLToPath2 } = await import('url');
+        const cliDir = dirnameFn(fileURLToPath2(import.meta.url));
+        const projectRoot = resolveFn(cliDir, "../..");
+        const promptPath = resolveFn(projectRoot, ".claude/agents/calibration/PROMPT.md");
+        let prompt = "";
+        try {
+          prompt = await rf(promptPath, "utf-8");
+        } catch {
+        }
+        if (prompt) {
+          await writeFile(resolve(outputDir, "PROMPT.md"), prompt, "utf-8");
+          console.log(`  PROMPT.md: default (html-css)`);
+        } else {
+          console.warn("  PROMPT.md: built-in prompt not found (skipped)");
+        }
+      }
+      console.log(`
+${"=".repeat(50)}`);
+      console.log(`Implementation package ready: ${outputDir}/`);
+      console.log(`  Grade: ${scores.overall.grade} (${scores.overall.percentage}%)`);
+      console.log(`  Issues: ${result.issues.length}`);
+      console.log(`  Design tree: ~${stats.estimatedTokens} tokens`);
+      console.log(`${"=".repeat(50)}`);
+      console.log(`
+Next: Feed design-tree.txt + PROMPT.md to your AI assistant.`);
     } catch (error) {
       console.error("\nError:", error instanceof Error ? error.message : String(error));
       process.exitCode = 1;
@@ -8839,14 +9450,12 @@ process.on("beforeExit", () => {
   shutdownMonitoring();
 });
 registerAnalyze(cli);
-registerSaveFixture(cli);
+registerGotchaSurvey(cli);
 registerDesignTree(cli);
-registerImplement(cli);
 registerVisualCompare(cli);
 registerInit(cli);
 registerConfig(cli);
 registerListRules(cli);
-registerPrompt(cli);
 registerCalibrateAnalyze(cli);
 registerCalibrateEvaluate(cli);
 registerCalibrateGapReport(cli);
@@ -8858,11 +9467,18 @@ registerEvidenceEnrich(cli);
 registerEvidencePrune(cli);
 registerDesignTreeStrip(cli);
 registerHtmlPostprocess(cli);
+registerCalibrateSaveFixture(cli);
+registerCalibrateImplement(cli);
 registerCodeMetrics(cli);
-cli.command("docs [topic]", "Show documentation (topics: setup, rules, config, visual-compare, design-tree)").action((topic) => {
+cli.command("docs [topic]", "Show documentation (topics: setup, config, scoring, rules, visual-compare, design-tree)").action((topic) => {
   handleDocs(topic);
 });
 cli.help((sections) => {
+  for (const section of sections) {
+    if (section.title === "Commands" || section.title?.startsWith("For more info")) {
+      section.body = section.body.split("\n").filter((line) => !INTERNAL_COMMANDS.some((cmd) => line.includes(cmd))).join("\n");
+    }
+  }
   sections.push(
     {
       title: "\nSetup",
@@ -8884,7 +9500,8 @@ cli.help((sections) => {
       body: [
         `  $ canicode analyze "https://www.figma.com/design/..." --api`,
         `  $ canicode analyze "https://www.figma.com/design/..." --preset strict`,
-        `  $ canicode analyze "https://www.figma.com/design/..." --config ./my-config.json`
+        `  $ canicode analyze "https://www.figma.com/design/..." --config ./my-config.json`,
+        `  $ canicode gotcha-survey "https://www.figma.com/design/..." --json`
       ].join("\n")
     },
     {