@champpaba/claude-agent-kit 3.5.2 → 3.6.1

package/.claude/CLAUDE.md

@@ -1,47 +1,19 @@
 # CLAUDE.md
 
 > **Navigation Hub for AI Agents**
-> **Template Version:** 3.5.2 - UX Tester v3.0 (Inline Output)
-> **Latest:** Single Source of Truth for design compliance (prevention + detection)
+> **Template Version:** 3.7.0 - Skills-Based Architecture
+> **Latest:** Token-optimized with skill-based commands (45-65% savings)
 
 ---
 
-## 📁 File Naming Conventions (OpenSpec + Template)
+## 📁 File Naming Conventions
 
-> **IMPORTANT:** Avoid confusion between OpenSpec files and Template files
+| Source | Files | Purpose |
+|--------|-------|---------|
+| **OpenSpec** | `proposal.md`, `tasks.md`, `design.md`, `specs/` | WHY, WHAT, Architecture |
+| **Template** | `data.yaml`, `page-plan.md`, `pre-work-context.md`, `phases.md` | Visual design, Agent context |
 
-### OpenSpec Files (from [Fission-AI/OpenSpec](https://github.com/Fission-AI/OpenSpec))
-
-| File | Purpose | When to Read |
-|------|---------|--------------|
-| `proposal.md` | WHY - Goals, scope, rationale | Phase planning |
-| `tasks.md` | WHAT - Implementation checklist | Task tracking |
-| `design.md` | **Technical/Architecture decisions** (optional) | Backend/Database phases |
-| `specs/` | Delta specs (ADDED/MODIFIED/REMOVED) | Requirement validation |
-
-### Template Files (from claude-multi-agent-template)
-
-| File | Purpose | When to Read |
-|------|---------|--------------|
-| `README.md` | **Visual design summary** (human-readable) | UI/Frontend phases |
-| `data.yaml` | Design tokens + psychology (~300 lines) | Quick UI reference |
-| `page-plan.md` | UI component layout + content strategy | uxui-frontend agent |
-| `pre-work-context.md` | **v3.2.0!** All agent context (best practices, warnings, checklist) | All agents - STEP 0 ✨ |
-| `phases.md` | Execution plan with agent assignments | All phases |
-| `flags.json` | Progress tracking | All phases |
-
-### Key Distinction
-
-```
-OpenSpec design.md    = Technical Architecture (data flow, API structure, system design)
-Template data.yaml    = Visual Design (colors, fonts, spacing, component styles)
-```
-
-**Agents should read BOTH when relevant:**
-- `uxui-frontend` → data.yaml (visual tokens) + design.md (if has UI architecture)
-- `backend` → design.md (API/data architecture)
-- `database` → design.md (data models, relationships)
-- `frontend` → data.yaml (visual tokens) + design.md (API contracts)
+**Key Distinction:** `design.md` = Technical Architecture, `data.yaml` = Visual Design
 
 ---
 
@@ -75,16 +47,28 @@ Universal, framework-agnostic template for AI-assisted development.
 - `@/.claude/lib/document-loader.md` - Token-efficient loading patterns
 - `@/.claude/contexts/design/index.md` (General design principles - fallback)
 
-**Development:**
-- `@/.claude/contexts/patterns/development-principles.md` - **v3.1.0!** SOLID, DRY, KISS, Fail Fast (Level 1 - ALL agents) ✨
-- `@/.claude/contexts/patterns/tdd-classification.md` - TDD workflow classification patterns
+**Development (Tiered Loading v3.6.0):**
+
+*Tier 1 - Core (ALL agents):*
+- `@/.claude/contexts/_core/development-principles.md` - SOLID, DRY, KISS, Fail Fast ✨
+- `@/.claude/contexts/_core/code-standards.md` - Naming, formatting, structure ✨
+
+*Tier 2 - Agent-Specific (load by role):*
+- `@/.claude/contexts/patterns/tdd-classification.md` - test-debug agent
+- `@/.claude/contexts/patterns/error-handling.md` - backend, database, frontend
+- `@/.claude/contexts/patterns/logging.md` - backend, database
+- `@/.claude/contexts/patterns/testing.md` - test-debug agent
+- `@/.claude/contexts/patterns/ui-component-consistency.md` - uxui-frontend agent
+- `@/.claude/contexts/patterns/frontend-component-strategy.md` - frontend agent
+
+*Tier 3 - On-Demand:*
 - `@/.claude/contexts/patterns/task-classification.md` (Agent selection guide)
 - `@/.claude/contexts/patterns/agent-coordination.md` (When to run agents parallel/sequential)
 - `@/.claude/contexts/patterns/error-recovery.md` (How agents handle errors & escalate)
