@champpaba/claude-agent-kit 3.5.0 → 3.6.0

package/.claude/templates/phases-sections/ux-testing.md

@@ -9,7 +9,7 @@
 
 ทดสอบ UI จากมุมมอง User จริง ก่อนที่จะไป Phase ถัดไป (Backend)
 - Auto-generate personas จาก product context
-- Test แต่ละ persona ผ่าน Chrome DevTools
+- Test แต่ละ persona ผ่าน agent-browser
 - คำนวณ weighted conversion prediction
 - รอ User approve หรือ reject
 
@@ -17,7 +17,7 @@
 
 - ✅ Phase 1 (Frontend Mockup) completed
 - ✅ Dev server running (localhost:3000 or similar)
-- ✅ Chrome DevTools MCP connected
+- ✅ agent-browser installed (`npx skills add vercel-labs/agent-browser`)
 
 ## 🔄 Process
 
@@ -52,8 +52,8 @@ For each persona:
 - Calculate total conversion prediction
 - Calculate potential after fixes
 
-### Step 6: Generate Report
-Output: `openspec/changes/{change-id}/ux-test-report.md`
+### Step 6: Output Report (Inline)
+Output ทุกอย่างใน response โดยตรง (ไม่สร้างไฟล์)
 
 ## ✅ Success Criteria
 
@@ -66,8 +66,7 @@ Output: `openspec/changes/{change-id}/ux-test-report.md`
 
 ## 📤 Output
 
