@mehuljatiya/troupe 0.1.15 → 0.1.16

package/bin/design.js

@@ -23,5 +23,5 @@ try {
     console.log('Run: ' + chalk.cyan('npx @mehuljatiya/troupe setup'))
     process.exit(1)
   }
-  // normal exit or Ctrl+C — ignore
+  // all other exits (Ctrl+C, non-interactive shell errors) — ignore silently
 }

package/commands/document-component.md

@@ -28,15 +28,17 @@ These apply to every run. No exceptions.
 
 Call `mcp__claude_ai_Figma__whoami`. If it fails or returns an auth error:
 
-> **Setup required before this skill can run:**
+> **Figma not connected. Fix it in 30 seconds:**
 >
-> 1. Open the **Claude desktop app**
-> 2. Go to **Settings → Integrations** (or Extensions)
-> 3. Find **Figma** and click **Enable**
-> 4. **Quit and relaunch** Claude Code — the MCP won't load until you restart
-> 5. Then re-run `/document-component` with your Figma URL
->
-> If you've already done this and it still fails, run `claude mcp add --transport http figma https://mcp.figma.com/mcp --scope user` in your terminal, then restart.
+> 1. Press `Ctrl+C` to exit Claude
+> 2. In your terminal, run:
+>    ```
+>    claude mcp add --transport http figma https://mcp.figma.com/mcp --scope user
+>    ```
+> 3. Type `claude` to reopen Claude Code
+> 4. Type `/mcp` → select **figma** → select **Authenticate**
+> 5. Log in to Figma in the browser that opens, then come back here
+> 6. Re-run `/document-component` with your Figma URL
 
 Stop here — do not proceed until Figma MCP is confirmed working.
 

package/commands/figma.md

@@ -6,15 +6,17 @@ Help me turn a Figma design into working code.
 
 Before doing anything, call `mcp__claude_ai_Figma__whoami`. If it fails or returns an auth error, stop and tell the user:
 
-> **Setup required before this command can run:**
+> **Figma not connected. Fix it in 30 seconds:**
 >
-> 1. Open the **Claude desktop app**
-> 2. Go to **Settings → Integrations**
-> 3. Find **Figma** and click **Enable**
-> 4. **Quit and relaunch** Claude Code — the MCP won't load until you restart
-> 5. Then re-run `/figma` with your Figma URL
->
-> If you've already done this and it still fails, run `claude mcp add --transport http figma https://mcp.figma.com/mcp --scope user` in your terminal, then restart.
+> 1. Press `Ctrl+C` to exit Claude
+> 2. In your terminal, run:
+>    ```
+>    claude mcp add --transport http figma https://mcp.figma.com/mcp --scope user
+>    ```
+> 3. Type `claude` to reopen Claude Code
+> 4. Type `/mcp` → select **figma** → select **Authenticate**
+> 5. Log in to Figma in the browser that opens, then come back here
+> 6. Re-run `/figma` with your Figma URL
 
 Do not proceed until Figma MCP is confirmed working.
 

package/commands/qa.md

@@ -6,12 +6,19 @@ If the user hasn't shared a Figma URL, ask for one. Also ask which component or
 
 ## Step 1 — Read the design
 
-Call `mcp__claude_ai_Figma__whoami` first. If it fails, tell the user:
-
-> **Setup required:**
-> 1. Open Claude desktop app → Settings → Integrations → Enable Figma
-> 2. Quit and relaunch Claude Code
-> 3. Re-run `/qa` with your Figma URL
+Call `mcp__claude_ai_Figma__whoami` first. If it fails or returns an auth error, tell the user:
+
+> **Figma not connected. Fix it in 30 seconds:**
+>
+> 1. Press `Ctrl+C` to exit Claude
+> 2. In your terminal, run:
+>    ```
+>    claude mcp add --transport http figma https://mcp.figma.com/mcp --scope user
+>    ```
+> 3. Type `claude` to reopen Claude Code
+> 4. Type `/mcp` → select **figma** → select **Authenticate**
+> 5. Log in to Figma in the browser that opens, then come back here
+> 6. Re-run `/qa` with your Figma URL
 
 Call `get_design_context` on the provided URL. Call `get_screenshot` to get a visual reference of every variant and state.
 

package/commands/spec.md

@@ -6,12 +6,19 @@ If the user hasn't shared a Figma URL, ask for one before proceeding.
 
 ## Step 1 — Read the design
 
