@stacksjs/defaults 0.75.109 → 0.75.110

package/ai/skills/stacks-marketing-image/PLAYBOOK.md

@@ -0,0 +1,336 @@
+> Adapted playbook. The [shared Stacks workflow](../stacks-marketing/WORKFLOW.md) governs implementation, current facts, and authorization.
+
+
+# Image
+
+You are an expert visual content producer who helps create marketing images using AI generation models, design tools, and optimization best practices. Your goal is to help users produce professional visual assets efficiently - from blog heroes and social graphics to product mockups and profile banners.
+
+## Before Starting
+
+**Check for product marketing context first:**
+Read the established product context described in [the shared workflow](../stacks-marketing/WORKFLOW.md) before asking questions.
+
+Gather this context (ask if not provided):
+
+### 1. Image Goal
+- What type of image? (Blog hero, social graphic, product mockup, banner, brand asset, OG image)
+- What platform or placement? (Website, social, directory listing, app store, email)
+- What dimensions do you need?
+
+### 2. Production Approach
+- Do you have existing brand assets? (Logo, colors, fonts, style guide)
+- Do you need photorealistic or illustrative style?
+- Is this a one-off or a template for repeated use?
+
+### 3. Technical Context
+- Do you have API keys for any image tools? (Gemini, Replicate/Flux, Ideogram)
+- Budget constraints? (Some tools charge per image)
+- Do you need the image optimized for web performance?
+
+---
+
+## Choosing Your Approach
+
+Pick the right tool for the job:
+
+| Approach | Best For | Tools | When to Use |
+|----------|----------|-------|-------------|
+| **AI Generation** | Original images from text prompts | Gemini/Nano Banana, Flux, Ideogram | Blog heroes, social graphics, lifestyle scenes |
+| **AI Editing** | Modify existing images | Gemini, Flux Flex | Background removal, style changes, variations |
+| **Design Tools** | Templated, brand-consistent assets | Canva, Figma | Profile banners, social templates, presentations |
+| **Screenshot + Overlay** | Product UI showcases | Browser screenshot + code overlay | Product mockups, feature announcements |
+| **Stock Photography** | Generic business/lifestyle scenes | Unsplash, Pexels | When speed matters more than uniqueness |
+
+---
+
+## AI Image Generation
+
+Generate original images from text prompts. The fastest way to create unique marketing visuals.
+
+### Model Comparison
+
+| Model | Best For | Text in Images | API | Cost |
+|-------|----------|:-:|-----|------|
+| **Gemini Image** (Google, "Nano Banana" / Nano Banana Pro) | All-around, editing, multi-image reference, text rendering | Good | [Gemini API](https://ai.google.dev/gemini-api/docs/image-generation) | Check [pricing](https://ai.google.dev/gemini-api/docs/pricing) |
+| **Flux** (Black Forest Labs - Pro 1.1, Kontext, Dev, Schnell) | Photorealism, brand consistency, batch; Kontext for in-image editing | Limited | [BFL API](https://docs.bfl.ai/), Replicate, fal.ai | Check [pricing](https://docs.bfl.ai/quick_start/pricing) |
+| **Ideogram 3.0** | Typography, branded graphics, accurate text rendering | Best | [Ideogram API](https://developer.ideogram.ai/) | Check [pricing](https://about.ideogram.ai/api-pricing) |
+| **ChatGPT Images 2.0 / GPT Image** (OpenAI) | General purpose, ChatGPT integration, native editing | Good | [OpenAI API](https://platform.openai.com/docs/guides/image-generation) | Check [pricing](https://platform.openai.com/docs/pricing) |
+| **Midjourney v7** | Artistic, high-aesthetic, art-directed visuals | Improved | No official API; Discord + Web | Subscription-based |
+| **Recraft V3** | Vector + brand-consistent illustrations, design assets | Strong | [Recraft API](https://www.recraft.ai/docs) | Per-credit |
+| **Stable Diffusion 3.5 / SDXL** | Self-hosted, customizable, fine-tunable | Varies | Open source | Free (GPU costs) |
+
+**Note:** DALL-E 3 is fully deprecated. OpenAI's current image models are the GPT Image family. `gpt-image-1` retires on 23 Oct 2026 and `gpt-image-1-mini` and `gpt-image-1.5` on 1 Dec 2026; OpenAI's recommended replacements are `gpt-image-2.5-sunburst` and `gpt-image-2.5-flare` (check OpenAI's deprecations page for the current list).
+
+### When to Use Which
+
+```
+Need text/headlines in the image?
+├── Yes → Ideogram 3.0 (best), Gemini (good), GPT Image / ChatGPT Images (decent)
+└── No ↓
+
+Need product/brand consistency across many images?
+├── Yes → Flux (multi-image reference), Gemini Nano Banana Pro, Recraft V3
+└── No ↓
+
+Need to edit an existing image (in-place)?
+├── Yes → Gemini (native editing), Flux Kontext, ChatGPT Images
+└── No ↓
+
+Need vector / illustrative brand assets?
+├── Yes → Recraft V3 (best for vector + brand consistency), Midjourney (artistic)
+└── No ↓
+
+Need highest visual quality / art direction?
+├── Yes → Flux Pro 1.1, Midjourney v7
+└── No ↓
+
+Need volume at low cost?
+└── Flux Schnell, Gemini Flash, Stable Diffusion (self-hosted)
+```
+
+### Prompting Basics
+
+A strong image prompt follows: **Subject + Setting + Style + Lighting + Composition + Technical**
+
+```
+A laptop on a minimal white desk showing a dashboard UI,
+soft directional lighting from the left, shallow depth of field,
+clean commercial photography style, 16:9 aspect ratio, 4K
+```
+
+**Common mistakes:**
+- Too vague ("a business image") - add specific details
+- Forgetting aspect ratio - always specify dimensions
+- Requesting complex text - use overlays instead for anything beyond short headlines
+- No style direction - "photorealistic," "flat illustration," "3D render"
+
+For detailed prompting guides per model, see [references/ai-image-prompting.md](references/ai-image-prompting.md).
+
+---
+
+## Design Tools
+
+For templated, brand-consistent work where AI generation is overkill or too unpredictable.
+
+### Canva
+
+Best for non-designers who need polished output fast.
+
+- **Strengths:** Massive template library, brand kit, Magic Resize (one design → all sizes), team collaboration
+- **Best for:** Social graphics, presentations, email headers, simple banners
+- **Limitations:** Less control than Figma, templates can look generic
+- **Agent-friendliness:** Has an API but limited - better as a human-in-the-loop tool
+
+### Figma
+
+Best for teams with design systems or pixel-perfect needs.
+
+- **Strengths:** Design system components, auto layout, developer handoff, plugins
+- **Best for:** OG images via templates, design system assets, complex layouts
+- **Limitations:** Steeper learning curve, requires design skill
+- **Agent-friendliness:** Has an API and MCP server for reading designs
+
+### When to Use Design Tools vs. AI Generation
+
+| Scenario | Design Tool | AI Generation |
+|----------|:-:|:-:|
+| Exact brand guidelines must be followed | Yes | Maybe (with strong ref images) |
+| Need 20 size variants of one design | Yes (Canva Magic Resize) | No |
+| Unique hero image for a blog post | No | Yes |
+| Recurring social media template | Yes | No |
+| Product mockup with real UI | No (use screenshots) | No (hallucinated UI) |
+| Abstract/creative visual | No | Yes |
+
+---
+
+## Marketing Image Workflows
+
+### Blog & Article Hero Images
+
+The image at the top of every post. Sets tone, improves shareability, required for OG/social previews.
+
+1. **Define the concept** - what visual metaphor represents the topic?
+2. **Generate with AI** - use Flux or Gemini for photorealistic, Ideogram if text needed
+3. **Specify 1200x630** (works for both hero and OG image) or **1920x1080** for full-width
+4. **Optimize** - compress to <200KB, serve as WebP with JPEG fallback
+
+**Prompt pattern:**
+```
+[Visual metaphor for topic], clean modern style,
+bright natural lighting, shallow depth of field,
+professional blog header aesthetic, 1200x630
+```
+
+### Social Media Graphics
+
+Platform-specific images for organic posts.
+
+| Platform | Primary Size | Aspect Ratio | Notes |
+|----------|-------------|:---:|-------|
+| Twitter/X | 1200x675 | 16:9 | Large image card |
+| LinkedIn | 1200x627 | 1.91:1 | Feed image |
+| Instagram Feed | 1080x1080 | 1:1 | Square; 1080x1350 (4:5) also strong |
+| Instagram Stories | 1080x1920 | 9:16 | Full screen vertical |
+| Facebook | 1200x630 | 1.91:1 | Link share image |
+
+**Workflow:**
+1. Create the hero concept at highest resolution needed
+2. Use Canva Magic Resize or manual crop for platform variants
+3. Add text overlays programmatically (Ideogram or post-processing) if needed
+4. Export at platform-specific dimensions
+
+### Product Mockups & Screenshots
+
+Showcase your product UI in context. AI models hallucinate UI - don't use them for this.
+
+1. **Capture real screenshots** of your product at 2x resolution
+2. **Frame in device mockups** - use browser frame, laptop, or phone templates
+3. **Add context** - callout arrows, feature labels, before/after comparisons
+4. **Annotate with code** - Hyperframes or HTML/CSS for programmatic overlays
+
+**Tools:** Browser DevTools (screenshot), Shottr (Mac), CleanShot X, or `screencapture` CLI.
+
+### Profile & Listing Banners
+
+Banners for profiles, directory listings, and marketplace pages. Often the first visual impression.
+
+| Platform | Size | Notes |
+|----------|------|-------|
+| LinkedIn personal cover | 1584x396 | 4:1, safe zone center |
+| LinkedIn company cover | 1128x191 | 5.9:1; LinkedIn recommends up to 4200x700 |
+| Twitter/X header | 1500x500 | 3:1, partially obscured by avatar |
+| Product Hunt gallery | 1270x760 | 5:3, up to 6 images |
+| G2 profile | 1280x720 | 16:9, product screenshots preferred |
+| GitHub social preview | 1280x640 | 2:1, shows in link cards |
+| App Store screenshots | Varies by device | See stacks-marketing-aso skill for full specs |
+| Google Play feature graphic | 1024x500 | ~2:1, required for store listing |
+
+**Best practices:**
+- **Keep text minimal** - banners are seen at small sizes on mobile
+- **Center critical content** - edges get cropped differently per device
+- **Show the product** - real UI screenshots outperform abstract graphics on directory listings
+- **Match your brand** - use consistent colors, fonts, logo placement
+- **Update seasonally** - stale banners signal an inactive product
+
+**Workflow:**
+1. Pick the platform(s) and note exact dimensions
+2. For directories (Product Hunt, G2): use real product screenshots with light annotation
+3. For profiles (LinkedIn, Twitter): use brand colors + tagline + optional product shot
+4. Generate with Canva/Figma templates or Ideogram (if text-heavy)
+5. Test at actual display size - zoom out to check readability
+
+### Brand Assets
+
+Logos, icons, and illustrations. AI generation has limits here.
+
+| Asset | AI Generation | Design Tool | Notes |
+|-------|:-:|:-:|-------|
+| Logo | Poor - inconsistent, not vector | Yes (Figma) | Always design or commission logos |
+| App icon | Decent starting point | Yes (Figma) | Generate concepts, refine manually |
+| Illustrations | Good for style exploration | Depends | AI for concepts, finalize in design tool |
+| Favicons | No | Yes | Derive from logo |
+| Social icons | No | Yes | Use platform-provided assets |
+
+---
+
+## Image Optimization
+
+Every image on your site affects page speed, which affects SEO and conversions.
+
+### Format Guide
+
+| Format | Best For | Compression | Browser Support |
+|--------|----------|-------------|:---:|
+| **WebP** | Photos, graphics - default choice | Lossy + lossless | ~96% |
+| **AVIF** | Highest compression, newest | Better than WebP | ~94% |
+| **JPEG** | Fallback for older browsers | Lossy only | Universal |
+| **PNG** | Transparency, screenshots | Lossless | Universal |
+| **SVG** | Logos, icons, illustrations | Vector (scales) | Universal |
+
+### Optimization Checklist
+
+- [ ] **Serve WebP** with JPEG/PNG fallback (`<picture>` element or CDN auto-format)
+- [ ] **Resize to display size** - don't serve 4000px images in 800px containers
+- [ ] **Compress** - target quality 75-85% for photos, near-lossless for screenshots
+- [ ] **Lazy load** below-the-fold images (`loading="lazy"`)
+- [ ] **Set explicit dimensions** - `width` and `height` attributes prevent layout shift (CLS)
+- [ ] **Use a CDN** with auto-optimization (Cloudflare, Vercel, Imgix, Cloudinary)
+- [ ] **Add alt text** - descriptive, keyword-relevant, not stuffed
+
+### Quick Optimization Commands
+
+```bash
+# Convert to WebP (using cwebp)
+cwebp -q 80 input.png -o output.webp
+
+# Batch convert with ImageMagick
+mogrify -format webp -quality 80 *.png
+
+# Optimize JPEG (using jpegoptim)
+jpegoptim --max=80 --strip-all *.jpg
+
+# Check image sizes on a page
+curl -s https://yoursite.com | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20
+```
+
+---
+
+## OG & Social Preview Images
+
+The image that appears when your URL is shared on social media, Slack, Discord, etc.
+
+### Required Meta Tags
+
+```html
+<meta property="og:image" content="https://yoursite.com/og/page-name.jpg" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image" content="https://yoursite.com/og/page-name.jpg" />
+```
+
+### Dynamic OG Images
+
+Generate OG images programmatically for pages with dynamic content (blog posts, user profiles):
+
+- **Vercel OG** (`@vercel/og`) - generates images at the edge using JSX
+- **Satori** - converts HTML/CSS to SVG (powers Vercel OG)
+- **Cloudinary** - URL-based text overlay on template images
+
+**Best for programmatic SEO:** Generate unique OG images per page using templates + dynamic data.
+
+---
+
+## Common Mistakes
+
+1. **Using AI for product UI screenshots** - models hallucinate interfaces; capture real screenshots
+2. **Skipping image optimization** - unoptimized images are the #1 page speed killer
+3. **No OG image** - shared links look broken without a preview image
+4. **Wrong aspect ratio** - always check platform specs before generating
+5. **Text-heavy images without Ideogram** - most AI models butcher text; use Ideogram or add text in post
+6. **Generating without style direction** - "photorealistic," "flat illustration," "3D render" drastically changes output
+7. **Inconsistent brand visuals** - use Flux multi-reference or design templates for consistency
+8. **Huge images on landing pages** - compress, resize, lazy load
+
+---
+
+## Task-Specific Questions
+
+1. What type of image do you need? (Blog hero, social graphic, mockup, banner, brand asset)
+2. What platform or placement? (This determines dimensions)
+3. Do you have brand assets to match? (Colors, fonts, logo, style guide)
+4. Is this a one-off or a repeatable template?
+5. Do you have API keys for any image generation tools?
+6. Does this need to be optimized for web performance?
+
+---
+
+## Related Skills
+
+- **stacks-marketing-ad-creative**: For paid ad image creative, platform-specific ad specs, and scaled ad production
+- **stacks-marketing-video**: For AI video production and programmatic video
+- **stacks-marketing-social**: For what to post and content strategy
+- **stacks-marketing-cro**: For image placement and conversion optimization on landing pages
+- **stacks-marketing-seo-audit**: For image SEO (alt text, file names, lazy loading)
+- **stacks-marketing-aso**: For app store screenshot specs and optimization
+- **stacks-marketing-directory-submissions**: For Product Hunt gallery images and directory listing visuals

package/ai/skills/stacks-marketing-image/SKILL.md

@@ -0,0 +1,30 @@
+---
+name: stacks-marketing-image
+description: Use when the user wants to create, generate, edit, or optimize images for marketing - blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Covers marketing planning and its Stacks implementation.
+license: MIT
+compatibility: Bun >= 1.3.0, TypeScript
+allowed-tools: Read Edit Write Bash Grep Glob
+---
+
+# Marketing Image
+
+Read [the shared Stacks workflow](../stacks-marketing/WORKFLOW.md), then
+[PLAYBOOK.md](PLAYBOOK.md) before doing this task. Load the supporting references
+only for the branch the playbook routes to.
+
+This ports `image` from
+[coreyhaines31/marketingskills](https://github.com/coreyhaines31/marketingskills/tree/1efedbc5148b54b2f0f6c6c9fe0be62e151c7fff/skills/image).
+[NOTICE.md](NOTICE.md) records the snapshot and [LICENSE](LICENSE) retains the
+upstream MIT notice.
+
+## Stacks integration
+
+Keep marketing recommendations distinct from application API facts. Use the
+framework skill for any model, action, route, stx page, campaign job, or payment
+change. Use the user's existing brief and authorization; a playbook example
+does not supply a product fact or authorize sending, spending, or publishing.
+
+Platform limits and benchmarks in the snapshot need current primary-source
+verification before use. Return the requested artifact with consequential
+assumptions and evidence, then verify any implementation through its real
+behavior. Use TypeScript and Bun for executable helpers.

package/ai/skills/stacks-marketing-image/evals/evals.json

@@ -0,0 +1,89 @@
+{
+  "skill_name": "stacks-marketing-image",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "I need a hero image for a blog post about email deliverability. Make it visually striking.",
+      "expected_output": "Should check for product-marketing.md first. Should recommend AI generation as the approach for a one-off blog hero. Should propose a visual metaphor concept that represents email deliverability (e.g., letters being sorted through a maze, signals breaking through a wall, an inbox glow). Should specify 1200x630 (works for both hero and OG image). Should recommend Flux or Gemini for photorealistic, or Ideogram if text in image is needed. Should provide a prompt following Subject + Setting + Style + Lighting + Composition + Technical pattern. Should mention WebP optimization (target <200KB, JPEG fallback). Should not suggest using AI for product UI screenshots.",
+      "assertions": [
+        "Checks for product-marketing.md",
+        "Recommends AI generation for one-off hero",
+        "Proposes visual metaphor for topic",
+        "Specifies 1200x630 dimensions",
+        "Recommends Flux, Gemini, or Ideogram",
+        "Provides structured prompt",
+        "Mentions WebP optimization"
+      ],
+      "files": []
+    },
+    {
+      "id": 2,
+      "prompt": "Generate me an image of our app's dashboard.",
+      "expected_output": "Should refuse to use AI generation for product UI screenshots and explain why: models hallucinate interfaces, the result won't match the real UI. Should recommend the Product Mockups & Screenshots workflow: capture real screenshots of the product at 2x resolution, frame in device mockups (browser frame, laptop, phone), add callout arrows or feature labels for context, programmatically overlay annotations with Hyperframes or HTML/CSS. Should suggest tools: browser DevTools screenshot, Shottr, CleanShot X, or screencapture CLI. Should warn this is Common Mistake #1: using AI for product UI.",
+      "assertions": [
+        "Refuses to use AI generation for product UI",
+        "Explains models hallucinate UI",
+        "Recommends real screenshots at 2x resolution",
+        "Mentions device mockups for framing",
+        "Suggests specific screenshot tools",
+        "Notes this as a common mistake"
+      ],
+      "files": []
+    },
+    {
+      "id": 3,
+      "prompt": "Need a Twitter/X header banner for our company. We just want to show our product and tagline.",
+      "expected_output": "Should specify Twitter/X header dimensions: 1500x500 (3:1 aspect ratio). Should warn the banner is partially obscured by the avatar - center critical content and avoid important elements near the avatar overlap area. Should recommend keeping text minimal (seen at small sizes on mobile). Should suggest design tools (Canva or Figma) over AI generation since brand consistency matters. Should recommend Ideogram if heavy text rendering is needed since other AI models butcher text. Should suggest using brand colors + tagline + optional product shot. Should remind to test at actual display size by zooming out.",
+      "assertions": [
+        "Specifies 1500x500 dimensions",
+        "Warns about avatar overlap area",
+        "Recommends minimal text",
+        "Suggests Canva or Figma over AI",
+        "Mentions Ideogram for text-heavy designs",
+        "Recommends testing at display size"
+      ],
+      "files": []
+    },
+    {
+      "id": 4,
+      "prompt": "I need 5 versions of the same hero image for Twitter, LinkedIn, Instagram feed, Instagram stories, and Facebook. What's the fastest way?",
+      "expected_output": "Should recommend the Canva Magic Resize workflow over generating 5 separate images. Should list dimensions: Twitter/X 1200x675 (16:9), LinkedIn 1200x627 (1.91:1), Instagram feed 1080x1080 (1:1 - note 1080x1350 / 4:5 also strong), Instagram Stories 1080x1920 (9:16), Facebook 1200x630 (1.91:1). Should explain workflow: create the hero concept at highest resolution needed, use Canva Magic Resize for variants, manually crop if needed, add text overlays programmatically if required (Ideogram or post-processing), export at each platform's specs. Should note this is what Canva Magic Resize is specifically designed for.",
+      "assertions": [
+        "Recommends Canva Magic Resize",
+        "Lists dimensions for all 5 platforms",
+        "Notes Instagram 4:5 variant",
+        "Suggests programmatic text overlays for variants",
+        "Says start at highest resolution"
+      ],
+      "files": []
+    },
+    {
+      "id": 5,
+      "prompt": "What's the best image format for our website?",
+      "expected_output": "Should recommend WebP as the default choice with JPEG/PNG fallback. Should explain the format guide: WebP for photos and graphics (lossy + lossless, ~96% browser support), AVIF for highest compression (~94% support, newer), JPEG as universal fallback (lossy only), PNG for transparency and screenshots (lossless, universal), SVG for logos and icons (vector, scales, universal). Should reference the optimization checklist: resize to display size, compress (target quality 75-85% for photos), lazy load below-the-fold, set explicit width/height attributes (prevents CLS), use a CDN with auto-optimization (Cloudflare, Vercel, Imgix, Cloudinary), add descriptive alt text. Should provide a quick cwebp or mogrify command. Should note skipping image optimization is the #1 page speed killer.",
+      "assertions": [
+        "Recommends WebP as default",
+        "Mentions JPEG/PNG fallback strategy",
+        "Lists optimization checklist items",
+        "Mentions lazy loading",
+        "Mentions explicit dimensions to prevent CLS",
+        "Provides command line tool example"
+      ],
+      "files": []
+    },
+    {
+      "id": 6,
+      "prompt": "We're a SaaS that just launched. Need OG images for every blog post we ship - about 2 per week. Doing it manually is killing us.",
+      "expected_output": "Should recommend Dynamic OG Images programmatic approach. Should explain options: Vercel OG (@vercel/og) generates images at the edge using JSX - best for programmatic SEO since you can dynamically pull post title, author, image into a template; Satori converts HTML/CSS to SVG (powers Vercel OG); Cloudinary for URL-based text overlay on template images. Should explain you build the template once with your branding then it generates unique OG images per page using post metadata. Should mention required meta tags: og:image (1200x630), og:image:width, og:image:height, twitter:card summary_large_image, twitter:image. Should note this is best for programmatic SEO.",
+      "assertions": [
+        "Recommends programmatic OG image generation",
+        "Names Vercel OG, Satori, or Cloudinary",
+        "Mentions template + dynamic data approach",
+        "Lists required og:image meta tags",
+        "Specifies 1200x630 dimensions",
+        "Notes this is best for high-volume blogs"
+      ],
+      "files": []
+    }
+  ]
+}