refactor(ui-design): enhance import-from-code with CLI analysis and fix discovery script

- fix(discover-design-files.sh): Fix script errors and expand framework support
  * Fix variable quoting and conditional checks
  * Remove keyword restrictions for JS file discovery
  * Add support for .mjs, .cjs, .vue, .svelte files
  * Now correctly discovers all JS/TS framework files recursively

- feat(import-from-code): Add optional gemini/qwen CLI analysis for agents
  * Add CLI-Assisted Analysis step to Style/Animation/Layout agents
  * Optional usage for large codebases (>20 files) or complex frameworks
  * All CLI calls use analysis mode (READ-ONLY)
  * Agent can use CLI output to guide file reading and token extraction

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/commands/workflow/ui-design/import-from-code.md

@@ -184,7 +184,23 @@ Task(ui-design-agent): `
   - JavaScript/TypeScript: Theme configs (Tailwind, styled-components, CSS-in-JS)
   - HTML: Inline styles, usage patterns
 
-  **Step 3: Smart inference for gaps**
+  **Step 3: CLI-Assisted Analysis (Optional)**
+  - **When to use**: Large codebases (>20 files), complex framework detection, or ambiguous patterns
+  - **Tools available**: gemini, qwen (use gemini first, qwen as fallback)
+  - **Usage pattern**:
+    \`\`\`bash
+    cd ${source} && gemini -p "
+    PURPOSE: Analyze style system in codebase
+    TASK: • Identify design token patterns • Extract color/typography scales • Detect framework usage
+    MODE: analysis
+    CONTEXT: @**/*.{css,scss,ts,tsx,js,jsx}
+    EXPECTED: Design token patterns with file references
+    RULES: Focus on systematic patterns, include source file locations | analysis=READ-ONLY
+    "
+    \`\`\`
+  - **Integration**: Use CLI output to guide file reading and token extraction
+
+  **Step 4: Smart inference for gaps**
   - Infer missing tokens from existing patterns
   - Normalize inconsistent values into systematic scales
   - Fill missing categories from cross-file references
@@ -211,7 +227,8 @@ Task(ui-design-agent): `
   - ✅ Track extraction source for each token (file:line)
   - ✅ Include completeness assessment in _metadata
   - ✅ Normalize inconsistent values into systematic scales
-  - ❌ NO external research or MCP calls (code-only extraction)
+  - ✅ May use gemini/qwen CLI for analysis assistance (optional, for complex cases)
+  - ❌ NO external research or web searches (code-only extraction)
 `
 ```
 
@@ -242,7 +259,23 @@ Task(ui-design-agent): `
   - JavaScript/TypeScript: Animation frameworks (Framer Motion, GSAP), CSS-in-JS
   - HTML: Inline styles, data-animation attributes
 
-  **Step 3: Framework detection & normalization**
+  **Step 3: CLI-Assisted Analysis (Optional)**
+  - **When to use**: Framework detection, complex animation configs, or large file sets
+  - **Tools available**: gemini, qwen (use gemini first, qwen as fallback)
+  - **Usage pattern**:
+    \`\`\`bash
+    cd ${source} && gemini -p "
+    PURPOSE: Detect animation framework and extract animation tokens
+    TASK: • Identify animation framework (Framer Motion, GSAP, CSS) • Extract keyframes and transitions • Find animation timing functions
+    MODE: analysis
+    CONTEXT: @**/*.{css,scss,ts,tsx,js,jsx}
+    EXPECTED: Framework name, animation patterns with file references
+    RULES: Focus on animation-specific code, include source locations | analysis=READ-ONLY
+    "
+    \`\`\`
+  - **Integration**: Use CLI output to identify framework and guide extraction
+
+  **Step 4: Framework detection & normalization**
   - Detect animation frameworks used (css-animations | framer-motion | gsap | none)
   - Normalize into semantic token system
   - Cross-reference CSS animations with JS configs
@@ -268,7 +301,8 @@ Task(ui-design-agent): `
   - ✅ Detect animation framework if present
   - ✅ Track extraction source for each token (file:line)
   - ✅ Normalize framework-specific syntax into standard tokens
