web-corders-vrt 0.1.4 → 0.1.7

package/README.md

@@ -2,28 +2,40 @@
 
 Webページのビジュアルリグレッションテスト (VRT) を行うCLIツール。
 
-本番環境と開発環境のスクリーンショットの差分を検出する。
-テスト結果は人間向け（HTMLレポート + diff画像）とLLM/Claude向け（JSONレポート）の両方で出力される。
+開発マシンに入っているブラウザを利用して、本番環境と開発/プレビュー環境のスクリーンショットの差分を検出する。
+テスト結果は
+
+- diff画像
+- 人間向けHTMLレポート
+- LLM/Claude向けJSONレポート
+
+で出力される。
 
 ## セットアップ
 
-インストール不要。`npx` で直接実行できる。初回のみ Playwright のブラウザが必要:
+初回のみ Playwright のブラウザが必要:
+
+```bash
+npx playwright install chromium #通常はインストール済みのChromeが使われるはず
+```
+
+`init` コマンドで、Claude Codeのスキルファイル (`.claude/skills/web-corders-vrt/SKILL.md`) を自動生成する
 
 ```bash
-npx playwright install chromium
+npx web-corders-vrt init --refDomain https://example.com
 ```
 
-## 基本的な使い方
+## 手動での使い方
 
 ```bash
 npx web-corders-vrt run \
-  --before https://example.com \
+  --reference https://production.com \
   --after http://localhost:3000 \
   --paths /,/about,/pricing
 ```
 
-- `--before` — 比較元URL（本番環境）
-- `--after` — 比較先URL（開発環境 / ステージング）
+- `--reference` — リファレンスのプロトコル+ドメイン（本番環境）
+- `--after` — 比較するプロトコル+ドメイン（開発 / プレビュー環境）
 - `--paths` — テスト対象のページパス（カンマ区切り）
 
 実行すると `./vrt-results/` 以下にタイムスタンプ付きのディレクトリが生成され、スクリーンショット・diff画像・レポートが保存される。
@@ -35,10 +47,10 @@ vrt-results/2026-02-28T10-00-00/
 ├── report.json          # JSON レポート（Claude/LLM向け）
 ├── report.html          # HTML レポート（人間向け・ブラウザで開く）
 └── screenshots/
-    ├── top--sp--before.png
+    ├── top--sp--reference.png
     ├── top--sp--after.png
     ├── top--sp--diff.png
-    ├── top--pc--before.png
+    ├── top--pc--reference.png
     ├── top--pc--after.png
     └── top--pc--diff.png
 ```
@@ -72,67 +84,58 @@ vrt-results/2026-02-28T10-00-00/
 
 | オプション           | デフォルト | 説明                                                                    |
 | -------------------- | ---------- | ----------------------------------------------------------------------- |
-| `--before <url>`     | （必須）   | 比較元URL（本番環境）                                                   |
+| `--reference <url>`  | （必須）   | リファレンスURL（本番環境）                                             |
 | `--after <url>`      | （必須）   | 比較先URL（開発環境 / ステージング）                                    |
 | `--paths <paths>`    | （必須）   | テスト対象のページパス（カンマ区切り）                                  |
 | `--threshold <n>`    | `0.1`      | 差分許容率（%）。これ以下の差分はPASS扱い                               |
 | `--hide <selectors>` | —          | 非表示にするCSSセレクタ（カンマ区切り）。例: `.ad-banner,.cookie-popup` |
-| `--no-html`          | —          | HTMLレポートを生成しない                                                |
-| `--no-open`          | —          | HTMLレポートをブラウザで自動的に開かない                                |
 
 ビューポートはSP（375x812）とPC（1440x900）の2種類で固定。フルページスクリーンショットを取得し、結果は `./vrt-results/` に出力される。
 
+## Claude Code連携
+
+### スキルファイルの仕組み
+
+`init`で生成される `.claude/skills/web-corders-vrt/SKILL.md` には以下の手順が記述される:
+
+1. 開発サーバーを起動
+2. VRTコマンドを実行
+3. `report.json` を読んで差分を確認
+4. diff画像を視覚的に確認
+5. diff画像からCSS/HTMLの修正箇所を特定
+6. コードを修正
+7. 再度VRTを実行して確認
+
+以降はCaludeに「VRTして」とか言うだけで使ってくれる　はず。
+
 ## 実用的な例
 
 ### 動的要素を隠してテスト
 
-広告バナーやクッキー同意バーなど、毎回変わる要素を非表示にする:
+テスト対象外にしたい要素を非表示にする。
 
 ```bash
 npx web-corders-vrt run \
-  --before https://example.com \
+  --reference https://example.com \
   --after http://localhost:3000 \
   --paths / \
   --hide ".cookie-banner,.ad-slot,[data-testid='live-chat']"
 ```
 
+Next.jsツールバーはデフォルトで非表示。
+
 ### 差分許容率を緩めに設定
 
 フォントレンダリング差異などを無視したい場合:
 
 ```bash
 npx web-corders-vrt run \
