agentleFS
suxrobGMsuxrobGM/rasterize/skills/render/SKILL.md

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
  1. Distinctive:

    Read the user's request

    line 14
  2. Very specific:

    Read the engine's reference doc from ./references/

    line 16
  3. Distinctive:

    Write a self-contained Python script that outputs to the target path

    line 17
  4. Very specific:

    Run the script using pdm run python <script.py> (to use the plugin's venv), verify the output, deliver the image

    line 18
  5. Distinctive:

    If the request mentions "chart", "plot", "graph", "histogram", "scatter", "heatmap", or data columns → Matplotlib/Seaborn (or Plotly for …

    line 36
  6. Distinctive:

    If the request is about a logo, icon, badge, geometric design, or anything that needs crisp anti-aliased curves → Cairo

    line 39
  7. Distinctive:

    If the request says "banner", "social media post", "thumbnail" with text overlays on photos → Pillow

    line 41
  8. Distinctive:

    If the request describes a full-page layout, poster with complex typography, card design, or UI mockup → Playwright

    line 43
  9. Very specific:

    If the request is about generative/procedural/algorithmic art → Cairo (or Pillow if it's pixel-manipulation art like fractals)

    line 45
  10. Distinctive:

    When in doubt between Pillow and Cairo → prefer Cairo (better quality)

    line 47
  11. Distinctive:

    When in doubt between Matplotlib and Plotly → prefer Matplotlib (simpler, faster)

    line 48
  12. Distinctive:

    When combining engines, save intermediate outputs as temporary PNGs and load them in the second engine.

    line 61
  13. Very specific:

    All generated files go into the generated/ directory at the plugin root:

    line 75
  14. Very specific:

    After delivering the final image, clean up intermediate _tmp_* files.

    line 89
  15. Distinctive:

    Keep the generation script: after completion — the user may want to iterate ("make the text bigger", "change the color") and the script …

    line 90
  16. Distinctive:

    If the user explicitly asks to clean up, delete both the script and output.

    line 93
  17. Distinctive:

    Every generation script should follow this pattern:

    line 97
  18. Distinctive:

    When generating images, aim for professional quality:

    line 135
  19. Distinctive:

    Whitespace: Leave generous margins (at least 5-8% of canvas size).

    line 137
  20. Distinctive:

    Color: Use cohesive palettes. When the user doesn't specify colors, choose a palette with 1 primary, 1 accent, 1-2 neutrals.

    line 139
  21. Distinctive:

    Alignment: Use a grid. Align elements to consistent baselines and gutters.

    line 145
  22. Distinctive:

    Contrast: Ensure text passes WCAG AA (4.5:1 ratio).

    line 147
  23. Very specific:

    If a required engine is not installed, follow ./shared/setup.md.

    line 152
  24. Very specific:

    If a font file is missing, fall back to a safe default from the bundled collection (see ./shared/fonts.md).

    line 153
  25. Distinctive:

    If rendering fails, check the error, fix the script, and retry.

    line 156
  26. Very specific:

    Before writing a generation script, ALWAYS read the relevant engine reference doc from ./references/.

    line 162

“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.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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

  1. Read the user's request
  2. Pick an engine using the routing table below
  3. Read the engine's reference doc from ./references/
  4. Write a self-contained Python script that outputs to the target path
  5. 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 python from the plugin root. If pdm is not set up yet, run python scripts/setup.py first.

Engine Routing Table

Request typeEngineReference file
Photo manipulation, compositing, filters, pixel ops, simple graphicsPillow./references/pillow.md
Clean vector-style graphics, logos, icons, anti-aliased shapes, typography-heavy designsCairo./references/cairo.md
Statistical charts, scientific plots, data visualization (static)Matplotlib + Seaborn./references/matplotlib.md
Complex interactive-looking dashboards, rich data viz with annotationsPlotly (static export)./references/plotly.md
Complex layouts, HTML/CSS designs, UI mockups, anything with web fonts or CSS effectsPlaywright (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.py where <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 in scripts/ or output in output/ — 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

Download now (ZIP)

  • Other versions15 projects use a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 15

    1. G1Joshi/Agent-Skills★ 15same name
    2. imMamdouhaboammar/linkedin-animated-infographics★ 14same name
    3. mgiovani/cc-arsenal★ 8same name
    4. atharh/career-corpus-kit★ 4same name
    5. pche-broken-artist/forge-of-thought★ 3same name
    6. flabanabba8/openscad-studio★ 2same name
    7. hiroqt/overdrive★ 2same name
    8. assafkip/claude-image★ 1same name
    9. fontezbrooks/loomDaddy★ 1same name
    10. 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.
    • JaimeGBASkill

      ingest

      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

    • VercelSkill

      publish

      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 AzureSkill

      verify

      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.