claude-comms 1.0.24 → 1.0.25

package/.claude/agents/core/agent-orchestrator.md

@@ -57,7 +57,7 @@ These are the agent types available for team composition. You recommend optimal
 - **engineer**: Implements features end-to-end with code, writes comprehensive test suites, and documentation
 
 ### Verification & Quality
-- **gatekeeper**: Reviews code for quality, security, and standards compliance. Ensures all builds, tests, and checks pass. Script playwright to screenshot UI, then visually inspect and assess agsinst UI/UX design/guide.
+- **gatekeeper**: Reviews code for quality, security, and standards compliance. Ensures all builds, tests, and checks pass. Use Chrome DevTools MCP to navigate to the running application, capture screenshots and visually inspect UI against UI/UX design/guide.
 
 ### Research & Support
 - **deep-researcher**: Conducts targeted research for technical decisions

package/.claude/agents/core/designer.md

@@ -64,7 +64,7 @@ Populate your initial Todos with your step by step WORKFLOW:
 
 6. **Support Parallel Implementation**:
    - Monitor Inbox for engineer questions and implementation feedback
-   - Review implementation screenshots using Playwright captures
+   - Review implementation screenshots using Chrome DevTools MCP to navigate to the running application and visually inspect
    - Provide real-time design adjustments based on technical constraints
    - Update specs based on implementation discoveries
    - Iterate until design vision matches implementation

package/.claude/agents/core/engineer.md

@@ -173,7 +173,7 @@ Populate your initial Todos with your step by step WORKFLOW:
    - Run lint command and fix all issues
    - Run build command to verify compilation
    - Run or check background dev server to check runtime behavior
-   - For UI changes, use Playwright to capture screenshots and verify visually
+   - For UI changes, use Chrome DevTools MCP to navigate to the running application, take snapshots and screenshots to verify visually
    - Ensure NO regressions - all existing tests must still pass
    - Broadcast final test/build status
 

package/.claude/agents/core/gatekeeper.md

@@ -82,13 +82,14 @@ Populate your initial Todos with your step by step WORKFLOW:
      * Secret exposure in code or configs
 
 7. **Visual Validation & UI Testing**
-   - Create or Reuse existing Playwright scripts to capture critical UI states:
+   - Use Chrome DevTools MCP to navigate to the running application and validate critical UI states:
      * Authentication flows (login, logout, password reset)
      * Form submissions and validation states
      * Data display and pagination
      * Interactive components (modals, dropdowns, tabs)
      * Dashboard views and data visualizations
-   - Use Playwright to capture screenshots for desktop 1920x1080 (default), and other viewports if specified by the user
+   - Take snapshots (accessibility tree with UIDs) and screenshots at desktop 1920x1080 (default), and other viewports if specified by the user
+   - Use `mcp__chrome-devtools__resize_page` to test responsive layouts across viewports
    - Visually inspect captured screenshots for:
      * Layout breaks or responsive design issues
      * Missing or misaligned UI elements
@@ -96,8 +97,8 @@ Populate your initial Todos with your step by step WORKFLOW:
      * Color contrast and readability issues
      * Loading states and skeleton screens
      * Error message display and formatting
-   - Perform accessibility validation on screenshots:
-     * Check for proper heading hierarchy
+   - Perform accessibility validation on snapshots and screenshots:
+     * Check for proper heading hierarchy in accessibility tree
      * Verify interactive elements are visible and accessible
    - Compare against baseline screenshots or UI/UX guide:
      * Identify visual regressions from previous versions

package/.claude/agents/meta-agent-builder.md

@@ -136,9 +136,9 @@ Create a bespoke workflow for the Agent, leveraging specific tool instruction an
 - "read entire files"
 - Use perplexity ask to research
 - lint, dev, test, build commands
-- Use Playwrite to capture screenshots and "visually inspect" them
+- Use Chrome DevTools MCP to navigate to the running application, take snapshots and screenshots, and "visually inspect" them
 - Phase level documentation artifacts in docs/project/phases/<phase-id>
-- Project level gold docs in docs/project/guides/ 
+- Project level gold docs in docs/project/guides/
 - Source of truth spec docs in docs/project/spec/
 - allign witih source of truth spec
 - "THINK HARD" or "PONDER" keywords trigger deeper thinking in critical decision steps
@@ -178,7 +178,7 @@ Batch an Inbox Check with every step
    3. Search/grep/glob codebase multiple rounds → existing patterns + conventions
    2. Apply Behavior-Driven Development + Test-Driven Development (BDDTDD) for solution implementation. Relevant Business Logic and User Flows defined in docs/project/spec/ must be represented by the test suite!
    3. Run lint, dev, test, build commands for itterative feedback loop. You can not introduce regressions!
-   4. Use Playwrite to capture screenshots for UI-related tasks. Then spin up sub agent to visually inspect screenshot and validate UI.
+   4. Use Chrome DevTools MCP to navigate to the running application, take snapshots and screenshots for UI-related tasks and visually inspect to validate UI.
    5. Test -> Code -> Test -> Repeat. Itterate until green!
 
 COMPLETION GATE: MANDITORY Completion Criteria checklist:
@@ -198,8 +198,8 @@ Batch an Inbox Check with every step
 
    1. Run lint, dev, test, build commands and analyse the logs.
    2. Review the code and associated tests. Relevant Business Logic and User Flows defined in the Businesslogic spec must be represented by the test suite!
-   3. Visually inspect screenshots provided of UI changes.
-   4. clean up any temp files like bespoke logs, screenshots, custom scripts, markdown files, etc. and/or update gitignore as needed.
+   3. Use Chrome DevTools MCP to navigate to the running application and visually inspect UI changes.
+   4. clean up any temp files like bespoke logs, custom scripts, markdown files, etc. and/or update gitignore as needed.
    5. THINK HARD about updating documentation in docs/project/phases/<phase-id>. check off work completed sucessfully, or note issues for work you find incomplete. 
    6. Update project level documentation like READMEs, docs/project/guides/ to reflect actual changes.
 

package/CLAUDE.md

@@ -261,7 +261,7 @@ PRO TIP: gatekeeper and agent-orchestrator agents can work in parallel, and both
 - **engineer**: Implements features end-to-end with code, writes comprehensive test suites, and documentation
 
 ### Verification
-- **gatekeeper**: Reviews code for quality, security, and standards compliance. Ensures all builds, tests, and checks pass. Script playwright to screenshot UI, then visually inspect and assess agsinst UI/UX design/guide.
+- **gatekeeper**: Reviews code for quality, security, and standards compliance. Ensures all builds, tests, and checks pass. Use Chrome DevTools MCP to navigate to the running application, capture screenshots and visually inspect UI against UI/UX design/guide.
 
 ### Research & Support
 - **deep-researcher**: Conducts targeted research for technical decisions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-comms",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "NPX installer for Claude Code hooks and observability setup",
   "main": "src/index.js",
   "bin": {