Initial commit

commands/browser-close.md

@@ -0,0 +1,21 @@
+---
+description: Close the browser session gracefully. Use --force to kill all Chrome processes.
+allowed-tools: Bash(*)
+argument-hint: [--force]
+model: haiku
+---
+
+# Close Browser
+
+Close the browser debugging session.
+
+```bash
+node ~/.claude/plugins/*/skills/website-debug/scripts/browser-close.js $ARGUMENTS
+```
+
+## Options
+
+- No arguments: Graceful close via Puppeteer
+- `--force`: Kill all Chrome processes (useful if stuck)
+
+Confirm when browser is closed.

commands/browser-eval.md

@@ -0,0 +1,38 @@
+---
+description: Execute JavaScript in the browser's page context. Great for inspecting DOM, computed styles, or testing fixes.
+allowed-tools: Bash(*)
+argument-hint: <javascript expression>
+model: haiku
+---
+
+# Evaluate JavaScript
+
+Execute JavaScript in the active browser tab's page context.
+
+```bash
+node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js '$ARGUMENTS'
+```
+
+## Common Uses
+
+**Get element info:**
+```
+document.querySelector(".selector")
+```
+
+**Check computed styles:**
+```
+getComputedStyle(document.querySelector(".btn")).backgroundColor
+```
+
+**Count elements:**
+```
+document.querySelectorAll("a").length
+```
+
+**Get bounding rect:**
+```
+document.querySelector(".header").getBoundingClientRect()
+```
+
+Return the result to the user and explain what it means in context.

commands/browser-start.md

@@ -0,0 +1,23 @@
+---
+description: Start Chrome or WebKit browser with debugging enabled. Use --profile to preserve logins, --webkit for Safari testing.
+allowed-tools: Bash(*)
+argument-hint: [--profile | --webkit | --headless]
+model: haiku
+---
+
+# Start Browser
+
+Launch a browser session with remote debugging enabled.
+
+```bash
+node ~/.claude/plugins/*/skills/website-debug/scripts/browser-start.js $ARGUMENTS
+```
+
+## Options
+
+- No arguments: Fresh Chrome profile
+- `--profile`: Chrome with your profile (preserves logins, cookies)
+- `--webkit`: Playwright WebKit (Safari-like behavior)
+- `--headless`: Run without visible window
+
+After starting, confirm the browser is ready and suggest next steps (navigate to a URL).

commands/debug-page.md

