Add CSS function negation gotcha to prevent silent positioning bugs (#2)

Browsers silently ignore declarations like `right: -clamp(...)` — the
leading minus before CSS functions (clamp, min, max) is invalid syntax.
No console error is thrown; the property simply falls back to its
initial value, causing elements to appear in wrong positions.

This adds:
- A "CSS Gotchas" section to STYLE_PRESETS.md with wrong/correct examples
- A checklist item in the Viewport Fitting Checklist
- A warning in SKILL.md's Code Quality Requirements section

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

SKILL.md

@@ -726,6 +726,10 @@ class CustomCursor {
 }
 ```
 
+**CSS Function Negation:**
+- Never negate CSS functions directly — `-clamp()`, `-min()`, `-max()` are silently ignored by browsers with no console error
+- Always use `calc(-1 * clamp(...))` instead. See STYLE_PRESETS.md → "CSS Gotchas" for details.
+
 **Responsive & Viewport Fitting (CRITICAL):**
 
 **See the "CRITICAL: Viewport Fitting Requirements" section above for complete CSS and guidelines.**

STYLE_PRESETS.md

@@ -157,6 +157,7 @@ Before finalizing any presentation, verify:
 - [ ] Content respects density limits (max 6 bullets, max 6 cards)
 - [ ] No fixed pixel heights on content elements
 - [ ] Images have `max-height` constraints
+- [ ] No negated CSS functions (use `calc(-1 * clamp(...))` not `-clamp(...)`)
 
 ---
 
@@ -481,6 +482,30 @@ Before finalizing any presentation, verify:
 
 ---
 
+## CSS Gotchas (Common Mistakes)
+
+### Negating CSS Functions
+
+**WRONG — silently ignored by browsers:**
+```css
+right: -clamp(28px, 3.5vw, 44px);   /* ❌ Invalid! Browser ignores this */
+margin-left: -min(10vw, 100px);      /* ❌ Invalid! */
+top: -max(2rem, 4vh);                /* ❌ Invalid! */
+```
+
+**CORRECT — wrap in `calc()`:**
+```css
+right: calc(-1 * clamp(28px, 3.5vw, 44px));  /* ✅ */
+margin-left: calc(-1 * min(10vw, 100px));     /* ✅ */
+top: calc(-1 * max(2rem, 4vh));               /* ✅ */
+```
+
+CSS does not allow a leading `-` before function names like `clamp()`, `min()`, `max()`. The browser silently discards the entire declaration, causing the property to fall back to its initial/inherited value. This is especially dangerous because there is no console error — the element simply appears in the wrong position.
+
+**Rule: Always use `calc(-1 * ...)` to negate CSS function values.**
+
+---
+
 ## Troubleshooting Viewport Issues
 
 ### Content Overflows the Slide