-Call `mcp__claude_ai_Figma__whoami` first. If it fails, tell the user:
-
-> **Setup required:**
-> 1. Open Claude desktop app → Settings → Integrations → Enable Figma
-> 2. Quit and relaunch Claude Code
-> 3. Re-run `/spec` with your Figma URL
+Call `mcp__claude_ai_Figma__whoami` first. If it fails or returns an auth error, tell the user:
+
+> **Figma not connected. Fix it in 30 seconds:**
+>
+> 1. Press `Ctrl+C` to exit Claude
+> 2. In your terminal, run:
+>    ```
+>    claude mcp add --transport http figma https://mcp.figma.com/mcp --scope user
+>    ```
+> 3. Type `claude` to reopen Claude Code
+> 4. Type `/mcp` → select **figma** → select **Authenticate**
+> 5. Log in to Figma in the browser that opens, then come back here
+> 6. Re-run `/spec` with your Figma URL
 
 Call `get_design_context` on the provided URL. Also call `get_screenshot` to visually verify all variants and states.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mehuljatiya/troupe",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "AI-powered workflow toolkit for designers, developers, and PMs — 9 slash commands for Claude Code",
   "type": "module",
   "bin": {

package/src/setup.js

@@ -66,12 +66,15 @@ export async function runSetup() {
 
   const { installed, skipped } = installSlashCommands()
 
-  if (skipped.length > 0) {
-    console.log(chalk.yellow(`  ${skipped.length} workflow(s) already exist — skipping to avoid overwriting`))
+  if (installed.length > 0 && skipped.length > 0) {
+    console.log(chalk.green(`  ✓ Installed ${installed.length} command(s)`))
+    console.log(chalk.yellow(`  ${skipped.length} already existed — skipped to avoid overwriting`))
+    console.log(chalk.dim('  (delete them from ~/.claude/commands/ and re-run to reset)'))
+  } else if (installed.length > 0) {
+    console.log(chalk.green(`  ✓ Installed ${installed.length} slash commands`))
+  } else if (skipped.length > 0) {
+    console.log(chalk.green(`  ✓ All ${skipped.length} commands already installed`))
     console.log(chalk.dim('  (delete them from ~/.claude/commands/ and re-run to reset)'))
-  }
-  if (installed.length > 0) {
-    console.log(chalk.green(`  ✓ Installed ${installed.length} design workflow(s)`))
   }
   console.log()
 
@@ -116,7 +119,7 @@ export async function runSetup() {
         console.log('    1. Type ' + chalk.cyan('/mcp') + ' and press Enter')
         console.log('    2. Select ' + chalk.cyan('figma') + ' → ' + chalk.cyan('Authenticate'))
         console.log('    3. Log in to Figma in the browser that opens, then come back here')
-        console.log('    4. Type ' + chalk.cyan('/exit') + ' to return to setup\n')
+        console.log('    4. Press ' + chalk.cyan('Ctrl+C') + ' (or type /quit) to return here\n')
 
         const doAuth = await confirm({
           message: 'Open Claude to authenticate Figma now?',
@@ -142,30 +145,35 @@ export async function runSetup() {
   }
 
   // ── Step 4: Browser & Figma plugins ─────────────────────────────────────
-  console.log(chalk.bold('Step 4/5') + ' — Browser tools')
-  console.log(chalk.dim('  Enables /document-component to open a browser preview and push docs into Figma.\n'))
+  console.log(chalk.bold('Step 4/5') + ' — Browser tools ' + chalk.dim('(optional)'))
+  console.log(chalk.dim('  Only needed for /document-component\'s push-to-Figma feature.\n'))
 
-  installPlugin('chrome-devtools-mcp', 'chrome-devtools-plugins', 'Chrome DevTools')
-  installPlugin('figma-friend', 'figma-friend-marketplace', 'Figma Friend')
+  const chromeOk = installPlugin('chrome-devtools-mcp', 'chrome-devtools-plugins', 'Chrome DevTools')
+  const figmaFriendOk = installPlugin('figma-friend', 'figma-friend-marketplace', 'Figma Friend')
+  const browserToolsOk = chromeOk && figmaFriendOk
 
   // ── Step 5: API key ──────────────────────────────────────────────────────
   console.log(chalk.bold('Step 5/5') + ' — API key')
-
-  if (!claudeInstalled) {
-    console.log('  You\'ll need a free Anthropic API key.')
-    console.log('  Get one at: ' + chalk.cyan('https://console.anthropic.com'))
-    console.log('  Claude will ask for it when you first run ' + chalk.cyan('claude') + '.\n')
-  } else {
-    console.log(chalk.green('  ✓ Already configured\n'))
-  }
+  console.log('  You\'ll need an Anthropic API key to use Claude.')
+  console.log('  Get one free at: ' + chalk.cyan('https://console.anthropic.com'))
+  console.log(chalk.dim('  Claude will ask for it on first launch if it\'s not set yet.\n'))
 
   // ── Register design command globally ────────────────────────────────────
+  console.log(chalk.dim('  Installing design command globally...'))
   try {
     npmInstallGlobal('@mehuljatiya/troupe')
-  } catch { /* non-critical — claude still works without design command */ }
+    console.log(chalk.green('  ✓ design command ready\n'))
+  } catch {
+    console.log(chalk.dim('  (Could not install design command — you can still use claude directly)\n'))
+  }
 
   // ── Done ─────────────────────────────────────────────────────────────────
-  showNextSteps(figmaConnected, figmaAuthNeeded)
+  showNextSteps({
+    figmaConnected,
+    figmaAuthNeeded,
+    browserToolsOk,
+    commandCount: installed.length + skipped.length,
+  })
 }
 
 function npmInstallGlobal(pkg) {
@@ -293,19 +301,22 @@ function installPlugin(pluginName, marketplace, label) {
     if (result.toLowerCase().includes(pluginName.toLowerCase())) {
       console.log(chalk.green(`  ✓ ${label} already installed`))
       console.log()
-      return
+      return true
     }
   } catch { /* continue */ }
 
   try {
     execSync(`claude plugin install ${pluginName}@${marketplace} --scope user`, { stdio: 'pipe' })
     console.log(chalk.green(`  ✓ ${label} installed`))
+    console.log()
+    return true
   } catch {
     console.log(chalk.yellow(`  Could not install ${label} automatically.`))
     console.log('  Run this manually:')
-    console.log('  ' + chalk.cyan(`claude plugin install ${pluginName}@${marketplace}`))
+    console.log('  ' + chalk.cyan(`claude plugin install ${pluginName}@${marketplace} --scope user`))
+    console.log()
+    return false
   }
-  console.log()
 }
 
 function isClaudeInstalled() {
@@ -320,7 +331,7 @@ function isClaudeInstalled() {
 function isFigmaMcpConfigured() {
   try {
     const result = execSync('claude mcp list', { encoding: 'utf8', stdio: 'pipe' })
-    return result.toLowerCase().includes('figma')
+    return result.includes('mcp.figma.com')
   } catch {
     return false
   }
@@ -368,22 +379,44 @@ function installSlashCommands() {
   return { installed, skipped }
 }
 
-function showNextSteps(figmaConnected, figmaAuthNeeded) {
+function showNextSteps({ figmaConnected, figmaAuthNeeded, browserToolsOk, commandCount }) {
   console.log('─'.repeat(50))
   console.log(chalk.bold('\nYou\'re all set!\n'))
   console.log(chalk.yellow('  Open a new terminal tab first') + ' so PATH updates take effect.\n')
   console.log('To start:')
   console.log('  1. Open a new terminal tab in your project folder')
   console.log('  2. Type ' + chalk.cyan('claude') + ' (or ' + chalk.cyan('design') + ' for a command cheat sheet)')
+  console.log()
 
-  if (figmaAuthNeeded) {
-    console.log('  3. Inside Claude, type ' + chalk.cyan('/mcp') + ' → figma → Authenticate')
-    console.log('     (one-time step to connect your Figma account)\n')
+  // ── Setup summary ────────────────────────────────────────────────────────
+  console.log(chalk.bold('Setup summary:'))
+  console.log(chalk.green(`  ✓ ${commandCount} slash commands installed`))
+  console.log(chalk.green('  ✓ Claude Code ready'))
+
+  if (figmaConnected && !figmaAuthNeeded) {
+    console.log(chalk.green('  ✓ Figma connected') + chalk.dim('  → /figma, /spec, /qa, /document-component ready'))
+  } else if (figmaConnected && figmaAuthNeeded) {
+    console.log(chalk.yellow('  ⚠ Figma configured — authentication still needed'))
+    console.log(chalk.dim('    Inside Claude: type /mcp → figma → Authenticate'))
+    console.log(chalk.dim('    (/figma, /spec, /qa, /document-component won\'t work until authenticated)'))
   } else {
-    console.log()
+    console.log(chalk.yellow('  ⚠ Figma not connected'))
+    console.log(chalk.dim('    /figma, /spec, /qa, /document-component need Figma to work'))
+    console.log(chalk.dim('    To add it: claude mcp add --transport http figma https://mcp.figma.com/mcp --scope user'))
+    console.log(chalk.dim('    Then in Claude: /mcp → figma → Authenticate'))
   }
 
-  console.log('Available workflows (type inside Claude):')
+  if (browserToolsOk) {
+    console.log(chalk.green('  ✓ Browser tools ready') + chalk.dim('  → /document-component push-to-Figma available'))
+  } else {
+    console.log(chalk.yellow('  ⚠ Browser tools not installed'))
+    console.log(chalk.dim('    /document-component will generate docs but won\'t push to Figma'))
+    console.log(chalk.dim('    To add: claude plugin install chrome-devtools-mcp@chrome-devtools-plugins --scope user'))
+    console.log(chalk.dim('            claude plugin install figma-friend@figma-friend-marketplace --scope user'))
+  }
+
+  console.log()
+  console.log('All commands (type inside Claude):')
   console.log('  ' + chalk.cyan('/figma') + ' [url]              Pull a Figma design and build it')
   console.log('  ' + chalk.cyan('/document-component') + ' [url]  Generate full component docs from Figma')
   console.log('  ' + chalk.cyan('/spec') + ' [url]               Ticket-ready spec with acceptance criteria')