@@ -0,0 +1,47 @@
+---
+description: Start a debugging session for a webpage. Launches browser, takes screenshot, and checks for errors.
+allowed-tools: Bash(*), Read, Write
+argument-hint: [url]
+model: sonnet
+---
+
+# Debug Page
+
+Start a comprehensive debugging session for a webpage.
+
+## Instructions
+
+1. **Start browser** (if not already running):
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-start.js
+   ```
+
+2. **Navigate to URL** (use $ARGUMENTS if provided, otherwise ask):
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-nav.js "$ARGUMENTS"
+   ```
+
+3. **Take initial screenshot**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js
+   ```
+
+4. **Check for JavaScript errors**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-console.js --errors
+   ```
+
+5. **Get page summary**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-dom.js
+   ```
+
+6. **Analyze the screenshot** visually and report:
+   - Any visible layout issues
+   - Console errors found
+   - DOM structure overview
+   - Recommendations for what to investigate
+
+If $ARGUMENTS is empty, ask the user for the URL to debug.
+
+After completing the initial assessment, ask the user what specific issue they'd like to investigate or if they want to use the element picker to select a problematic element.

commands/diagnose.md

@@ -0,0 +1,114 @@
+---
+description: Run comprehensive diagnostics on an element or the entire page. Checks CSS, JS errors, accessibility, and more.
+allowed-tools: Bash(*)
+argument-hint: [selector]
+model: opus
+---
+
+# Diagnose
+
+Run comprehensive diagnostics on a specific element or the entire page.
+
+## If selector provided ($ARGUMENTS):
+
+1. **Check element exists**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js 'document.querySelector("$ARGUMENTS") !== null'
+   ```
+
+2. **Get element details**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js '(() => {
+     const el = document.querySelector("$ARGUMENTS");
+     if (!el) return "Element not found";
+     const s = getComputedStyle(el);
+     const r = el.getBoundingClientRect();
+     return {
+       tag: el.tagName,
+       id: el.id,
+       classes: [...el.classList],
+       dimensions: { width: r.width, height: r.height },
+       position: { top: r.top, left: r.left },
+       styles: {
+         display: s.display,
+         visibility: s.visibility,
+         opacity: s.opacity,
+         position: s.position,
+         zIndex: s.zIndex,
+         overflow: s.overflow,
+         flex: s.display === "flex" ? { direction: s.flexDirection, justify: s.justifyContent, align: s.alignItems } : null,
+         grid: s.display === "grid" ? { columns: s.gridTemplateColumns, rows: s.gridTemplateRows } : null
+       },
+       text: el.textContent?.slice(0, 100)
+     };
+   })()'
+   ```
+
+3. **Screenshot element**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js --selector="$ARGUMENTS"
+   ```
+
+## If no selector (full page diagnosis):
+
+1. **Take screenshot**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js
+   ```
+
+2. **Check for JavaScript errors**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-console.js --errors
+   ```
+
+3. **Check network failures**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-network.js --failures
+   ```
+
+4. **Get page summary**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-dom.js
+   ```
+
+5. **Check accessibility basics**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js '(() => {
+     const issues = [];
+     // Images without alt
+     const imgs = document.querySelectorAll("img:not([alt])");
+     if (imgs.length) issues.push(`${imgs.length} images missing alt text`);
+     // Buttons/links without text
+     const emptyBtns = [...document.querySelectorAll("button, a")].filter(el => !el.textContent.trim() && !el.getAttribute("aria-label"));
+     if (emptyBtns.length) issues.push(`${emptyBtns.length} buttons/links without accessible text`);
+     // Form inputs without labels
+     const inputs = document.querySelectorAll("input:not([type=hidden]):not([type=submit])");
+     const unlabeled = [...inputs].filter(i => !i.getAttribute("aria-label") && !document.querySelector(`label[for="${i.id}"]`));
+     if (unlabeled.length) issues.push(`${unlabeled.length} form inputs without labels`);
+     return issues.length ? issues : "No basic accessibility issues found";
+   })()'
+   ```
+
+## Report Format
+
+Provide a structured diagnosis:
+
+### Visual Analysis
+- What the screenshot shows
+- Any obvious layout issues
+
+### JavaScript Errors
+- List errors found (or confirm none)
+- Suggest fixes for each
+
+### Network Issues  
+- Failed requests (or confirm none)
+- Suggest causes
+
+### Accessibility
+- Issues found
+- Recommendations
+
+### Recommendations
+- Priority fixes
+- Suggestions for improvement

commands/dom.md

@@ -0,0 +1,35 @@
+---
+description: Inspect DOM structure. Get page summary, element HTML, or tree visualization.
+allowed-tools: Bash(*)
+argument-hint: [selector | --tree]
+model: haiku
+---
+
+# DOM Inspection
+
+Inspect the page's DOM structure.
+
+```bash
+node ~/.claude/plugins/*/skills/website-debug/scripts/browser-dom.js $ARGUMENTS
+```
+
+## Usage
+
+- No arguments: Page summary (element counts, headings, structure)
+- `selector`: Get element's outerHTML
+- `selector --inner`: Get element's innerHTML  
+- `--tree`: Visual DOM tree (3 levels deep)
+- `--tree --depth=5`: Custom depth
+
+## Examples
+
+```bash
+# Page overview
+/dom
+
+# Get specific element
+/dom ".header"
+
+# DOM tree visualization
+/dom --tree
+```

commands/fix-css.md

@@ -0,0 +1,60 @@
+---
+description: Diagnose and fix CSS issues for a specific element. Uses the css-debugger agent for expert analysis.
+allowed-tools: Bash(*), Read, Write
+argument-hint: <selector> [issue description]
+model: sonnet
+---
+
+# Fix CSS
+
+Diagnose and fix CSS issues for a specific element.
+
+## Instructions
+
+Use the **css-debugger agent** for this task.
+
+1. **Identify the element**: Use $ARGUMENTS to get the selector
+   - If no selector provided, run `/pick-element` first
+
+2. **Gather information**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js '(() => {
+     const el = document.querySelector("SELECTOR");
+     if (!el) return "Element not found";
+     const s = getComputedStyle(el);
+     return {
+       display: s.display,
+       visibility: s.visibility,
+       opacity: s.opacity,
+       width: s.width,
+       height: s.height,
+       position: s.position,
+       top: s.top,
+       left: s.left,
+       zIndex: s.zIndex,
+       margin: s.margin,
+       padding: s.padding,
+       flexDirection: s.flexDirection,
+       justifyContent: s.justifyContent,
+       alignItems: s.alignItems,
+       overflow: s.overflow,
+       transform: s.transform
+     };
+   })()'
+   ```
+
+3. **Take screenshot** to see current state:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js
+   ```
+
+4. **Analyze the issue** based on:
+   - Computed styles
+   - Visual appearance
+   - User's description (if provided)
+
+5. **Propose fix** with specific CSS changes
+
+6. **After making changes**, use `/verify-changes` to confirm fix worked
+
+Delegate the actual analysis and fix proposal to the css-debugger agent for expert-level diagnosis.

commands/nav.md

@@ -0,0 +1,23 @@
+---
+description: Navigate the browser to a URL. Use --new to open in new tab.
+allowed-tools: Bash(*)
+argument-hint: <url> [--new]
+model: haiku
+---
+
+# Navigate
+
+Navigate the browser to a URL.
+
+```bash
+node ~/.claude/plugins/*/skills/website-debug/scripts/browser-nav.js $ARGUMENTS
+```
+
+## Options
+
+- `<url>`: Navigate current tab to URL
+- `<url> --new`: Open URL in new tab
+
+If URL doesn't include protocol, `https://` is assumed.
+
+Confirm successful navigation with page title.

