Initial commit: 79+ design patterns, LLM prompts, and assets

prompts/media/00-media-prompts.md

@@ -0,0 +1,50 @@
+---
+name: media-prompts
+title: Media Pattern LLM Prompts
+description: Ready-to-use prompts for media with wiki patterns.
+---
+
+# Media Pattern Prompts
+
+## 1. Video Mask
+
+```
+Create video mask effect:
+- Text with video inside using -webkit-mask-image: text
+- Video: autoplay, muted, loop, playsinline
+- Width: 100% of container
+- Font-size: clamp(4rem, 12vw, 10rem)
+- Font-weight: 900
+- Fallback: static image for mobile
+```
+
+## 2. Image Parallax
+
+```
+Create image parallax:
+- Section: height 100vh, overflow hidden
+- Image: position absolute, height 140%
+- GSAP ScrollTrigger: yPercent: 50, scrub: 1
+- Will-change: transform
+- Mobile: static image (no parallax)
+```
+
+## 3. SVG Animation
+
+```
+Create SVG icon animation:
+- Path with stroke-dasharray: 30, stroke-dashoffset: 30
+- Animation: draw 0.5s ease forwards
+- Icon: 48x48px
+- Color: accent (#6366f1)
+- Hover: scale(1.2) rotate(10deg)
+- Transition: 0.3s ease
+```
+
+## Anti-Patterns
+
+1. Never autoplay video with sound
+2. Never use images > 5MB
+3. Always use WebP/AVIF
+4. Always lazy load below-fold images
+5. Never skip alt text