canicode 0.8.5 → 0.8.6

package/README.md

@@ -108,7 +108,7 @@ Or with a Figma API token (no Figma MCP needed):
 claude mcp add canicode -e FIGMA_TOKEN=figd_xxxxxxxxxxxxx -- npx -y -p canicode canicode-mcp
 ```
 
-For Cursor / Claude Desktop config, see [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md).
+For Cursor / Claude Desktop config, see [`docs/REFERENCE.md`](docs/REFERENCE.md).
 
 **Figma MCP Rate Limits**
 
@@ -160,7 +160,7 @@ Posts analysis as a PR comment. Fails if score is below threshold. See [**canico
 
 > Ask any LLM *"Write a canicode custom rule that checks X"* — it can generate the JSON for you.
 
-See [`docs/CUSTOMIZATION.md`](docs/CUSTOMIZATION.md) for the full guide, examples, and all available options.
+See [`docs/REFERENCE.md`](docs/REFERENCE.md) for the full guide, examples, and all available options.
 
 ---
 

package/dist/cli/index.js

@@ -1105,7 +1105,7 @@ async function loadFromApi(fileKey, nodeId, token) {
 }
 
 // package.json
-var version = "0.8.5";
+var version = "0.8.6";
 var AnalysisNodeTypeSchema = z.enum([
   "DOCUMENT",
   "CANVAS",
@@ -4267,7 +4267,7 @@ EXAMPLE
 USAGE
   canicode analyze <url> --custom-rules ./my-rules.json
 
-  Full guide: docs/CUSTOMIZATION.md
+  Full guide: docs/REFERENCE.md
   Examples:   examples/custom-rules.json
 
 TIP: Ask any LLM "Write a canicode custom rule that checks X" with the
@@ -4302,16 +4302,61 @@ EXAMPLE
 USAGE
   canicode analyze <url> --config ./my-config.json
 
-  Full guide: docs/CUSTOMIZATION.md
+  Full guide: docs/REFERENCE.md
   Examples:   examples/config.json
 `.trimStart());
 }
+function printDocsVisualCompare() {
+  console.log(`
+VISUAL COMPARE \u2014 Pixel-level comparison between Figma and AI-generated code
+
+USAGE
+  canicode visual-compare ./index.html --figma-url 'https://www.figma.com/design/ABC/File?node-id=1-234'
+
+OPTIONS
+  --figma-url <url>   Figma URL with node-id (required)
+  --token <token>     Figma API token (or FIGMA_TOKEN env var)
+  --output <dir>      Output directory (default: /tmp/canicode-visual-compare)
+  --width <px>        Viewport width override (default: match Figma screenshot)
+  --height <px>       Viewport height override (default: match Figma screenshot)
+
+OUTPUT FILES
+  /tmp/canicode-visual-compare/
+    figma.png         Figma screenshot (scale=2)
+    code.png          Playwright render of your HTML
+    diff.png          Pixel diff (red = different pixels)
+
+JSON OUTPUT (stdout)
+  {
+    "similarity": 87,        // 0-100%
+    "diffPixels": 1340,
+    "totalPixels": 102400,
+    "width": 800,
+    "height": 600,
+    "figmaScreenshot": "/tmp/.../figma.png",
+    "codeScreenshot": "/tmp/.../code.png",
+    "diff": "/tmp/.../diff.png"
+  }
+
+HOW IT WORKS
+  1. Fetches Figma screenshot via REST API (scale=2)
+  2. Reads screenshot dimensions
+  3. Renders your HTML with Playwright at the same viewport size
+  4. Compares pixel-by-pixel with pixelmatch (threshold: 0.1)
+  5. Returns similarity % and diff image
+
+REQUIREMENTS
+  npx playwright install chromium
+  Figma API token with read access
+`.trimStart());
+}
 var DOCS_TOPICS = {
   setup: printDocsSetup,
   install: printDocsSetup,
   // alias
   rules: printDocsRules,
-  config: printDocsConfig
+  config: printDocsConfig,
+  "visual-compare": printDocsVisualCompare
 };
 function handleDocs(topic) {
   if (!topic) {
@@ -4323,7 +4368,7 @@ function handleDocs(topic) {
     handler();
   } else {
     console.error(`Unknown docs topic: ${topic}`);
-    console.error(`Available topics: setup, rules, config`);
+    console.error(`Available topics: setup, rules, config, visual-compare`);
     process.exit(1);
   }
 }
@@ -5034,7 +5079,7 @@ cli.command("list-rules", "List all analysis rules with scores and severity").op
     process.exit(1);
   }
 });
-cli.command("docs [topic]", "Show documentation (topics: setup, rules, config)").action((topic) => {
+cli.command("docs [topic]", "Show documentation (topics: setup, rules, config, visual-compare)").action((topic) => {
   handleDocs(topic);
 });
 cli.help((sections) => {