commands/perf.md

@@ -0,0 +1,57 @@
+---
+description: Analyze page performance - load times, DOM size, memory, and large resources.
+allowed-tools: Bash(*)
+model: sonnet
+---
+
+# Performance Analysis
+
+Run a comprehensive performance analysis on the current page.
+
+Use the **performance-debugger agent** for this task.
+
+## Collect Metrics
+
+1. **Page Load Timing**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js '(() => {
+     const t = performance.timing;
+     return {
+       firstByte: t.responseStart - t.navigationStart,
+       domInteractive: t.domInteractive - t.navigationStart,
+       domContentLoaded: t.domContentLoadedEventEnd - t.navigationStart,
+       loadComplete: t.loadEventEnd - t.navigationStart
+     };
+   })()'
+   ```
+
+2. **DOM Analysis**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js '(() => {
+     const all = document.querySelectorAll("*");
+     return {
+       totalElements: all.length,
+       scripts: document.scripts.length,
+       stylesheets: document.styleSheets.length,
+       images: document.images.length
+     };
+   })()'
+   ```
+
+3. **Large Resources**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js 'performance.getEntriesByType("resource").filter(r => r.transferSize > 50000).map(r => ({ name: r.name.split("/").pop(), kb: (r.transferSize/1024).toFixed(1) })).slice(0,10)'
+   ```
+
+4. **Screenshot** for context:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js
+   ```
+
+## Report
+
+Provide a summary with:
+- Load time assessment (good/needs improvement/poor)
+- DOM size assessment
+- Largest resources
+- Top 3 recommendations for improvement

commands/pick-element.md

@@ -0,0 +1,39 @@
+---
+description: Launch interactive element picker for user to select DOM elements. Returns selectors and computed styles.
+allowed-tools: Bash(*)
+argument-hint: [message to display]
+model: sonnet
+---
+
+# Pick Element
+
+Launch the interactive element picker so the user can click on DOM elements.
+
+## Instructions
+
+Run the picker with the provided message (or default):
+
+```bash
+node ~/.claude/plugins/*/skills/website-debug/scripts/browser-pick.js "$ARGUMENTS"
+```
+
+If no message provided, use: "Select the element you want to debug"
+
+## User Instructions
+
+Tell the user:
+- **Click** on any element to select it
+- **Cmd/Ctrl + Click** to add more elements to selection
+- **Enter** to confirm multi-selection
+- **Escape** to cancel
+
+## Output
+
+After the user selects elements, you'll receive:
+- CSS selector for each element
+- Tag, ID, and classes
+- Dimensions and position
+- Computed display, visibility, opacity
+- Text content preview
+
+Use this information to diagnose issues or write CSS/JS targeting these elements.

commands/resize.md

@@ -0,0 +1,36 @@
+---
+description: Resize browser viewport. Use presets like --mobile or custom dimensions.
+allowed-tools: Bash(*)
+argument-hint: [--mobile | --tablet | --desktop | width height]
+model: haiku
+---
+
+# Resize Viewport
+
+Change the browser viewport size for responsive testing.
+
+```bash
+node ~/.claude/plugins/*/skills/website-debug/scripts/browser-resize.js $ARGUMENTS
+```
+
+## Presets
+
+| Flag | Size | Device |
+|------|------|--------|
+| `--mobile` | 375×667 | iPhone SE |
+| `--iphone` | 390×844 | iPhone 14 |
+| `--iphone-pro` | 393×852 | iPhone 14 Pro |
+| `--android` | 412×915 | Pixel 7 |
+| `--tablet` | 768×1024 | iPad |
+| `--ipad-pro` | 1024×1366 | iPad Pro |
+| `--laptop` | 1366×768 | Laptop |
+| `--desktop` | 1920×1080 | Desktop |
+| `--4k` | 3840×2160 | 4K Display |
+
+## Custom Size
+
+```bash
+/resize 1440 900
+```
+
+After resizing, take a screenshot to verify layout.

