devlens-mcp 0.1.0 → 0.1.1

package/SKILL.md

@@ -16,12 +16,12 @@ You have access to four visual inspection tools: `dl_warmup`, `dl_capture`, `dl_
 ## 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.
+The first time you are about to edit any frontend file (`.tsx`, `.ts`, `.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 file matching `apps/web/src/**/*.tsx` or `apps/web/src/**/*.css`:
+After every `Edit` or `Write` to a file matching `**/*.tsx`, `**/*.vue`, `**/*.svelte`, or `**/*.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?

package/dist/index.js

@@ -414,16 +414,24 @@ async function startServer() {
     ]
   }));
   server.setRequestHandler(CallToolRequestSchema, async (req) => {
-    const { name, arguments: args } = req.params;
+    const { name } = req.params;
+    const args = req.params.arguments ?? {};
+    const str = (v) => typeof v === "string" ? v : void 0;
+    const num = (v) => typeof v === "number" ? v : void 0;
     try {
       if (name === "dl_warmup") {
-        const result = await warmup(args.devServerUrl, config);
+        const result = await warmup(str(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 input = {
+          route: str(args.route),
+          filePath: str(args.filePath),
+          selector: str(args.selector),
+          waitMs: num(args.waitMs)
+        };
         const result = await capture(input, config);
         if ("error" in result) {
           return { content: [{ type: "text", text: `Error: ${result.error}` }] };
@@ -437,11 +445,12 @@ async function startServer() {
         return { content };
       }
       if (name === "dl_diff") {
-        const { route, selector } = args;
+        const route = str(args.route) ?? "";
+        const selector = str(args.selector);
         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." }
+          { type: "text", text: result.diff ? `Changed: ${result.diff.changedPercent}% (${result.diff.changedPixels} pixels)` : "message" in result && typeof result.message === "string" ? result.message : "Baseline set." }
         ];
         if (result.diff?.diffImageBase64) {
           content.push({ type: "image", data: result.diff.diffImageBase64, mimeType: "image/png" });
@@ -449,7 +458,8 @@ async function startServer() {
         return { content };
       }
       if (name === "dl_snapshot") {
-        const { route, selector } = args;
+        const route = str(args.route) ?? "";
+        const selector = str(args.selector);
         const result = await snapshot(route, selector, config);
         return { content: [{ type: "text", text: JSON.stringify(result, null, 2) }] };
       }

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "devlens-mcp",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Real-time visual feedback plugin for Claude Code frontend development",
   "type": "module",
   "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
   "bin": {
     "devlens-mcp": "dist/index.js"
   },
@@ -26,19 +32,25 @@
     "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "start": "node dist/index.js"
+    "start": "node dist/index.js",
+    "lint": "eslint src --ext .ts",
+    "format": "prettier --write src"
   },
   "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"
+    "pngjs": "^7.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@types/pngjs": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.0.0",
+    "prettier": "^3.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
     "vitest": "^1.6.0"