Agent skill

Image Processing

by jezweb in jezweb/claude-skills

Process images for web development — resize, crop, trim whitespace, convert formats (PNG/WebP/JPG), optimise file size, generate thumbnails, create OG card images.

MITAuto-check passedMedia & Creative

Install Image Processing

skills CLI
$ npx skills add jezweb/claude-skills --skill image-processing -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jezweb/claude-skills image-processing --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/design-assets/skills/image-processing .claude/skills/image-processing && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
image-processing
GitHub stars
1.1k
Token cost
~1.8k tokens
SKILL.md length
343 words
Files
1
Skills in repo
52
Repo updated
First seen
Licence
MIT

At a glance

Process images for web development — resize, crop, trim whitespace, convert formats (PNG/WebP/JPG), optimise file size, generate thumbnails, create OG card images.

  • With resize image
  • SKILL.md covers Quick Reference — img-process…, Prerequisites, Output Format Guide and Core Patterns, plus 1 more section
  • Calls pip, npm and brew
  • Convert to webp

What it does

Image Processing is an agent skill from jezweb/claude-skills. Process images for web development — resize, crop, trim whitespace, convert formats (PNG/WebP/JPG), optimise file size, generate thumbnails, create OG card images. Uses Pillow (Python) — no ImageMagick needed. Trigger with 'resize image', 'convert to webp', 'trim logo', 'optimise images', 'make thumbnail', 'create OG image', 'crop whitespace', 'process image', or 'image too large'.

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: claude-code-only

It sits in Media & Creative, covering Social media graphics, Image editing and Logo and visual identity. It works with Python. The repository describes itself as: Skills for Claude Code CLI such as full stack dev Cloudflare, React, Tailwind v4, and AI integrations. The licence is MIT.

When your agent uses it

  • With resize image
  • Convert to webp
  • Optimise images
  • Create OG image

Example prompts

  • “resize image”
  • “convert to webp”
  • “trim logo”
  • “/image-processing”

Requirements

  • Python 3
  • Node.js
  • Compatibility (from SKILL.md): claude-code-only

What it can do on your machine

Read from SKILL.md and the folder at commit 64965d9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pip
    • npm
    • brew

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pip and npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    claude-code-only

    From compatibility in the SKILL.md frontmatter.

Context cost

Image Processing loads about 1.8k tokens when it runs. Until then it costs about 100 tokens; SKILL.md has 343 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~100
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jezweb/claude-skills at commit 64965d9, republished under its MIT licence (© jezweb). 343 words, ~1,772 tokens.

