@eyeglass/cli 0.1.1 → 0.1.3

package/dist/index.js

@@ -5,20 +5,6 @@ import { execFileSync } from 'child_process';
 // ============================================================================
 // Templates
 // ============================================================================
-const VITE_PLUGIN = `// Eyeglass Vite Plugin - Auto-generated by eyeglass init
-export function eyeglassPlugin() {
-  return {
-    name: 'eyeglass',
-    transformIndexHtml(html) {
-      if (process.env.NODE_ENV === 'production') return html;
-      return html.replace(
-        '</body>',
-        '<script type="module">import "@eyeglass/inspector";</script></body>'
-      );
-    },
-  };
-}
-`;
 const NEXT_CONFIG_ADDITION = `
 // Eyeglass configuration - Auto-generated by eyeglass init
 const withEyeglass = (nextConfig) => {
@@ -48,6 +34,71 @@ const CLAUDE_CONFIG = {
         },
     },
 };
+const EYEGLASS_SKILL = `---
+name: eyeglass
+description: Listen for Eyeglass requests from the browser and make UI changes
+user_invocable: true
+---
+
+# Eyeglass Skill
+
+Eyeglass lets users select UI elements in their browser and request changes. When invoked, enter a listening loop to handle requests.
+
+## How It Works
+
+1. User selects an element in their browser using the Eyeglass inspector
+2. User types a request (e.g., "make this blue", "add a button here")
+3. You receive the element context and make the requested changes
+4. User can send follow-up requests on the same element
+
+## Listening Loop
+
+When this skill is invoked, enter a continuous listening mode:
+
+\`\`\`
+while listening:
+  1. Call wait_for_request() - blocks until user selects an element
+  2. Call update_status("fixing", "Working on it...") to show progress
+  3. Use report_action() to show what files you're reading/writing
+  4. Make the requested code changes
+  5. Call update_status("success", "Done!") when complete
+  6. IMMEDIATELY call wait_for_request() again to continue listening
+\`\`\`
+
+## Available MCP Tools
+
+- **wait_for_request()** - Block until user selects an element. Returns element context.
+- **update_status(status, message)** - Update the browser UI. Status: "fixing" | "success" | "failed"
+- **report_action(action, target)** - Show progress. Action: "reading" | "writing" | "searching"
+- **send_thought(content)** - Share your reasoning with the user
+- **ask_question(question, options)** - Ask the user a multiple choice question
+
+## Example Flow
+
+\`\`\`
+User invokes: /eyeglass
+
+You: [Call wait_for_request()]
+     → Returns: User selected <Button /> and said "make this red"
+
+You: [Call update_status("fixing", "Adding red variant to Button...")]
+     [Call report_action("reading", "src/components/Button.tsx")]
+     [Read the file, make changes]
+     [Call report_action("writing", "src/components/Button.tsx")]
+     [Write the changes]
+     [Call update_status("success", "Button is now red!")]
+
+You: [Call wait_for_request()] ← IMPORTANT: Go back to listening!
+     → Waiting for next request...
+\`\`\`
+
+## Key Points
+
+- **Always loop back** - After completing a request, immediately call wait_for_request() again
+- **Show progress** - Use update_status and report_action so the user sees what you're doing
+- **Stay in the browser** - The user doesn't need to come back to the terminal
+- **Handle follow-ups** - Users can send multiple requests on the same element
+`;
 // ============================================================================
 // Utilities
 // ============================================================================