commands/screenshot.md

@@ -0,0 +1,22 @@
+---
+description: Take a screenshot of the current browser viewport. Use --full for full page, --selector for specific element.
+allowed-tools: Bash(*)
+argument-hint: [--full | --selector=".class"]
+model: haiku
+---
+
+# Screenshot
+
+Take a screenshot of the current browser state.
+
+```bash
+node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js $ARGUMENTS
+```
+
+## Options
+
+- No arguments: Viewport screenshot
+- `--full`: Full page screenshot (scrollable content)
+- `--selector=".class"`: Screenshot of specific element
+
+After capturing, analyze the screenshot for any visual issues.

commands/test-responsive.md

@@ -0,0 +1,45 @@
+---
+description: Test responsive design across mobile, tablet, and desktop viewports. Takes screenshots at each breakpoint.
+allowed-tools: Bash(*)
+argument-hint: [url]
+model: sonnet
+---
+
+# Test Responsive Design
+
+Capture screenshots at multiple viewport sizes to verify responsive design.
+
+## Instructions
+
+1. If URL provided in $ARGUMENTS, navigate first:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-nav.js "$ARGUMENTS"
+   ```
+
+2. Test **Mobile** (375×667 - iPhone SE):
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-resize.js --mobile
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js --output=/tmp/responsive-mobile.png
+   ```
+
+3. Test **Tablet** (768×1024 - iPad):
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-resize.js --tablet
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js --output=/tmp/responsive-tablet.png
+   ```
+
+4. Test **Desktop** (1920×1080):
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-resize.js --desktop
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js --output=/tmp/responsive-desktop.png
+   ```
+
+5. **Analyze all screenshots** and report:
+   - Layout shifts between breakpoints
+   - Text overflow or truncation
+   - Overlapping elements
+   - Hidden/missing content
+   - Spacing and alignment issues
+   - Navigation usability at each size
+
+Provide specific recommendations for any issues found.

commands/verify-changes.md

@@ -0,0 +1,48 @@
+---
+description: Verify frontend changes after editing code. Takes screenshot, checks for errors, and reports results.
+allowed-tools: Bash(*), Read
+model: sonnet
+---
+
+# Verify Changes
+
+After making frontend changes, verify they work correctly.
+
+## Instructions
+
+1. **Reload the page** to pick up changes:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-eval.js 'location.reload(true)'
+   ```
+
+2. **Wait for page load**:
+   ```bash
+   sleep 2
+   ```
+
+3. **Take screenshot**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-screenshot.js
+   ```
+
+4. **Check for JavaScript errors**:
+   ```bash
+   node ~/.claude/plugins/*/skills/website-debug/scripts/browser-console.js --errors
+   ```
+
+5. **Analyze and report**:
+   - Compare screenshot to expected result
+   - List any JavaScript errors
+   - Identify if changes applied correctly
+   - Note any unexpected side effects
+
+6. **If issues found**:
+   - Describe the problem
+   - Suggest fixes
+   - Offer to make corrections
+
+7. **If successful**:
+   - Confirm changes work as expected
+   - Ask if any refinements needed
+
+This command is designed for the **edit → verify → iterate** loop that enables self-debugging of frontend work.

commands/watch-console.md

@@ -0,0 +1,24 @@
+---
+description: Watch browser console in real-time. Shows errors, warnings, and logs as they happen.
+allowed-tools: Bash(*)
+argument-hint: [--errors | --warnings]
+model: haiku
+---
+
+# Watch Console
+
+Monitor browser console output in real-time.
+
+```bash
+node ~/.claude/plugins/*/skills/website-debug/scripts/browser-console.js --watch $ARGUMENTS
+```
+
+## Options
+
+- No arguments: All console messages
+- `--errors`: Only error messages
+- `--warnings`: Errors and warnings
+
+Press Ctrl+C to stop watching.
+
+Report any errors that appear and suggest fixes.

commands/watch-network.md

@@ -0,0 +1,24 @@
+---
+description: Watch network requests in real-time. Great for debugging API calls.
+allowed-tools: Bash(*)
+argument-hint: [--failures | --xhr]
+model: haiku
+---
+
+# Watch Network
+
+Monitor network requests in real-time.
+
+```bash
+node ~/.claude/plugins/*/skills/website-debug/scripts/browser-network.js --watch $ARGUMENTS
+```
+
+## Options
+
+- No arguments: All network requests
+- `--failures`: Only 4xx/5xx errors
+- `--xhr`: Only XHR/fetch (API calls)
+
+Press Ctrl+C to stop watching.
+
+Report any failed requests and suggest potential causes.