npx claudepluginhub jimliu/baoyu-skills --plugin utility-skillsWant just this skill?
Then install: npx claudepluginhub u/[userId]/[slug]
Compresses images to WebP (default) or PNG with automatic tool selection. Use when user asks to "compress image", "optimize image", "convert to webp", or reduce image file size.
This skill uses the workspace's default tool permissions.
scripts/main.tsImage Compressor
Compresses images using best available tool (sips → cwebp → ImageMagick → Sharp).
Script Directory
Scripts in scripts/ subdirectory. {baseDir} = this SKILL.md's directory path. Resolve ${BUN_X} runtime: if bun installed → bun; if npx available → npx -y bun; else suggest installing bun. Replace {baseDir} and ${BUN_X} with actual values.
| Script | Purpose |
|---|---|
scripts/main.ts | Image compression CLI |
Preferences (EXTEND.md)
Check EXTEND.md existence (priority order):
# macOS, Linux, WSL, Git Bash
test -f .baoyu-skills/baoyu-compress-image/EXTEND.md && echo "project"
test -f "${XDG_CONFIG_HOME:-$HOME/.config}/baoyu-skills/baoyu-compress-image/EXTEND.md" && echo "xdg"
test -f "$HOME/.baoyu-skills/baoyu-compress-image/EXTEND.md" && echo "user"
# PowerShell (Windows)
if (Test-Path .baoyu-skills/baoyu-compress-image/EXTEND.md) { "project" }
$xdg = if ($env:XDG_CONFIG_HOME) { $env:XDG_CONFIG_HOME } else { "$HOME/.config" }
if (Test-Path "$xdg/baoyu-skills/baoyu-compress-image/EXTEND.md") { "xdg" }
if (Test-Path "$HOME/.baoyu-skills/baoyu-compress-image/EXTEND.md") { "user" }
┌────────────────────────────────────────────────────────┬───────────────────┐ │ Path │ Location │ ├────────────────────────────────────────────────────────┼───────────────────┤ │ .baoyu-skills/baoyu-compress-image/EXTEND.md │ Project directory │ ├────────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.baoyu-skills/baoyu-compress-image/EXTEND.md │ User home │ └────────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ Result │ Action │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Found │ Read, parse, apply settings │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Not found │ Use defaults │ └───────────┴───────────────────────────────────────────────────────────────────────────┘
EXTEND.md Supports: Default format | Default quality | Keep original preference
Usage
${BUN_X} {baseDir}/scripts/main.ts <input> [options]
Options
| Option | Short | Description | Default |
|---|---|---|---|
<input> | File or directory | Required | |
--output | -o | Output path | Same path, new ext |
--format | -f | webp, png, jpeg | webp |
--quality | -q | Quality 0-100 | 80 |
--keep | -k | Keep original | false |
--recursive | -r | Process subdirs | false |
--json | JSON output | false |
Examples
# Single file → WebP (replaces original)
${BUN_X} {baseDir}/scripts/main.ts image.png
# Keep PNG format
${BUN_X} {baseDir}/scripts/main.ts image.png -f png --keep
# Directory recursive
${BUN_X} {baseDir}/scripts/main.ts ./images/ -r -q 75
# JSON output
${BUN_X} {baseDir}/scripts/main.ts image.png --json
Output:
image.png → image.webp (245KB → 89KB, 64% reduction)
Extension Support
Custom configurations via EXTEND.md. See Preferences section for paths and supported options.
Similar Skills
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.