@champpaba/claude-agent-kit 3.5.2 → 3.6.0

package/.claude/contexts/design/accessibility.md

@@ -69,7 +69,7 @@
 **Browser Extensions:**
 - **WAVE** (WebAIM) - Visual feedback overlay
 - **axe DevTools** - Comprehensive accessibility scanner
-- **Lighthouse** (Chrome DevTools) - Automated audit
+- **Lighthouse** (agent-browser / CLI) - Automated audit
 
 **Online Tools:**
 - **WebAIM Contrast Checker**: https://webaim.org/resources/contrastchecker/
@@ -554,7 +554,7 @@ function closeModal(modalId) {
 
 ### Automated Testing
 
-- [ ] Run Lighthouse audit (Chrome DevTools)
+- [ ] Run Lighthouse audit (agent-browser)
 - [ ] Run axe DevTools extension
 - [ ] Run WAVE extension
 - [ ] Check HTML validation (W3C Validator)

package/.claude/contexts/design/color-theory.md

@@ -379,7 +379,7 @@ Primary: Blue (H: 220)
 **Tools:**
 - **WebAIM Contrast Checker**: https://webaim.org/resources/contrastchecker/
 - **Contrast Ratio**: https://contrast-ratio.com/
-- **Chrome DevTools**: Lighthouse audit
+- **agent-browser**: Lighthouse audit
 
 **Example:**
 ```css
@@ -414,7 +414,7 @@ color: white;      /* #FFFFFF */
 **Testing Tools:**
 - **Color Oracle**: Free color blindness simulator
 - **Stark Plugin**: Figma/Sketch plugin
-- **Chrome DevTools**: Vision deficiency emulation
+- **agent-browser**: Screenshot for vision testing
 
 ---
 

package/.claude/contexts/patterns/CLAUDE.md

@@ -0,0 +1,13 @@
+<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 |
+| #244 | 11:26 PM | ✅ | Updated performance-optimization.md Lighthouse reference to use agent-browser or CLI | ~398 |
+| #227 | 11:22 PM | ✅ | Updated change-workflow pattern to reference agent-browser | ~297 |
+</claude-mem-context>

package/.claude/contexts/patterns/change-workflow.md

@@ -112,7 +112,7 @@ Continue? (yes/no)
 [Continues...]
 
 🛑 Phase 3 requires manual testing.
-Test visual consistency using Chrome DevTools MCP.
+Test visual consistency using agent-browser.
 When done: /cdev CHANGE-003 --continue
 
 $ [User tests]

package/.claude/contexts/patterns/performance-optimization.md

@@ -406,7 +406,7 @@ done
 - [Next.js: Image Optimization](https://nextjs.org/docs/basic-features/image-optimization)
 
 **Tools:**
-- **Lighthouse:** Chrome DevTools > Lighthouse tab
+- **Lighthouse:** `agent-browser` or `npx lighthouse <url>`
 - **WebPageTest:** https://www.webpagetest.org/
 - **Squoosh:** https://squoosh.app/ (image compression)
 - **TinyPNG:** https://tinypng.com/ (batch compression)

package/.claude/lib/CLAUDE.md

@@ -0,0 +1,19 @@
+<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 |
+| #226 | 11:22 PM | ✅ | Updated agent-executor validation to check agent-browser connection instead of Chrome DevTools | ~551 |
+| #223 | " | ✅ | Updated task-analyzer documentation to reference agent-browser across all UX testing workflows | ~521 |
+| #222 | " | ✅ | Updated lib/README.md to reference agent-browser in design validation documentation | ~304 |
+| #220 | " | 🔵 | Library documentation reveals design-validator uses Chrome DevTools for post-work validation | ~521 |
+| #218 | " | 🔵 | Found Chrome DevTools reference in agent-executor readiness validation | ~282 |
+| #205 | 11:20 PM | ✅ | Updated design-validator to use agent-browser instead of Chrome DevTools MCP | ~490 |
+| #203 | " | ✅ | Updated design validator to use agent-browser instead of Chrome DevTools | ~464 |
+| #196 | " | 🔵 | Design validator enforces single source of truth through prevention and detection layers | ~1026 |
+</claude-mem-context>

package/.claude/lib/README.md

@@ -23,7 +23,7 @@ Defines agent boundaries. Main Claude delegates implementation work to specializ
 Single Source of Truth for design compliance. Contains:
 - Part 1: Design token loading protocol
 - Part 2: Pre-work validation (uxui-frontend)
-- Part 3: Post-work validation (ux-tester with Chrome DevTools)
+- Part 3: Post-work validation (ux-tester with agent-browser)
 - Part 4: Main Claude pre-flight checklist
 Used by: Main Claude (/cdev), uxui-frontend agent, ux-tester agent
 

package/.claude/lib/agent-executor.md

@@ -154,7 +154,7 @@ WHY: Pre-work validation ensures agents loaded context before implementing. This
 | backend | Patterns Loaded ✓, Existing Endpoints Search ✓, TDD Workflow (if required) |
 | database | Schema Analysis ✓ |
 | test-debug | Test Infrastructure ✓ |
-| ux-tester | Personas Generated ✓, Dev Server Found ✓, Chrome DevTools Connected ✓ |
+| ux-tester | Personas Generated ✓, Dev Server Found ✓, agent-browser Connected ✓ |
 
 **Validation Logic:**
 ```typescript

package/.claude/lib/design-validator.md

@@ -16,7 +16,7 @@ PREVENTION (Before Implementation)
 └── uxui-frontend: STEP 0.5 - Read data.yaml, report tokens
 
 DETECTION (After Implementation)
-└── ux-tester: Step 5.5 - Chrome DevTools style comparison
+└── ux-tester: Step 5.5 - agent-browser style comparison
 ```
 
 ---
@@ -200,18 +200,18 @@ Report the tokens you loaded before starting implementation.
 - Animation durations: 150ms, 300ms, 500ms
 - Spacing scale
 
-### 4.3 ใช้ Chrome DevTools ตรวจสอบ
+### 4.3 ใช้ agent-browser ตรวจสอบ
 
 **ขั้นตอน:**
 
 1. Navigate ไปหน้าที่ต้องการตรวจ:
-   ```
-   mcp__chrome-devtools__navigate_page({ url: "http://localhost:xxxx" })
+   ```bash
+   agent-browser open http://localhost:xxxx
    ```
 
-2. Take snapshot เพื่อดู DOM และ styles:
-   ```
-   mcp__chrome-devtools__take_snapshot()
+2. Take snapshot เพื่อดู DOM และ elements:
+   ```bash
+   agent-browser snapshot -i
    ```
 
 3. ดู elements หลักๆ:
@@ -304,7 +304,7 @@ After persona testing:
 
 - [ ] Check if `design-system/data.yaml` exists
 - [ ] If exists: Load expected tokens
-- [ ] Use Chrome DevTools to check computed styles
+- [ ] Use agent-browser to check computed styles
 - [ ] Compare actual vs expected
 - [ ] Add compliance section to ux-test-report.md
 

package/.claude/lib/task-analyzer.md

@@ -602,7 +602,7 @@ function injectUXTestingPhases(phases: Phase[], tasks: AnalyzedTask[]): Phase[]
       description: `
         Test UI from user perspectives before proceeding.
         - Auto-generate personas based on product context
-        - Test each persona via Chrome DevTools
+        - Test each persona via agent-browser
         - Calculate weighted conversion prediction
         - PAUSE for user approval before next phase
       `,
@@ -630,7 +630,7 @@ Phase N: uxui-frontend (build UI)
     ↓
 Phase N.5: ux-tester (APPROVAL GATE)
     → Auto-generate personas (3-5 based on product)
-    → Test each persona via Chrome DevTools
+    → Test each persona via agent-browser
     → Calculate weighted conversion prediction
     → Generate UX test report
     → ⏸️ PAUSE: Wait for user decision

package/.claude/templates/phases-sections/CLAUDE.md

@@ -0,0 +1,13 @@
+<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 |
+| #206 | 11:20 PM | ✅ | Updated ux-testing prerequisites to use agent-browser instead of Chrome DevTools MCP | ~426 |
+| #195 | " | 🔵 | UX Testing phase template defines persona-based approval gate workflow | ~833 |
+</claude-mem-context>

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
 

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.2",
+  "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>