Download SKILL.mdSave it as .claude/skills/image-processing/SKILL.md (or your agent's skills folder).
name
image-processing
description
Process images for web development — resize, crop, trim whitespace, convert formats (PNG/WebP/JPG), optimise file size, generate thumbnails, create OG card images. Uses Pillow (Python) — no ImageMagick needed. Trigger with 'resize image', 'convert to webp', 'trim logo', 'optimise images', 'make thumbnail', 'create OG image', 'crop whitespace', 'process image', or 'image too large'.
compatibility
claude-code-only

Image Processing

Use img-process (shipped in bin/) for common operations. For complex or custom workflows, generate a Pillow script adapted to the user's environment.

Quick Reference — img-process CLI

bash
img-process resize hero.png --width 1920
img-process convert logo.png --format webp
img-process trim logo-raw.jpg -o logo-clean.png --padding 10
img-process thumbnail photo.jpg --size 200
img-process optimise hero.jpg --quality 85 --max-width 1920
img-process og-card -o og.png --title "My App" --subtitle "Built for speed"
img-process batch ./images --action convert --format webp -o ./optimised

Use img-process when: the operation is standard (resize, convert, trim, thumbnail, optimise, OG card, batch). This is faster and avoids generating a script each time.

Generate a custom script when: the operation needs logic img-process doesn't cover (compositing multiple images, watermarks, complex text layouts, conditional processing).

Prerequisites

Pillow is required for both img-process and custom scripts:

bash
pip install Pillow

If Pillow is unavailable, use alternatives:

AlternativePlatformInstallBest for
sipsmacOS (built-in)NoneResize, convert (no trim/OG)
sharpNode.jsnpm install sharpFull feature set, high performance
ffmpegCross-platformbrew install ffmpegResize, convert

Output Format Guide

Use caseFormatWhy
Photos, hero imagesWebPBest compression, wide browser support
Logos, icons (need transparency)PNGLossless, supports alpha
Fallback for older browsersJPGUniversal support
ThumbnailsWebP or JPGSmall file size priority
OG cardsPNGSocial platforms handle PNG best

Core Patterns

Save with Format-Specific Quality

Different formats need different save parameters. Always handle RGBA-to-JPG compositing — JPG does not support transparency, so composite onto a white background first.

python
from PIL import Image
import os

def save_image(img, output_path, quality=None):
    os.makedirs(os.path.dirname(output_path) or ".", exist_ok=True)
    kwargs = {}
    ext = output_path.lower().rsplit(".", 1)[-1]

    if ext == "webp":
        kwargs = {"quality": quality or 85, "method": 6}
    elif ext in ("jpg", "jpeg"):
        kwargs = {"quality": quality or 90, "optimize": True}
        # RGBA → RGB: composite onto white background
        if img.mode == "RGBA":
            bg = Image.new("RGB", img.size, (255, 255, 255))
            bg.paste(img, mask=img.split()[3])
            img = bg
    elif ext == "png":
        kwargs = {"optimize": True}

    img.save(output_path, **kwargs)
Resize with Aspect Ratio

When only width or height is given, calculate the other from aspect ratio. Use Image.LANCZOS for high-quality downscaling.

python
def resize_image(img, width=None, height=None):
    if width and height:
        return img.resize((width, height), Image.LANCZOS)
    elif width:
        ratio = width / img.width
        return img.resize((width, int(img.height * ratio)), Image.LANCZOS)
    elif height:
        ratio = height / img.height
        return img.resize((int(img.width * ratio), height), Image.LANCZOS)
    return img
Trim Whitespace (Auto-Crop)

Remove surrounding whitespace from logos and icons. Convert to RGBA first, then use getbbox() to find content bounds.

python
img = Image.open(input_path)
if img.mode != "RGBA":
    img = img.convert("RGBA")
bbox = img.getbbox()  # Bounding box of non-zero pixels
if bbox:
    img = img.crop(bbox)
Thumbnail

Fit within max dimensions while maintaining aspect ratio:

python
img.thumbnail((size, size), Image.LANCZOS)
Optimise for Web

Resize + compress in one step. Convert to WebP for best compression. Typical settings: width 1920, quality 85.

Cross-Platform Font Discovery

System font paths differ by OS. Try multiple paths, fall back to Pillow's default. On Linux, fc-list can discover fonts dynamically.

python
from PIL import ImageFont

def get_font(size):
    font_paths = [
        # macOS
        "/System/Library/Fonts/Helvetica.ttc",
        "/System/Library/Fonts/SFNSText.ttf",
        # Linux
        "/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",
        "/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf",
        # Windows
        "C:/Windows/Fonts/arial.ttf",
    ]
    for path in font_paths:
        if os.path.exists(path):
            try:
                return ImageFont.truetype(path, size)
            except Exception:
                continue
    return ImageFont.load_default()
OG Card Generation (1200x630)

Composite text on a background image or solid colour. Apply semi-transparent overlay for text readability. Centre text horizontally.

python
from PIL import Image, ImageDraw, ImageFont

width, height = 1200, 630

# Background: image or solid colour
if background_path:
    img = Image.open(background_path).resize((width, height), Image.LANCZOS)
else:
    img = Image.new("RGB", (width, height), bg_color or "#1a1a2e")

# Semi-transparent overlay for text readability
overlay = Image.new("RGBA", (width, height), (0, 0, 0, 128))
img = img.convert("RGBA")
img = Image.alpha_composite(img, overlay)

draw = ImageDraw.Draw(img)
font_title = get_font(48)
font_sub = get_font(24)

# Centre title
if title:
    bbox = draw.textbbox((0, 0), title, font=font_title)
    tw = bbox[2] - bbox[0]
    draw.text(((width - tw) // 2, height // 2 - 60), title, fill="white", font=font_title)

img = img.convert("RGB")

Common Workflows

Logo Cleanup (client-supplied JPG with white background)
bash
img-process trim logo-raw.jpg -o logo-trimmed.png --padding 10
img-process thumbnail logo-trimmed.png --size 512 -o favicon-512.png
Prepare Hero Image for Production
bash
img-process optimise hero.jpg --max-width 1920 --quality 85
# Outputs hero.webp — resized and compressed
Batch Process
bash
img-process batch ./raw-images --action convert --format webp --quality 85 -o ./optimised
img-process batch ./photos --action resize --width 800 -o ./thumbnails
Pipeline with Gemini Image Gen

Generate images with the gemini-image-gen skill, then process them:

bash
# After generating with Gemini (raw PNG output):
img-process optimise generated-image.png --max-width 1920 --quality 85
# Or batch process all generated images:
img-process batch ./generated --action optimise -o ./production

© jezweb, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugins/design-assets/skills/image-processing of jezweb/claude-skills.

Open the folder on GitHubat commit 64965d9

Compare with similar skills

Image Processing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Image Processing compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Image Processing this skilljezweb/claude-skills1.1k—~1.8kAutomated safety check: PassMIT
Web Visualsglifxyz/glif-mcp-server212—~1.4kAutomated safety check: PassMIT
Unified Design Routerassafkip/kipi-system112—~2.9kAutomated safety check: PassMIT
Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill134k1 repos~3.5kAutomated safety check: PassMIT
Slack GIF Creatoranthropics/skills180k29 repos~2kAutomated safety check: PassApache-2.0
Web Asset Generatoralonw0/web-asset-generator5121 repos~6.6kAutomated safety check: PassMIT

Similar skills

  • Web Visuals

    glifxyz/glif-mcp-server

    Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code.

    212 GitHub stars~1.4k tokensUpdated today
    Media & CreativeAuto-check passed
  • Unified Design Router

    assafkip/kipi-system

    Routes visual design requests to built-in logo, corporate identity, slide, banner, social photo and icon workflows, backed by style data and AI image generation.

    112 GitHub stars~2.9k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Brand and Design Toolkit

    nextlevelbuilder/ui-ux-pro-max-skill

    Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.

    134k GitHub starsUsed in 1 repo~3.5k tokens
    Media & CreativeAuto-check passed
  • Slack GIF Creator

    anthropics/skills

    Official

    Provides Slack size and frame limits, Python animation helpers and validators for building animated GIFs sized for emoji and messages.

    180k GitHub starsUsed in 29 repos~2k tokens
    Media & CreativeAuto-check passed
  • Web Asset Generator

    alonw0/web-asset-generator

    Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn.

    512 GitHub starsUsed in 1 repo~6.6k tokens
    Media & CreativeAuto-check passed
  • Native Transparent Imagegen

    ZSeven-W/craft-skills

    Generate new raster assets that must contain native pixel transparency, then verify the untouched PNG or WebP before delivery.

    223 GitHub starsUsed in 2 repos~1.1k tokens
    Media & CreativeAuto-check passed

More from jezweb/claude-skills

All 52 skills in this repo
  • Elevenlabs Agents

    jezweb/claude-skills

    Build conversational AI voice agents on the ElevenLabs platform.

    1.1k GitHub starsUsed in 1 repo~3.3k tokens
    Auto-check passed
  • Favicon Gen

    jezweb/claude-skills

    Generate custom favicons from logos, text, or brand colours.

    1.1k GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed
  • Tailwind Theme Builder

    jezweb/claude-skills

    Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.

    1.1k GitHub starsUsed in 1 repo~3.2k tokens
    Auto-check passed
  • Project Health

    jezweb/claude-skills

    All-in-one project configuration and health management. An agent skill from jezweb/claude-skills.

    1.1k GitHub starsUsed in 1 repo~3k tokens
    Auto-check passed
  • Responsiveness Check

    jezweb/claude-skills

    Test website responsiveness across viewport widths using browser automation.

    1.1k GitHub starsUsed in 1 repo~1.7k tokens
    Auto-check passed
  • MCP Builder

    jezweb/claude-skills

    Build MCP servers in Python with FastMCP. An agent skill from jezweb/claude-skills.

    1.1k GitHub stars~3.1k tokensUpdated 2 days ago
    Auto-check: notes

Works with

Questions about Image Processing

What does Image Processing do?

Process images for web development — resize, crop, trim whitespace, convert formats (PNG/WebP/JPG), optimise file size, generate thumbnails, create OG card images. Image Processing is an agent skill from jezweb/claude-skills. Process images for web development — resize, crop, trim whitespace, convert formats (PNG/WebP/JPG), optimise file size, generate thumbnails, create OG card images.

When should I use Image Processing?

Image Processing fits situations like: with resize image; convert to webp; optimise images; create OG image.

How do I install Image Processing in Claude Code?

Run `npx skills add jezweb/claude-skills --skill image-processing -a claude-code`. Or copy the skill folder (plugins/design-assets/skills/image-processing in jezweb/claude-skills) into .claude/skills/image-processing in your project. Claude Code loads it when a task matches its description.

How do I install Image Processing in Codex?

Run `npx skills add jezweb/claude-skills --skill image-processing -a codex`. Or copy the skill folder (plugins/design-assets/skills/image-processing in jezweb/claude-skills) into .agents/skills/image-processing in your project. Codex loads it when a task matches its description.

Can I use Image Processing in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jezweb/claude-skills --skill image-processing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/image-processing, .gemini/skills/image-processing, .github/skills/image-processing and .opencode/skills/image-processing in your project.

What does Image Processing need to run?

Going by SKILL.md and its folder, Image Processing needs the command-line tools its instructions call (pip, npm and brew). Our summary lists: Python 3; Node.js. Compatibility (from SKILL.md): claude-code-only.

Does Image Processing access the network?

SKILL.md contains no URLs. Its commands use pip and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Image Processing safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Image Processing use?

Image Processing is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Image Processing use?

About 1.8k tokens (SKILL.md is roughly 7.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Image Processing?

Skills that share tags, products or a category with Image Processing: Web Visuals (glifxyz/glif-mcp-server, 212 stars), Unified Design Router (assafkip/kipi-system, 112 stars), Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 134k stars) and Slack GIF Creator (anthropics/skills, 180k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Image Processing?

jezweb (a GitHub user) maintains it in jezweb/claude-skills, which has 1,051 GitHub stars. The repository holds 52 skills in this directory. The repository was last updated on October 5, 2026.

Source: jezweb/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.