-- `@/.claude/contexts/patterns/logging.md`
-- `@/.claude/contexts/patterns/testing.md`
 - `@/.claude/contexts/patterns/task-breakdown.md`
-- `@/.claude/contexts/patterns/frontend-component-strategy.md`
+- `@/.claude/contexts/patterns/performance-optimization.md`
+
+→ Full mapping: `.claude/agents/_shared/pre-work-checklist.md` (Step 0.4)
 
 **Project Setup:**
 - `/extract https://site.com` - Extract design from reference sites
@@ -179,6 +163,57 @@ Universal, framework-agnostic template for AI-assisted development.
 
 ---
 
+## ⚡ Tiered Context Loading (v3.6.0 - NEW!)
+
+**→ See:** `@/.claude/agents/_shared/pre-work-checklist.md` (Step 0.4)
+
+**Problem Solved:**
+- Loading all 13,000+ lines of contexts wastes tokens
+- Agents load knowledge they don't need (UI agent loads backend patterns)
+- No clear guidance on which contexts are relevant per agent
+
+**Solution: 3-Tier Loading System**
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  Tier 1: Core (_core/)           ~900 lines    ALWAYS LOAD  │
+├─────────────────────────────────────────────────────────────┤
+│  development-principles.md  (SOLID, DRY, KISS)              │
+│  code-standards.md          (naming, formatting)            │
+└─────────────────────────────────────────────────────────────┘
+                              ↓
+┌─────────────────────────────────────────────────────────────┐
+│  Tier 2: Agent-Specific     ~1,500 lines    LOAD BY ROLE    │
+├─────────────────────────────────────────────────────────────┤
+│  uxui-frontend  → design/*.md, ui-component-consistency.md  │
+│  backend        → error-handling.md, logging.md             │
+│  test-debug     → tdd-classification.md, testing.md         │
+└─────────────────────────────────────────────────────────────┘
+                              ↓
+┌─────────────────────────────────────────────────────────────┐
+│  Tier 3: On-Demand          ~300 lines      QUERY WHEN NEED │
+├─────────────────────────────────────────────────────────────┤
+│  performance-optimization.md, animation-patterns.md         │
+│  git-workflow.md, change-workflow.md                        │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Token Savings:**
+
+| Agent | Before (all) | After (tiered) | Savings |
+|-------|-------------|----------------|---------|
+| uxui-frontend | 13,000 | 3,500 | **73%** |
+| backend | 13,000 | 2,500 | **81%** |
+| test-debug | 13,000 | 2,000 | **85%** |
+| database | 13,000 | 1,800 | **86%** |
+
+**File Locations:**
+- Tier 1: `.claude/contexts/_core/`
+- Tier 2: `.claude/contexts/patterns/`, `.claude/contexts/design/`
+- Tier 3: Same folders, loaded on-demand
+
+---
+
 ## 🎨 Design System v2.1.0 (YAML-based)
 
 **→ See:** `@/.claude/lib/detailed-guides/design-system.md` for complete guide
@@ -235,7 +270,7 @@ Universal, framework-agnostic template for AI-assisted development.
 ┌─────────────────────────────────────────────────────────────┐
 │                    DETECTION (Post-Work)                     │
 ├─────────────────────────────────────────────────────────────┤
-│  ux-tester → Chrome DevTools Style Comparison                │
+│  ux-tester → agent-browser Style Comparison                  │
 │              Compare computed styles vs data.yaml tokens     │
 └─────────────────────────────────────────────────────────────┘
 ```
@@ -255,7 +290,7 @@ Universal, framework-agnostic template for AI-assisted development.
 |-------|------------|
 | Main Claude | Pre-flight check before invoking uxui-frontend |
 | uxui-frontend | STEP 0.5: Read data.yaml, report loaded tokens |
-| ux-tester | Step 5.5: Chrome DevTools validation |
+| ux-tester | Step 5.5: agent-browser validation |
 
 **Files Updated:**
 - `.claude/lib/design-validator.md` (NEW - Single Source of Truth)
@@ -363,7 +398,8 @@ User: "Build login system"
 **Recent versions:**
 | Version | Key Feature |
 |---------|-------------|
-| v3.5.2 | **UX Tester v3.0** (Inline Output - ไม่สร้างไฟล์, verbose ได้) |
+| v3.6.0 | **Tiered Context Loading** (50-80% token savings per agent) |
+| v3.5.2 | UX Tester v3.0 (Inline Output - ไม่สร้างไฟล์, verbose ได้) |
 | v3.5.1 | UX Tester v2.1 (Format Enforcement - MAX 150 lines) |
 | v3.5.0 | UX Tester v2.0 (Token Optimized + Human Testing Guide) |
 | v3.4.0 | Complete Pseudocode Elimination (~3,210 lines → imperative instructions) |
@@ -544,3 +580,25 @@ Agents query claude-mem in STEP 0 before implementation:
 ---
 
 **💡 Remember:** This template is universal. Use Context7 for framework-specific docs!
+
+
+<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 |
+| #235 | 11:24 PM | ✅ | Updated CLAUDE.md design validation table to reference agent-browser | ~330 |
+| #234 | 11:23 PM | 🔵 | Design validation system uses Chrome DevTools for post-work style comparison by ux-tester | ~689 |
+| #232 | 11:22 PM | 🔵 | Found two more Chrome DevTools references in CLAUDE.md design validation section | ~488 |
+| #190 | 11:14 PM | ✅ | Updated CLAUDE.md to version 3.7.0 with skills-based architecture | ~405 |
+| #189 | 11:13 PM | 🔵 | CLAUDE.md navigation hub reveals template v3.7.0 with skills-based architecture and tiered loading | ~953 |
+| #188 | 11:12 PM | 🔄 | Simplified CLAUDE.md header with condensed file naming conventions table | ~577 |
+| #187 | " | 🔵 | CLAUDE.md navigation hub reveals comprehensive template architecture v3.6.0 | ~1396 |
+| #186 | 11:11 PM | 🔵 | Reviewed CLAUDE.md navigation hub revealing complete template architecture and versioning | ~1048 |
+| #185 | 11:10 PM | 🔵 | CLAUDE.md serves as comprehensive navigation hub for multi-agent system | ~1019 |
+</claude-mem-context>

package/.claude/agents/02-uxui-frontend.md

@@ -395,7 +395,7 @@ OR
 Next Step: {next task or agent}
 ```
 
-**IMPORTANT:** Include token usage report in final output. ux-tester will validate these against data.yaml using Chrome DevTools.
+**IMPORTANT:** Include token usage report in final output. ux-tester will validate these against data.yaml using agent-browser.
 
 ---
 

package/.claude/agents/07-ux-tester.md

@@ -1,6 +1,6 @@
 ---
 name: ux-tester
-description: UX Testing Agent - Tests UI from user personas via Chrome DevTools. Outputs verbose inline report (NO file creation).
+description: UX Testing Agent - Tests UI from user personas via agent-browser. Outputs verbose inline report (NO file creation).
 model: opus
 color: green
 ---
@@ -28,7 +28,7 @@ color: green
 1. Load Context (proposal.md, page-plan.md, tasks.md, data.yaml)
 2. Generate 3-5 Personas (name, %, goal, techSavvy, patience)
 3. Find Dev Server (ports: 3000, 3001, 5173, 8080, 4200)
-4. Test Each Persona via Chrome DevTools
+4. Test Each Persona via agent-browser
 5. Design Compliance Check (if data.yaml exists)
 6. Output Report ใน Response (ไม่สร้างไฟล์)
 
@@ -142,16 +142,22 @@ Note violations (colors, spacing, animation).
 
 ---
 
-## Chrome DevTools
-
-| Tool | Use |
-|------|-----|
-| take_screenshot() | Overview |
-| take_snapshot() | Read content |
-| navigate_page(url) | Go to page |
-| click(uid) | Click |
-| fill(uid, value) | Fill form |
-| resize_page(375, 812) | Mobile |
+## agent-browser Commands
+
+| Command | Use |
+|---------|-----|
+| `agent-browser open <url>` | Navigate to page |
+| `agent-browser screenshot` | Overview capture |
+| `agent-browser snapshot -i` | Get interactive elements |
+| `agent-browser click @ref` | Click element |
+| `agent-browser fill @ref "text"` | Fill form |
+| `agent-browser scroll down 500` | Scroll page |
+
+**Mobile testing:**
+```bash
+agent-browser -p ios --device "iPhone 16 Pro" open <url>
+agent-browser -p ios snapshot -i
+```
 
 ---
 

package/.claude/agents/CLAUDE.md

@@ -0,0 +1,18 @@
+<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 |
+| #225 | 11:22 PM | 🔵 | Found Chrome DevTools reference in uxui-frontend agent documentation requiring update | ~445 |
+| #202 | 11:20 PM | ✅ | Updated ux-tester agent to use agent-browser CLI instead of Chrome DevTools MCP | ~644 |
+| #201 | " | ✅ | Updated UX Tester agent to use agent-browser instead of Chrome DevTools | ~378 |
+| #200 | " | ✅ | Updated ux-tester agent to use agent-browser instead of Chrome DevTools | ~374 |
+| #194 | " | 🔵 | UX Tester Agent v3.0 uses inline verbose output without file creation | ~884 |
+| #172 | 9:56 PM | 🔵 | Backend agent creates API endpoints with validation and business logic | ~539 |
+| #171 | " | 🔵 | uxui-frontend agent handles UI development with mock data and design validation | ~516 |
+</claude-mem-context>

package/.claude/agents/_shared/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/agents/_shared/pre-work-checklist.md

@@ -1,6 +1,6 @@
 # Pre-Work Checklist (Shared by All Agents)
 
-> **Version:** 3.0.0 (Pre-Work Context Integration)
+> **Version:** 3.6.0 (Tiered Context Loading)
 > **Purpose:** Single source of truth for pre-work validation
 
 ---
@@ -210,10 +210,53 @@ Result: #12345 - "Chose rotating refresh tokens with Redis storage"
 
 ---
 
+### Step 0.4: Tiered Context Loading (v3.6.0 - NEW)
+
+**Load contexts based on tier system for token efficiency:**
+
+WHY: Loading all 13,000+ lines of contexts wastes tokens. Load only what's relevant for your role.
+
+#### Tier 1: Core (ALL agents load these)
+
+```
+@/.claude/contexts/_core/development-principles.md  (SOLID, DRY, KISS)
+@/.claude/contexts/_core/code-standards.md          (naming, formatting)
+```
+
+#### Tier 2: Agent-Specific (load based on your role)
+
+| Agent | Contexts to Load |
+|-------|-----------------|
+| **uxui-frontend** | `design/*.md`, `patterns/ui-component-consistency.md`, `patterns/animation-patterns.md` |
+| **frontend** | `design/color-theory.md`, `patterns/error-handling.md`, `patterns/frontend-component-strategy.md` |
+| **backend** | `patterns/error-handling.md`, `patterns/logging.md`, `patterns/validation-framework.md` |
+| **database** | `patterns/error-handling.md`, `patterns/logging.md` |
+| **test-debug** | `patterns/tdd-classification.md`, `patterns/testing.md`, `patterns/error-recovery.md` |
+| **integration** | `patterns/error-handling.md`, `patterns/validation-framework.md` |
+| **ux-tester** | `design/accessibility.md`, `design/color-theory.md` |
+
+#### Tier 3: On-Demand (query when specific topic arises)
+
+Don't pre-load these. Read only when the task specifically requires:
+- `patterns/performance-optimization.md` - When optimizing
+- `patterns/animation-patterns.md` - When adding animations (non-uxui agents)
+- `patterns/git-workflow.md` - When handling git operations
+- `patterns/change-workflow.md` - When managing change lifecycle
+
+**Report in validation:**
+```markdown
+Contexts Loaded: (Step 0.4)
+- Tier 1 (Core): development-principles.md, code-standards.md
+- Tier 2 (Agent): {list based on agent type}
+- Tier 3 (On-Demand): {only if task requires specific topic}
+```
+
+---
+
 ### Step 1-4: Standard Checks
 
 1. **Context Discovery** - Load project context via agent-discovery.md
-2. **Pattern Loading** - Load relevant patterns for your agent type
+2. **Pattern Loading** - (Now covered by Step 0.4 Tiered Loading)
 3. **Validation Report** - Provide pre-implementation validation report
 4. **Wait for Approval** - Proceed only after orchestrator validation
 

package/.claude/commands/CLAUDE.md

@@ -0,0 +1,20 @@
+<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 |
+| #219 | 11:22 PM | ✅ | Updated cdev command validation requirements for ux-tester from Chrome DevTools to agent-browser | ~488 |
+| #216 | 11:21 PM | 🔵 | Examined cdev command validation checklist for ux-tester agent | ~486 |
+| #214 | " | ✅ | Replaced Chrome DevTools references with agent-browser in extract command | ~592 |
+| #210 | " | ✅ | Updated extract command error handling to reference agent-browser instead of Chrome DevTools MCP | ~430 |
+| #209 | " | ✅ | Updated extract command to use agent-browser for full-page screenshots | ~386 |
+| #208 | " | ✅ | Updated extract command to use agent-browser CLI instead of Chrome DevTools MCP | ~350 |
+| #198 | 11:20 PM | 🔵 | Extract command remains as full markdown specification in commands directory | ~776 |
+| #181 | 11:09 PM | 🔵 | /pageplan command generates visual page planning with wireframes, animations, and asset checklists | ~971 |
+| #168 | 9:55 PM | 🔵 | csetup command orchestrates AI-driven task analysis and agent workflow generation | ~572 |
+</claude-mem-context>

package/.claude/commands/cdev.md

@@ -418,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
 
 ---
 
@@ -761,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>