design-clone 1.2.0 → 2.3.0

package/bin/commands/help.js

@@ -7,33 +7,46 @@ export function help() {
 design-clone - Claude Code skill for website design cloning
 
 Usage:
-  design-clone init [options]   Install skill to ~/.claude/skills/
-  design-clone verify           Check installation status
-  design-clone clone-site <url> Clone multiple pages from a website
-  design-clone help             Show this help
+  design-clone init [options]       Install skill to ~/.claude/skills/
+  design-clone verify               Check installation status
+  design-clone update [options]     Update to latest version
+  design-clone uninstall [options]  Remove skill installation
+  design-clone clone-site <url>     Clone multiple pages from a website
+  design-clone help                 Show this help
+  design-clone --version            Show version
 
 Init Options:
   --force, -f    Overwrite existing installation
   --skip-deps    Skip dependency installation
 
+Update Options:
+  --force, -f    Reinstall even if already up to date
+  --skip-deps    Skip dependency installation
+
+Uninstall Options:
+  --yes, -y      Skip confirmation prompt
+
 Clone-site Options:
   --pages <paths>     Comma-separated paths (e.g., /,/about,/contact)
   --max-pages <n>     Maximum pages to auto-discover (default: 10)
   --viewports <list>  Viewport list (default: desktop,tablet,mobile)
   --yes               Skip confirmation prompt
   --output <dir>      Custom output directory
-  --ai                Extract design tokens using Gemini AI (requires GEMINI_API_KEY)
+  --ai                (Removed: AI analysis is now built-in via Claude Code)
 
 Examples:
   design-clone init                     # Install skill
   design-clone init --force             # Reinstall, overwrite existing
   design-clone verify                   # Check if installed correctly
+  design-clone update                   # Update to latest version
+  design-clone uninstall                # Remove skill installation
+  design-clone --version                # Show version
   design-clone clone-site https://example.com
   design-clone clone-site https://example.com --max-pages 5
   design-clone clone-site https://example.com --pages /,/about,/contact
 
 After installation:
-  1. Set GEMINI_API_KEY in ~/.claude/.env (optional, for AI analysis)
+  1. AI analysis is built-in via Claude Code vision (no API key needed)
   2. Use /design:clone or /design:clone-px in Claude Code
 
 For more info: https://github.com/bienhoang/design-clone

package/bin/commands/init.js

@@ -9,16 +9,13 @@ import { exec as execCallback } from 'child_process';
 import { promisify } from 'util';
 import { copyRecursive, exists } from '../utils/copy.js';
 import { runAllChecks } from '../utils/validate.js';
+import { getSkillDest, getCommandsDest } from '../utils/paths.js';
 
 const exec = promisify(execCallback);
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 // Source: package root (where SKILL.md is)
 const SKILL_SOURCE = path.resolve(__dirname, '../..');
-// Destination: ~/.claude/skills/design-clone
-const getSkillDest = () => path.join(process.env.HOME || process.env.USERPROFILE || '', '.claude/skills/design-clone');
-// Commands destination: ~/.claude/commands/design/
-const getCommandsDest = () => path.join(process.env.HOME || process.env.USERPROFILE || '', '.claude/commands/design');
 
 /**
  * Install skill to Claude Code skills directory
@@ -36,7 +33,6 @@ export async function init(args) {
   const checks = await runAllChecks();
 
   console.log(`  Node.js: ${checks.node.ok ? '✓' : '✗'} ${checks.node.message}`);
-  console.log(`  Python:  ${checks.python.ok ? '✓' : '✗'} ${checks.python.message}`);
   console.log(`  Chrome:  ${checks.chrome.ok ? '✓' : '✗'} ${checks.chrome.message}`);
   console.log('');
 
@@ -45,12 +41,8 @@ export async function init(args) {
     process.exit(1);
   }
 
-  if (!checks.python.ok) {
-    console.warn('Warning: Python 3.9+ not found. AI analysis features will be unavailable.');
-  }
-
   if (!checks.chrome.ok) {
-    console.warn('Warning: Chrome not found. Screenshots may not work without Puppeteer\'s bundled Chromium.');
+    console.warn('Warning: Chrome not found. Playwright will download Chromium during installation.');
   }
 
   // Check existing installation
@@ -129,58 +121,21 @@ export async function init(args) {
       console.warn(`  Warning: npm install failed: ${error.message}`);
     }
 
-    // Python dependencies
-    if (checks.python.ok) {
-      console.log('Installing Python dependencies...');
-
-      // Check if google-genai already installed
-      let alreadyInstalled = false;
-      try {
-        await exec('python3 -c "import google.genai"');
-        alreadyInstalled = true;
-        console.log('  Python packages already available');
-      } catch {
-        // Need to install
-      }
-
-      if (!alreadyInstalled) {
-        const HOME = process.env.HOME || process.env.USERPROFILE || '';
-        const sharedVenvPip = path.join(HOME, '.claude/skills/.venv/bin/pip');
-
-        // Try installation methods in order of preference
-        const pipCommands = [
-          { cmd: `"${sharedVenvPip}" install google-genai`, name: 'shared venv' },
-          { cmd: 'pip3 install --user google-genai', name: 'pip3 --user' },
-          { cmd: 'pip install --user google-genai', name: 'pip --user' }
-        ];
-
-        let installed = false;
-        for (const { cmd, name } of pipCommands) {
-          try {
-            await exec(cmd);
-            console.log(`  Python packages installed via ${name}`);
-            installed = true;
-            break;
-          } catch {
-            // Try next method
-          }
-        }
-
-        if (!installed) {
-          console.warn('  Warning: Could not install Python packages automatically');
-          console.warn('  Try one of these manually:');
-          console.warn(`    ${sharedVenvPip} install google-genai`);
-          console.warn('    pip3 install --user google-genai');
-          console.warn('    pip3 install --break-system-packages google-genai');
-        }
-      }
+    // Install Playwright browsers (chromium only for smaller footprint)
+    console.log('Installing Playwright browsers...');
+    try {
+      await exec('npx playwright install chromium', { cwd: SKILL_DEST, timeout: 300000 });
+      console.log('  Chromium browser installed');
+    } catch (browserError) {
+      console.warn(`  Warning: Browser install failed: ${browserError.message}`);
+      console.warn('  Run manually: npx playwright install chromium');
     }
   }
 
   // Success
   console.log('\n✓ design-clone skill installed successfully!\n');
   console.log('Next steps:');
-  console.log('  1. (Optional) Set GEMINI_API_KEY in ~/.claude/.env for AI analysis');
+  console.log('  1. AI analysis is built-in (no API key needed)');
   console.log('  2. Use slash commands in Claude Code:');
   console.log('     /design:clone      - Clone single page');
   console.log('     /design:clone-site - Clone multiple pages');

package/bin/commands/uninstall.js

@@ -0,0 +1,105 @@
+/**
+ * Uninstall command - remove skill from ~/.claude/skills/
+ */
+
+import fs from 'fs/promises';
+import readline from 'readline';
+import { exists } from '../utils/copy.js';
+import { getSkillDest, getCommandsDest } from '../utils/paths.js';
+
+/**
+ * Prompt user for confirmation
+ * @param {string} message - Prompt message
+ * @returns {Promise<boolean>}
+ */
+function confirm(message) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) => {
+    rl.question(`${message} (y/N) `, (answer) => {
+      rl.close();
+      resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
+    });
+  });
+}
+
+/**
+ * Uninstall skill from Claude Code skills directory
+ * @param {string[]} args - CLI arguments
+ */
+export async function uninstall(args) {
+  const skipConfirm = args.includes('--yes') || args.includes('-y');
+  const SKILL_DEST = getSkillDest();
+  const COMMANDS_DEST = getCommandsDest();
+
+  console.log('design-clone uninstaller\n');
+
+  // Check what exists
+  const skillExists = await exists(SKILL_DEST);
+  const commandsExist = await exists(COMMANDS_DEST);
+
+  if (!skillExists && !commandsExist) {
+    console.log('Nothing to uninstall. design-clone is not installed.');
+    return;
+  }
+
+  // Show what will be removed
+  console.log('The following will be removed:');
+  if (skillExists) console.log(`  - ${SKILL_DEST}`);
+  if (commandsExist) console.log(`  - ${COMMANDS_DEST}`);
+  console.log('');
+
+  // Confirm
+  if (!skipConfirm) {
+    const confirmed = await confirm('Are you sure you want to uninstall?');
+    if (!confirmed) {
+      console.log('Uninstall cancelled.');
+      return;
+    }
+    console.log('');
+  }
+
+  // Remove directories - attempt both before exiting on errors
+  const errors = [];
+
+  if (skillExists) {
+    try {
+      await fs.rm(SKILL_DEST, { recursive: true, force: true });
+      console.log(`  Removed: ${SKILL_DEST}`);
+    } catch (error) {
+      errors.push(`skill directory: ${error.message}`);
+      console.error(`  Error removing skill directory: ${error.message}`);
+    }
+  }
+
+  if (commandsExist) {
+    try {
+      await fs.rm(COMMANDS_DEST, { recursive: true, force: true });
+      console.log(`  Removed: ${COMMANDS_DEST}`);
+    } catch (error) {
+      errors.push(`commands directory: ${error.message}`);
+      console.error(`  Error removing commands directory: ${error.message}`);
+    }
+  }
+
+  if (errors.length > 0) {
+    process.exit(1);
+  }
+
+  // Verify cleanup
+  const skillStillExists = await exists(SKILL_DEST);
+  const commandsStillExist = await exists(COMMANDS_DEST);
+
+  console.log('');
+  if (!skillStillExists && !commandsStillExist) {
+    console.log('design-clone uninstalled successfully.');
+    console.log('\nTo reinstall: design-clone init');
+  } else {
+    console.error('Warning: Some files may not have been removed completely.');
+    if (skillStillExists) console.error(`  Still exists: ${SKILL_DEST}`);
+    if (commandsStillExist) console.error(`  Still exists: ${COMMANDS_DEST}`);
+    process.exit(1);
+  }
+}

