fix(skill): add anti-defaults for SVG illustrations, overlap, and zoom monoculture

- Don't draw real-world objects with SVG — geometric/abstract only
- Every element needs clear space — no overlapping text
- Replace zoom-in monoculture with ambient motion variety (pan, rotation,
  parallax, color shift, stillness)
- Add scene pacing: build/breathe/resolve phases

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-03-26 12:05:39 -07:00
co-authored by Claude Opus 4.6
parent 36c91cecbb
commit ff0dbae7cd
+15 -13
View File
@@ -94,19 +94,21 @@ Beyond choosing a typeface:
Things the LLM reaches for that look generic. Do the opposite.
| Default | Instead |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Inter / Roboto / system font | Pick a typeface with character — commit to it |
| `#f5f5f5` / `#333` / mid-gray | Go high contrast. Near-black or near-white, not the middle |
| Blue accent `#3b82f6` | No blue unless the user asks for blue |
| Everything centered, equal weight | One focal point per frame. Lead the eye somewhere |
| Uniform spacing | Tight clusters and open gaps. Vary deliberately |
| Same entrance on every element | Never repeat an entrance pattern in a composition |
| 1s duration on everything | 0.3–0.6s. Shorter than you think |
| `power2.out` on everything | Vary eases — no more than 2 independent tweens with the same ease (staggers are exempt) |
| Always dark background | Match the content: food, weddings, kids, wellness, education → light palette |
| Inventing colors per-element | Declare palette up front. Every element references it |
| Content in cards/containers | Place content directly on the canvas — separate with space and alignment, not box boundaries. Cards are a web pattern. Exception: dashboards, lower thirds, captions over footage |
| Default | Instead |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Inter / Roboto / system font | Pick a typeface with character — commit to it |
| `#f5f5f5` / `#333` / mid-gray | Go high contrast. Near-black or near-white, not the middle |
| Blue accent `#3b82f6` | No blue unless the user asks for blue |
| Everything centered, equal weight | One focal point per frame. Lead the eye somewhere |
| Uniform spacing | Tight clusters and open gaps. Vary deliberately |
| Same entrance on every element | Never repeat an entrance pattern in a composition |
| 1s duration on everything | 0.3–0.6s. Shorter than you think |
| `power2.out` on everything | Vary eases — no more than 2 independent tweens with the same ease (staggers are exempt) |
| Always dark background | Match the content: food, weddings, kids, wellness, education → light palette |
| Inventing colors per-element | Declare palette up front. Every element references it |
| Content in cards/containers | Place content directly on the canvas — separate with space and alignment, not box boundaries. Cards are a web pattern. Exception: dashboards, lower thirds, captions over footage |
| Hand-drawn SVG illustrations | Don't attempt to draw real-world objects (faces, buildings, food, animals) with SVG paths — they look crude. Use geometric shapes, lines, and abstract forms only. If the composition needs imagery, use text and typography to evoke it instead |
| Overlapping elements | Every element needs its own clear space. Check that positioned elements don't collide — stagger positions vertically with enough margin. Overlapping text is always ugly |
## Palettes