Browse Source

added claude "verify-csp" skill

Brandon Wong 1 month ago
parent
commit
d6776e442e
1 changed files with 27 additions and 0 deletions
  1. 27 0
      .claude/skills/verify-csp/SKILL.md

+ 27 - 0
.claude/skills/verify-csp/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: verify-csp
+description: Scan popup HTML and JS for Alpine.js CSP violations after editing popup code
+---
+
+Scan `popup/popup.html` and `popup/popup.js` for Alpine.js CSP compliance violations.
+
+The extension runs under a Content Security Policy that forbids JavaScript evaluation, so Alpine.js attributes must never contain inline expressions.
+
+**Check for these violation patterns in HTML attributes (`x-show`, `x-if`, `x-text`, `x-bind:*`, `:attr`, `@event`, etc.):**
+- Equality/comparison operators: `===`, `!==`, `==`, `!=`, `>`, `<`
+- Method or function calls: `foo()`, `this.bar()`
+- Ternary expressions: `condition ? a : b`
+- Logical operators used to compute values: `a && b`, `a || b`
+- String concatenation or arithmetic
+
+**What is allowed:**
+- Simple property access: `x-show="isOpen"`, `:class="activeClass"`
+- `$el`, `$refs`, `$store` access without calling methods
+- Negation of a boolean property: `x-show="!isOpen"` (acceptable)
+
+For each violation found, report:
+1. File and line number
+2. The offending attribute and its current value
+3. The compliant fix — typically moving the logic into `Alpine.data()` as a computed property or method, then binding the property name in the template
+
+If no violations are found, confirm the popup is CSP-compliant.