@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.
Files changed (87) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/LICENSE +24 -0
  3. package/README.md +118 -0
  4. package/bin/opencrew.js +8 -0
  5. package/package.json +57 -0
  6. package/src/cli.js +70 -0
  7. package/src/commands/init.js +97 -0
  8. package/src/commands/update.js +58 -0
  9. package/src/lib/fsx.js +55 -0
  10. package/src/lib/ides.js +120 -0
  11. package/src/lib/paths.js +8 -0
  12. package/src/lib/prompts.js +35 -0
  13. package/src/lib/ui.js +20 -0
  14. package/templates/.env.example +23 -0
  15. package/templates/.mcp.json +8 -0
  16. package/templates/AGENTS.md +105 -0
  17. package/templates/_opencrew/.opencrew-version +1 -0
  18. package/templates/_opencrew/_investigations/.gitkeep +0 -0
  19. package/templates/_opencrew/_memory/company.md +4 -0
  20. package/templates/_opencrew/_memory/preferences.md +9 -0
  21. package/templates/_opencrew/config/playwright.config.json +11 -0
  22. package/templates/_opencrew/core/architect.agent.yaml +110 -0
  23. package/templates/_opencrew/core/best-practices/_catalog.yaml +116 -0
  24. package/templates/_opencrew/core/best-practices/blog-post.md +151 -0
  25. package/templates/_opencrew/core/best-practices/blog-seo.md +146 -0
  26. package/templates/_opencrew/core/best-practices/copywriting.md +446 -0
  27. package/templates/_opencrew/core/best-practices/data-analysis.md +420 -0
  28. package/templates/_opencrew/core/best-practices/email-newsletter.md +136 -0
  29. package/templates/_opencrew/core/best-practices/email-sales.md +127 -0
  30. package/templates/_opencrew/core/best-practices/image-design.md +365 -0
  31. package/templates/_opencrew/core/best-practices/instagram-feed.md +252 -0
  32. package/templates/_opencrew/core/best-practices/instagram-reels.md +128 -0
  33. package/templates/_opencrew/core/best-practices/instagram-stories.md +123 -0
  34. package/templates/_opencrew/core/best-practices/linkedin-article.md +133 -0
  35. package/templates/_opencrew/core/best-practices/linkedin-post.md +138 -0
  36. package/templates/_opencrew/core/best-practices/researching.md +366 -0
  37. package/templates/_opencrew/core/best-practices/review.md +286 -0
  38. package/templates/_opencrew/core/best-practices/social-networks-publishing.md +311 -0
  39. package/templates/_opencrew/core/best-practices/strategist.md +361 -0
  40. package/templates/_opencrew/core/best-practices/technical-writing.md +382 -0
  41. package/templates/_opencrew/core/best-practices/twitter-post.md +122 -0
  42. package/templates/_opencrew/core/best-practices/twitter-thread.md +139 -0
  43. package/templates/_opencrew/core/best-practices/whatsapp-broadcast.md +124 -0
  44. package/templates/_opencrew/core/best-practices/youtube-script.md +139 -0
  45. package/templates/_opencrew/core/best-practices/youtube-shorts.md +129 -0
  46. package/templates/_opencrew/core/prompts/build.prompt.md +547 -0
  47. package/templates/_opencrew/core/prompts/design.prompt.md +469 -0
  48. package/templates/_opencrew/core/prompts/discovery.prompt.md +269 -0
  49. package/templates/_opencrew/core/prompts/sherlock-instagram.md +123 -0
  50. package/templates/_opencrew/core/prompts/sherlock-linkedin.md +73 -0
  51. package/templates/_opencrew/core/prompts/sherlock-shared.md +684 -0
  52. package/templates/_opencrew/core/prompts/sherlock-twitter.md +78 -0
  53. package/templates/_opencrew/core/prompts/sherlock-youtube.md +85 -0
  54. package/templates/_opencrew/core/runner.pipeline.md +611 -0
  55. package/templates/_opencrew/core/skills.engine.md +388 -0
  56. package/templates/_opencrew/logs/.gitkeep +0 -0
  57. package/templates/crews/.gitkeep +0 -0
  58. package/templates/gitignore +8 -0
  59. package/templates/skills/apify/SKILL.md +55 -0
  60. package/templates/skills/blotato/SKILL.md +63 -0
  61. package/templates/skills/canva/SKILL.md +60 -0
  62. package/templates/skills/image-ai-generator/SKILL.md +124 -0
  63. package/templates/skills/image-ai-generator/scripts/generate.py +175 -0
  64. package/templates/skills/image-creator/SKILL.md +155 -0
  65. package/templates/skills/image-fetcher/SKILL.md +91 -0
  66. package/templates/skills/instagram-publisher/SKILL.md +119 -0
  67. package/templates/skills/instagram-publisher/scripts/publish.js +165 -0
  68. package/templates/skills/opencrew-best-practice-creator/SKILL.md +192 -0
  69. package/templates/skills/opencrew-skill-creator/SKILL.md +420 -0
  70. package/templates/skills/opencrew-skill-creator/agents/analyzer.md +274 -0
  71. package/templates/skills/opencrew-skill-creator/agents/comparator.md +202 -0
  72. package/templates/skills/opencrew-skill-creator/agents/grader.md +223 -0
  73. package/templates/skills/opencrew-skill-creator/assets/eval_review.html +146 -0
  74. package/templates/skills/opencrew-skill-creator/eval-viewer/generate_review.py +471 -0
  75. package/templates/skills/opencrew-skill-creator/eval-viewer/viewer.html +1325 -0
  76. package/templates/skills/opencrew-skill-creator/references/schemas.md +430 -0
  77. package/templates/skills/opencrew-skill-creator/references/skill-format.md +235 -0
  78. package/templates/skills/opencrew-skill-creator/scripts/__init__.py +0 -0
  79. package/templates/skills/opencrew-skill-creator/scripts/aggregate_benchmark.py +401 -0
  80. package/templates/skills/opencrew-skill-creator/scripts/quick_validate.py +103 -0
  81. package/templates/skills/opencrew-skill-creator/scripts/run_eval.py +310 -0
  82. package/templates/skills/opencrew-skill-creator/scripts/utils.py +47 -0
  83. package/templates/skills/resend/SKILL.md +80 -0
  84. package/templates/skills/template-designer/SKILL.md +208 -0
  85. package/templates/skills/template-designer/base-templates/model-a.html +27 -0
  86. package/templates/skills/template-designer/base-templates/model-b.html +31 -0
  87. 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