@champpaba/claude-agent-kit 3.5.0 → 3.6.0

package/.claude/commands/cdev.md

@@ -318,6 +318,24 @@ Quick Reference:
 
 ---
 
+#### Section 6: No File Output (ux-tester only)
+
+**If agent equals ux-tester:**
+
+Add this section to the prompt:
+
+```
+⚠️ NO FILE CREATION
+
+ห้ามสร้างไฟล์ .md ใดๆ ทั้งสิ้น!
+- ❌ ห้าม Write ไฟล์ report
+- ❌ ห้ามสร้าง ux-test-report.md
+- ✅ Output ทุกอย่างใน response โดยตรง
+- ✅ Verbose ละเอียดได้เลย
+```
+
+---
+
 ### Step 4.2: Execute Agent with Retry
 
 ---
@@ -400,7 +418,7 @@ See `.claude/contexts/patterns/validation-framework.md` for complete checklist p
 - frontend: API Contract Verification, State Management, Error Handling
 - test-debug: Test Infrastructure, Coverage Targets, Test Plan
 - integration: Contract Collection, Schema Validation, Data Flow Analysis
-- ux-tester: Personas Generated, Dev Server Found, Chrome DevTools Connected
+- ux-tester: Personas Generated, Dev Server Found, agent-browser Connected
 
 ---
 
@@ -435,8 +453,6 @@ Display this message:
 
 {result_summary}
 
-📄 Full report: openspec/changes/{change-id}/ux-test-report.md
-
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 Please decide:
@@ -745,7 +761,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/commands/extract.md

@@ -84,9 +84,10 @@ mkdir -p design-system/extracted/{siteName}/screenshots
 
 ### 1.1: Navigate to URL
 
-Use Chrome DevTools to navigate to the target URL:
-- Tool: `mcp__chrome-devtools__navigate_page`
-- Parameter: `url` (from Step 0)
+Use agent-browser to navigate to the target URL:
+```bash
+agent-browser open {url}
+```
 
 ### 1.2: Smart Wait for Page Load
 
@@ -94,7 +95,7 @@ Use Chrome DevTools to navigate to the target URL:
 2. From snapshot, find heading elements (filter lines containing `[heading]`)
 3. If headings found:
    - Extract text from first heading
-   - Use Chrome DevTools wait_for to wait for that text (timeout: 15000ms)
+   - Use agent-browser wait_for to wait for that text (timeout: 15000ms)
    - This ensures the main content is loaded
 4. If no headings found or wait fails:
    - Fallback to sleep 5000ms
@@ -115,7 +116,7 @@ Use Chrome DevTools to navigate to the target URL:
 
 ## STEP 2: Extract CSS Data (17 Sections in Parallel)
 
-Run all extraction evaluations in parallel for speed. Use Chrome DevTools `evaluate_script` for each extraction function below.
+Run all extraction evaluations in parallel for speed. Use agent-browser `evaluate_script` for each extraction function below.
 
 **Parallel Execution Strategy:**
 - Execute all 8 extraction functions concurrently
