Fix critique skill from real-world testing

Detection fixes:
- Cramped padding: skip small elements (labels/badges < 100x30px)
  and require >20 chars of text content
- Skip browser extension elements (claude-*, cic-*) from scan loop
  and quality checks to avoid flagging the Claude Chrome indicator

Skill prompt fixes:
- Use python HTTP server + script tag injection instead of direct
  javascript_tool evaluation (avoids CORS issues)
- Add cleanup step for the HTTP server

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

source/skills/critique/SKILL.md

@@ -36,9 +36,18 @@ Include scan findings in the Anti-Patterns Verdict and Priority Issues. The dete
 
 If you have browser automation tools that control a visual browser in front of the user (e.g., `mcp__claude-in-chrome__javascript_tool`, Cursor's browser), AND the target is a viewable page, enhance the critique with live visual overlays.
 
-1. **Navigate** to the page (use dev server URL for local files, or direct URL)
-2. **Inject** `scripts/detect-antipatterns-browser.js` via `javascript_tool`: read the file and pass its content as JS to evaluate. The IIFE auto-executes and shows pink/magenta outlines with labels on every issue. Do NOT `cat` the file into the conversation first.
-3. **Reference** the overlays in your report: "As highlighted in the browser..."
+1. **Serve the script**: Start a simple HTTP server to serve the detection script:
+   ```bash
+   python3 -m http.server 8384 -d scripts/ &
+   ```
+2. **Navigate** to the page (use dev server URL for local files, or direct URL)
+3. **Inject** via `javascript_tool`: Create a script tag that loads from the local server:
+   ```javascript
+   const s = document.createElement('script'); s.src = 'http://localhost:8384/detect-antipatterns-browser.js'; document.head.appendChild(s);
+   ```
+   The IIFE auto-executes and shows pink/magenta outlines with labels on every issue.
+4. **Reference** the overlays in your report: "As highlighted in the browser..."
+5. **Cleanup**: Kill the HTTP server when done.
 
 For multi-view targets, inject on 3-5 representative pages. If injection fails, continue with CLI results only.
 

source/skills/critique/scripts/detect-antipatterns.mjs

@@ -768,6 +768,9 @@ const QUALITY_INTERACTIVE_TAGS = new Set(['button', 'a', 'input', 'select', 'tex
 
 function checkElementQualityDOM(el) {
   const tag = el.tagName.toLowerCase();
+  // Skip browser extension injected elements
+  const elId = el.id || '';
+  if (elId.startsWith('claude-') || elId.startsWith('cic-')) return [];
   const style = getComputedStyle(el);
   const findings = [];
 
@@ -785,8 +788,8 @@ function checkElementQualityDOM(el) {
     }
   }
 
-  // --- Cramped padding ---
-  if (hasDirectText && textLen > 10) {
+  // --- Cramped padding (skip small elements like labels/badges) ---
+  if (hasDirectText && textLen > 20 && rect.width > 100 && rect.height > 30) {
     const borders = {
       top: parseFloat(style.borderTopWidth) || 0,
       right: parseFloat(style.borderRightWidth) || 0,
@@ -1371,6 +1374,9 @@ if (IS_BROWSER) {
       if (el.classList.contains('impeccable-overlay') ||
           el.classList.contains('impeccable-label') ||
           el.classList.contains('impeccable-tooltip')) continue;
+      // Skip browser extension elements (Claude, etc.)
+      const elId = el.id || '';
+      if (elId.startsWith('claude-') || elId.startsWith('cic-')) continue;
 
       const findings = [
         ...checkElementBordersDOM(el).map(f => ({ type: f.id, detail: f.snippet })),