devlens-mcp 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PresenceLabs LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# DevLens
+
+Real-time visual feedback for AI-assisted frontend development. A Claude Code plugin (MCP server) that gives Claude the ability to see what it's building — automatically, after every file write, in ~50ms.
+
+## How it works
+
+DevLens keeps a single Chromium instance alive for the duration of your Claude Code session. After every frontend file change, Claude calls `dl_capture` and receives a screenshot of the affected route. No user prompting needed — the companion skill handles it automatically.
+
+## Tools
+
+| Tool | Speed | Use |
+|------|-------|-----|
+| `dl_warmup` | ~500ms cold, once | Pre-warm browser at session start |
+| `dl_capture` | ~50ms warm | Screenshot a route or element |
+| `dl_diff` | ~60ms warm | Pixel diff vs last capture |
+| `dl_snapshot` | ~10ms | DOM + styles, no pixels |
+
+## Setup
+
+```bash
+npm install -g devlens-mcp
+npx playwright install chromium
+```
+
+Then in your project root:
+
+```bash
+npx devlens-mcp init
+```
+
+This creates `.mcp.json`, `.claude/skills/devlens.md`, and `devlens.config.ts` automatically.
+
+Edit `devlens.config.ts` to map your source files to dev server routes, then restart Claude Code.
+
+```typescript
+// devlens.config.ts
+const config = {
+  devServerUrl: 'http://localhost:5173',
+  routes: [
+    { pattern: '**/pages/Home.tsx', route: '/' },
+    { pattern: '**/pages/About.tsx', route: '/about' },
+    { pattern: '**/components/**', route: null },
+  ],
+};
+export default config;
+```
+
+## What `init` sets up
+
+- **`.mcp.json`** — registers the devlens MCP server so Claude Code can call the `dl_*` tools
+- **`.claude/skills/devlens.md`** — the skill that tells Claude to automatically capture after every file write, diff before/after significant changes, and run a visual audit before deploying
+- **`devlens.config.ts`** — maps file glob patterns to dev server routes
+
+## Performance
+
+Warm captures target **<80ms**. Cold first-load is ~500ms (one-time per session). Element-level captures (`selector` param) are faster and produce smaller images.
+
+## Open source
+
+MIT. Works with any MCP-compatible AI client.

package/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: devlens
+description: Real-time visual QA for frontend development. Auto-invoked when editing frontend files.
+triggers:
+  - frontend
+  - ui
+  - component
+  - tsx
+  - css
+---
+
+# DevLens — Automatic Visual QA
+
+You have access to four visual inspection tools: `dl_warmup`, `dl_capture`, `dl_diff`, `dl_snapshot`.
+
+## Rules — follow these automatically, no user prompting needed
+
+### Rule 1: Warmup at session start
+The first time you are about to edit any file matching `apps/web/src/**`, call `dl_warmup` first.
+This pre-warms the browser so subsequent captures cost ~50ms instead of ~500ms.
+Only call it once per session.
+
+### Rule 2: Capture after every frontend file write
+After every `Edit` or `Write` to a file matching `apps/web/src/**/*.tsx` or `apps/web/src/**/*.css`:
+1. Call `dl_capture` with either `route` (if you know it) or `filePath` (auto-resolved from devlens.config.ts)
+2. Add `selector` if you only changed a specific component (keeps the image small and fast)
+3. Look at the returned image — does it look right?
+4. If something looks wrong (layout broken, text missing, wrong color, overlapping elements), fix it before moving on
+
+Do this every time, automatically. Do not wait to be asked.
+
+### Rule 3: Diff before/after for significant changes
+When making a change you expect to visually alter the page (not just a bug fix):
+1. Call `dl_diff` before the change to set the baseline
+2. Make your code changes
+3. Call `dl_diff` again to see exactly what pixels changed
+4. Verify the diff matches your intent
+
+### Rule 4: Pre-deploy visual audit
+Before running any deploy command (`wrangler pages deploy`, `npm run deploy`, etc.):
+1. Call `dl_capture` on the key routes that were changed during this session
+2. Review each screenshot
+3. Only proceed with deploy if all look correct
+
+Routes to always check before deploy:
+- `/` (Dashboard)
+- Any route you edited during this session
+
+### Rule 5: Snap on request
+If the user asks "does this look right?", "show me what it looks like", or "screenshot this", 
+call `dl_capture` immediately and show the result.
+
+## Performance expectations
+- `dl_warmup`: ~500ms (cold), do once
+- `dl_capture` warm: ~50–80ms
+- `dl_snapshot`: ~10ms
+- `dl_diff` warm: ~60ms
+
+These are fast enough to call after every file write without slowing down development.
+
+## Selector tips
+- Use `.classname` to target a specific component
+- Use `[data-testid="x"]` for test-id targeting
+- Omit selector for full-page captures (slower, larger image)
+- Prefer element-level captures during iteration, full-page before deploy

