@eyeglass/cli 0.1.2 → 0.1.3

package/dist/index.js

@@ -34,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
 // ============================================================================
@@ -137,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');
@@ -343,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.2",
+  "version": "0.1.3",
   "description": "Visual debugging for AI coding agents - CLI",
   "type": "module",
   "bin": {