Initial commit

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.