render
Skill4 starsChanged 7 months agoMITView on GitHub
Generate raster images (PNG, JPEG, WebP) from natural language prompts using Python rendering engines. Covers graphics, charts, layouts, and procedural art. Not for SVG output.
We split this skill into the rules it gives an agent
26 rules. 0 are common, 18 are distinctive, and 8 are very specific to this project.
0
Common
Most of the 11 edited versions we read keep these.
18
Distinctive
This author's own choices. Worth a look.
8
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 14
Read the user's request
- Very specific: line 16
Read the engine's reference doc from ./references/
- Distinctive: line 17
Write a self-contained Python script that outputs to the target path
- Very specific: line 18
Run the script using pdm run python <script.py> (to use the plugin's venv), verify the output, deliver the image
- Distinctive: line 36
If the request mentions "chart", "plot", "graph", "histogram", "scatter", "heatmap", or data columns → Matplotlib/Seaborn (or Plotly for …
- Distinctive: line 39
If the request is about a logo, icon, badge, geometric design, or anything that needs crisp anti-aliased curves → Cairo
- Distinctive: line 41
If the request says "banner", "social media post", "thumbnail" with text overlays on photos → Pillow
- Distinctive: line 43
If the request describes a full-page layout, poster with complex typography, card design, or UI mockup → Playwright
- Very specific: line 45
If the request is about generative/procedural/algorithmic art → Cairo (or Pillow if it's pixel-manipulation art like fractals)
- Distinctive: line 47
When in doubt between Pillow and Cairo → prefer Cairo (better quality)
- Distinctive: line 48
When in doubt between Matplotlib and Plotly → prefer Matplotlib (simpler, faster)
- Distinctive: line 61
When combining engines, save intermediate outputs as temporary PNGs and load them in the second engine.
- Very specific: line 75
All generated files go into the generated/ directory at the plugin root:
- Very specific: line 89
After delivering the final image, clean up intermediate _tmp_* files.
- Distinctive: line 90
Keep the generation script: after completion — the user may want to iterate ("make the text bigger", "change the color") and the script …
- Distinctive: line 93
If the user explicitly asks to clean up, delete both the script and output.
- Distinctive: line 97
Every generation script should follow this pattern:
- Distinctive: line 135
When generating images, aim for professional quality:
- Distinctive: line 137
Whitespace: Leave generous margins (at least 5-8% of canvas size).
- Distinctive: line 139
Color: Use cohesive palettes. When the user doesn't specify colors, choose a palette with 1 primary, 1 accent, 1-2 neutrals.
- Distinctive: line 145
Alignment: Use a grid. Align elements to consistent baselines and gutters.
- Distinctive: line 147
Contrast: Ensure text passes WCAG AA (4.5:1 ratio).
- Very specific: line 152
If a required engine is not installed, follow ./shared/setup.md.
- Very specific: line 153
If a font file is missing, fall back to a safe default from the bundled collection (see ./shared/fonts.md).
- Distinctive: line 156
If rendering fails, check the error, fix the script, and retry.
- Very specific: line 162
Before writing a generation script, ALWAYS read the relevant engine reference doc from ./references/.
“Common” is measured: kept by at least 6 in 10 of the 11 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Rasterize — Multi-Engine Raster Image Generation
Generate professional raster images by routing each request to the best rendering engine. You write Python code; the engine does the pixel work.
Quick Start
- Read the user's request
- Pick an engine using the routing table below
- Read the engine's reference doc from
./references/ - Write a self-contained Python script that outputs to the target path
- Run the script using
pdm run python <script.py>(to use the plugin's venv), verify the output, deliver the image
Environment: This plugin uses a pdm-managed virtual environment. Always run generation scripts with
pdm run pythonfrom the plugin root. If pdm is not set up yet, runpython scripts/setup.pyfirst.
Engine Routing Table
| Request type | Engine | Reference file |
| Photo manipulation, compositing, filters, pixel ops, simple graphics | Pillow | ./references/pillow.md |
| Clean vector-style graphics, logos, icons, anti-aliased shapes, typography-heavy designs | Cairo | ./references/cairo.md |
| Statistical charts, scientific plots, data visualization (static) | Matplotlib + Seaborn | ./references/matplotlib.md |
| Complex interactive-looking dashboards, rich data viz with annotations | Plotly (static export) | ./references/plotly.md |
| Complex layouts, HTML/CSS designs, UI mockups, anything with web fonts or CSS effects | Playwright (HTML→PNG) | ./references/playwright.md |
Routing decision hints
- If the request mentions "chart", "plot", "graph", "histogram", "scatter", "heatmap", or data columns → Matplotlib/Seaborn (or Plotly for fancier output)
- If the request is about a logo, icon, badge, geometric design, or anything that needs crisp anti-aliased curves → Cairo
- If the request says "banner", "social media post", "thumbnail" with text overlays on photos → Pillow
- If the request describes a full-page layout, poster with complex typography, card design, or UI mockup → Playwright
- If the request is about generative/procedural/algorithmic art → Cairo (or Pillow if it's pixel-manipulation art like fractals)
- When in doubt between Pillow and Cairo → prefer Cairo (better quality)
- When in doubt between Matplotlib and Plotly → prefer Matplotlib (simpler, faster)
Multi-engine compositions
Some requests need two engines. Common combos:
- Matplotlib → Pillow: Generate a chart, then composite it onto a branded background with logos and text overlays
- Cairo → Pillow: Draw clean vector shapes, then apply raster effects (blur, noise, texture)
- Playwright → Pillow: Render an HTML layout, then crop/resize/optimize
When combining engines, save intermediate outputs as temporary PNGs and load them in the second engine.
Shared References
These files contain cross-engine patterns — read them before the engine docs:
./shared/setup.md— Installation, pdm setup, running scripts./shared/fonts.md— Font directory resolution, per-engine loading, font selection guide./shared/canvas.md— Dimensions, size presets, retina scaling, output saving (PNG/JPEG/WebP)./shared/themes.md— Dark/light themes, color tokens, categorical/sequential/diverging palettes
Workspace
All generated files go into the generated/ directory at the plugin root:
generated/
<slug>_render.py # generation script
<slug>.png # output image- Scripts: Save as
generated/<slug>_render.pywhere<slug>is a short kebab-case name derived from the request (e.g.,social-card_render.py) - Output images: Save as
generated/<slug>.png(or.jpg/.webp) - Intermediates: Save temporary files in
generated/too — prefix with_tmp_ - The
generated/directory is gitignored. Do NOT place scripts inscripts/or output inoutput/— those are not for generated artifacts. - After delivering the final image, clean up intermediate
_tmp_*files. - Keep the generation script after completion — the user may want to iterate ("make the text bigger", "change the color") and the script enables re-rendering without rewriting from scratch.
- If the user explicitly asks to clean up, delete both the script and output.
Script Structure
Every generation script should follow this pattern:
#!/usr/bin/env python3
"""Rasterize: [brief description of what this generates]"""
import os
# === CONFIGURATION ===
WIDTH, HEIGHT = 1200, 630 # Logical dimensions
SCALE = 2 # Retina multiplier
# Paths — all generated files go in generated/
PLUGIN_ROOT = os.path.dirname(os.path.abspath(__file__))
GENERATED_DIR = os.path.join(PLUGIN_ROOT, "generated")
os.makedirs(GENERATED_DIR, exist_ok=True)
OUTPUT_PATH = os.path.join(GENERATED_DIR, "<slug>.png")
FONT_DIR = os.path.join(PLUGIN_ROOT, "assets", "fonts")
# Engine-specific imports here
# === HELPERS ===
# Reusable drawing functions here
# === COMPOSITION ===
def render():
# Main rendering logic
# ...
pass
# === EXECUTE ===
if __name__ == "__main__":
render()
print(f"Saved to {OUTPUT_PATH}")Design Principles
When generating images, aim for professional quality:
- Whitespace: Leave generous margins (at least 5-8% of canvas size). Content should breathe.
- Color: Use cohesive palettes. When the user doesn't specify colors, choose a palette with 1 primary, 1 accent, 1-2 neutrals. Avoid pure black (#000); use near-black (#1a1a2e or #0f172a) instead. Avoid pure white (#fff) on large areas; use off-white (#fafafa, #f8fafc).
- Typography: Maximum 2 font families per image. Establish clear hierarchy (title → subtitle → body → caption) through size and weight.
- Alignment: Use a grid. Align elements to consistent baselines and gutters. Misalignment is the #1 tell of AI-generated graphics.
- Contrast: Ensure text passes WCAG AA (4.5:1 ratio). Use a contrast checker function if needed.
Error Handling
- If a required engine is not installed, follow
./shared/setup.md. - If a font file is missing, fall back to a safe default from the
bundled collection (see
./shared/fonts.md). Never use system fonts without checking availability. - If rendering fails, check the error, fix the script, and retry. Common issues: missing font path, wrong image mode, Cairo surface not flushed before save.
Engine Reference Docs
Before writing a generation script, ALWAYS read the relevant engine
reference doc from ./references/. These contain engine-specific
patterns, gotchas, and helper snippets that prevent common mistakes.
./references/pillow.md— Pillow patterns and helpers./references/cairo.md— PyCairo patterns and helpers./references/matplotlib.md— Matplotlib + Seaborn patterns./references/plotly.md— Plotly static export patterns./references/playwright.md— HTML-to-PNG via Playwright
Other versions15 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 15
- G1Joshi/Agent-Skills★ 15same name
- imMamdouhaboammar/linkedin-animated-infographics★ 14same name
- mgiovani/cc-arsenal★ 8same name
- atharh/career-corpus-kit★ 4same name
- pche-broken-artist/forge-of-thought★ 3same name
- flabanabba8/openscad-studio★ 2same name
- hiroqt/overdrive★ 2same name
- assafkip/claude-image★ 1same name
- fontezbrooks/loomDaddy★ 1same name
- TheSethRose/render-skill★ 1same name
5 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
Used alongsideProjects with it also use ingest, publish and 1 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
JaimeGBASkillingest
Digest an external source (article, paper, transcript, URL, book chapter) and integrate its content into the knowledge base
Also in 4 projects that use this
VercelSkillpublish
Publish a single demo to v0 and optionally create Typefully drafts. Use when the user says "publish", "publish to v0", or "create typefully draft" for a demo.
Also in 3 projects that use this
Microsoft AzureSkillverify
End-to-end app testing pipeline for browser-based web apps on cloud browsers via Azure Playwright Workspaces: verify the live app, author tests for working flows, heal failing tests, then re-run with video and produce one consolidated report. Three phases (app verification, test authoring, test healing) plus a scoped final sanity run; each phase emits a sub-report. Use when asked to "verify my app", "make sure my app works and has good test coverage", "do a full QA pass", "add tests where I'm missing coverage", "fix failing tests and add new ones", "smoke test before deploy", "QA my deployment", or any combined verify-and-test ask. Requires Azure CLI (`az login`) and a Playwright Workspace resource ID — bootstraps configs on first invocation. Browser-based web apps with Playwright only — not for unit/API tests, native mobile/desktop, load/perf, or full accessibility audits.
Also in 3 projects that use this
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
Reviews can't be read right now.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

