115 lines
3.6 KiB
Markdown
115 lines
3.6 KiB
Markdown
---
|
|
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
|