package/dist/index.js

@@ -0,0 +1,485 @@
+#!/usr/bin/env node
+
+// src/cli/init.ts
+import { writeFileSync, mkdirSync, existsSync, readFileSync } from "fs";
+import { resolve, join } from "path";
+var SKILL_CONTENT = `---
+name: devlens
+description: Real-time visual QA for frontend development. Auto-invoked when editing frontend files.
+triggers:
+  - frontend
+  - ui
+  - component
+  - tsx
+  - css
+---
+
+# DevLens \u2014 Automatic Visual QA
+
+You have access to four visual inspection tools: \`dl_warmup\`, \`dl_capture\`, \`dl_diff\`, \`dl_snapshot\`.
+
+## Rules \u2014 follow these automatically, no user prompting needed
+
+### Rule 1: Warmup at session start
+The first time you are about to edit any frontend file (\`.tsx\`, \`.jsx\`, \`.css\`, \`.vue\`, \`.svelte\`), call \`dl_warmup\` first.
+This pre-warms the browser so subsequent captures cost ~50ms instead of ~500ms.
+Only call it once per session.
+
+### Rule 2: Capture after every frontend file write
+After every \`Edit\` or \`Write\` to a \`.tsx\`, \`.jsx\`, \`.css\`, \`.vue\`, or \`.svelte\` file:
+1. Call \`dl_capture\` with either \`route\` (if you know it) or \`filePath\` (auto-resolved from devlens.config.ts)
+2. Add \`selector\` if you only changed a specific component (keeps the image small and fast)
+3. Look at the returned image \u2014 does it look right?
+4. If something looks wrong (layout broken, text missing, wrong color, overlapping elements), fix it before moving on
+
+Do this every time, automatically. Do not wait to be asked.
+
+### Rule 3: Diff before/after for significant changes
+When making a change you expect to visually alter the page:
+1. Call \`dl_diff\` before the change to set the baseline
+2. Make your code changes
+3. Call \`dl_diff\` again to see exactly what pixels changed
+4. Verify the diff matches your intent
+
+### Rule 4: Pre-deploy visual audit
+Before running any deploy command:
+1. Call \`dl_capture\` on the key routes that were changed during this session
+2. Review each screenshot
+3. Only proceed with deploy if all look correct
+
+### Rule 5: Snap on request
+If the user asks "does this look right?", "show me what it looks like", or "screenshot this",
+call \`dl_capture\` immediately and show the result.
+
+## Performance expectations
+- \`dl_warmup\`: ~500ms (cold), do once
+- \`dl_capture\` warm: ~50\u201380ms
+- \`dl_snapshot\`: ~10ms
+- \`dl_diff\` warm: ~60ms
+
+## Selector tips
+- Use \`.classname\` to target a specific component
+- Use \`[data-testid="x"]\` for test-id targeting
+- Omit selector for full-page captures (slower, larger image)
+- Prefer element-level captures during iteration, full-page before deploy
+`;
+var CONFIG_TEMPLATE = `// devlens.config.ts \u2014 map your source files to dev server routes
+const config = {
+  devServerUrl: 'http://localhost:5173',
+  hmrDebounceMs: 150,
+  defaultViewport: { width: 1280, height: 900 },
+  routes: [
+    // { pattern: '**/pages/Home.tsx', route: '/' },
+    // { pattern: '**/pages/About.tsx', route: '/about' },
+    // { pattern: '**/components/**', route: null }, // null = no auto-route for components
+  ],
+};
+
+export default config;
+`;
+async function runInit() {
+  const cwd = process.cwd();
+  const mcpPath = resolve(cwd, ".mcp.json");
+  let mcpConfig = {};
+  if (existsSync(mcpPath)) {
+    try {
+      mcpConfig = JSON.parse(readFileSync(mcpPath, "utf8"));
+    } catch {
+      console.warn("  Warning: existing .mcp.json could not be parsed \u2014 overwriting");
+    }
+  }
+  mcpConfig.mcpServers = mcpConfig.mcpServers ?? {};
+  mcpConfig.mcpServers["devlens"] = { command: "npx", args: ["--yes", "devlens-mcp"] };
+  writeFileSync(mcpPath, JSON.stringify(mcpConfig, null, 2) + "\n");
+  console.log("  \u2713 .mcp.json updated");
+  const skillsDir = resolve(cwd, ".claude", "skills");
+  mkdirSync(skillsDir, { recursive: true });
+  writeFileSync(join(skillsDir, "devlens.md"), SKILL_CONTENT);
+  console.log("  \u2713 .claude/skills/devlens.md written");
+  const configPath = resolve(cwd, "devlens.config.ts");
+  if (!existsSync(configPath)) {
+    writeFileSync(configPath, CONFIG_TEMPLATE);
+    console.log("  \u2713 devlens.config.ts created (edit this to add your routes)");
+  } else {
+    console.log("  \u2713 devlens.config.ts already exists \u2014 skipped");
+  }
+  console.log("");
+  console.log("DevLens initialized. Next steps:");
+  console.log("");
+  console.log("  1. Install Chromium (one-time):");
+  console.log("     npx playwright install chromium");
+  console.log("");
+  console.log("  2. Edit devlens.config.ts to map your pages to routes");
+  console.log("");
+  console.log("  3. Restart Claude Code");
+  console.log("");
+  console.log("  Claude will then automatically screenshot your UI after every file write.");
+}
+
+// src/server.ts
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { CallToolRequestSchema, ListToolsRequestSchema } from "@modelcontextprotocol/sdk/types.js";
+
+// src/config.ts
+import { pathToFileURL } from "url";
+import { resolve as resolve2 } from "path";
+var defaults = {
+  defaultViewport: { width: 1280, height: 900 },
+  hmrDebounceMs: 150
+};
+async function loadConfig(cwd = process.cwd()) {
+  const configPath = resolve2(cwd, "devlens.config.ts");
+  try {
+    const jsPath = configPath.replace(/\.ts$/, ".js");
+    const mod = await import(pathToFileURL(jsPath).href);
+    return { ...defaults, ...mod.default };
+  } catch {
+    return {
+      ...defaults,
+      devServerUrl: "http://localhost:5173",
+      routes: []
+    };
+  }
+}
+
+// src/browser/manager.ts
+import { chromium } from "playwright";
+var BrowserManager = class {
+  static browser = null;
+  static page = null;
+  static async getPage() {
+    if (!this.browser) {
+      this.browser = await chromium.launch({ headless: true });
+    }
+    if (!this.page || this.page.isClosed()) {
+      this.page = await this.browser.newPage();
+      this.page.on("console", () => {
+      });
+      this.page.on("pageerror", () => {
+      });
+    }
+    return this.page;
+  }
+  static async close() {
+    if (this.page && !this.page.isClosed()) await this.page.close();
+    if (this.browser) await this.browser.close();
+    this.page = null;
+    this.browser = null;
+  }
+  static isWarm() {
+    return this.browser !== null && this.page !== null && !this.page.isClosed();
+  }
+};
+
+// src/utils/diff.ts
+import { PNG } from "pngjs";
+import pixelmatch from "pixelmatch";
+var DiffStore = class {
+  baselines = /* @__PURE__ */ new Map();
+  async diffAndStore(routeKey, newImageBase64) {
+    const newBuf = Buffer.from(newImageBase64, "base64");
+    const previous = this.baselines.get(routeKey);
+    this.baselines.set(routeKey, newBuf);
+    if (!previous) return null;
+    const imgA = PNG.sync.read(previous);
+    const imgB = PNG.sync.read(newBuf);
+    if (imgA.width !== imgB.width || imgA.height !== imgB.height) {
+      return { diffImageBase64: newImageBase64, changedPercent: 100, changedPixels: -1, totalPixels: -1 };
+    }
+    const { width, height } = imgA;
+    const diff2 = new PNG({ width, height });
+    const changedPixels = pixelmatch(imgA.data, imgB.data, diff2.data, width, height, { threshold: 0.1 });
+    const totalPixels = width * height;
+    return {
+      diffImageBase64: PNG.sync.write(diff2).toString("base64"),
+      changedPercent: Math.round(changedPixels / totalPixels * 100 * 10) / 10,
+      changedPixels,
+      totalPixels
+    };
+  }
+  clear(routeKey) {
+    if (routeKey) this.baselines.delete(routeKey);
+    else this.baselines.clear();
+  }
+};
+
+// src/browser/capture.ts
+function normaliseUrl(raw) {
+  try {
+    const u = new URL(raw);
+    if (u.pathname === "/") u.pathname = "";
+    return u.toString().replace(/\/$/, "");
+  } catch {
+    return raw.replace(/\/$/, "");
+  }
+}
+async function captureRoute(url, selector, viewport) {
+  const start = Date.now();
+  const page = await BrowserManager.getPage();
+  await page.setViewportSize(viewport);
+  if (normaliseUrl(page.url()) !== normaliseUrl(url)) {
+    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 1e4 });
+  }
+  const screenshot = await page.screenshot({ type: "png", fullPage: false });
+  return {
+    imageBase64: screenshot.toString("base64"),
+    durationMs: Date.now() - start,
+    url,
+    selector: void 0,
+    found: true
+  };
+}
+async function captureElement(url, selector, viewport) {
+  const start = Date.now();
+  const page = await BrowserManager.getPage();
+  await page.setViewportSize(viewport);
+  if (normaliseUrl(page.url()) !== normaliseUrl(url)) {
+    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 1e4 });
+  }
+  const locator = page.locator(selector).first();
+  const count = await locator.count();
+  if (count === 0) {
+    return { imageBase64: "", durationMs: Date.now() - start, url, selector, found: false };
+  }
+  const screenshot = await locator.screenshot({ type: "png" });
+  return {
+    imageBase64: screenshot.toString("base64"),
+    durationMs: Date.now() - start,
+    url,
+    selector,
+    found: true
+  };
+}
+
+// src/tools/warmup.ts
+async function warmup(devServerUrl, config) {
+  const url = devServerUrl ?? config.devServerUrl;
+  const start = Date.now();
+  await captureRoute(url, void 0, config.defaultViewport ?? { width: 1280, height: 900 });
+  return { ok: true, durationMs: Date.now() - start, url };
+}
+
+// src/utils/route-mapper.ts
+import { minimatch } from "minimatch";
+function resolveRoute(filePath, config) {
+  const normalized = filePath.replace(/\\/g, "/");
+  for (const mapping of config.routes) {
+    if (minimatch(normalized, mapping.pattern, { matchBase: false })) {
+      return mapping.route;
+    }
+  }
+  return null;
+}
+
+// src/utils/wait-for-hmr.ts
+function waitForHmr(ms) {
+  return new Promise((resolve3) => setTimeout(resolve3, ms));
+}
+
+// src/tools/capture.ts
+async function capture(input, config) {
+  let route = input.route;
+  if (!route && input.filePath) {
+    route = resolveRoute(input.filePath, config) ?? void 0;
+  }
+  if (!route) {
+    return { error: "No route resolved \u2014 pass route directly or add filePath to devlens.config.ts mappings" };
+  }
+  const url = `${config.devServerUrl}${route}`;
+  const debounce = input.waitMs ?? config.hmrDebounceMs ?? 150;
+  await waitForHmr(debounce);
+  const viewport = config.defaultViewport ?? { width: 1280, height: 900 };
+  if (input.selector) {
+    return captureElement(url, input.selector, viewport);
+  }
+  return captureRoute(url, void 0, viewport);
+}
+
+// src/tools/snapshot.ts
+async function snapshot(route, selector, config) {
+  const url = `${config.devServerUrl}${route}`;
+  const page = await BrowserManager.getPage();
+  if (normaliseUrl(page.url()) !== normaliseUrl(url)) {
+    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 1e4 });
+  }
+  const target = selector ? page.locator(selector).first() : page.locator("body");
+  const found = await target.count() > 0;
+  if (!found) return { found: false, elements: [] };
+  const elements = await target.evaluate((el) => {
+    function extract(node) {
+      const style = window.getComputedStyle(node);
+      const rect = node.getBoundingClientRect();
+      return {
+        tag: node.tagName.toLowerCase(),
+        id: node.id || void 0,
+        classes: Array.from(node.classList).slice(0, 5),
+        text: node.textContent?.trim().slice(0, 120) || void 0,
+        role: node.getAttribute("role") || void 0,
+        ariaLabel: node.getAttribute("aria-label") || void 0,
+        visible: rect.width > 0 && rect.height > 0,
+        bounds: { x: Math.round(rect.x), y: Math.round(rect.y), w: Math.round(rect.width), h: Math.round(rect.height) },
+        styles: {
+          display: style.display,
+          color: style.color,
+          backgroundColor: style.backgroundColor,
+          fontSize: style.fontSize,
+          fontWeight: style.fontWeight
+        },
+        children: Array.from(node.children).slice(0, 8).map(extract)
+      };
+    }
+    return extract(el);
+  });
+  return { found: true, url, selector, elements };
+}
+
+// src/tools/diff.ts
+async function diff(route, selector, store, config) {
+  const result = await capture({ route, selector }, config);
+  if ("error" in result) return result;
+  if (!result.found) return { found: false };
+  const key = `${route}${selector ?? ""}`;
+  const diffResult = await store.diffAndStore(key, result.imageBase64);
+  if (!diffResult) {
+    return { ...result, diff: null, message: "Baseline set \u2014 call again after making changes to see the diff." };
+  }
+  return {
+    ...result,
+    diff: {
+      diffImageBase64: diffResult.diffImageBase64,
+      changedPercent: diffResult.changedPercent,
+      changedPixels: diffResult.changedPixels
+    }
+  };
+}
+
+// src/server.ts
+var diffStore = new DiffStore();
+async function startServer() {
+  const config = await loadConfig();
+  const server = new Server(
+    { name: "devlens", version: "0.1.0" },
+    { capabilities: { tools: {} } }
+  );
+  server.setRequestHandler(ListToolsRequestSchema, async () => ({
+    tools: [
+      {
+        name: "dl_warmup",
+        description: "Pre-warm the browser by loading the dev server. Call once at the start of a frontend task. First call takes ~500ms; subsequent captures cost ~50ms.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            devServerUrl: { type: "string", description: 'Override the dev server URL from config (e.g. "http://localhost:5173")' }
+          }
+        }
+      },
+      {
+        name: "dl_capture",
+        description: 'Screenshot a dev server route and return a PNG image. Pass either `route` ("/dashboard") or `filePath` (auto-resolved via devlens.config.ts). Optionally pass `selector` to crop to a specific element. Call this after every frontend file write.',
+        inputSchema: {
+          type: "object",
+          properties: {
+            route: { type: "string", description: 'Dev server route, e.g. "/dashboard"' },
+            filePath: { type: "string", description: "The file you just edited \u2014 route resolved from devlens.config.ts mappings" },
+            selector: { type: "string", description: 'CSS selector to crop to (e.g. ".onboarding-banner"). Omit for full page.' },
+            waitMs: { type: "number", description: "ms to wait for HMR to settle (default: 150)" }
+          }
+        }
+      },
+      {
+        name: "dl_diff",
+        description: "Screenshot a route and compare to the last capture for that route. Returns a pixel diff image and the percentage of pixels changed. First call sets the baseline.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            route: { type: "string" },
+            selector: { type: "string" }
+          },
+          required: ["route"]
+        }
+      },
+      {
+        name: "dl_snapshot",
+        description: "Fast structural snapshot \u2014 returns DOM tree, computed styles, and bounding boxes without a visual screenshot. ~10ms. Use for quick layout/content verification.",
+        inputSchema: {
+          type: "object",
+          properties: {
+            route: { type: "string", description: "Dev server route" },
+            selector: { type: "string", description: "CSS selector to scope snapshot to" }
+          },
+          required: ["route"]
+        }
+      }
+    ]
+  }));
+  server.setRequestHandler(CallToolRequestSchema, async (req) => {
+    const { name, arguments: args } = req.params;
+    try {
+      if (name === "dl_warmup") {
+        const result = await warmup(args.devServerUrl, config);
+        return {
+          content: [{ type: "text", text: `Warmed up in ${result.durationMs}ms \u2014 ${result.url}` }]
+        };
+      }
+      if (name === "dl_capture") {
+        const input = args;
+        const result = await capture(input, config);
+        if ("error" in result) {
+          return { content: [{ type: "text", text: `Error: ${result.error}` }] };
+        }
+        const content = [
+          { type: "text", text: `Captured in ${result.durationMs}ms \u2014 ${result.url}${result.selector ? ` (${result.selector})` : ""}` }
+        ];
+        if (result.imageBase64) {
+          content.push({ type: "image", data: result.imageBase64, mimeType: "image/png" });
+        }
+        return { content };
+      }
+      if (name === "dl_diff") {
+        const { route, selector } = args;
+        const result = await diff(route, selector, diffStore, config);
+        if ("error" in result) return { content: [{ type: "text", text: `Error: ${result.error}` }] };
+        const content = [
+          { type: "text", text: result.diff ? `Changed: ${result.diff.changedPercent}% (${result.diff.changedPixels} pixels)` : result.message ?? "Baseline set." }
+        ];
+        if (result.diff?.diffImageBase64) {
+          content.push({ type: "image", data: result.diff.diffImageBase64, mimeType: "image/png" });
+        }
+        return { content };
+      }
+      if (name === "dl_snapshot") {
+        const { route, selector } = args;
+        const result = await snapshot(route, selector, config);
+        return { content: [{ type: "text", text: JSON.stringify(result, null, 2) }] };
+      }
+      return { content: [{ type: "text", text: `Unknown tool: ${name}` }] };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      return { content: [{ type: "text", text: `Tool error: ${msg}` }], isError: true };
+    }
+  });
+  process.on("SIGINT", async () => {
+    await BrowserManager.close();
+    process.exit(0);
+  });
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error("[devlens] MCP server ready");
+}
+
+// src/index.ts
+var command = process.argv[2];
+if (command === "init") {
+  console.log("Initializing DevLens...");
+  console.log("");
+  runInit().catch((err) => {
+    console.error("Init failed:", err instanceof Error ? err.message : String(err));
+    process.exit(1);
+  });
+} else {
+  startServer().catch((err) => {
+    console.error("[devlens] fatal:", err);
+    process.exit(1);
+  });
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "devlens-mcp",
+  "version": "0.1.0",
+  "description": "Real-time visual feedback plugin for Claude Code frontend development",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "devlens-mcp": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "SKILL.md",
+    "README.md"
+  ],
+  "keywords": [
+    "claude",
+    "mcp",
+    "claude-code",
+    "playwright",
+    "visual-testing",
+    "frontend"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "start": "node dist/index.js"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "minimatch": "^10.2.5",
+    "pixelmatch": "^6.0.0",
+    "playwright": "^1.45.0",
+    "pngjs": "^7.0.0",
+    "zod": "^3.22.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/pngjs": "^6.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.6.0"
+  }
+}