-  --before https://example.com \
+  --reference https://example.com \
   --after http://localhost:3000 \
   --paths / \
   --threshold 1
 ```
 
-## Claude Code連携
-
-`vrt init` コマンドで、Claude Codeのスキルファイル (`.claude/commands/vrt.md`) を自動生成できる。
-
-```bash
-npx web-corders-vrt init \
-  --before https://example.com \
-  --after http://localhost:3000 \
-  --paths /,/about,/pricing
-```
-
-生成されたファイルをリポジトリにコミットすると、Claude Code上で `/vrt` コマンドを実行するだけで、VRTの実行 → 結果の読み取り → 差分箇所の特定 → コード修正 → 再テストまでを自律的に行えるようになる。
-
-### スキルファイルの仕組み
-
-生成される `.claude/commands/vrt.md` には以下の手順が記述される:
-
-1. 開発サーバーを起動
-2. VRTコマンドを実行
-3. `report.json` を読んで差分を確認
-4. diff画像を視覚的に確認
-5. diff画像からCSS/HTMLの修正箇所を特定
-6. コードを修正
-7. 再度VRTを実行して確認
-
 ## 広告・計測系スクリプトのブロック
 
 以下のドメインへのリクエストは自動的にブロックされる。見た目のテストに不要であり、ページ読み込み速度を改善するため。

package/bin/vrt.ts

@@ -14,25 +14,21 @@ program
 program
   .command("run")
   .description("Run visual regression tests")
-  .requiredOption("--before <url>", "Baseline URL (production)")
+  .requiredOption("--reference <url>", "Reference URL (production)")
   .requiredOption("--after <url>", "Comparison URL (local/staging)")
   .requiredOption("--paths <paths>", "Page paths to compare (comma-separated)")
   .option("--threshold <n>", "Diff tolerance percentage", "0.1")
   .option("--hide <selectors>", "CSS selectors to hide (comma-separated)")
-  .option("--no-html", "Skip HTML report generation")
-  .option("--no-open", "Do not open HTML report in browser")
   .action(async (rawOptions) => {
     try {
       const parsed = cliOptionsSchema.parse(rawOptions);
 
       const options: ResolvedOptions = {
-        beforeUrl: parsed.before,
+        referenceUrl: parsed.reference,
         afterUrl: parsed.after,
         paths: parsed.paths,
         threshold: parsed.threshold,
         hideSelectors: parsed.hide,
-        html: parsed.html,
-        open: parsed.open,
       };
 
       const report = await runVrt(options);
@@ -50,22 +46,12 @@ program
 program
   .command("init")
   .description(
-    "Generate .claude/commands/vrt.md skill file for this repository",
+    "Generate .claude/skills/web-corders-vrt/SKILL.md for this repository",
   )
-  .requiredOption("--before <url>", "Baseline URL (production)")
-  .requiredOption("--after <url>", "Comparison URL (local/staging)")
-  .requiredOption("--paths <paths>", "Page paths to compare (comma-separated)")
-  .option("--threshold <n>", "Diff tolerance percentage", "0.1")
-  .option("--hide <selectors>", "CSS selectors to hide (comma-separated)")
+  .requiredOption("--refDomain <domain>", "Reference domain URL (production)")
   .action(async (options) => {
     try {
-      await runInit({
-        before: options.before,
-        after: options.after,
-        paths: options.paths,
-        threshold: parseFloat(options.threshold),
-        hide: options.hide,
-      });
+      await runInit({ refDomain: options.refDomain });
     } catch (error) {
       if (error instanceof Error) {
         console.error(`Error: ${error.message}`);

package/dist/bin/vrt.js

@@ -6,13 +6,11 @@ import { Command } from "commander";
 // src/schemas.ts
 import { z } from "zod";
 var cliOptionsSchema = z.object({
-  before: z.string().url("--before must be a valid URL"),
+  reference: z.string().url("--reference must be a valid URL"),
   after: z.string().url("--after must be a valid URL"),
   paths: z.string().transform((val) => val.split(",").map((p) => p.trim())),
   threshold: z.coerce.number().min(0).max(100).default(0.1),
-  hide: z.string().optional().transform((val) => val ? val.split(",").map((s) => s.trim()) : []),
-  html: z.boolean().default(true),
-  open: z.boolean().default(true)
+  hide: z.string().optional().transform((val) => val ? val.split(",").map((s) => s.trim()) : [])
 });
 
 // src/commands/run.ts
@@ -193,16 +191,16 @@ var Screenshotter = class {
 // src/core/comparator.ts
 import pixelmatch from "pixelmatch";
 import { PNG } from "pngjs";
-function compareImages(beforeBuffer, afterBuffer, threshold = 0.1) {
-  const before = PNG.sync.read(beforeBuffer);
+function compareImages(referenceBuffer, afterBuffer, threshold = 0.1) {
+  const reference = PNG.sync.read(referenceBuffer);
   const after = PNG.sync.read(afterBuffer);
-  const width = Math.max(before.width, after.width);
-  const height = Math.max(before.height, after.height);
-  const normalizedBefore = normalizeImage(before, width, height);
+  const width = Math.max(reference.width, after.width);
+  const height = Math.max(reference.height, after.height);
+  const normalizedReference = normalizeImage(reference, width, height);
   const normalizedAfter = normalizeImage(after, width, height);
   const diff = new PNG({ width, height });
   const diffCount = pixelmatch(
-    normalizedBefore.data,
+    normalizedReference.data,
     normalizedAfter.data,
     diff.data,
     width,
@@ -226,7 +224,7 @@ function compareImages(beforeBuffer, afterBuffer, threshold = 0.1) {
     dimensions: {
       width,
       height,
-      beforeHeight: before.height,
+      referenceHeight: reference.height,
       afterHeight: after.height
     }
   };
@@ -264,7 +262,7 @@ function printTerminalReport(report) {
   console.log("=".repeat(50));
   console.log("");
   console.log(
-    `Comparing: ${chalk.cyan(meta.beforeUrl)}  vs  ${chalk.cyan(meta.afterUrl)}`
+    `Comparing: ${chalk.cyan(meta.referenceUrl)}  vs  ${chalk.cyan(meta.afterUrl)}`
   );
   console.log("");
   const groupedByPage = /* @__PURE__ */ new Map();
@@ -323,7 +321,7 @@ import { writeFile as writeFile2 } from "fs/promises";
 import { join as join2 } from "path";
 
 // src/templates/report.html
-var report_default = '<!doctype html>\n<html lang="ja">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>VRT Report - {{TIMESTAMP}}</title>\n    <style>\n      {{CSS}}\n    </style>\n  </head>\n  <body>\n    <div class="header">\n      <h1>web-corders-vrt</h1>\n      <div class="meta">\n        {{TIMESTAMP}} | Duration: {{DURATION}}s<br />\n        Before: {{BEFORE_URL}} \u2192 After: {{AFTER_URL}}\n      </div>\n    </div>\n    <div class="summary">\n      <div class="stat total">{{TOTAL}} Total</div>\n      <div class="stat pass">{{PASSED}} Passed</div>\n      {{FAILED_STAT}}\n    </div>\n    <div class="results">\n      {{RESULTS}}\n    </div>\n  </body>\n</html>\n';
+var report_default = '<!doctype html>\n<html lang="ja">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>VRT Report - {{TIMESTAMP}}</title>\n    <style>\n      {{CSS}}\n    </style>\n  </head>\n  <body>\n    <div class="header">\n      <h1>web-corders-vrt</h1>\n      <div class="meta">\n        {{TIMESTAMP}} | Duration: {{DURATION}}s<br />\n        Reference: {{REFERENCE_URL}} \u2192 After: {{AFTER_URL}}\n      </div>\n    </div>\n    <div class="summary">\n      <div class="stat total">{{TOTAL}} Total</div>\n      <div class="stat pass">{{PASSED}} Passed</div>\n      {{FAILED_STAT}}\n    </div>\n    <div class="results">\n      {{RESULTS}}\n    </div>\n  </body>\n</html>\n';
 
 // src/templates/report.css
 var report_default2 = '* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  background: #f5f5f5;\n  color: #333;\n}\n\n.header {\n  background: #1a1a2e;\n  color: white;\n  padding: 24px 32px;\n  text-align: center;\n}\n\n.header h1 {\n  font-size: 20px;\n  margin-bottom: 8px;\n}\n\n.header .meta {\n  font-size: 13px;\n  color: #aaa;\n}\n\n.summary {\n  display: flex;\n  gap: 16px;\n  padding: 16px 32px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.summary .stat {\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat.pass {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.stat.fail {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.stat.total {\n  background: #e3f2fd;\n  color: #1565c0;\n}\n\n.results {\n  padding: 24px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.card-header {\n  padding: 16px 20px;\n  border-bottom: 1px solid #eee;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.card-header h3 {\n  font-size: 15px;\n}\n\n.badge {\n  padding: 4px 10px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.badge.pass {\n  background: #e8f5e9;\n  color: #2e7d32;\n}\n\n.badge.fail {\n  background: #ffebee;\n  color: #c62828;\n}\n\n.badge.error {\n  background: #fff3e0;\n  color: #e65100;\n}\n\n.comparison {\n  padding: 16px 20px;\n}\n\n.images {\n  display: flex;\n  gap: 8px;\n}\n\n.card.sp .img-container {\n  flex: none;\n  width: 375px;\n}\n\n.card.sp .img-container img {\n  width: 375px;\n  height: auto;\n  border: 1px solid #eee;\n  border-radius: 4px;\n}\n\n.card.pc .img-container {\n  flex: 1;\n  min-width: 0;\n}\n\n.card.pc .img-container img {\n  width: 100%;\n  height: auto;\n  border: 1px solid #eee;\n  border-radius: 4px;\n}\n\n.img-container .label {\n  font-size: 11px;\n  color: #888;\n  margin-bottom: 4px;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n\n.diff-info {\n  padding: 8px 20px 16px;\n  font-size: 13px;\n  color: #666;\n}\n\n.diff-info .region {\n  margin: 4px 0;\n  padding-left: 16px;\n}\n\n/* Accordion for passed tests */\n.screenshot-accordion {\n  border-top: 1px solid #eee;\n}\n\n.screenshot-accordion summary {\n  padding: 12px 20px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 600;\n  color: #666;\n  user-select: none;\n}\n\n.screenshot-accordion summary:hover {\n  background: #fafafa;\n}\n';
@@ -339,7 +337,7 @@ function generateHtml(report) {
   const { meta, summary, results } = report;
   const resultCards = results.map((r) => generateResultCard(r)).join("\n");
   const failedStat = summary.failed > 0 ? `<div class="stat fail">${summary.failed} Failed</div>` : "";
-  return report_default.replace("{{CSS}}", report_default2).replace(/\{\{TIMESTAMP\}\}/g, meta.timestamp).replace("{{DURATION}}", (meta.duration / 1e3).toFixed(1)).replace("{{BEFORE_URL}}", meta.beforeUrl).replace("{{AFTER_URL}}", meta.afterUrl).replace("{{TOTAL}}", String(summary.totalTests)).replace("{{PASSED}}", String(summary.passed)).replace("{{FAILED_STAT}}", failedStat).replace("{{RESULTS}}", resultCards);
+  return report_default.replace("{{CSS}}", report_default2).replace(/\{\{TIMESTAMP\}\}/g, meta.timestamp).replace("{{DURATION}}", (meta.duration / 1e3).toFixed(1)).replace("{{REFERENCE_URL}}", meta.referenceUrl).replace("{{AFTER_URL}}", meta.afterUrl).replace("{{TOTAL}}", String(summary.totalTests)).replace("{{PASSED}}", String(summary.passed)).replace("{{FAILED_STAT}}", failedStat).replace("{{RESULTS}}", resultCards);
 }
 function generateResultCard(result) {
   const { page, viewport, status, comparison, screenshots } = result;
@@ -347,9 +345,9 @@ function generateResultCard(result) {
   const imagesHtml = `
     <div class="comparison">
       <div class="images">
