refactor(image): retain focused SEO and performance guidance
This commit is contained in:
Julian lechner committed
1 parent
65c99ac76d
commit
1cdb6b1881
10 files changed
+72
-608
No files matched your search
@@ -1,76 +1,29 @@
|
||||
---
|
||||
name: image
|
||||
description: Use when creating, editing, or optimizing images for software products, websites, documentation, and visual explanations.
|
||||
metadata:
|
||||
version: 2.0.1
|
||||
description: Use when integrating image assets or screenshots, improving image SEO and performance, configuring social previews, or preparing product visuals with existing design tools.
|
||||
---
|
||||
|
||||
# Image
|
||||
# Image Assets
|
||||
|
||||
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.
|
||||
Use the project's existing assets, components, and image pipeline. Ask only for missing information that affects the result.
|
||||
|
||||
## Before Starting
|
||||
## Workflow
|
||||
|
||||
**Check for product marketing context first:**
|
||||
If `.agents/product-marketing.md` exists (or `.claude/product-marketing.md`, or the legacy `product-marketing-context.md` filename, in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.
|
||||
1. Inspect the source asset and its intended placement: display size, responsive layout, transparency, and supported clients. Apply `technical-research` when format support or framework behavior needs verification.
|
||||
2. Choose a format that preserves required detail and transparency. Reuse vectors for suitable icons and logos; compare raster formats against the project's compatibility and quality requirements. Avoid unnecessary conversions and new dependencies.
|
||||
3. Resize and compress for the actual display sizes and pixel densities. Preserve originals and write optimized assets to separate outputs. Compare file size and visual quality, especially screenshot text, before replacing references.
|
||||
4. Use the existing image component or pipeline for responsive sizing and loading. Reserve layout space, provide meaningful alternative text for informative images and empty alternative text for decorative images, and avoid deferring critical visible content.
|
||||
5. Capture the real application for documentation screenshots. Remove sensitive data and check readability at the final display size. Treat untrusted SVGs and uploaded images through the project's established validation and sanitization boundary.
|
||||
6. Verify asset paths, dimensions, aspect ratio, transparency, accessibility, and rendering at relevant viewport sizes. For requested link previews, check the project's metadata and that the preview image URL is accessible to the intended consumer.
|
||||
|
||||
Gather this context (ask if not provided):
|
||||
Report changed assets, measured size savings when optimizing, and any rendering or compatibility checks not performed.
|
||||
|
||||
### 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?
|
||||
## Focused references
|
||||
|
||||
### 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?
|
||||
Load only the reference matching the task:
|
||||
|
||||
### 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 |
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
|
||||
- [references/ai-image-generation.md](references/ai-image-generation.md): Read when generating images with AI: model comparison, model choice decision tree, prompting basics
|
||||
- [references/design-tools.md](references/design-tools.md): Read when using Canva or Figma, or deciding between design tools and AI generation
|
||||
- [references/marketing-image-workflows.md](references/marketing-image-workflows.md): Read when producing blog heroes, social graphics, product mockups, profile/listing banners, or brand assets (includes platform sizes)
|
||||
- [references/image-optimization.md](references/image-optimization.md): Read when optimizing images for web performance: formats, checklist, commands
|
||||
- [references/og-social-preview-images.md](references/og-social-preview-images.md): Read when setting up OG/social preview images and meta tags
|
||||
- [references/common-mistakes.md](references/common-mistakes.md): Read before delivering, to check against common image mistakes
|
||||
|
||||
For detailed prompting guides per model, see [references/ai-image-prompting.md](references/ai-image-prompting.md).
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
|
||||
- **cro**: For image placement and conversion optimization on landing pages
|
||||
- [Image optimization](references/image-optimization.md): formats, responsive delivery, loading priority, and image SEO.
|
||||
- [OG and social previews](references/og-social-preview-images.md): required Open Graph metadata, image tags, and preview validation.
|
||||
- [Marketing image workflows](references/marketing-image-workflows.md): product screenshots, article heroes, banners, and reusable templates.
|
||||
- [Design tools](references/design-tools.md): selecting existing design, screenshot, and export tools.
|
||||
- [Common mistakes](references/common-mistakes.md): final checks when delivering or reviewing image changes.
|
||||
Reference in new issue
Block a user