---

name: website-review description: Use this skill when performing QA reviews of the Planted website (Astro frontend at localhost:4321), Admin Dashboard V2 (localhost:5175), or production sites (planted.com, admin.planted.com). Orchestrates visual inspection, console/network error detection, accessibility auditing, Core Web Vitals measurement, and interactive testing using Chrome DevTools MCP.

Website Review Workflow

This skill enables comprehensive QA workflows for Planted web properties using Chrome DevTools MCP integration.

Prerequisites

1. Chrome Debug Mode Running

   Copy# Start Chrome with debug port (run once per session)
   scripts\chrome-debug.bat
   

2. MCP Server Connected

   • Verify with /mcp command - look for chrome-devtools server
   • If not connected, restart Claude Code (MCP servers load on startup)

3. For Production Auth Sites

   • Login to admin.planted.com in the debug Chrome window first
   • Auth state persists in %USERPROFILE%\.chrome-debug-profile

Target Sites

Workflow Overview

Copy+---------------------+     +---------------------+     +---------------------+
|  1. NAVIGATE &      |---->|  2. VISUAL          |---->|  3. CONSOLE/NETWORK |
|     SCREENSHOT      |     |     INSPECTION      |     |     ERROR CHECK     |
+---------------------+     +---------------------+     +---------------------+
                                                                  |
+---------------------+     +---------------------+               |
|  6. GENERATE        |<----|  5. INTERACTIVE     |<--------------+
|     REPORT          |     |     TESTING         |               |
+---------------------+     +---------------------+               |
                                   ^                              |
                                   |            +-----------------+
                                   |            |
                            +------+------------v--+
                            |  4. ACCESSIBILITY &  |
                            |     PERFORMANCE      |
                            +----------------------+

Phase 1: Navigate and Screenshot

Goal: Capture initial page state across viewports

MCP Tools:

• navigate_page(url) - Navigate to target URL
• resize_page(width, height) - Set viewport size
• take_screenshot() - Capture visual state
• wait_for(selector, timeout) - Wait for page load

Viewport Sizes:

• Desktop: 1440x900
• Tablet: 768x1024
• Mobile: 375x812

Example Workflow:

1. Navigate to URL
2. Wait for main content selector
3. Screenshot desktop viewport
4. Resize to tablet, screenshot
5. Resize to mobile, screenshot

Phase 2: Visual Inspection

Goal: Analyze visual state and DOM structure

MCP Tools:

• take_snapshot() - Capture DOM snapshot (accessibility tree)
• evaluate_script(script) - Run DOM queries

Checks:

• Layout renders correctly
• Images load (no broken images)
• Fonts load correctly
• No overlapping elements
• Responsive breakpoints work

Phase 3: Console and Network Error Check

Goal: Detect JavaScript errors and failed requests

MCP Tools:

• list_console_messages() - Get all console output
• get_console_message(id) - Get specific message details
• list_network_requests() - Get all network activity
• get_network_request(id) - Get request/response details

Error Categories:

• Critical: JavaScript exceptions, failed API calls (4xx/5xx)
• Warning: Console warnings, slow requests (>3s)
• Info: Deprecation notices, third-party issues

Phase 4: Accessibility and Performance

Accessibility (WCAG 2.1 AA)

Automated Checks via evaluate_script:

Copy// Check for missing alt text
document.querySelectorAll('img:not([alt])').length

// Check for form labels
document.querySelectorAll('input:not([aria-label]):not([id])').length

// Check for heading hierarchy
Array.from(document.querySelectorAll('h1,h2,h3,h4,h5,h6')).map(h => h.tagName)

Manual Checks:

• Keyboard navigation works (Tab through page)
• Focus states visible
• Screen reader landmarks present
• Touch targets >= 44px

Performance (Core Web Vitals)

MCP Tools:

• performance_start_trace() - Begin recording
• performance_stop_trace() - End recording
• performance_analyze_insight() - Get analysis

Metrics to Check:

• LCP (Largest Contentful Paint): < 2.5s good, < 4s needs improvement
• INP (Interaction to Next Paint): < 200ms good, < 500ms needs improvement
• CLS (Cumulative Layout Shift): < 0.1 good, < 0.25 needs improvement

Phase 5: Interactive Testing

Goal: Verify interactive elements work correctly

MCP Tools:

• click(selector) - Click element
• fill(selector, value) - Fill input
• fill_form(fields) - Fill multiple form fields
• press_key(key) - Keyboard input
• hover(selector) - Hover state
• handle_dialog(action) - Handle alerts/confirms

Test Scenarios:

• Navigation links work
• Form submission works
• Buttons trigger expected actions
• Modal dialogs open/close
• Dropdowns/selects function

Phase 6: Generate Report

Use TEST-REPORT-TEMPLATE.md to create structured report including:

• Screenshots at each viewport
• Console errors found
• Network issues found
• Accessibility issues
• Performance metrics
• Interactive test results
• Overall pass/fail status

---

Quick Commands

Copy# Start local Astro dev server
cd planted-astro && pnpm dev

# Start Admin Dashboard dev server
cd planted-availability-db/packages/admin-dashboard-v2 && pnpm dev

# Start Chrome in debug mode
scripts\chrome-debug.bat

MCP Tools Reference (26 Total)

Input Automation

Navigation

Emulation

Performance

Network

Debugging

Reference Documents

• TESTING-MANUAL.md - Detailed test cases for each page type
• TEST-REPORT-TEMPLATE.md - Report format
• AUTH-SETUP.md - Production authentication setup
• .claude/skills/design-brand/SKILL.md - Visual design reference