@@ -124,7 +125,7 @@ Run all extraction evaluations in parallel for speed. Use Chrome DevTools `evalu
 
 ### 2.1: Extract Colors
 
-Use Chrome DevTools to evaluate script that:
+Use agent-browser to evaluate script that:
 
 1. **Query all elements**: `document.querySelectorAll('*')`
 2. **For each element**, extract using `window.getComputedStyle()`:
@@ -159,7 +160,7 @@ colors:
 
 ### 2.2: Extract Typography
 
-Use Chrome DevTools to evaluate script that:
+Use agent-browser to evaluate script that:
 
 1. **Extract heading styles** (h1, h2, h3):
    - Query first 3 instances of each heading tag
@@ -198,7 +199,7 @@ typography:
 
 ### 2.3: Extract Shadows & Effects
 
-Use Chrome DevTools to evaluate script that:
+Use agent-browser to evaluate script that:
 
 1. **Query all elements**: `document.querySelectorAll('*')`
 2. **For each element**, extract using `window.getComputedStyle()`:
@@ -227,7 +228,7 @@ borderWidths:
 
 ### 2.4: Extract Spacing
 
-Use Chrome DevTools to evaluate script that:
+Use agent-browser to evaluate script that:
 
 1. **Query first 100 elements** for spacing analysis
 2. **For each element**, extract using `window.getComputedStyle()`:
@@ -257,7 +258,7 @@ spacing:
 
 ### 2.5: Extract Buttons
 
-Use Chrome DevTools to evaluate script that:
+Use agent-browser to evaluate script that:
 
 1. **Query button elements** with selectors:
    - `button`, `a[role="button"]`
@@ -276,7 +277,7 @@ Use Chrome DevTools to evaluate script that:
 
 ### 2.6: Extract Cards
 
-Use Chrome DevTools to evaluate script that:
+Use agent-browser to evaluate script that:
 
 1. **Query card-like elements** with selectors:
    - `[class*="card"]`, `[class*="Card"]`
@@ -293,7 +294,7 @@ Use Chrome DevTools to evaluate script that:
 
 ### 2.7: Extract Input Fields
 
-Use Chrome DevTools to evaluate script that:
+Use agent-browser to evaluate script that:
 
 1. **Query input elements** with selectors:
    - `input[type="text"]`, `input[type="email"]`, `input[type="password"]`
@@ -310,7 +311,7 @@ Use Chrome DevTools to evaluate script that:
 
 ### 2.8: Extract Animations
 
-Use Chrome DevTools to evaluate script that:
+Use agent-browser to evaluate script that:
 
 1. **Extract CSS @keyframes animations**:
    - Loop through all document.styleSheets
@@ -429,12 +430,12 @@ mkdir -p design-system/extracted/{siteName}/screenshots
 
 ### 4.2: Capture Full-Page Screenshot
 
-Use Chrome DevTools to take screenshot:
+Use agent-browser to take screenshot:
 
 1. **First attempt**: Full-page screenshot
-   - Tool: `mcp__chrome-devtools__take_screenshot`
-   - Parameters: `fullPage: true`, `format: 'png'`
-   - Save to: `design-system/extracted/{siteName}/screenshots/full-page.png`
+   ```bash
+   agent-browser screenshot --full design-system/extracted/{siteName}/screenshots/full-page.png
+   ```
 
 2. **If full-page fails**: Fallback to viewport-only
    - Parameters: `fullPage: false`, `format: 'png'`
@@ -691,8 +692,8 @@ design-system/extracted/{siteName}/data.yaml
 
 ### Critical Errors (Stop Execution)
 
-**Navigation failures** - If Chrome DevTools navigation fails:
-1. Catch the error from `mcp__chrome-devtools__navigate_page`
+**Navigation failures** - If agent-browser navigation fails:
+1. Catch the error from `agent-browser open`
 2. Return error message:
    ```
    ❌ Failed to load URL: {url}
@@ -701,7 +702,8 @@ design-system/extracted/{siteName}/data.yaml
 
    Check:
    - Is the URL accessible?
-   - Is Chrome DevTools MCP running?
+   - Is agent-browser installed? (npm install -g agent-browser)
+   - Did you run `agent-browser install` to get Chromium?
    ```
 3. Stop execution (cannot proceed without page loaded)
 

package/.claude/contexts/_core/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 |
+|----|------|---|-------|------|
+| #252 | 11:38 PM | 🔵 | Git status reveals extensive refactoring with skills migration and core context reorganization | ~682 |
+</claude-mem-context>

package/.claude/contexts/_core/README.md

@@ -0,0 +1,33 @@
+# Tier 1: Core Contexts (Always Load)
+
+These files contain **foundational knowledge** that ALL agents should load at the start of every task.
+
+## Files
+
+| File | Purpose | Size |
+|------|---------|------|
+| `development-principles.md` | SOLID, DRY, KISS, YAGNI, Fail Fast | ~500 lines |
+| `code-standards.md` | Naming conventions, formatting, structure | ~400 lines |
+
+## Why These Are Tier 1
+
+1. **Universal applicability** - Every agent (UI, backend, database, test) needs these principles
+2. **Foundation for quality** - Violations of these principles cause bugs and tech debt
+3. **Small enough** - ~900 lines total, acceptable baseline cost
+
+## Loading
+
+Agents should load these files in **STEP 0** before any task-specific work:
+
+```markdown
+## STEP 0: Load Core Contexts
+
+Read and apply principles from:
+1. @/.claude/contexts/_core/development-principles.md
+2. @/.claude/contexts/_core/code-standards.md
+```
+
+## See Also
+
+- **Tier 2** (Agent-Specific): `patterns/`, `design/` - loaded based on agent role
+- **Tier 3** (On-Demand): queried when specific topics arise

package/.claude/contexts/design/CLAUDE.md

@@ -0,0 +1,17 @@
+<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 |
+| #243 | 11:26 PM | ✅ | Updated color-theory.md accessibility testing tools to reference agent-browser | ~485 |
+| #242 | " | ✅ | Updated color-theory.md to reference agent-browser for Lighthouse audits | ~513 |
+| #241 | " | ✅ | Updated accessibility testing checklist to use agent-browser for Lighthouse audits | ~484 |
+| #240 | " | ✅ | Updated accessibility.md Lighthouse reference to agent-browser/CLI | ~434 |
+| #239 | " | 🔵 | Found Chrome DevTools reference in color-theory design context | ~332 |
+| #237 | " | 🔵 | Accessibility testing checklist includes Chrome DevTools Lighthouse audit | ~361 |
+</claude-mem-context>

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>