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'.
Processes images for web development by resizing, converting formats, cropping whitespace, optimizing file size, and generating Open Graph cards.
npx claudepluginhub jezweb/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/pillow-patterns.mdProcess images for web development. Generate a Pillow script adapted to the user's environment and specific needs.
Pillow is usually pre-installed. If not:
pip install Pillow
If Pillow is unavailable, adapt using alternatives:
| Alternative | Platform | Install | Capabilities |
|---|---|---|---|
sips | macOS (built-in) | None | Resize, convert (no trim/OG) |
sharp | Node.js | npm install sharp | Full feature set |
ffmpeg | Cross-platform | brew install ffmpeg | Resize, convert |
Generate a Python script using Pillow for any of these operations. See references/pillow-patterns.md for implementation patterns, especially RGBA-to-JPG compositing and cross-platform font discovery.
Scale to specific dimensions or by width/height (maintain aspect ratio if only one given). Use Image.LANCZOS for high-quality downscaling.
Convert between PNG, JPG, WebP. Handle RGBA-to-JPG by compositing onto white background. Apply format-specific quality settings (WebP: 85, JPG: 90, PNG: optimize).
Auto-crop surrounding whitespace from logos and icons. Convert to RGBA first, then use getbbox() to find content bounds.
Fit within max dimensions while maintaining aspect ratio. Use img.thumbnail((size, size), Image.LANCZOS).
Resize + compress in one step. Convert to WebP for best compression. Typical settings: width 1920, quality 85.
Generate Open Graph card with title/subtitle overlay on a background image or solid colour. Apply semi-transparent overlay for text readability. Centre text horizontally.
Resize to max width 1920, convert to WebP, compress at quality 85.
For multiple images, generate a single script that loops over all files rather than processing one at a time.
Generate images with the gemini-image-gen skill, then process them:
| 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 |
| When | Read |
|---|---|
| Implementing any Pillow operation | references/pillow-patterns.md |
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.