cc-dev-template 0.1.31 → 0.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc-dev-template",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "description": "Structured AI-assisted development framework for Claude Code",
   "bin": {
     "cc-dev-template": "./bin/install.js"

package/src/hooks/bash-precheck.sh

@@ -79,8 +79,8 @@ if [ "$__size" -gt "$__max" ]; then
 
     echo "=== OUTPUT TRUNCATED (${__lines} lines, ~${__tokens} tokens) ==="
     echo ""
-    echo "--- First 40 lines ---"
-    head -n 40 "$__tmpfile"
+    echo "--- First 5 lines ---"
+    head -n 5 "$__tmpfile"
     echo ""
     echo "--- Last 5 lines ---"
     tail -n 5 "$__tmpfile"

package/src/mcp-servers/qa-server/README.md

@@ -4,7 +4,7 @@ MCP server that spawns a Claude sub-agent for frontend visual inspection.
 
 ## Problem
 
-Chrome DevTools MCP adds ~20k tokens to context just from tool definitions, even when browser inspection isn't needed. This wastes context in long sessions.
+Playwright MCP adds ~20k tokens to context just from tool definitions, even when browser inspection isn't needed. This wastes context in long sessions.
 
 ## Solution
 
@@ -15,11 +15,13 @@ Main Conversation (~500 tokens)
     │
     └── mcp__qa__inspect_frontend
             │
-            └── Sub-agent with chrome-devtools MCP (full control)
+            └── Sub-agent with @playwright/mcp (full browser control)
                     │
                     └── Returns QA report
 ```
 
+**Note:** No system Chrome installation is required. Playwright automatically downloads and manages its own Chromium browser.
+
 ## Installation
 
 ```bash
@@ -50,10 +52,10 @@ Or in `~/.claude.json`:
 
 ## After Setup
 
-Remove chrome-devtools from your main config to save tokens:
+Remove Playwright MCP from your main config to save tokens (if previously added):
 
 ```bash
-claude mcp remove chrome-devtools
+claude mcp remove playwright
 ```
 
 ## Usage
@@ -94,11 +96,11 @@ The sub-agent will:
 
 ## Sub-agent Capabilities
 
-The spawned sub-agent uses Opus (best visual understanding) and has access to:
+The spawned sub-agent uses Opus (best visual understanding) and has access to Playwright MCP tools:
 
-- **Navigation**: navigate_page, new_page, list_pages, select_page, wait_for
-- **Inspection**: take_screenshot, take_snapshot, list_console_messages
-- **Interaction**: click, fill, fill_form, hover, press_key, handle_dialog
+- **Navigation**: browser_navigate, browser_tab_new, browser_tab_list, browser_tab_select, browser_wait_for
+- **Inspection**: browser_screenshot, browser_snapshot, browser_console_messages
+- **Interaction**: browser_click, browser_type, browser_hover, browser_press_key, browser_handle_dialog
 
 ## Token Savings
 

package/src/mcp-servers/qa-server/src/index.ts

@@ -4,7 +4,7 @@
  *
  * This server exposes a single `inspect_frontend` tool that:
  * 1. Takes a URL and task description
- * 2. Spawns a Claude sub-agent with chrome-devtools MCP access
+ * 2. Spawns a Claude sub-agent with Playwright MCP access
  * 3. The sub-agent navigates, screenshots, clicks, and inspects
  * 4. Returns a structured QA report
  *
@@ -110,16 +110,17 @@ Task: ${task}
 **Context:** A developer needs verification that this frontend is working correctly. Your assessment helps them catch issues before users do.
 
 **Available tools:**
-- navigate_page: Go to the URL
-- take_screenshot: See the visual state (use this to understand what the page looks like)
-- take_snapshot: Get element references for clicking/filling
-- list_console_messages: Check for JavaScript errors
-- click, fill, fill_form: Interact with elements
+- browser_navigate: Go to the URL
+- browser_take_screenshot: See the visual state (use this to understand what the page looks like)
+- browser_click: Click elements
+- browser_fill: Fill form fields
+- browser_get_text: Read page content
+- browser_wait_for: Wait for elements or conditions
 
 **Success criteria:** Provide a clear QA report covering visual state, console errors, task completion, and overall pass/fail assessment.
 `;
 
-    // Spawn sub-agent with chrome-devtools MCP access
+    // Spawn sub-agent with Playwright MCP access
     const result = query({
       prompt: taskPrompt,
       options: {
@@ -127,30 +128,22 @@ Task: ${task}
         cwd: process.cwd(),
         systemPrompt: QA_SYSTEM_PROMPT,
         mcpServers: {
-          "chrome-devtools": {
+          "playwright": {
             command: "npx",
-            args: ["chrome-devtools-mcp@latest", "--headless"],
+            args: ["@playwright/mcp@latest", "--vision", "--headless"],
           },
         },
         allowedTools: [
-          // Navigation
-          "mcp__chrome-devtools__navigate_page",
-          "mcp__chrome-devtools__new_page",
-          "mcp__chrome-devtools__list_pages",
-          "mcp__chrome-devtools__select_page",
-          "mcp__chrome-devtools__wait_for",
-          // Inspection
-          "mcp__chrome-devtools__take_screenshot",
-          "mcp__chrome-devtools__take_snapshot",
-          "mcp__chrome-devtools__list_console_messages",
-          "mcp__chrome-devtools__get_console_message",
-          // Interaction
-          "mcp__chrome-devtools__click",
-          "mcp__chrome-devtools__fill",
-          "mcp__chrome-devtools__fill_form",
-          "mcp__chrome-devtools__hover",
-          "mcp__chrome-devtools__press_key",
-          "mcp__chrome-devtools__handle_dialog",
+          "mcp__playwright__browser_navigate",
+          "mcp__playwright__browser_click",
+          "mcp__playwright__browser_fill",
+          "mcp__playwright__browser_take_screenshot",
+          "mcp__playwright__browser_wait_for",
+          "mcp__playwright__browser_get_text",
+          "mcp__playwright__browser_hover",
+          "mcp__playwright__browser_press_key",
+          "mcp__playwright__browser_scroll",
+          "mcp__playwright__browser_get_url",
         ],
       },
     });