61 lines
1.7 KiB
Markdown
61 lines
1.7 KiB
Markdown
---
|
|
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.
|