@aksp/opencrew 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/LICENSE +24 -0
- package/README.md +118 -0
- package/bin/opencrew.js +8 -0
- package/package.json +57 -0
- package/src/cli.js +70 -0
- package/src/commands/init.js +97 -0
- package/src/commands/update.js +58 -0
- package/src/lib/fsx.js +55 -0
- package/src/lib/ides.js +120 -0
- package/src/lib/paths.js +8 -0
- package/src/lib/prompts.js +35 -0
- package/src/lib/ui.js +20 -0
- package/templates/.env.example +23 -0
- package/templates/.mcp.json +8 -0
- package/templates/AGENTS.md +105 -0
- package/templates/_opencrew/.opencrew-version +1 -0
- package/templates/_opencrew/_investigations/.gitkeep +0 -0
- package/templates/_opencrew/_memory/company.md +4 -0
- package/templates/_opencrew/_memory/preferences.md +9 -0
- package/templates/_opencrew/config/playwright.config.json +11 -0
- package/templates/_opencrew/core/architect.agent.yaml +110 -0
- package/templates/_opencrew/core/best-practices/_catalog.yaml +116 -0
- package/templates/_opencrew/core/best-practices/blog-post.md +151 -0
- package/templates/_opencrew/core/best-practices/blog-seo.md +146 -0
- package/templates/_opencrew/core/best-practices/copywriting.md +446 -0
- package/templates/_opencrew/core/best-practices/data-analysis.md +420 -0
- package/templates/_opencrew/core/best-practices/email-newsletter.md +136 -0
- package/templates/_opencrew/core/best-practices/email-sales.md +127 -0
- package/templates/_opencrew/core/best-practices/image-design.md +365 -0
- package/templates/_opencrew/core/best-practices/instagram-feed.md +252 -0
- package/templates/_opencrew/core/best-practices/instagram-reels.md +128 -0
- package/templates/_opencrew/core/best-practices/instagram-stories.md +123 -0
- package/templates/_opencrew/core/best-practices/linkedin-article.md +133 -0
- package/templates/_opencrew/core/best-practices/linkedin-post.md +138 -0
- package/templates/_opencrew/core/best-practices/researching.md +366 -0
- package/templates/_opencrew/core/best-practices/review.md +286 -0
- package/templates/_opencrew/core/best-practices/social-networks-publishing.md +311 -0
- package/templates/_opencrew/core/best-practices/strategist.md +361 -0
- package/templates/_opencrew/core/best-practices/technical-writing.md +382 -0
- package/templates/_opencrew/core/best-practices/twitter-post.md +122 -0
- package/templates/_opencrew/core/best-practices/twitter-thread.md +139 -0
- package/templates/_opencrew/core/best-practices/whatsapp-broadcast.md +124 -0
- package/templates/_opencrew/core/best-practices/youtube-script.md +139 -0
- package/templates/_opencrew/core/best-practices/youtube-shorts.md +129 -0
- package/templates/_opencrew/core/prompts/build.prompt.md +547 -0
- package/templates/_opencrew/core/prompts/design.prompt.md +469 -0
- package/templates/_opencrew/core/prompts/discovery.prompt.md +269 -0
- package/templates/_opencrew/core/prompts/sherlock-instagram.md +123 -0
- package/templates/_opencrew/core/prompts/sherlock-linkedin.md +73 -0
- package/templates/_opencrew/core/prompts/sherlock-shared.md +684 -0
- package/templates/_opencrew/core/prompts/sherlock-twitter.md +78 -0
- package/templates/_opencrew/core/prompts/sherlock-youtube.md +85 -0
- package/templates/_opencrew/core/runner.pipeline.md +611 -0
- package/templates/_opencrew/core/skills.engine.md +388 -0
- package/templates/_opencrew/logs/.gitkeep +0 -0
- package/templates/crews/.gitkeep +0 -0
- package/templates/gitignore +8 -0
- package/templates/skills/apify/SKILL.md +55 -0
- package/templates/skills/blotato/SKILL.md +63 -0
- package/templates/skills/canva/SKILL.md +60 -0
- package/templates/skills/image-ai-generator/SKILL.md +124 -0
- package/templates/skills/image-ai-generator/scripts/generate.py +175 -0
- package/templates/skills/image-creator/SKILL.md +155 -0
- package/templates/skills/image-fetcher/SKILL.md +91 -0
- package/templates/skills/instagram-publisher/SKILL.md +119 -0
- package/templates/skills/instagram-publisher/scripts/publish.js +165 -0
- package/templates/skills/opencrew-best-practice-creator/SKILL.md +192 -0
- package/templates/skills/opencrew-skill-creator/SKILL.md +420 -0
- package/templates/skills/opencrew-skill-creator/agents/analyzer.md +274 -0
- package/templates/skills/opencrew-skill-creator/agents/comparator.md +202 -0
- package/templates/skills/opencrew-skill-creator/agents/grader.md +223 -0
- package/templates/skills/opencrew-skill-creator/assets/eval_review.html +146 -0
- package/templates/skills/opencrew-skill-creator/eval-viewer/generate_review.py +471 -0
- package/templates/skills/opencrew-skill-creator/eval-viewer/viewer.html +1325 -0
- package/templates/skills/opencrew-skill-creator/references/schemas.md +430 -0
- package/templates/skills/opencrew-skill-creator/references/skill-format.md +235 -0
- package/templates/skills/opencrew-skill-creator/scripts/__init__.py +0 -0
- package/templates/skills/opencrew-skill-creator/scripts/aggregate_benchmark.py +401 -0
- package/templates/skills/opencrew-skill-creator/scripts/quick_validate.py +103 -0
- package/templates/skills/opencrew-skill-creator/scripts/run_eval.py +310 -0
- package/templates/skills/opencrew-skill-creator/scripts/utils.py +47 -0
- package/templates/skills/resend/SKILL.md +80 -0
- package/templates/skills/template-designer/SKILL.md +208 -0
- package/templates/skills/template-designer/base-templates/model-a.html +27 -0
- package/templates/skills/template-designer/base-templates/model-b.html +31 -0
- package/templates/skills/template-designer/base-templates/model-c.html +42 -0
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: image-ai-generator
|
|
3
|
+
description: >
|
|
4
|
+
Generates images via Openrouter API using AI image models.
|
|
5
|
+
Supports two modes: test (cheap model for iteration) and production (high-quality model for final output).
|
|
6
|
+
Handles prompt construction, API calls, base64 decoding, and file saving.
|
|
7
|
+
Supports reference images (logos, mascots) for brand-consistent generation.
|
|
8
|
+
description_pt-BR: >
|
|
9
|
+
Gera imagens via API do Openrouter usando modelos de IA.
|
|
10
|
+
Suporta dois modos: test (modelo barato para iteração) e production (modelo de alta qualidade para output final).
|
|
11
|
+
Cuida da construção de prompts, chamadas de API, decodificação base64 e salvamento de arquivos.
|
|
12
|
+
Suporta imagens de referência (logos, mascotes) para geração consistente com a marca.
|
|
13
|
+
type: script
|
|
14
|
+
version: "1.0.0"
|
|
15
|
+
script:
|
|
16
|
+
path: scripts/generate.py
|
|
17
|
+
runtime: python3
|
|
18
|
+
invoke: "python3 {skill_path}/scripts/generate.py --prompt \"{prompt}\" --output \"{output}\" --mode \"{mode}\""
|
|
19
|
+
env:
|
|
20
|
+
- OPENROUTER_API_KEY
|
|
21
|
+
categories: [assets, images, ai, generation]
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# Image Generator
|
|
25
|
+
|
|
26
|
+
## When to use
|
|
27
|
+
|
|
28
|
+
Use the Image Generator when you need to create visual assets from text prompts. This skill calls the Openrouter API with AI image generation models and saves the resulting images locally.
|
|
29
|
+
|
|
30
|
+
**IMPORTANT: Think twice before generating images.** Image generation costs money and takes time. Before generating:
|
|
31
|
+
1. Check if a suitable image already exists in the crew's assets folder
|
|
32
|
+
2. Check if a web search could find a free/open image that works
|
|
33
|
+
3. Consider if the image is truly necessary for the content quality
|
|
34
|
+
4. Only generate when no existing alternative is good enough
|
|
35
|
+
5. **Generate only what you need** — never batch-generate "test variations". One image is enough to validate a concept.
|
|
36
|
+
|
|
37
|
+
## Modes
|
|
38
|
+
|
|
39
|
+
### Test mode (`--mode test`)
|
|
40
|
+
- **Model:** `sourceful/riverflow-v2-fast`
|
|
41
|
+
- **When to use:** During iteration, testing layouts, checking composition, reviewing concepts
|
|
42
|
+
- **Cost:** ~R$0.01-0.02 per image (very low)
|
|
43
|
+
- **Quality:** Good enough for layout validation, not for final output
|
|
44
|
+
|
|
45
|
+
### Production mode (`--mode production`)
|
|
46
|
+
- **Model:** `google/gemini-3.1-flash-image-preview`
|
|
47
|
+
- **When to use:** Only when generating the final images that will be published or delivered
|
|
48
|
+
- **Cost:** ~R$0.07-0.10 per image
|
|
49
|
+
- **Quality:** High quality, suitable for social media and publishing
|
|
50
|
+
|
|
51
|
+
**Default mode is `test`.** Only switch to `production` when the user has approved the layout/composition and you are generating the final deliverable images.
|
|
52
|
+
|
|
53
|
+
## Instructions
|
|
54
|
+
|
|
55
|
+
### Single image generation
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
python3 skills/image-generator/scripts/generate.py \
|
|
59
|
+
--prompt "A detailed description of the image to generate" \
|
|
60
|
+
--output "crews/{crew}/output/{run_id}/assets/image-name.jpg" \
|
|
61
|
+
--mode test
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### With a reference image (logo, mascot, brand asset)
|
|
65
|
+
|
|
66
|
+
Use `--reference` to send a local image to the model as visual context. The model will incorporate the referenced image (e.g., a logo or mascot) into the generated output.
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
python3 skills/image-generator/scripts/generate.py \
|
|
70
|
+
--prompt "A social media banner featuring the company logo prominently in the center" \
|
|
71
|
+
--output "crews/{crew}/output/{run_id}/assets/banner.jpg" \
|
|
72
|
+
--reference "crews/{crew}/assets/logo.png" \
|
|
73
|
+
--mode production
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Supported reference formats: PNG, JPEG, WEBP, GIF.
|
|
77
|
+
|
|
78
|
+
### Batch generation
|
|
79
|
+
|
|
80
|
+
```bash
|
|
81
|
+
python3 skills/image-generator/scripts/generate.py \
|
|
82
|
+
--batch "crews/{crew}/output/{run_id}/assets/batch.json" \
|
|
83
|
+
--mode production
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
The batch JSON file should contain:
|
|
87
|
+
```json
|
|
88
|
+
[
|
|
89
|
+
{"prompt": "Description of image 1", "output": "path/to/image1.jpg"},
|
|
90
|
+
{"prompt": "Description of image 2", "output": "path/to/image2.jpg"}
|
|
91
|
+
]
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Each item can optionally include a `"reference": "path/to/ref.png"` field.
|
|
95
|
+
|
|
96
|
+
### Prompt guidelines
|
|
97
|
+
|
|
98
|
+
- Be specific about composition, lighting, style, and mood
|
|
99
|
+
- Specify aspect ratio or orientation when relevant (e.g., "portrait 3:4", "landscape 16:9")
|
|
100
|
+
- Include "hyper realistic, 4K quality" for photographic styles
|
|
101
|
+
- Include "clean composition" to avoid cluttered outputs
|
|
102
|
+
- Avoid requesting text in images — AI models struggle with text rendering
|
|
103
|
+
|
|
104
|
+
### Cost awareness
|
|
105
|
+
|
|
106
|
+
- Each production image costs approximately R$0.07-0.10
|
|
107
|
+
- Each test image costs approximately R$0.01-0.02
|
|
108
|
+
- A typical carousel with 8 images costs ~R$0.60-0.80 in production mode
|
|
109
|
+
- **Always use test mode first**, then regenerate only the approved concepts in production mode
|
|
110
|
+
- When testing, generate **1 image only** — not 3, not 5, just 1
|
|
111
|
+
|
|
112
|
+
## Available operations
|
|
113
|
+
|
|
114
|
+
- **Single generation** — Generate one image from a text prompt
|
|
115
|
+
- **Batch generation** — Generate multiple images from a JSON batch file
|
|
116
|
+
- **Mode selection** — Choose between test (cheap) and production (high-quality) models
|
|
117
|
+
- **Reference image** — Send a logo/mascot/brand asset as visual context for the generation
|
|
118
|
+
|
|
119
|
+
## Error handling
|
|
120
|
+
|
|
121
|
+
- If `OPENROUTER_API_KEY` is not set, the script exits with an error message. Set it in your `.env` file or environment.
|
|
122
|
+
- If the API returns an error, the script prints the error code and body, then exits with code 1.
|
|
123
|
+
- If no image is found in the API response, the script reports which model was used and exits with code 1.
|
|
124
|
+
- For batch mode, partial failures are reported with a success count summary.
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
#!/usr/bin/env python3
|
|
2
|
+
"""
|
|
3
|
+
Image Generator — opencrew Skill
|
|
4
|
+
Generates images via Openrouter API using AI image models.
|
|
5
|
+
|
|
6
|
+
Usage:
|
|
7
|
+
# Single image
|
|
8
|
+
python3 generate.py --prompt "description" --output "path/to/image.jpg" --mode test
|
|
9
|
+
|
|
10
|
+
# Single image with reference (logo/mascot)
|
|
11
|
+
python3 generate.py --prompt "description" --output "path/to/image.jpg" --reference "path/to/logo.png" --mode production
|
|
12
|
+
|
|
13
|
+
# Batch (JSON file with list of {prompt, output} objects)
|
|
14
|
+
python3 generate.py --batch "path/to/batch.json" --mode production
|
|
15
|
+
"""
|
|
16
|
+
|
|
17
|
+
import argparse
|
|
18
|
+
import base64
|
|
19
|
+
import json
|
|
20
|
+
import os
|
|
21
|
+
import sys
|
|
22
|
+
import time
|
|
23
|
+
import urllib.request
|
|
24
|
+
import urllib.error
|
|
25
|
+
|
|
26
|
+
# Model configuration per mode
|
|
27
|
+
MODELS = {
|
|
28
|
+
"test": "sourceful/riverflow-v2-fast",
|
|
29
|
+
"production": "google/gemini-3.1-flash-image-preview",
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
API_URL = "https://openrouter.ai/api/v1/chat/completions"
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
def load_api_key():
|
|
36
|
+
"""Load OPENROUTER_API_KEY from environment."""
|
|
37
|
+
key = os.environ.get("OPENROUTER_API_KEY")
|
|
38
|
+
if not key:
|
|
39
|
+
# Try loading from .env in project root
|
|
40
|
+
env_candidates = [
|
|
41
|
+
os.path.join(os.getcwd(), ".env"),
|
|
42
|
+
os.path.join(os.path.dirname(__file__), "..", "..", "..", ".env"),
|
|
43
|
+
]
|
|
44
|
+
for env_path in env_candidates:
|
|
45
|
+
env_path = os.path.abspath(env_path)
|
|
46
|
+
if os.path.exists(env_path):
|
|
47
|
+
with open(env_path, "r") as f:
|
|
48
|
+
for line in f:
|
|
49
|
+
line = line.strip()
|
|
50
|
+
if line.startswith("OPENROUTER_API_KEY=") and not line.startswith("#"):
|
|
51
|
+
key = line.split("=", 1)[1].strip().strip('"').strip("'")
|
|
52
|
+
break
|
|
53
|
+
if key:
|
|
54
|
+
break
|
|
55
|
+
if not key:
|
|
56
|
+
print("ERROR: OPENROUTER_API_KEY not found in environment or .env file", file=sys.stderr)
|
|
57
|
+
sys.exit(1)
|
|
58
|
+
return key
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
def generate_image(prompt, output_path, mode, api_key, reference_image=None):
|
|
62
|
+
"""Generate a single image and save to output_path."""
|
|
63
|
+
model = MODELS.get(mode, MODELS["test"])
|
|
64
|
+
|
|
65
|
+
os.makedirs(os.path.dirname(os.path.abspath(output_path)), exist_ok=True)
|
|
66
|
+
|
|
67
|
+
if reference_image and os.path.exists(reference_image):
|
|
68
|
+
# Multimodal: send reference image + text prompt
|
|
69
|
+
ext = os.path.splitext(reference_image)[1].lower()
|
|
70
|
+
mime_map = {".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".webp": "image/webp", ".gif": "image/gif"}
|
|
71
|
+
mime = mime_map.get(ext, "image/png")
|
|
72
|
+
with open(reference_image, "rb") as img_f:
|
|
73
|
+
img_b64 = base64.b64encode(img_f.read()).decode("utf-8")
|
|
74
|
+
content = [
|
|
75
|
+
{"type": "image_url", "image_url": {"url": f"data:{mime};base64,{img_b64}"}},
|
|
76
|
+
{"type": "text", "text": f"Generate an image using the logo/mascot shown in the reference image above. {prompt}. Only output the image, no text."}
|
|
77
|
+
]
|
|
78
|
+
else:
|
|
79
|
+
content = f"Generate an image: {prompt}. Only output the image, no text."
|
|
80
|
+
|
|
81
|
+
payload = json.dumps({
|
|
82
|
+
"model": model,
|
|
83
|
+
"messages": [{
|
|
84
|
+
"role": "user",
|
|
85
|
+
"content": content
|
|
86
|
+
}]
|
|
87
|
+
}).encode("utf-8")
|
|
88
|
+
|
|
89
|
+
req = urllib.request.Request(
|
|
90
|
+
API_URL,
|
|
91
|
+
data=payload,
|
|
92
|
+
headers={
|
|
93
|
+
"Authorization": f"Bearer {api_key}",
|
|
94
|
+
"Content-Type": "application/json",
|
|
95
|
+
},
|
|
96
|
+
)
|
|
97
|
+
|
|
98
|
+
try:
|
|
99
|
+
with urllib.request.urlopen(req, timeout=120) as resp:
|
|
100
|
+
data = json.loads(resp.read().decode("utf-8"))
|
|
101
|
+
except urllib.error.HTTPError as e:
|
|
102
|
+
error_body = e.read().decode("utf-8", errors="replace")
|
|
103
|
+
print(f" API error [{e.code}]: {error_body[:200]}", file=sys.stderr)
|
|
104
|
+
return False
|
|
105
|
+
except Exception as e:
|
|
106
|
+
print(f" Request error: {e}", file=sys.stderr)
|
|
107
|
+
return False
|
|
108
|
+
|
|
109
|
+
images = data.get("choices", [{}])[0].get("message", {}).get("images", [])
|
|
110
|
+
if not images:
|
|
111
|
+
# Some models return image in content as base64
|
|
112
|
+
content_resp = data.get("choices", [{}])[0].get("message", {}).get("content", "")
|
|
113
|
+
if content_resp and isinstance(content_resp, str) and content_resp.startswith("data:image"):
|
|
114
|
+
img_data = content_resp.split(",", 1)[1] if "," in content_resp else content_resp
|
|
115
|
+
else:
|
|
116
|
+
print(f" No image returned by model {model}", file=sys.stderr)
|
|
117
|
+
return False
|
|
118
|
+
else:
|
|
119
|
+
img_data = images[0].get("image_url", {}).get("url", "")
|
|
120
|
+
if img_data.startswith("data:"):
|
|
121
|
+
img_data = img_data.split(",", 1)[1]
|
|
122
|
+
|
|
123
|
+
with open(output_path, "wb") as f:
|
|
124
|
+
f.write(base64.b64decode(img_data))
|
|
125
|
+
|
|
126
|
+
size_kb = os.path.getsize(output_path) / 1024
|
|
127
|
+
print(f" OK: {output_path} ({size_kb:.0f} KB)")
|
|
128
|
+
return True
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
def main():
|
|
132
|
+
parser = argparse.ArgumentParser(description="Generate images via Openrouter API")
|
|
133
|
+
parser.add_argument("--prompt", help="Text prompt for single image generation")
|
|
134
|
+
parser.add_argument("--output", help="Output file path for single image")
|
|
135
|
+
parser.add_argument("--batch", help="Path to JSON batch file")
|
|
136
|
+
parser.add_argument("--mode", choices=["test", "production"], default="test",
|
|
137
|
+
help="Generation mode: test (cheap) or production (high-quality)")
|
|
138
|
+
parser.add_argument("--reference", help="Path to reference image to include in the prompt")
|
|
139
|
+
args = parser.parse_args()
|
|
140
|
+
|
|
141
|
+
if not args.prompt and not args.batch:
|
|
142
|
+
parser.error("Either --prompt or --batch is required")
|
|
143
|
+
|
|
144
|
+
api_key = load_api_key()
|
|
145
|
+
model = MODELS[args.mode]
|
|
146
|
+
print(f"Image Generator — Mode: {args.mode} | Model: {model}")
|
|
147
|
+
|
|
148
|
+
if args.batch:
|
|
149
|
+
# Batch mode
|
|
150
|
+
with open(args.batch, "r") as f:
|
|
151
|
+
items = json.load(f)
|
|
152
|
+
print(f"Generating {len(items)} images...\n")
|
|
153
|
+
success = 0
|
|
154
|
+
for i, item in enumerate(items, 1):
|
|
155
|
+
prompt = item["prompt"]
|
|
156
|
+
output = item["output"]
|
|
157
|
+
ref = item.get("reference")
|
|
158
|
+
print(f"[{i}/{len(items)}] {os.path.basename(output)}...")
|
|
159
|
+
if generate_image(prompt, output, args.mode, api_key, reference_image=ref):
|
|
160
|
+
success += 1
|
|
161
|
+
if i < len(items):
|
|
162
|
+
time.sleep(1) # Rate limiting
|
|
163
|
+
print(f"\nDone: {success}/{len(items)} images generated.")
|
|
164
|
+
sys.exit(0 if success == len(items) else 1)
|
|
165
|
+
else:
|
|
166
|
+
# Single mode
|
|
167
|
+
if not args.output:
|
|
168
|
+
parser.error("--output is required for single image generation")
|
|
169
|
+
print(f"Generating: {os.path.basename(args.output)}...")
|
|
170
|
+
ok = generate_image(args.prompt, args.output, args.mode, api_key, reference_image=args.reference)
|
|
171
|
+
sys.exit(0 if ok else 1)
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
if __name__ == "__main__":
|
|
175
|
+
main()
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: image-creator
|
|
3
|
+
description: >
|
|
4
|
+
Renders HTML/CSS into production-ready images via Playwright.
|
|
5
|
+
Accepts complete HTML content, opens it in a headless browser at
|
|
6
|
+
the specified viewport, and captures a pixel-perfect screenshot.
|
|
7
|
+
Generic engine -- any visual format is defined by the HTML template.
|
|
8
|
+
description_pt-BR: >
|
|
9
|
+
Renderiza HTML/CSS em imagens prontas para produção via Playwright.
|
|
10
|
+
Aceita conteúdo HTML completo, abre em um navegador headless na
|
|
11
|
+
viewport especificada e captura uma screenshot pixel-perfect.
|
|
12
|
+
Motor genérico -- qualquer formato visual é definido pelo template HTML.
|
|
13
|
+
description_es: >
|
|
14
|
+
Renderiza HTML/CSS en imágenes listas para producción vía Playwright.
|
|
15
|
+
Acepta contenido HTML completo, lo abre en un navegador headless en
|
|
16
|
+
el viewport especificado y captura una screenshot pixel-perfect.
|
|
17
|
+
Motor genérico -- cualquier formato visual se define por el template HTML.
|
|
18
|
+
type: mcp
|
|
19
|
+
version: "1.0.0"
|
|
20
|
+
mcp:
|
|
21
|
+
server_name: playwright
|
|
22
|
+
categories: [design, automation, images]
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# Image Creator
|
|
26
|
+
|
|
27
|
+
## When to use
|
|
28
|
+
|
|
29
|
+
Use the Visual Renderer when you need to generate production-ready images from HTML/CSS. This skill uses Playwright to render complete, self-contained HTML files in a headless browser and capture pixel-perfect screenshots. It is the primary engine for creating social media graphics, carousel slides, infographics, and any other visual content defined by HTML templates.
|
|
30
|
+
|
|
31
|
+
## Instructions
|
|
32
|
+
|
|
33
|
+
### Core Workflow
|
|
34
|
+
|
|
35
|
+
1. **Generate HTML** -- Write a complete, self-contained HTML file with inline CSS. The HTML IS the design -- all styling, layout, fonts, colors, and content must be embedded.
|
|
36
|
+
|
|
37
|
+
2. **Save HTML** -- Write the HTML file to the crew's output folder (e.g., `output/slides/slide-01.html`)
|
|
38
|
+
|
|
39
|
+
3. **Start HTTP server** -- Before rendering, start a local HTTP server in the crew's output folder:
|
|
40
|
+
```bash
|
|
41
|
+
python -m http.server 8765 --directory "OUTPUT_DIR" &
|
|
42
|
+
for i in $(seq 1 30); do curl -s http://localhost:8765 > /dev/null 2>&1 && break || sleep 0.1; done
|
|
43
|
+
```
|
|
44
|
+
Replace OUTPUT_DIR with the actual absolute path to the output folder (quote paths that contain spaces).
|
|
45
|
+
|
|
46
|
+
4. **Render** -- Use Playwright to:
|
|
47
|
+
- `browser_navigate` to `http://localhost:8765/slide-01.html` (filename only, not full path)
|
|
48
|
+
- `browser_resize` to target viewport dimensions
|
|
49
|
+
- `browser_take_screenshot` to save as PNG
|
|
50
|
+
|
|
51
|
+
5. **Verify** -- Read the screenshot to confirm quality. Re-render if needed.
|
|
52
|
+
|
|
53
|
+
6. **Stop server** -- After all slides are rendered, stop the HTTP server:
|
|
54
|
+
```bash
|
|
55
|
+
pkill -f "http.server 8765" 2>/dev/null || true
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Viewport Presets (width x height)
|
|
59
|
+
|
|
60
|
+
Use these standard dimensions:
|
|
61
|
+
- Instagram Post: 1080 x 1080
|
|
62
|
+
- Instagram Carousel: 1080 x 1440
|
|
63
|
+
- Instagram Story/Reel: 1080 x 1920
|
|
64
|
+
- Facebook Post: 1200 x 630
|
|
65
|
+
- Twitter/X Post: 1200 x 675
|
|
66
|
+
- LinkedIn Post: 1200 x 627
|
|
67
|
+
- YouTube Thumbnail: 1280 x 720
|
|
68
|
+
- Custom: as specified by the crew
|
|
69
|
+
|
|
70
|
+
### HTML Template Guidelines
|
|
71
|
+
|
|
72
|
+
The HTML you generate MUST:
|
|
73
|
+
- Be self-contained (inline CSS, no external dependencies)
|
|
74
|
+
- Use web-safe fonts OR Google Fonts via `@import`
|
|
75
|
+
- Embed images as absolute paths or base64 data URIs
|
|
76
|
+
- Set exact body dimensions matching the viewport
|
|
77
|
+
- Use `margin: 0; padding: 0; overflow: hidden` on body
|
|
78
|
+
- Account for device pixel ratio if high-res needed
|
|
79
|
+
|
|
80
|
+
Example minimal structure:
|
|
81
|
+
```html
|
|
82
|
+
<!DOCTYPE html>
|
|
83
|
+
<html>
|
|
84
|
+
<head>
|
|
85
|
+
<meta charset="UTF-8">
|
|
86
|
+
<style>
|
|
87
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
88
|
+
body { width: 1080px; height: 1440px; overflow: hidden; }
|
|
89
|
+
/* ... your design ... */
|
|
90
|
+
</style>
|
|
91
|
+
</head>
|
|
92
|
+
<body>
|
|
93
|
+
<!-- Your content -->
|
|
94
|
+
</body>
|
|
95
|
+
</html>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Batch Rendering (Carousels/Multi-slide)
|
|
99
|
+
|
|
100
|
+
For multi-image outputs like carousels:
|
|
101
|
+
1. Generate one HTML file per slide
|
|
102
|
+
2. Start the HTTP server **once** before the batch (step 3 of Core Workflow)
|
|
103
|
+
3. Render each slide sequentially (step 4 repeated per slide)
|
|
104
|
+
4. Stop the HTTP server **once** after all slides are done (step 6 of Core Workflow)
|
|
105
|
+
5. Name output files with zero-padded numbers: slide-01.png, slide-02.png, slide-03.png
|
|
106
|
+
6. Keep all slides at the same viewport dimensions
|
|
107
|
+
|
|
108
|
+
### Best Practices
|
|
109
|
+
|
|
110
|
+
- Always verify the first rendered image before batch rendering
|
|
111
|
+
- Use CSS Grid/Flexbox for layout -- most reliable across renderers
|
|
112
|
+
- Avoid animations/transitions (static screenshot only)
|
|
113
|
+
- For rounded corners on images, use CSS `border-radius` + `overflow`
|
|
114
|
+
- For emoji rendering, rely on system fonts (Windows: Segoe UI Emoji)
|
|
115
|
+
- Test text overflow -- ensure no content is clipped unexpectedly
|
|
116
|
+
- Keep HTML files alongside output PNGs for easy re-rendering
|
|
117
|
+
|
|
118
|
+
### Typography & Readability Rules
|
|
119
|
+
|
|
120
|
+
Text must be legible in the target platform's smallest viewing context (mobile feed for social platforms). Text inside linked or embedded image files (JPG, PNG, base64 assets) is decorative and exempt. All HTML text nodes and inline SVG text are subject to these rules.
|
|
121
|
+
|
|
122
|
+
These are HARD minimums -- never go below them for readable text.
|
|
123
|
+
|
|
124
|
+
#### Minimum Font Sizes by Platform
|
|
125
|
+
|
|
126
|
+
| Text Role | Instagram Post/Carousel | Instagram Story/Reel | LinkedIn/Facebook | YouTube Thumb |
|
|
127
|
+
|------------------|------------------------|----------------------|-------------------|---------------|
|
|
128
|
+
| Hero / Display | 58px | 56px | 40px | 60px |
|
|
129
|
+
| Heading | 43px | 42px | 32px | 36px |
|
|
130
|
+
| Body / Bullets | 34px | 32px | 24px | 36px |
|
|
131
|
+
| Caption / Footer | 24px | 20px | 20px | 32px |
|
|
132
|
+
|
|
133
|
+
**Universal rule**: No text element meant to be read may use a font size smaller than 20px, on any platform.
|
|
134
|
+
|
|
135
|
+
#### Font Weight
|
|
136
|
+
|
|
137
|
+
- Body text and above: use font-weight 500+ (medium/semibold/bold)
|
|
138
|
+
- Caption text: font-weight 500+ strongly recommended; 400 only with explicit high-contrast background (4.5:1 ratio minimum)
|
|
139
|
+
- Avoid thin/light weights (100-300) for any readable text
|
|
140
|
+
|
|
141
|
+
#### Verification Checklist
|
|
142
|
+
|
|
143
|
+
Before calling `browser_take_screenshot`, scan your HTML and confirm:
|
|
144
|
+
- All text elements use explicit px sizes (not em/rem that could resolve smaller)
|
|
145
|
+
- No heading is below the Heading minimum for the target platform
|
|
146
|
+
- No body/bullet text is below the Body minimum
|
|
147
|
+
- No footer or metadata text is below the Caption minimum
|
|
148
|
+
- No readable text uses font-weight below 500 (caption at 400 only with 4.5:1 contrast background)
|
|
149
|
+
|
|
150
|
+
## Available operations
|
|
151
|
+
|
|
152
|
+
- **Render HTML to PNG** -- Convert self-contained HTML/CSS into a pixel-perfect screenshot
|
|
153
|
+
- **Batch Render** -- Render multiple slides/pages sequentially for carousels and multi-image content
|
|
154
|
+
- **Viewport Resize** -- Set precise viewport dimensions for any target platform
|
|
155
|
+
- **Quality Verification** -- Visually inspect rendered output and re-render if needed
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: image-fetcher
|
|
3
|
+
description: >
|
|
4
|
+
Acquires visual assets from multiple sources: web image search,
|
|
5
|
+
live website screenshots via Playwright, and user-provided files.
|
|
6
|
+
Organizes assets in the crew's reference folder.
|
|
7
|
+
description_pt-BR: >
|
|
8
|
+
Obtém assets visuais de múltiplas fontes: busca de imagens na web,
|
|
9
|
+
capturas de sites via Playwright e arquivos fornecidos pelo usuário.
|
|
10
|
+
Organiza os assets na pasta de referência do crew.
|
|
11
|
+
description_es: >
|
|
12
|
+
Obtiene assets visuales de múltiples fuentes: búsqueda de imágenes en la web,
|
|
13
|
+
capturas de sitios vía Playwright y archivos proporcionados por el usuario.
|
|
14
|
+
Organiza los assets en la carpeta de referencia del crew.
|
|
15
|
+
type: hybrid
|
|
16
|
+
version: "1.0.0"
|
|
17
|
+
mcp:
|
|
18
|
+
server_name: playwright
|
|
19
|
+
categories: [assets, scraping, automation, images]
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
# Asset Fetcher
|
|
23
|
+
|
|
24
|
+
## When to use
|
|
25
|
+
|
|
26
|
+
Use the Asset Fetcher when you need to acquire visual assets for content creation. It supports three acquisition modes: web image search, live website screenshots via Playwright, and organizing user-provided files. All assets are saved to the crew's reference or output folder with descriptive filenames and metadata.
|
|
27
|
+
|
|
28
|
+
## Instructions
|
|
29
|
+
|
|
30
|
+
### Capabilities
|
|
31
|
+
|
|
32
|
+
1. **Web Image Search** -- Use the native web_search tool to find images by keyword. Evaluate results and download the best match.
|
|
33
|
+
|
|
34
|
+
2. **Live Screenshot** -- Use Playwright MCP to navigate to a URL, set viewport dimensions, and capture a screenshot.
|
|
35
|
+
|
|
36
|
+
3. **Asset Organization** -- Save all acquired assets with descriptive filenames in the crew's reference/ or output/ folder.
|
|
37
|
+
|
|
38
|
+
### Screenshot Modes
|
|
39
|
+
|
|
40
|
+
- **viewport** -- Capture only the visible viewport area (default)
|
|
41
|
+
- **full_page** -- Capture the entire scrollable page
|
|
42
|
+
- **selector** -- Capture a specific CSS selector element
|
|
43
|
+
|
|
44
|
+
### Screenshot Workflow
|
|
45
|
+
|
|
46
|
+
When taking a screenshot:
|
|
47
|
+
1. Navigate to the URL with `browser_navigate`
|
|
48
|
+
2. Set viewport: `browser_resize` with width/height for target format
|
|
49
|
+
- Instagram post: 1080x1080
|
|
50
|
+
- Instagram carousel: 1080x1440
|
|
51
|
+
- Story/Reel: 1080x1920
|
|
52
|
+
- Generic: 1280x720
|
|
53
|
+
3. Wait for page load (`browser_wait_for` if needed)
|
|
54
|
+
4. Capture: `browser_take_screenshot`
|
|
55
|
+
5. Save to reference folder with descriptive filename
|
|
56
|
+
|
|
57
|
+
### Asset Metadata
|
|
58
|
+
|
|
59
|
+
After acquiring each asset, document in your output:
|
|
60
|
+
- `path`: local file path
|
|
61
|
+
- `width/height`: image dimensions
|
|
62
|
+
- `source_type`: "web_search" | "screenshot" | "user_provided"
|
|
63
|
+
- `original_url`: source URL (if applicable)
|
|
64
|
+
|
|
65
|
+
### Cache Policy
|
|
66
|
+
|
|
67
|
+
Before fetching an asset:
|
|
68
|
+
- Check if the reference folder already has a matching file
|
|
69
|
+
- Use deterministic filenames based on source (e.g., URL slug + viewport)
|
|
70
|
+
- Reuse existing assets to avoid redundant fetches
|
|
71
|
+
|
|
72
|
+
### Safety
|
|
73
|
+
|
|
74
|
+
- Timeout: max 30s per screenshot, skip and warn if exceeded
|
|
75
|
+
- Maximum screenshot dimensions: 1920x1920px
|
|
76
|
+
- Block `file://` protocol URLs
|
|
77
|
+
- Block localhost and private IP ranges (127.0.0.1, 10.x, 192.168.x)
|
|
78
|
+
|
|
79
|
+
### Best Practices
|
|
80
|
+
|
|
81
|
+
- Prefer screenshots over web search for product/tool pages (images are often outdated)
|
|
82
|
+
- Save with descriptive names: `gemini-benchmark-chart.png` not `image1.png`
|
|
83
|
+
- Normalize URLs before caching (strip tracking params)
|
|
84
|
+
- Document all acquired assets with metadata for downstream tools
|
|
85
|
+
|
|
86
|
+
## Available operations
|
|
87
|
+
|
|
88
|
+
- **Web Image Search** -- Find and download images by keyword from the web
|
|
89
|
+
- **Live Screenshot** -- Capture viewport, full-page, or element screenshots of any URL
|
|
90
|
+
- **Asset Organization** -- Save and catalog assets with descriptive filenames and metadata
|
|
91
|
+
- **Cache Check** -- Detect and reuse previously fetched assets to avoid redundant downloads
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: instagram-publisher
|
|
3
|
+
description: >
|
|
4
|
+
Publishes Instagram carousel posts from local images.
|
|
5
|
+
Uploads images to imgBB (requires API key) for public hosting, creates Instagram
|
|
6
|
+
media containers via the Graph API, and publishes the carousel.
|
|
7
|
+
Supports 2-10 images per post and retrieves the real post permalink.
|
|
8
|
+
description_pt-BR: >
|
|
9
|
+
Publica carrosséis do Instagram a partir de imagens locais.
|
|
10
|
+
Faz upload das imagens para o imgBB (requer chave de API) como hospedagem pública,
|
|
11
|
+
cria containers de mídia via Graph API e publica o carrossel.
|
|
12
|
+
Suporta de 2 a 10 imagens por post e obtém o permalink real.
|
|
13
|
+
description_es: >
|
|
14
|
+
Publica carruseles de Instagram a partir de imágenes locales.
|
|
15
|
+
Sube las imágenes a imgBB (requiere clave de API) como hosting público, crea
|
|
16
|
+
contenedores de medios vía Graph API y publica el carrusel.
|
|
17
|
+
Soporta de 2 a 10 imágenes por post y obtiene el permalink real.
|
|
18
|
+
type: script
|
|
19
|
+
version: "1.0.0"
|
|
20
|
+
script:
|
|
21
|
+
path: scripts/publish.js
|
|
22
|
+
runtime: node
|
|
23
|
+
invoke: "node --env-file=.env {skill_path}/scripts/publish.js --images \"{images}\" --caption \"{caption}\""
|
|
24
|
+
env:
|
|
25
|
+
- INSTAGRAM_ACCESS_TOKEN
|
|
26
|
+
- INSTAGRAM_USER_ID
|
|
27
|
+
- IMGBB_API_KEY
|
|
28
|
+
categories: [social-media, publishing, instagram]
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
# Instagram Publisher
|
|
32
|
+
|
|
33
|
+
## When to use
|
|
34
|
+
|
|
35
|
+
Use the Instagram Publisher when you need to publish carousel posts directly to an Instagram Business account. This skill handles the full workflow: uploading images to imgBB (requires your own API key from https://api.imgbb.com/), creating Instagram media containers via the Graph API, and publishing the carousel. It supports 2-10 JPEG images per post.
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## Instructions
|
|
39
|
+
|
|
40
|
+
### Workflow
|
|
41
|
+
|
|
42
|
+
1. List JPEG files in `crews/{crew}/output/images/` sorted by name.
|
|
43
|
+
If no files found: stop and ask the user to add images before continuing.
|
|
44
|
+
2. Present the image list to the user with AskUserQuestion to confirm order.
|
|
45
|
+
3. Extract the caption from the content draft:
|
|
46
|
+
- Use the hook slide text + CTA slide text
|
|
47
|
+
- Max 2200 characters (Instagram limit)
|
|
48
|
+
4. Run the publish script:
|
|
49
|
+
```
|
|
50
|
+
node --env-file=.env crews/{crew}/tools/publish.js \
|
|
51
|
+
--images "<comma-separated-ordered-paths>" \
|
|
52
|
+
--caption "<caption>"
|
|
53
|
+
```
|
|
54
|
+
Add `--dry-run` to test the full flow without actually publishing.
|
|
55
|
+
5. On success: save the post URL and post ID to the step output file.
|
|
56
|
+
6. On failure: display the error and ask the user how to proceed.
|
|
57
|
+
|
|
58
|
+
### Constraints
|
|
59
|
+
|
|
60
|
+
- Images: JPEG only, 2-10 per carousel
|
|
61
|
+
- Caption: max 2200 characters
|
|
62
|
+
- Requires Instagram Business account (not Personal or Creator)
|
|
63
|
+
- Rate limit: 25 API-published posts per 24 hours
|
|
64
|
+
|
|
65
|
+
### Setup (first-time)
|
|
66
|
+
|
|
67
|
+
Copy `.env.example` to `.env` and fill in the two required variables:
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
INSTAGRAM_ACCESS_TOKEN=
|
|
71
|
+
INSTAGRAM_USER_ID=
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
#### INSTAGRAM_ACCESS_TOKEN
|
|
75
|
+
|
|
76
|
+
Pré-requisito: conta Instagram Business conectada a uma Página do Facebook, e um app criado em [developers.facebook.com](https://developers.facebook.com/) (tipo: **Empresa**).
|
|
77
|
+
|
|
78
|
+
**Para obter um token de longa duração (válido 60 dias):**
|
|
79
|
+
|
|
80
|
+
1. Acesse seu app → **Graph API Explorer**
|
|
81
|
+
2. No dropdown do topo, selecione seu app
|
|
82
|
+
3. Clique em **"Gerar token de acesso"**
|
|
83
|
+
4. Ative as permissões:
|
|
84
|
+
- `instagram_content_publish`
|
|
85
|
+
- `instagram_basic`
|
|
86
|
+
- `pages_read_engagement`
|
|
87
|
+
5. Clique em **"Gerar token de acesso"** e autorize — você receberá um token de curta duração (1h)
|
|
88
|
+
6. Converta para longa duração (60 dias) com este GET:
|
|
89
|
+
```
|
|
90
|
+
https://graph.facebook.com/oauth/access_token
|
|
91
|
+
?grant_type=fb_exchange_token
|
|
92
|
+
&client_id={APP_ID}
|
|
93
|
+
&client_secret={APP_SECRET}
|
|
94
|
+
&fb_exchange_token={TOKEN_CURTO}
|
|
95
|
+
```
|
|
96
|
+
_(APP_ID e APP_SECRET: seu app → Configurações → Básico)_
|
|
97
|
+
7. Copie o `access_token` da resposta e cole em `.env`
|
|
98
|
+
|
|
99
|
+
> O token expira em 60 dias. Repita o processo para renovar.
|
|
100
|
+
|
|
101
|
+
#### INSTAGRAM_USER_ID
|
|
102
|
+
|
|
103
|
+
1. No Graph API Explorer (com o token acima), faça GET em:
|
|
104
|
+
```
|
|
105
|
+
/me/accounts
|
|
106
|
+
```
|
|
107
|
+
2. Localize sua **Página do Facebook** na resposta e anote o `id`
|
|
108
|
+
3. Faça GET em:
|
|
109
|
+
```
|
|
110
|
+
/{page-id}?fields=instagram_business_account
|
|
111
|
+
```
|
|
112
|
+
4. Copie o `id` dentro de `instagram_business_account` — esse é o seu User ID
|
|
113
|
+
|
|
114
|
+
## Available operations
|
|
115
|
+
|
|
116
|
+
- **Publish Carousel** -- Upload images and publish a carousel post to Instagram
|
|
117
|
+
- **Dry Run** -- Test the full publishing flow without actually posting (use `--dry-run` flag)
|
|
118
|
+
- **Image Upload** -- Upload local JPEG images to imgBB (requires API key)
|
|
119
|
+
- **Status Check** -- Monitor media container processing status before publishing
|