@@ -151,6 +202,26 @@ function detectProject() {
 // ============================================================================
 // Config Modifiers
 // ============================================================================
+function setupEyeglassSkill(dryRun) {
+    const cwd = process.cwd();
+    const skillsDir = path.join(cwd, '.claude', 'skills');
+    const skillPath = path.join(skillsDir, 'eyeglass.md');
+    if (fileExists(skillPath)) {
+        log('Eyeglass skill already exists', 'success');
+        return true;
+    }
+    if (dryRun) {
+        log(`Would create ${path.relative(cwd, skillPath)}`);
+    }
+    else {
+        if (!fileExists(skillsDir)) {
+            fs.mkdirSync(skillsDir, { recursive: true });
+        }
+        writeFile(skillPath, EYEGLASS_SKILL);
+        log('Created .claude/skills/eyeglass.md', 'success');
+    }
+    return true;
+}
 function setupClaudeConfig(dryRun) {
     const cwd = process.cwd();
     const claudeDir = path.join(cwd, '.claude');
@@ -199,55 +270,44 @@ function setupClaudeConfig(dryRun) {
 }
 function setupVite(configFile, dryRun) {
     const cwd = process.cwd();
-    const isTs = configFile.endsWith('.ts');
-    const pluginFile = path.join(cwd, isTs ? 'eyeglass.plugin.ts' : 'eyeglass.plugin.js');
-    // Create plugin file
-    if (!fileExists(pluginFile)) {
-        if (dryRun) {
-            log(`Would create ${path.basename(pluginFile)}`);
-        }
-        else {
-            writeFile(pluginFile, VITE_PLUGIN);
-            log(`Created ${path.basename(pluginFile)}`, 'success');
+    // Find entry file (main.tsx, main.ts, main.jsx, main.js, src/main.*, etc.)
+    const entryFiles = [
+        'src/main.tsx',
+        'src/main.ts',
+        'src/main.jsx',
+        'src/main.js',
+        'main.tsx',
+        'main.ts',
+        'main.jsx',
+        'main.js',
+    ];
+    let entryFile = null;
+    for (const entry of entryFiles) {
+        const fullPath = path.join(cwd, entry);
+        if (fileExists(fullPath)) {
+            entryFile = fullPath;
+            break;
         }
     }
-    // Modify vite.config
-    const config = readFile(configFile);
-    // Check if already configured
-    if (config.includes('eyeglassPlugin')) {
-        log('Vite config already has eyeglass plugin', 'success');
-        return true;
-    }
-    // Add import
-    const importStatement = `import { eyeglassPlugin } from './eyeglass.plugin';\n`;
-    let newConfig = config;
-    // Find a good place to add the import (after other imports or at the top)
-    const lastImportMatch = config.match(/^import .+$/gm);
-    if (lastImportMatch) {
-        const lastImport = lastImportMatch[lastImportMatch.length - 1];
-        const lastImportIndex = config.lastIndexOf(lastImport) + lastImport.length;
-        newConfig = config.slice(0, lastImportIndex) + '\n' + importStatement + config.slice(lastImportIndex);
-    }
-    else {
-        newConfig = importStatement + config;
-    }
-    // Add to plugins array
-    // This handles: plugins: [...] or plugins: [react(), ...]
-    const pluginsMatch = newConfig.match(/plugins\s*:\s*\[/);
-    if (pluginsMatch) {
-        const insertPos = newConfig.indexOf(pluginsMatch[0]) + pluginsMatch[0].length;
-        newConfig = newConfig.slice(0, insertPos) + 'eyeglassPlugin(), ' + newConfig.slice(insertPos);
-    }
-    else {
-        log('Could not find plugins array in vite config - please add eyeglassPlugin() manually', 'warn');
+    if (!entryFile) {
+        log('Could not find entry file - please import @eyeglass/inspector manually in your main file', 'warn');
         return false;
     }
+    const content = readFile(entryFile);
+    // Check if already imported
+    if (content.includes('@eyeglass/inspector')) {
+        log('Inspector already imported', 'success');
+        return true;
+    }
+    // Add import at the top
+    const importStatement = `import '@eyeglass/inspector';\n`;
+    const newContent = importStatement + content;
     if (dryRun) {
-        log(`Would modify ${path.basename(configFile)} to add eyeglassPlugin()`);
+        log(`Would add inspector import to ${path.relative(cwd, entryFile)}`);
     }
     else {
-        writeFile(configFile, newConfig);
-        log(`Updated ${path.basename(configFile)} with eyeglass plugin`, 'success');
+        writeFile(entryFile, newContent);
+        log(`Added inspector import to ${path.relative(cwd, entryFile)}`, 'success');
     }
     return true;
 }
@@ -368,7 +428,9 @@ function init(options) {
     }
     // Step 2: Setup Claude Code MCP config
     setupClaudeConfig(dryRun);
-    // Step 3: Setup project-specific integration
+    // Step 3: Setup Eyeglass skill for Claude
+    setupEyeglassSkill(dryRun);
+    // Step 4: Setup project-specific integration
     console.log('');
     switch (project.type) {
         case 'vite':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eyeglass/cli",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Visual debugging for AI coding agents - CLI",
   "type": "module",
   "bin": {