name: image-workflows
description: Create and execute image workflows using floimg. Use when the user needs to generate AI images, transform existing images (resize, caption, filters), or create multi-step pipelines. Also handles charts, diagrams, QR codes, and screenshots. Trigger words: image, picture, photo, illustration, hero, thumbnail, resize, transform, caption, watermark, generate, AI, DALL-E, chart, diagram, QR, screenshot.
allowed-tools: mcp__floimg__generate_image, mcp__floimg__transform_image, mcp__floimg__save_image, mcp__floimg__run_pipeline, mcp__floimg__analyze_image, Bash
Image Workflows Skill
This skill enables you to create and execute image workflows using floimg—the composable workflow engine with two core differentiators:
Deterministic Transforms: AI image modification is probabilistic—DALL-E generates new images, inpainting runs diffusion. FloImg applies deterministic transforms: adjust hue mathematically, resize to exact dimensions. The image stays intact except for exactly what you requested.
A Unified API: FloImg models image manipulation as a series of composable steps. This functional approach consolidates the patchwork of tools and SDKs into one abstraction layer—portable across SDK, CLI, visual builder, and MCP.
Architecture: CLI Simple, MCP Complex
floimg uses a hybrid approach:
| Task Type |
Method |
Works Immediately? |
| Complex (AI images, multi-step, iteration) |
MCP |
After restart |
| Simple (QR, chart, diagram, screenshot) |
CLI via npx |
Yes |
When to Use This Skill
Activate this skill when the user:
- Wants to generate AI images (DALL-E, etc.) with professional finishing
- Needs to transform images (resize, add caption, adjust colors, apply filters)
- Wants iterative refinement ("make it more vibrant", "add a caption")
- Wants to save images to cloud storage (S3, R2, Tigris)
- Describes a multi-step image workflow (generate → transform → save)
- Also: charts, diagrams, QR codes, screenshots
Simple Tasks (Use CLI)
For one-shot operations, use the floimg CLI:
# Resize an image
npx -y @teamflojo/floimg resize hero.png 1200x630 -o ./og-image.png
# Convert format
npx -y @teamflojo/floimg convert image.png -o image.webp
# Add caption
npx -y @teamflojo/floimg caption image.png "© 2025 Acme" -o ./watermarked.png
# AI image (requires OPENAI_API_KEY)
npx -y @teamflojo/floimg generate --generator openai --prompt "..." -o ./image.png
# Also: charts, diagrams, QR, screenshots
npx -y @teamflojo/floimg qr "https://example.com" -o ./qr.png
npx -y @teamflojo/floimg chart bar --labels "Q1,Q2,Q3" --values "10,20,30" -o ./chart.png
These work immediately with no configuration.
Complex Tasks (Use MCP)
For multi-step workflows, iteration, and transforms, use MCP tools:
Available MCP Tools
generate_image - Generate with intent-based routing
transform_image - Apply transforms to existing images
save_image - Save to filesystem or cloud
run_pipeline - Execute multi-step workflows
analyze_image - AI vision analysis
If MCP is not available
For complex workflows, inform the user:
"Multi-step image workflows work best with MCP. Restart Claude Code once to enable the floimg MCP server for session state and iteration."
Why Session State Matters
This is FloImg's core advantage over raw LLM + DALL-E:
| Task |
Without FloImg |
With FloImg MCP |
| "Create a hero image" |
Generates image |
Generates + stores as img_001 |
| "Make it 1200x630" |
Re-generates entirely (different image!) |
Resizes exact pixels |
| "Make it bluer" |
Start over |
Adjusts hue on existing image |
The key insight: When you say "make it more vibrant," FloImg adjusts the existing image—it doesn't re-generate a new one. AI handles creation. FloImg handles precision.
Generator Selection Guide
| User Intent |
Generator |
Method |
| Photo/illustration/hero/scene |
openai |
MCP generate_image or CLI |
| Product mockup, creative |
openai |
MCP for iteration |
| Bar/line/pie chart |
quickchart |
CLI chart TYPE |
| Flowchart/sequence/diagram |
mermaid |
CLI diagram "CODE" |
| QR code/barcode |
qr |
CLI qr "TEXT" |
| Webpage screenshot |
screenshot |
CLI screenshot "URL" |
Workflow Patterns
Pattern 1: AI Image with Transforms (MCP preferred)
User: "Create a hero image for my blog, resize to 1200x630, add my tagline"
1. generate_image({ intent: "hero image for tech blog about AI" }) → imageId
2. transform_image({ imageId, operation: "resize", params: { width: 1200, height: 630 } })
3. transform_image({ imageId, operation: "addCaption", params: { text: "AI for Everyone" } })
4. save_image({ imageId, destination: "./hero.png" })
Pattern 2: Iterative Refinement (MCP required)
User: "Create a hero image for my blog"
→ generate_image(...) → imageId: "img_001"
User: "Make it more vibrant"
→ transform_image({ imageId: "img_001", operation: "modulate", params: { saturation: 1.3 } })
User: "Add a caption"
→ transform_image({ imageId: "img_002", operation: "addCaption", params: { text: "..." } })
Session state is crucial here: Each transform references the previous result by imageId. No file uploads, no re-generation—just precise refinements.
Pattern 3: Full Pipeline (MCP)
User: "Create a hero image, resize for social, add caption, upload to S3"
run_pipeline({
steps: [
{ generate: { intent: "hero image..." } },
{ transform: { operation: "resize", params: { width: 1200, height: 630 } } },
{ transform: { operation: "addCaption", params: { text: "...", position: "bottom" } } },
{ save: { destination: "s3://bucket/hero.png" } }
]
})
Best Practices
- AI workflows → MCP: Generate + transform + iterate benefits from session state
- Simple generators → CLI:
/floimg:qr, /floimg:chart for one-shot output
- Use imageId for chaining: Reference previous images without file juggling
- Resize last: Apply quality-degrading transforms before final resize
- Choose right format: PNG for photos, WebP for web, SVG for diagrams
For detailed API reference, see reference.md.
For common workflow examples, see examples.md.
1---2name: image-workflows3description: Create and execute image workflows using floimg. Use when the user needs to generate AI images, transform existing images (resize, caption, filters), or create multi-step pipelines. Also handles chart4---5
6---
7name: image-workflows
8description: Create and execute image workflows using floimg. Use when the user needs to generate AI images, transform existing images (resize, caption, filters), or create multi-step pipelines. Also handles charts, diagrams, QR codes, and screenshots. Trigger words: image, picture, photo, illustration, hero, thumbnail, resize, transform, caption, watermark, generate, AI, DALL-E, chart, diagram, QR, screenshot.
9allowed-tools: mcp__floimg__generate_image, mcp__floimg__transform_image, mcp__floimg__save_image, mcp__floimg__run_pipeline, mcp__floimg__analyze_image, Bash
10---
11
12# Image Workflows Skill
13
14This skill enables you to create and execute image workflows using floimg—the composable workflow engine with two core differentiators:
15
161. **Deterministic Transforms**: AI image modification is probabilistic—DALL-E generates new images, inpainting runs diffusion. FloImg applies deterministic transforms: adjust hue mathematically, resize to exact dimensions. The image stays intact except for exactly what you requested.
17
182. **A Unified API**: FloImg models image manipulation as a series of composable steps. This functional approach consolidates the patchwork of tools and SDKs into one abstraction layer—portable across SDK, CLI, visual builder, and MCP.
19
20## Architecture: CLI Simple, MCP Complex
21
22floimg uses a hybrid approach:
23
24| Task Type | Method | Works Immediately? |
25| ------------------------------------------ | ------------- | ------------------ |
26| Complex (AI images, multi-step, iteration) | MCP | After restart |
27| Simple (QR, chart, diagram, screenshot) | CLI via `npx` | Yes |
28
29## When to Use This Skill
30
31Activate this skill when the user:
32
33- Wants to generate AI images (DALL-E, etc.) with professional finishing
34- Needs to transform images (resize, add caption, adjust colors, apply filters)
35- Wants iterative refinement ("make it more vibrant", "add a caption")
36- Wants to save images to cloud storage (S3, R2, Tigris)
37- Describes a multi-step image workflow (generate → transform → save)
38- Also: charts, diagrams, QR codes, screenshots
39
40## Simple Tasks (Use CLI)
41
42For one-shot operations, use the floimg CLI:
43
44```bash
45# Resize an image
46npx -y @teamflojo/floimg resize hero.png 1200x630 -o ./og-image.png
47
48# Convert format
49npx -y @teamflojo/floimg convert image.png -o image.webp
50
51# Add caption
52npx -y @teamflojo/floimg caption image.png "© 2025 Acme" -o ./watermarked.png
53
54# AI image (requires OPENAI_API_KEY)
55npx -y @teamflojo/floimg generate --generator openai --prompt "..." -o ./image.png
56
57# Also: charts, diagrams, QR, screenshots
58npx -y @teamflojo/floimg qr "https://example.com" -o ./qr.png
59npx -y @teamflojo/floimg chart bar --labels "Q1,Q2,Q3" --values "10,20,30" -o ./chart.png
60```
61
62These work immediately with no configuration.
63
64## Complex Tasks (Use MCP)
65
66For multi-step workflows, iteration, and transforms, use MCP tools:
67
68### Available MCP Tools
69
70- `generate_image` - Generate with intent-based routing
71- `transform_image` - Apply transforms to existing images
72- `save_image` - Save to filesystem or cloud
73- `run_pipeline` - Execute multi-step workflows
74- `analyze_image` - AI vision analysis
75
76### If MCP is not available
77
78For complex workflows, inform the user:
79"Multi-step image workflows work best with MCP. Restart Claude Code once to enable the floimg MCP server for session state and iteration."
80
81## Why Session State Matters
82
83This is FloImg's core advantage over raw LLM + DALL-E:
84
85| Task | Without FloImg | With FloImg MCP |
86| --------------------- | ---------------------------------------- | ------------------------------- |
87| "Create a hero image" | Generates image | Generates + stores as `img_001` |
88| "Make it 1200x630" | Re-generates entirely (different image!) | Resizes exact pixels |
89| "Make it bluer" | Start over | Adjusts hue on existing image |
90
91**The key insight**: When you say "make it more vibrant," FloImg adjusts the existing image—it doesn't re-generate a new one. AI handles creation. FloImg handles precision.
92
93## Generator Selection Guide
94
95| User Intent | Generator | Method |
96| ----------------------------- | ---------- | --------------------------- |
97| Photo/illustration/hero/scene | openai | MCP `generate_image` or CLI |
98| Product mockup, creative | openai | MCP for iteration |
99| Bar/line/pie chart | quickchart | CLI `chart TYPE` |
100| Flowchart/sequence/diagram | mermaid | CLI `diagram "CODE"` |
101| QR code/barcode | qr | CLI `qr "TEXT"` |
102| Webpage screenshot | screenshot | CLI `screenshot "URL"` |
103
104## Workflow Patterns
105
106### Pattern 1: AI Image with Transforms (MCP preferred)
107
108```
109User: "Create a hero image for my blog, resize to 1200x630, add my tagline"
110
1111. generate_image({ intent: "hero image for tech blog about AI" }) → imageId
1122. transform_image({ imageId, operation: "resize", params: { width: 1200, height: 630 } })
1133. transform_image({ imageId, operation: "addCaption", params: { text: "AI for Everyone" } })
1144. save_image({ imageId, destination: "./hero.png" })
115```
116
117### Pattern 2: Iterative Refinement (MCP required)
118
119```
120User: "Create a hero image for my blog"
121→ generate_image(...) → imageId: "img_001"
122
123User: "Make it more vibrant"
124→ transform_image({ imageId: "img_001", operation: "modulate", params: { saturation: 1.3 } })
125
126User: "Add a caption"
127→ transform_image({ imageId: "img_002", operation: "addCaption", params: { text: "..." } })
128```
129
130**Session state is crucial here**: Each transform references the previous result by imageId. No file uploads, no re-generation—just precise refinements.
131
132### Pattern 3: Full Pipeline (MCP)
133
134```
135User: "Create a hero image, resize for social, add caption, upload to S3"
136
137run_pipeline({
138 steps: [
139 { generate: { intent: "hero image..." } },
140 { transform: { operation: "resize", params: { width: 1200, height: 630 } } },
141 { transform: { operation: "addCaption", params: { text: "...", position: "bottom" } } },
142 { save: { destination: "s3://bucket/hero.png" } }
143 ]
144})
145```
146
147## Best Practices
148
1491. **AI workflows → MCP**: Generate + transform + iterate benefits from session state
1502. **Simple generators → CLI**: `/floimg:qr`, `/floimg:chart` for one-shot output
1513. **Use imageId for chaining**: Reference previous images without file juggling
1524. **Resize last**: Apply quality-degrading transforms before final resize
1535. **Choose right format**: PNG for photos, WebP for web, SVG for diagrams
154
155For detailed API reference, see [reference.md](reference.md).
156For common workflow examples, see [examples.md](examples.md).