From toolbox
This skill should be used when the user asks to "optimize screenshots", "convert screenshots to WebP", "compress images for the repo", "save screenshots as WebP", or when capturing documentation screenshots that should be stored efficiently. Converts PNG screenshots to WebP format using sharp-cli via npx.
How this skill is triggered — by the user, by Claude, or both
Slash command
/toolbox:screenshot-optimizationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Convert PNG screenshots to WebP format for efficient storage in the repository.
Convert PNG screenshots to WebP format for efficient storage in the repository. WebP typically achieves 50-60% size reduction over PNG at 90% quality with negligible visual difference.
Use sharp-cli via npx — it requires no installation beyond Node.js and has
full WebP support.
cd /path/to/screenshots
for f in *.png; do
npx sharp-cli -i "$f" -o "${f%.png}.webp" --quality 90
done
Quality setting: 90 is the default recommendation. Use 85 for further compression when file size is a priority over fidelity.
echo "PNG total:" && du -ch *.png | tail -1
echo "WebP total:" && du -ch *.webp | tail -1
Expected reduction: 50-60% at quality 90.
After confirming the WebP files look correct:
rm *.png
When capturing screenshots with Playwright MCP for documentation, Playwright only outputs PNG or JPEG. Capture as PNG first, then batch-convert:
# Playwright captures
browser_take_screenshot --type png --filename screenshots/01-feature.png
browser_take_screenshot --type png --filename screenshots/02-feature.png
# Batch convert
cd screenshots
for f in *.png; do npx sharp-cli -i "$f" -o "${f%.png}.webp" --quality 90; done
rm *.png
Use zero-padded numbered prefixes for ordered documentation screenshots:
01-media-list-view.webp
02-media-grid-view.webp
03-detail-panel-open.webp
04-detail-panel-edit-mode.webp
sharp-cli is not a project dependency — it runs via npx on demand and is
cached locally after first usenpx claudepluginhub ichabodcole/project-docs-scaffold-template --plugin toolboxProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.