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.
Process images for web development — resize, crop, trim whitespace, convert formats (PNG/WebP/JPG), optimise file size, generate thumbnails, create OG card images.
$ npx skills add jezweb/claude-skills --skill image-processing -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install jezweb/claude-skills image-processing --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "image-processing" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/image-processing into .claude/skills/image-processing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-processing", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/image-processingType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add jezweb/claude-skills --skill image-processing -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install jezweb/claude-skills image-processing --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/design-assets/skills/image-processing .agents/skills/image-processing && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "image-processing" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/image-processing into .agents/skills/image-processing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-processing", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jezweb/claude-skills --skill image-processing -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install jezweb/claude-skills image-processing --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/design-assets/skills/image-processing .cursor/skills/image-processing && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "image-processing" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/image-processing into .cursor/skills/image-processing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-processing", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/jezweb/claude-skills.git --path plugins/design-assets/skills/image-processing--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add jezweb/claude-skills --skill image-processing -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install jezweb/claude-skills image-processing --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/design-assets/skills/image-processing .gemini/skills/image-processing && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "image-processing" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/image-processing into .gemini/skills/image-processing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-processing", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install jezweb/claude-skills image-processingInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add jezweb/claude-skills --skill image-processing -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/design-assets/skills/image-processing .github/skills/image-processing && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "image-processing" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/image-processing into .github/skills/image-processing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-processing", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add jezweb/claude-skills --skill image-processing -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install jezweb/claude-skills image-processing --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jezweb/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/design-assets/skills/image-processing .opencode/skills/image-processing && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "image-processing" agent skill from https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/image-processing into .opencode/skills/image-processing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-processing", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
image-processingProcess 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. 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.
Read from SKILL.md and the folder at commit 64965d9. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
pipnpmbrewFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
claude-code-only
From compatibility in the SKILL.md frontmatter.
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.
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.
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.
The full file from jezweb/claude-skills at commit 64965d9, republished under its MIT licence (© jezweb). 343 words, ~1,772 tokens.
.claude/skills/image-processing/SKILL.md (or your agent's skills folder).Use img-process (shipped in bin/) for common operations. For complex or custom workflows, generate a Pillow script adapted to the user's environment.
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 ./optimisedUse 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).
Pillow is required for both img-process and custom scripts:
pip install PillowIf Pillow is unavailable, use alternatives:
| Alternative | Platform | Install | Best for |
|---|---|---|---|
sips | macOS (built-in) | None | Resize, convert (no trim/OG) |
sharp | Node.js | npm install sharp | Full feature set, high performance |
ffmpeg | Cross-platform | brew install ffmpeg | Resize, convert |
| Use case | Format | Why |
|---|---|---|
| Photos, hero images | WebP | Best compression, wide browser support |
| Logos, icons (need transparency) | PNG | Lossless, supports alpha |
| Fallback for older browsers | JPG | Universal support |
| Thumbnails | WebP or JPG | Small file size priority |
| OG cards | PNG | Social platforms handle PNG best |
Different formats need different save parameters. Always handle RGBA-to-JPG compositing — JPG does not support transparency, so composite onto a white background first.
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)When only width or height is given, calculate the other from aspect ratio. Use Image.LANCZOS for high-quality downscaling.
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 imgRemove surrounding whitespace from logos and icons. Convert to RGBA first, then use getbbox() to find content bounds.
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)Fit within max dimensions while maintaining aspect ratio:
img.thumbnail((size, size), Image.LANCZOS)Resize + compress in one step. Convert to WebP for best compression. Typical settings: width 1920, quality 85.
System font paths differ by OS. Try multiple paths, fall back to Pillow's default. On Linux, fc-list can discover fonts dynamically.
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()Composite text on a background image or solid colour. Apply semi-transparent overlay for text readability. Centre text horizontally.
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")img-process trim logo-raw.jpg -o logo-trimmed.png --padding 10
img-process thumbnail logo-trimmed.png --size 512 -o favicon-512.pngimg-process optimise hero.jpg --max-width 1920 --quality 85
# Outputs hero.webp — resized and compressedimg-process batch ./raw-images --action convert --format webp --quality 85 -o ./optimised
img-process batch ./photos --action resize --width 800 -o ./thumbnailsGenerate images with the gemini-image-gen skill, then process them:
# 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
Just SKILL.md in plugins/design-assets/skills/image-processing of jezweb/claude-skills.
Open the folder on GitHubat commit 64965d9
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Image Processing this skilljezweb/claude-skills | 1.1k | — | ~1.8k | Automated safety check: Pass | MIT | |
| Web Visualsglifxyz/glif-mcp-server | 212 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Unified Design Routerassafkip/kipi-system | 112 | — | ~2.9k | Automated safety check: Pass | MIT | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 134k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Slack GIF Creatoranthropics/skills | 180k | 29 repos | ~2k | Automated safety check: Pass | Apache-2.0 | |
| Web Asset Generatoralonw0/web-asset-generator | 512 | 1 repos | ~6.6k | Automated safety check: Pass | MIT |
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.
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.
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.
anthropics/skills
Provides Slack size and frame limits, Python animation helpers and validators for building animated GIFs sized for emoji and messages.
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.
ZSeven-W/craft-skills
Generate new raster assets that must contain native pixel transparency, then verify the untouched PNG or WebP before delivery.
jezweb/claude-skills
Build conversational AI voice agents on the ElevenLabs platform.
jezweb/claude-skills
Generate custom favicons from logos, text, or brand colours.
jezweb/claude-skills
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.
jezweb/claude-skills
All-in-one project configuration and health management. An agent skill from jezweb/claude-skills.
jezweb/claude-skills
Test website responsiveness across viewport widths using browser automation.
jezweb/claude-skills
Build MCP servers in Python with FastMCP. An agent skill from jezweb/claude-skills.
Works with
Categories
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.
Image Processing fits situations like: with resize image; convert to webp; optimise images; create OG image.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.