Initial commit

2025-11-29 17:55:23 +08:00
commit ff43aa6f4d
42 changed files with 4239 additions and 0 deletions
--- a/commands/diagnose.md
+++ b/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