package/bin/commands/update.js

@@ -0,0 +1,70 @@
+/**
+ * Update command - update installed skill to latest version
+ */
+
+import { readFileSync } from 'fs';
+import path from 'path';
+import { exists } from '../utils/copy.js';
+import { getVersion } from '../utils/version.js';
+import { getSkillDest } from '../utils/paths.js';
+import { init } from './init.js';
+
+/**
+ * Read version from installed skill's package.json
+ * @returns {string|null} Installed version or null if not found
+ */
+function getInstalledVersion() {
+  const pkgPath = path.join(getSkillDest(), 'package.json');
+  try {
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+    return pkg.version;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Update installed skill to current version
+ * @param {string[]} args - CLI arguments
+ */
+export async function update(args) {
+  const force = args.includes('--force') || args.includes('-f');
+  const skipDeps = args.includes('--skip-deps');
+  const SKILL_DEST = getSkillDest();
+
+  console.log('design-clone updater\n');
+
+  // Check if installed
+  const installed = await exists(SKILL_DEST);
+  if (!installed) {
+    console.log('design-clone is not installed.');
+    console.log('Run "design-clone init" to install.');
+    return;
+  }
+
+  // Compare versions
+  const currentVersion = getVersion();
+  const installedVersion = getInstalledVersion();
+
+  console.log(`  Installed: v${installedVersion || 'unknown'}`);
+  console.log(`  Available: v${currentVersion}`);
+  console.log('');
+
+  if (installedVersion === currentVersion && !force) {
+    console.log('Already up to date.');
+    console.log('Use --force to reinstall anyway.');
+    return;
+  }
+
+  // Build args for init
+  const initArgs = ['--force'];
+  if (skipDeps) initArgs.push('--skip-deps');
+
+  // Run init with --force
+  console.log('Updating...\n');
+  await init(initArgs);
+
+  // Verify new version
+  const newVersion = getInstalledVersion();
+  console.log(`\nUpdate complete: v${installedVersion || 'unknown'} -> v${newVersion}`);
+}

package/bin/commands/verify.js

@@ -2,18 +2,16 @@
  * Verify command - check installation status
  */
 
-import fs from 'fs/promises';
 import path from 'path';
 import { exists } from '../utils/copy.js';
 import { runAllChecks } from '../utils/validate.js';
-
-const getSkillDir = () => path.join(process.env.HOME || process.env.USERPROFILE || '', '.claude/skills/design-clone');
+import { getSkillDest } from '../utils/paths.js';
 
 /**
  * Verify skill installation
  */
 export async function verify() {
-  const SKILL_DIR = getSkillDir();
+  const SKILL_DIR = getSkillDest();
   let allOk = true;
 
   console.log('design-clone skill verification\n');
@@ -30,13 +28,10 @@ export async function verify() {
   // Check required files
   const requiredFiles = [
     'SKILL.md',
-    'src/core/screenshot.js',
-    'src/core/filter-css.js',
-    'src/ai/analyze-structure.py',
+    'src/core/capture/screenshot.js',
+    'src/core/css/filter-css.js',
     'src/utils/browser.js',
-    'src/utils/env.js',
-    'src/utils/env.py',
-    'requirements.txt'
+    'src/utils/env.js'
   ];
 
   let filesOk = true;
@@ -63,16 +58,16 @@ export async function verify() {
   console.log('\nEnvironment:');
   const checks = await runAllChecks();
 
-  console.log(`  Node.js: ${checks.node.ok ? '✓' : '✗'} ${checks.node.message}`);
-  console.log(`  Python:  ${checks.python.ok ? '✓' : '✗'} ${checks.python.message}`);
-  console.log(`  Chrome:  ${checks.chrome.ok ? '✓' : '✗'} ${checks.chrome.message}`);
+  console.log(`  Node.js:    ${checks.node.ok ? '✓' : '✗'} ${checks.node.message}`);
+  console.log(`  Playwright: ${checks.playwright.ok ? '✓' : '✗'} ${checks.playwright.message}`);
+  console.log(`  Chrome:     ${checks.chrome.ok ? '✓' : '○'} ${checks.chrome.message}${checks.playwright.ok ? ' (optional with Playwright)' : ''}`);
 
   if (!checks.node.ok) allOk = false;
+  if (!checks.playwright.ok && !checks.chrome.ok) allOk = false;
 
-  // Check Gemini API key
+  // Check optional features
   console.log('\nOptional:');
-  const geminiKey = process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY;
-  console.log(`  GEMINI_API_KEY: ${geminiKey ? '✓ set' : '○ not set (AI analysis disabled)'}`);
+  console.log(`  AI analysis: ✓ built-in (Claude Code vision)`);
 
   // Check .env files
   const envLocations = [

package/bin/utils/paths.js

@@ -0,0 +1,28 @@
+/**
+ * Shared path helpers for CLI commands
+ */
+
+import path from 'path';
+
+/**
+ * Get user home directory or exit if not available
+ * @returns {string} Home directory path
+ */
+export function getHomeDir() {
+  const home = process.env.HOME || process.env.USERPROFILE;
+  if (!home) {
+    console.error('Error: HOME environment variable is not set.');
+    process.exit(1);
+  }
+  return home;
+}
+
+/** Skill installation directory: ~/.claude/skills/design-clone */
+export function getSkillDest() {
+  return path.join(getHomeDir(), '.claude/skills/design-clone');
+}
+
+/** Slash commands directory: ~/.claude/commands/design */
+export function getCommandsDest() {
+  return path.join(getHomeDir(), '.claude/commands/design');
+}

package/bin/utils/validate.js

@@ -26,25 +26,6 @@ export async function checkNode() {
   }
 }
 
-/**
- * Check Python version
- * @returns {Promise<{ok: boolean, version: string, message: string}>}
- */
-export async function checkPython() {
-  try {
-    const { stdout } = await exec('python3 --version');
-    const version = stdout.trim().replace('Python ', '');
-    const [major, minor] = version.split('.').map(Number);
-
-    if (major >= 3 && minor >= 9) {
-      return { ok: true, version, message: `Python ${version}` };
-    }
-    return { ok: false, version, message: `Python ${version} (requires >=3.9)` };
-  } catch {
-    return { ok: false, version: 'unknown', message: 'Python 3 not found' };
-  }
-}
-
 /**
  * Check Chrome/Chromium
  * @returns {Promise<{ok: boolean, path: string, message: string}>}
@@ -94,15 +75,31 @@ export async function checkChrome() {
 }
 
 /**
- * Check Puppeteer
+ * Check Playwright
  * @returns {Promise<{ok: boolean, message: string}>}
  */
-export async function checkPuppeteer() {
+export async function checkPlaywright() {
   try {
-    await import('puppeteer');
-    return { ok: true, message: 'Puppeteer installed' };
+    const playwright = await import('playwright');
+    // Check if browsers are installed by checking chromium executable
+    if (playwright.chromium?.executablePath) {
+      try {
+        const fs = await import('fs/promises');
+        await fs.access(playwright.chromium.executablePath());
+        return { ok: true, message: 'Playwright installed with browsers' };
+      } catch {
+        return { ok: true, message: 'Playwright installed (browsers may need install)' };
+      }
+    }
+    return { ok: true, message: 'Playwright installed' };
   } catch {
-    return { ok: false, message: 'Puppeteer not installed (optional)' };
+    // Try playwright-core
+    try {
+      await import('playwright-core');
+      return { ok: true, message: 'playwright-core installed (needs Chrome)' };
+    } catch {
+      return { ok: false, message: 'Playwright not installed' };
+    }
   }
 }
 
@@ -111,12 +108,11 @@ export async function checkPuppeteer() {
  * @returns {Promise<Object>}
  */
 export async function runAllChecks() {
-  const [node, python, chrome, puppeteer] = await Promise.all([
+  const [node, chrome, playwright] = await Promise.all([
     checkNode(),
-    checkPython(),
     checkChrome(),
-    checkPuppeteer()
+    checkPlaywright()
   ]);
 
-  return { node, python, chrome, puppeteer };
+  return { node, chrome, playwright };
 }

package/bin/utils/version.js

@@ -0,0 +1,23 @@
+/**
+ * Version utility - reads version from package.json
+ */
+
+import { readFileSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Get package version from package.json
+ * @returns {string} Version string (e.g., "2.1.0")
+ */
+export function getVersion() {
+  try {
+    const pkgPath = resolve(__dirname, '../../package.json');
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
+    return pkg.version;
+  } catch {
+    return 'unknown';
+  }
+}