-        <div class="img-container img-before">
-          <div class="label">Before</div>
-          <img src="${screenshots.before}" alt="Before" loading="lazy">
+        <div class="img-container img-reference">
+          <div class="label">Reference</div>
+          <img src="${screenshots.reference}" alt="Reference" loading="lazy">
         </div>
         <div class="img-container img-after">
           <div class="label">After</div>
@@ -384,9 +382,9 @@ async function runVrt(options) {
   const spinner = ora("Initializing browser...").start();
   try {
     await screenshotter.initialize();
-    spinner.text = `Taking screenshots of ${chalk2.cyan(options.beforeUrl)}...`;
-    const beforeScreenshots = await screenshotter.captureAll(
-      options.beforeUrl,
+    spinner.text = `Taking screenshots of ${chalk2.cyan(options.referenceUrl)}...`;
+    const referenceScreenshots = await screenshotter.captureAll(
+      options.referenceUrl,
       options.paths,
       VIEWPORTS,
       options.hideSelectors
@@ -400,15 +398,15 @@ async function runVrt(options) {
     );
     spinner.text = "Comparing screenshots...";
     const results = [];
-    for (const beforeShot of beforeScreenshots) {
+    for (const referenceShot of referenceScreenshots) {
       const afterShot = afterScreenshots.find(
-        (a) => a.pagePath === beforeShot.pagePath && a.viewportType === beforeShot.viewportType
+        (a) => a.pagePath === referenceShot.pagePath && a.viewportType === referenceShot.viewportType
       );
       if (!afterShot) {
         results.push(
           createErrorResult(
-            beforeShot.pagePath,
-            beforeShot.viewportType,
+            referenceShot.pagePath,
+            referenceShot.viewportType,
             options,
             "After screenshot not found"
           )
@@ -417,33 +415,33 @@ async function runVrt(options) {
       }
       try {
         const comparison = compareImages(
-          beforeShot.buffer,
+          referenceShot.buffer,
           afterShot.buffer,
           options.threshold
         );
-        const filePrefix = `${beforeShot.pageName}--${beforeShot.viewportType}`;
-        const beforePath = join3("screenshots", `${filePrefix}--before.png`);
+        const filePrefix = `${referenceShot.pageName}--${referenceShot.viewportType}`;
+        const referencePath = join3("screenshots", `${filePrefix}--reference.png`);
         const afterPath = join3("screenshots", `${filePrefix}--after.png`);
         const diffPath = join3("screenshots", `${filePrefix}--diff.png`);
-        await writeFile3(join3(runDir, beforePath), beforeShot.buffer);
+        await writeFile3(join3(runDir, referencePath), referenceShot.buffer);
         await writeFile3(join3(runDir, afterPath), afterShot.buffer);
         await writeFile3(join3(runDir, diffPath), comparison.diffImage);
-        const pageName = beforeShot.pagePath === "/" ? "\u30C8\u30C3\u30D7\u30DA\u30FC\u30B8" : beforeShot.pagePath.replace(/^\//, "");
-        const viewport = getViewportDimensions(beforeShot.viewportType);
+        const pageName = referenceShot.pagePath === "/" ? "\u30C8\u30C3\u30D7\u30DA\u30FC\u30B8" : referenceShot.pagePath.replace(/^\//, "");
+        const viewport = getViewportDimensions(referenceShot.viewportType);
         results.push({
           page: {
-            path: beforeShot.pagePath,
+            path: referenceShot.pagePath,
             name: pageName,
             url: {
-              before: new URL(
-                beforeShot.pagePath,
-                options.beforeUrl
+              reference: new URL(
+                referenceShot.pagePath,
+                options.referenceUrl
               ).toString(),
-              after: new URL(beforeShot.pagePath, options.afterUrl).toString()
+              after: new URL(referenceShot.pagePath, options.afterUrl).toString()
             }
           },
           viewport: {
-            type: beforeShot.viewportType,
+            type: referenceShot.viewportType,
             ...viewport
           },
           status: comparison.passed ? "pass" : "fail",
@@ -455,7 +453,7 @@ async function runVrt(options) {
             dimensions: comparison.dimensions
           },
           screenshots: {
-            before: beforePath,
+            reference: referencePath,
             after: afterPath,
             diff: diffPath
           }
@@ -463,8 +461,8 @@ async function runVrt(options) {
       } catch (error) {
         results.push(
           createErrorResult(
-            beforeShot.pagePath,
-            beforeShot.viewportType,
+            referenceShot.pagePath,
+            referenceShot.viewportType,
             options,
             error instanceof Error ? error.message : String(error)
           )
@@ -479,7 +477,7 @@ async function runVrt(options) {
       version: "1.0",
       meta: {
         timestamp,
-        beforeUrl: options.beforeUrl,
+        referenceUrl: options.referenceUrl,
         afterUrl: options.afterUrl,
         duration,
         command: buildCommandString(options)
@@ -497,14 +495,10 @@ async function runVrt(options) {
     printTerminalReport(report);
     const jsonPath = await writeJsonReport(report, runDir);
     console.log(`JSON report: ${chalk2.dim(jsonPath)}`);
-    if (options.html) {
-      const htmlPath = await writeHtmlReport(report, runDir);
-      console.log(`HTML report: ${chalk2.dim(htmlPath)}`);
-      if (options.open) {
-        const { exec } = await import("child_process");
-        exec(`open "${htmlPath}"`);
-      }
-    }
+    const htmlPath = await writeHtmlReport(report, runDir);
+    console.log(`HTML report: ${chalk2.dim(htmlPath)}`);
+    const { exec } = await import("child_process");
+    exec(`open "${htmlPath}"`);
     console.log(`Output dir:  ${chalk2.dim(runDir)}`);
     return report;
   } finally {
@@ -522,7 +516,7 @@ function createErrorResult(pagePath, viewportType, options, error) {
       path: pagePath,
       name: pageName,
       url: {
-        before: new URL(pagePath, options.beforeUrl).toString(),
+        reference: new URL(pagePath, options.referenceUrl).toString(),
         after: new URL(pagePath, options.afterUrl).toString()
       }
     },
@@ -533,15 +527,15 @@ function createErrorResult(pagePath, viewportType, options, error) {
       diffPixelCount: 0,
       totalPixels: 0,
       threshold: options.threshold,
-      dimensions: { width: 0, height: 0, beforeHeight: 0, afterHeight: 0 }
+      dimensions: { width: 0, height: 0, referenceHeight: 0, afterHeight: 0 }
     },
-    screenshots: { before: "", after: "", diff: "" },
+    screenshots: { reference: "", after: "", diff: "" },
     error
   };
 }
 function buildCommandString(options) {
   const parts = ["npx web-corders-vrt run"];
-  parts.push(`--before ${options.beforeUrl}`);
+  parts.push(`--reference ${options.referenceUrl}`);
   parts.push(`--after ${options.afterUrl}`);
   parts.push(`--paths ${options.paths.join(",")}`);
   if (options.threshold !== DEFAULT_THRESHOLD) {
@@ -554,76 +548,68 @@ function buildCommandString(options) {
 }
 
 // src/commands/init.ts
-import { mkdir as mkdir2, writeFile as writeFile4, access } from "fs/promises";
+import { mkdir as mkdir2, writeFile as writeFile4, readFile, access } from "fs/promises";
 import { join as join4 } from "path";
 import chalk3 from "chalk";
+
+// src/templates/SKILL-TEMPLATE.md
+var SKILL_TEMPLATE_default = '---\nname: web-corders-vrt\ndescription: WEB\u7528VRT(Visual Regression Test)\u30C4\u30FC\u30EB\u3002\u672C\u756A\u30C9\u30E1\u30A4\u30F3\u3068\u30ED\u30FC\u30AB\u30EB\u958B\u767A\u307E\u305F\u306F\u30D7\u30EC\u30D3\u30E5\u30FC\u30C9\u30E1\u30A4\u30F3\u306E\u9593\u3067\u3001\u7279\u5B9A\u30D1\u30B9\u306E\u30D3\u30B8\u30E5\u30A2\u30EB\u5DEE\u5206\u3092\u691C\u51FA\u3059\u308B\u3002\n---\n\n## \u4F7F\u3044\u65B9\n\n```bash\nnpx web-corders-vrt run \\\n  --reference ${referenceDomain} \\\n  --after <\u958B\u767A\u74B0\u5883\u306E\u30C9\u30E1\u30A4\u30F3|\u30E6\u30FC\u30B6\u30FC\u304B\u3089\u6307\u793A\u304C\u306A\u3044\u5834\u5408\u306Fhttp://localhost:3000> \\\n  --paths <\u30C6\u30B9\u30C8\u5BFE\u8C61\u306E\u30D1\u30B9\uFF08\u30AB\u30F3\u30DE\u533A\u5207\u308A\uFF09> \\\n```\n\n## \u624B\u9806\n\n1. \u30E6\u30FC\u30B6\u30FC\u304B\u3089\u6BD4\u8F03\u5BFE\u8C61\u306E\u30C9\u30E1\u30A4\u30F3\u3092\u6307\u5B9A\u3055\u308C\u305F\u5834\u5408\u3001\u305D\u308C\u306B\u5F93\u3046\u3002\u6307\u793A\u304C\u306A\u3044\u5834\u5408\u3001after\u306F\u958B\u767A\u30B5\u30FC\u30D0\u30FC\u3068\u3057\u3001\u8D77\u52D5\u3057\u3066\u3044\u306A\u3051\u308C\u3070 `npm run dev` \u3067\u8D77\u52D5\u3057\u3066\u5F85\u6A5F\u3059\u308B\u3002\u3053\u3053\u3067\u8D77\u52D5\u3057\u305F\u30C9\u30E1\u30A4\u30F3\u3068\u30D7\u30ED\u30C8\u30B3\u30EB\u3092after\u306E\u30C9\u30E1\u30A4\u30F3\u3068\u3059\u308B\u3002\n2. \u4E0A\u8A18\u306E\u30B3\u30DE\u30F3\u30C9\u3067VRT\u3092\u5B9F\u884C\u3059\u308B\uFF08`--paths` \u306F\u30BF\u30B9\u30AF\u306B\u5FDC\u3058\u3066\u8A2D\u5B9A\u3059\u308B\uFF09\n3. `./vrt-results/` \u5185\u306E\u6700\u65B0\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA\u306B\u3042\u308B `report.json` \u3092\u8AAD\u3080\n4. `status: "fail"` \u306E\u30C6\u30B9\u30C8\u7D50\u679C\u306B\u6CE8\u76EE\u3059\u308B\n5. \u8A72\u5F53\u3059\u308Bdiff\u753B\u50CF\uFF08`*--diff.png`\uFF09\u3092Read\u30C4\u30FC\u30EB\u3067\u8996\u899A\u7684\u306B\u78BA\u8A8D\u3059\u308B\n6. diff\u753B\u50CF\u304B\u3089\u4FEE\u6B63\u3059\u3079\u304DCSS\u3084HTML\u306E\u5834\u6240\u3092\u7279\u5B9A\u3067\u304D\u308B\u306A\u3089\u4FEE\u6B63\u306B\u306F\u3044\u308B\u3002\u518D\u5EA6VRT\u3092\u5B9F\u884C\u3057\u3066\u4FEE\u6B63\u304C\u53CD\u6620\u3055\u308C\u305F\u3053\u3068\u3092\u78BA\u8A8D\u3059\u308B\n7. \u4FEE\u6B63\u304C\u4E0D\u53EF\u80FD\u306A\u3089\u30E6\u30FC\u30B6\u30FC\u306B\u305D\u306E\u65E8\u3092\u4F1D\u3048\u3001\u30EC\u30DD\u30FC\u30C8\u304C\u51FA\u6765\u305F\u3053\u3068\u3092\u4F1D\u3048\u308B\n\n## \u30AA\u30D7\u30B7\u30E7\u30F3\n\n| \u30AA\u30D7\u30B7\u30E7\u30F3           | \u8AAC\u660E                                        |\n| -------------------- | ------------------------------------------- |\n| `--reference <url>`  | \u30EA\u30D5\u30A1\u30EC\u30F3\u30B9\u30D7\u30ED\u30C8\u30B3\u30EB+\u30C9\u30E1\u30A4\u30F3\uFF08\u672C\u756A\u74B0\u5883\uFF09 |\n| `--after <url>`      | \u6BD4\u8F03\u5148U\u30D7\u30ED\u30C8\u30B3\u30EB+\u30C9\u30E1\u30A4\u30F3\uFF08\u958B\u767A\u74B0\u5883\uFF09      |\n| `--paths <paths>`    | \u30C6\u30B9\u30C8\u5BFE\u8C61\u306E\u30DA\u30FC\u30B8\u30D1\u30B9\uFF08\u30AB\u30F3\u30DE\u533A\u5207\u308A\uFF09      |\n| `--threshold <n>`    | \u5DEE\u5206\u8A31\u5BB9\u7387\uFF08%\uFF09\u3002\u30C7\u30D5\u30A9\u30EB\u30C8: 0.1            |\n| `--hide <selectors>` | \u975E\u8868\u793A\u306B\u3059\u308BCSS\u30BB\u30EC\u30AF\u30BF\uFF08\u30AB\u30F3\u30DE\u533A\u5207\u308A\uFF09     |\n| `--no-open`          | HTML\u30EC\u30DD\u30FC\u30C8\u3092\u30D6\u30E9\u30A6\u30B6\u3067\u958B\u304B\u306A\u3044            |\n';
+
+// src/commands/init.ts
 async function runInit(options) {
-  const outDir = join4(process.cwd(), ".claude", "commands");
-  const outFile = join4(outDir, "vrt.md");
+  const outDir = join4(process.cwd(), ".claude", "skills", "web-corders-vrt");
+  const outFile = join4(outDir, "SKILL.md");
   try {
     await access(outFile);
     console.log(chalk3.yellow(`\u26A0 ${outFile} already exists. Overwriting...`));
   } catch {
   }
   await mkdir2(outDir, { recursive: true });
-  const content = generateSkillFile(options);
+  const content = SKILL_TEMPLATE_default.replace(
+    /\$\{referenceDomain\}/g,
+    options.refDomain
+  );
   await writeFile4(outFile, content, "utf-8");
   console.log(chalk3.green(`\u2705 Created ${outFile}`));
+  await ensureGitignore(process.cwd());
   console.log("");
   console.log(
-    "This skill file allows Claude Code to run VRT with the /vrt command."
-  );
-  console.log(
-    "Review and customize the file, then commit it to your repository."
+    "Review and customize the skill file, then commit it to your repository."
   );
 }
-function generateSkillFile(options) {
-  const cmdParts = ["npx web-corders-vrt run"];
-  cmdParts.push(`  --before ${options.before}`);
-  cmdParts.push(`  --after ${options.after}`);
-  cmdParts.push(`  --paths ${options.paths}`);
-  if (options.threshold !== void 0 && options.threshold !== DEFAULT_THRESHOLD) {
-    cmdParts.push(`  --threshold ${options.threshold}`);
+var VRT_RESULTS_PATTERN = "vrt-results/";
+async function ensureGitignore(cwd) {
+  const gitignorePath = join4(cwd, ".gitignore");
+  let content = "";
+  try {
+    content = await readFile(gitignorePath, "utf-8");
+  } catch {
   }
-  if (options.hide) {
-    cmdParts.push(`  --hide "${options.hide}"`);
+  const lines = content.split("\n");
+  if (lines.some((line) => line.trim() === VRT_RESULTS_PATTERN)) {
+    return;
   }
-  cmdParts.push("  --no-open");
-  const command = cmdParts.join(" \\\n");
-  return `VRT\u3092\u5B9F\u884C\u3057\u3066\u672C\u756A\u74B0\u5883\u3068\u306E\u30D3\u30B8\u30E5\u30A2\u30EB\u5DEE\u5206\u3092\u691C\u51FA\u3059\u308B\u3002
-
-## \u624B\u9806
-
-1. \u958B\u767A\u30B5\u30FC\u30D0\u30FC\u304C\u8D77\u52D5\u3057\u3066\u3044\u306A\u3051\u308C\u3070 \`npm run dev\` \u3067\u8D77\u52D5\u3057\u3066\u5F85\u6A5F\u3059\u308B
-2. \u4EE5\u4E0B\u306E\u30B3\u30DE\u30F3\u30C9\u3067VRT\u3092\u5B9F\u884C:
-
-\`\`\`bash
-${command}
-\`\`\`
-
-3. \`./vrt-results/\` \u5185\u306E\u6700\u65B0\u30C7\u30A3\u30EC\u30AF\u30C8\u30EA\u306B\u3042\u308B \`report.json\` \u3092\u8AAD\u3080
-4. \`status: "fail"\` \u306E\u30C6\u30B9\u30C8\u7D50\u679C\u306B\u6CE8\u76EE\u3059\u308B
-5. \u8A72\u5F53\u3059\u308Bdiff\u753B\u50CF\uFF08\`*--diff.png\`\uFF09\u3092Read\u30C4\u30FC\u30EB\u3067\u8996\u899A\u7684\u306B\u78BA\u8A8D\u3059\u308B
-6. diff\u753B\u50CF\u304B\u3089\u4FEE\u6B63\u3059\u3079\u304DCSS\u3084HTML\u306E\u5834\u6240\u3092\u7279\u5B9A\u3059\u308B
-7. \u30BD\u30FC\u30B9\u30B3\u30FC\u30C9\u3092\u4FEE\u6B63\u3059\u308B
-8. \u518D\u5EA6VRT\u3092\u5B9F\u884C\u3057\u3066\u4FEE\u6B63\u304C\u53CD\u6620\u3055\u308C\u305F\u3053\u3068\u3092\u78BA\u8A8D\u3059\u308B
-`;
+  const separator = content.length > 0 && !content.endsWith("\n") ? "\n" : "";
+  await writeFile4(
+    gitignorePath,
+    content + separator + VRT_RESULTS_PATTERN + "\n",
+    "utf-8"
+  );
+  console.log(chalk3.green(`\u2705 Added '${VRT_RESULTS_PATTERN}' to .gitignore`));
 }
 
 // bin/vrt.ts
 var program = new Command();
 program.name("vrt").description("Visual Regression Testing CLI - Compare web pages visually").version("0.1.0");
-program.command("run").description("Run visual regression tests").requiredOption("--before <url>", "Baseline URL (production)").requiredOption("--after <url>", "Comparison URL (local/staging)").requiredOption("--paths <paths>", "Page paths to compare (comma-separated)").option("--threshold <n>", "Diff tolerance percentage", "0.1").option("--hide <selectors>", "CSS selectors to hide (comma-separated)").option("--no-html", "Skip HTML report generation").option("--no-open", "Do not open HTML report in browser").action(async (rawOptions) => {
+program.command("run").description("Run visual regression tests").requiredOption("--reference <url>", "Reference URL (production)").requiredOption("--after <url>", "Comparison URL (local/staging)").requiredOption("--paths <paths>", "Page paths to compare (comma-separated)").option("--threshold <n>", "Diff tolerance percentage", "0.1").option("--hide <selectors>", "CSS selectors to hide (comma-separated)").action(async (rawOptions) => {
   try {
     const parsed = cliOptionsSchema.parse(rawOptions);
     const options = {
-      beforeUrl: parsed.before,
+      referenceUrl: parsed.reference,
       afterUrl: parsed.after,
       paths: parsed.paths,
       threshold: parsed.threshold,
-      hideSelectors: parsed.hide,
-      html: parsed.html,
-      open: parsed.open
+      hideSelectors: parsed.hide
     };
     const report = await runVrt(options);
     process.exit(report.summary.overallStatus === "pass" ? 0 : 1);
@@ -637,16 +623,10 @@ program.command("run").description("Run visual regression tests").requiredOption
   }
 });
 program.command("init").description(
-  "Generate .claude/commands/vrt.md skill file for this repository"
-).requiredOption("--before <url>", "Baseline URL (production)").requiredOption("--after <url>", "Comparison URL (local/staging)").requiredOption("--paths <paths>", "Page paths to compare (comma-separated)").option("--threshold <n>", "Diff tolerance percentage", "0.1").option("--hide <selectors>", "CSS selectors to hide (comma-separated)").action(async (options) => {
+  "Generate .claude/skills/web-corders-vrt/SKILL.md for this repository"
+).requiredOption("--refDomain <domain>", "Reference domain URL (production)").action(async (options) => {
   try {
-    await runInit({
-      before: options.before,
-      after: options.after,
-      paths: options.paths,
-      threshold: parseFloat(options.threshold),
-      hide: options.hide
-    });
+    await runInit({ refDomain: options.refDomain });
   } catch (error) {
     if (error instanceof Error) {
       console.error(`Error: ${error.message}`);