-  - ❌ NO external research or MCP calls (code-only extraction)
+  - ✅ May use gemini/qwen CLI for framework detection (optional, for complex cases)
+  - ❌ NO external research or web searches (code-only extraction)
 `
 ```
 
@@ -299,7 +333,23 @@ Task(ui-design-agent): `
   - JavaScript/TypeScript: Layout components (React/Vue), grid configs
   - HTML: Semantic structure, component hierarchies
 
-  **Step 3: System identification**
+  **Step 3: CLI-Assisted Analysis (Optional)**
+  - **When to use**: Complex component hierarchies, framework detection, or large component sets
+  - **Tools available**: gemini, qwen (use gemini first, qwen as fallback)
+  - **Usage pattern**:
+    \`\`\`bash
+    cd ${source} && gemini -p "
+    PURPOSE: Analyze layout system and component structure
+    TASK: • Detect naming convention (BEM/utility-first/css-modules) • Identify layout system (grid/flexbox) • Extract component patterns and responsive breakpoints
+    MODE: analysis
+    CONTEXT: @**/*.{css,scss,ts,tsx,js,jsx}
+    EXPECTED: Layout system type, naming convention, component patterns with file references
+    RULES: Focus on structural patterns, include breakpoints and responsive strategy | analysis=READ-ONLY
+    "
+    \`\`\`
+  - **Integration**: Use CLI output to identify conventions and guide component extraction
+
+  **Step 4: System identification**
   - Detect naming convention (BEM | SMACSS | utility-first | css-modules)
   - Identify layout system (12-column | flexbox | css-grid | custom)
   - Extract responsive strategy and breakpoints
@@ -337,7 +387,8 @@ Task(ui-design-agent): `
   - ✅ Identify layout system with confidence level
   - ✅ Extract component variants and states from usage patterns
   - ✅ Generate BOTH JSON + MD files for complete documentation
-  - ❌ NO external research or MCP calls (code-only extraction)
+  - ✅ May use gemini/qwen CLI for system detection (optional, for complex cases)
+  - ❌ NO external research or web searches (code-only extraction)
 `
 ```
 

.claude/scripts/discover-design-files.sh

@@ -11,18 +11,23 @@ output_json="${2:-discovered-files.json}"
 find_files() {
   local pattern="$1"
   local files
-  files=$(find "$source_dir" -type f $pattern \
-    ! -path "*/node_modules/*" \
-    ! -path "*/dist/*" \
-    ! -path "*/.git/*" \
-    ! -path "*/build/*" \
-    ! -path "*/coverage/*" \
-    2>/dev/null | sort || true)
+  files=$(eval "find \"$source_dir\" -type f $pattern \
+    ! -path \"*/node_modules/*\" \
+    ! -path \"*/dist/*\" \
+    ! -path \"*/.git/*\" \
+    ! -path \"*/build/*\" \
+    ! -path \"*/coverage/*\" \
+    2>/dev/null | sort || true")
 
-  local count=$(echo "$files" | grep -c . || echo 0)
+  local count
+  if [ -z "$files" ]; then
+    count=0
+  else
+    count=$(echo "$files" | grep -c . || echo 0)
+  fi
   local json_files=""
 
-  if [ $count -gt 0 ]; then
+  if [ "$count" -gt 0 ]; then
     json_files=$(echo "$files" | awk '{printf "\"%s\"%s\n", $0, (NR<'$count'?",":"")}' | tr '\n' ' ')
   fi
 
@@ -34,8 +39,8 @@ css_result=$(find_files '\( -name "*.css" -o -name "*.scss" \)')
 css_count=${css_result%%|*}
 css_files=${css_result#*|}
 
-# Discover JS/TS theme files
-js_result=$(find_files '\( -name "*.js" -o -name "*.ts" -o -name "*.jsx" -o -name "*.tsx" \) -a \( -name "*theme*" -o -name "*config*" -o -name "*style*" -o -name "*color*" \)')
+# Discover JS/TS files (all framework files)
+js_result=$(find_files '\( -name "*.js" -o -name "*.ts" -o -name "*.jsx" -o -name "*.tsx" -o -name "*.mjs" -o -name "*.cjs" -o -name "*.vue" -o -name "*.svelte" \)')
 js_count=${js_result%%|*}
 js_files=${js_result#*|}