-**Files created:**
-- `openspec/changes/{change-id}/ux-test-report.md`
+**Output:** Inline response (ไม่สร้างไฟล์)
 
 **Update flags.json:**
 ```json
@@ -79,8 +78,7 @@ Output: `openspec/changes/{change-id}/ux-test-report.md`
       "actual_minutes": {duration},
       "personas_tested": {count},
       "conversion_prediction": "{percentage}",
-      "critical_issues": {count},
-      "report_path": "ux-test-report.md"
+      "critical_issues": {count}
     }
   }
 }
@@ -101,8 +99,6 @@ Output: `openspec/changes/{change-id}/ux-test-report.md`
 - Critical issues: {count}
 - Potential after fixes: {percentage}%
 
-📄 Full report: openspec/changes/{change-id}/ux-test-report.md
-
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 กรุณา:

package/bin/CLAUDE.md

@@ -0,0 +1,11 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 3, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #166 | 9:55 PM | 🔵 | CLI entry point implements commander-based interface with two primary commands | ~397 |
+</claude-mem-context>

package/lib/CLAUDE.md

@@ -0,0 +1,11 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 3, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #167 | 9:55 PM | 🔵 | Init command implements smart template merging with optional PROJECT_STATUS.yml | ~465 |
+</claude-mem-context>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@champpaba/claude-agent-kit",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Universal multi-agent template for Claude Code - AI-assisted development with specialized agents",
   "main": "bin/cli.js",
   "bin": {
@@ -10,7 +10,8 @@
   "files": [
     "bin/",
     "lib/",
-    ".claude/"
+    ".claude/",
+    "skills/"
   ],
   "scripts": {
     "test": "vitest run",

package/skills/design-extract/CLAUDE.md

@@ -0,0 +1,12 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 3, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #252 | 11:38 PM | 🔵 | Git status reveals extensive refactoring with skills migration and core context reorganization | ~682 |
+| #211 | 11:21 PM | ✅ | Standardized design-extract skill to require agent-browser CLI only | ~513 |
+</claude-mem-context>

package/skills/design-extract/SKILL.md

@@ -0,0 +1,76 @@
+# Design Extract Skill
+
+Extract comprehensive design system data from any website.
+
+## Triggers
+
+- "extract design from [URL]"
+- "ดึง design จาก [URL]"
+- "/extract [URL]"
+- "analyze design of [URL]"
+
+## Requirements
+
+- agent-browser CLI (`npm install -g agent-browser && agent-browser install`)
+
+## Quick Usage
+
+```bash
+/extract https://airbnb.com
+/extract https://linear.app
+```
+
+## What Gets Extracted
+
+| Category | Details |
+|----------|---------|
+| Colors | Backgrounds, text, borders with usage context |
+| Typography | Fonts, weights, sizes, line heights |
+| Spacing | Grid base detection, padding/margin values |
+| Components | Buttons, cards, inputs with animations |
+| Shadows | Box shadows, elevation levels |
+| Animations | @keyframes, transitions, hover/focus states |
+| Psychology | Style classification, emotions, target audience |
+
+## Output
+
+```
+design-system/extracted/{site-name}/
+├── data.yaml           # Complete 17-section design data
+└── screenshots/
+    ├── full-page.png   # Full page capture
+    ├── button-0-default.png
+    ├── button-0-hover.png
+    └── ...
+```
+
+## Workflow
+
+```
+1. Navigate → Open URL in browser
+2. Extract  → CSS data (colors, typography, spacing, components)
+3. Capture  → Interactive states (hover, focus screenshots)
+4. Analyze  → AI psychology analysis
+5. Generate → data.yaml with 17 sections
+```
+
+## Detailed Documentation
+
+| Reference | Use When |
+|-----------|----------|
+| [references/extraction-steps.md](references/extraction-steps.md) | Full step-by-step extraction process |
+| [references/output-format.md](references/output-format.md) | data.yaml schema and sections |
+| [references/style-detection.md](references/style-detection.md) | Design style classification |
+| [references/error-handling.md](references/error-handling.md) | Handling failures gracefully |
+
+## Next Steps After Extraction
+
+```bash
+# Extract more reference sites (optional)
+/extract https://linear.app
+
+# Generate final design system
+/designsetup @prd.md
+# → Merges all extracted data
+# → Outputs: design-system/data.yaml
+```

package/skills/design-extract/references/CLAUDE.md

@@ -0,0 +1,16 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 3, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #252 | 11:38 PM | 🔵 | Git status reveals extensive refactoring with skills migration and core context reorganization | ~682 |
+| #231 | 11:22 PM | ✅ | Simplified design-extract error handling to require only agent-browser | ~518 |
+| #230 | " | ✅ | Updated design-extract skill error handling to reference agent-browser installation | ~376 |
+| #228 | " | 🔵 | Design extraction error handling supports both Chrome DevTools MCP and agent-browser | ~766 |
+| #212 | 11:21 PM | ✅ | Standardized extraction-steps to use agent-browser exclusively, removing Chrome DevTools option | ~511 |
+| #197 | 11:20 PM | 🔵 | Design extraction workflow uses Chrome DevTools or agent-browser for automated design token extraction | ~875 |
+</claude-mem-context>

package/skills/design-extract/references/error-handling.md

@@ -0,0 +1,161 @@
+# Error Handling
+
+How to handle failures during design extraction.
+
+---
+
+## Critical Errors (Stop Execution)
+
+### Navigation Failures
+
+If browser navigation fails:
+
+```
+❌ Failed to load URL: {url}
+
+Error: {error.message}
+
+Check:
+- Is the URL accessible?
+- Is agent-browser installed? (npm install -g agent-browser && agent-browser install)
+- Is the site blocking automated access?
+```
+
+**Action:** Stop execution. Cannot proceed without page loaded.
+
+### Browser Not Available
+
+If agent-browser is not available:
+
+```
+❌ Browser automation not available
+
+Required: agent-browser CLI
+
+Setup:
+npm install -g agent-browser && agent-browser install
+```
+
+**Action:** Stop execution. Provide setup instructions.
+
+---
+
+## Non-Critical Errors (Continue with Fallbacks)
+
+### Extraction Failures
+
+If individual extraction steps fail:
+
+| Extraction | Fallback |
+|------------|----------|
+| Colors | `{ backgrounds: [], texts: [], borders: [] }` |
+| Typography | `{ h1: [], fonts: [], weights: [], sizes: [] }` |
+| Shadows | `{ shadows: [], borderRadii: [] }` |
+| Spacing | `{ grid_base: 8, common_values: [] }` |
+| Components | `[]` (empty array) |
+| Animations | `{ keyframes: [], transitions: [] }` |
+
+Log warning and continue:
+```
+⚠️ Color extraction failed: {error.message}
+   Using fallback empty data
+```
+
+### Screenshot Failures
+
+| Scenario | Fallback |
+|----------|----------|
+| Full-page screenshot fails | Try viewport-only screenshot |
+| Component screenshot fails | Skip component, continue with others |
+| All screenshots fail | Continue without screenshots, note in report |
+
+### CORS/Security Errors
+
+Some sites block stylesheet access:
+
+```
+⚠️ Cannot access stylesheet: {url}
+   Reason: CORS policy
+   Skipping external stylesheet
+```
+
+**Action:** Continue with inline styles and accessible stylesheets.
+
+### Element Not Found
+
+If expected elements don't exist:
+
+```
+⚠️ No buttons found on page
+   Skipping button extraction
+```
+
+**Action:** Mark section as `detected: false` in output YAML.
+
+---
+
+## Partial Success Handling
+
+### Coverage Calculation
+
+Track what was successfully extracted:
+
+```yaml
+coverage:
+  total_sections: 17
+  detected_sections: 12
+  percentage: 71
+  missing:
+    - icons_imagery
+    - navigation_patterns
+    - loading_states
+    - feedback_states
+    - accessibility
+```
+
+### Final Report with Warnings
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+✅ EXTRACTION COMPLETE (with warnings)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📊 Coverage: 12/17 sections (71%)
+
+⚠️ Warnings:
+   - Color extraction partial: CORS blocked 2 stylesheets
+   - Button hover states: 1 of 3 failed
+   - Full-page screenshot failed, using viewport
+
+📁 Output:
+   ✓ design-system/extracted/example/data.yaml
+   ⚠️ design-system/extracted/example/screenshots/ (partial)
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+---
+
+## Retry Strategy
+
+For transient failures (network timeouts):
+
+1. **First attempt:** Normal extraction
+2. **If timeout:** Wait 2 seconds, retry once
+3. **If still fails:** Use fallback data, continue
+
+Do NOT retry indefinitely. Accept partial data over blocking on single failure.
+
+---
+
+## User Communication
+
+Always inform user of issues:
+
+| Severity | Format |
+|----------|--------|
+| Critical | ❌ Error message, stop |
+| Warning | ⚠️ Warning, continue |
+| Info | ℹ️ Note, continue |
+
+Never silently fail. User should know what succeeded and what didn't.

package/skills/design-extract/references/extraction-steps.md

@@ -0,0 +1,183 @@
+# Extraction Steps
+
+Complete step-by-step guide for extracting design data from a website.
+
+---
+
+## STEP 0: Parse Input & Setup
+
+### 0.1: Validate and Normalize URL
+
+1. Check if URL argument is provided
+   - If missing, return error: "URL required. Usage: /extract https://airbnb.com"
+2. Trim whitespace from URL
+3. Add "https://" prefix if URL doesn't start with "http://" or "https://"
+4. Parse hostname and auto-detect site name:
+   - Remove "www." prefix if present
+   - Remove top-level domain (TLD) to get clean site name
+   - Example: "www.airbnb.com" → "airbnb"
+
+### 0.2: Check for Existing Extraction
+
+1. Build path: `design-system/extracted/{siteName}/data.yaml`
+2. If file exists:
+   - Read existing YAML file
+   - Extract `meta.extracted_at` field
+   - Ask user: "Site '{siteName}' was already extracted on {extractedDate}. Re-extract?"
+   - If user chooses "No", exit with message: "Extraction cancelled. Existing data preserved."
+
+### 0.3: Create Output Directories
+
+```bash
+mkdir -p design-system/extracted/{siteName}/screenshots
+```
+
+---
+
+## STEP 1: Navigate & Wait
+
+### 1.1: Navigate to URL
+
+Use agent-browser to navigate to the target URL:
+```bash
+agent-browser open {url}
+```
+
+### 1.2: Smart Wait for Page Load
+
+1. Take DOM snapshot to analyze page structure
+2. Find heading elements
+3. If headings found:
+   - Wait for first heading text (timeout: 15000ms)
+4. If no headings found:
+   - Fallback to sleep 5000ms
+
+### 1.3: Verify Document Ready
+
+1. Check document.readyState
+2. If not "complete", sleep additional 3000ms
+
+---
+
+## STEP 2: Extract CSS Data (8 Parallel Extractions)
+
+Run all extractions in parallel for speed.
+
+### 2.1: Extract Colors
+
+Extract from all elements using `window.getComputedStyle()`:
+- Background colors (skip transparent)
+- Text colors
+- Border colors
+
+Convert RGB to HEX, detect usage context, count frequency.
+
+Output: `colors.backgrounds`, `colors.texts`, `colors.borders`
+
+### 2.2: Extract Typography
+
+Extract heading styles (h1, h2, h3) and body text:
+- fontSize, fontWeight, fontFamily
+- lineHeight, letterSpacing
+
+Collect unique fonts, weights, sizes.
+
+### 2.3: Extract Shadows & Effects
+
+- boxShadow values (skip "none")
+- borderRadius values (skip "0px")
+- borderWidth values
+
+### 2.4: Extract Spacing
+
+- Padding values
+- Margin values (skip "auto")
+- Gap values
+
+Detect spacing grid pattern (usually 4px or 8px base).
+
+### 2.5: Extract Buttons
+
+Query: `button`, `a[role="button"]`, `.btn`, `[class*="button"]`
+
+For each button:
+- Add `data-extract-id` attribute
+- Extract styles: backgroundColor, color, padding, borderRadius, transition
+
+### 2.6: Extract Cards
+
+Query: `[class*="card"]`, `article`, `section`
+
+Extract: backgroundColor, padding, border, boxShadow, transition
+
+### 2.7: Extract Input Fields
+
+Query: `input[type="text"]`, `textarea`, etc.
+
+Extract: height, padding, border, borderRadius, transition
+
+### 2.8: Extract Animations
+
+1. CSS @keyframes from stylesheets
+2. Transition properties from elements
+
+---
+
+## STEP 3: Extract Component Animations
+
+For buttons, cards, and inputs:
+
+1. Find element by data-extract-id
+2. Scroll into view
+3. Screenshot default state
+4. Capture default computed styles
+5. Trigger hover/focus event
+6. Wait for transition (500ms)
+7. Screenshot hover/focus state
+8. Capture new computed styles
+9. Remove hover/focus event
+10. Compare and describe changes
+
+---
+
+## STEP 4: Full-Page Screenshot
+
+1. Try full-page screenshot first
+2. If fails, fallback to viewport-only
+3. Save to `screenshots/full-page.png` or `screenshots/viewport.png`
+
+---
+
+## STEP 5: AI Psychology Analysis
+
+Using the screenshot and extracted data, analyze:
+
+1. **style_classification**: Neo-Brutalism, Minimalist, Glassmorphism, etc.
+2. **emotions_evoked**: What feelings the design triggers
+3. **target_audience**: Who this design appeals to
+4. **visual_principles**: Key design patterns observed
+5. **why_it_works**: Strategic design decisions
+6. **design_philosophy**: Underlying beliefs
+
+---
+
+## STEP 6: Generate data.yaml
+
+1. Calculate coverage metrics (X/17 sections)
+2. Build YAML with all extracted data
+3. Include psychology analysis
+4. Write to `design-system/extracted/{siteName}/data.yaml`
+
+→ See [output-format.md](output-format.md) for complete schema
+
+---
+
+## STEP 7: Final Report
+
+Display extraction summary:
+- Coverage percentage
+- Design tokens extracted
+- Psychology analysis status
+- Screenshot count
+- Output file paths
+- Next steps