菜单
Optimize images to WebP format. Scans a directory, converts jpg/png/gif/bmp/tiff to WebP using sharp, reports compression results. Run with input/output path arguments.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Vercel AI SDK expert guidance. Use when building AI-powered features — chat interfaces, text generation, structured output, tool calling, agents, MCP integration, streaming, embeddings, reranking, image generation, or working with any LLM provider.
Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.
Implement a feature. Supports resuming interrupted work and team mode (--team flag). Reads spec/feature/[name]/spec.md and design.md, generates PLAN.md inside the feature directory, waits for user confirmation, then implements and verifies the feature.
Generate or update MSW mock handlers and fixtures from feature spec API contracts. Use to set up mock infrastructure, generate feature-specific mocks, or check mock status.
AI-driven browser testing against feature specs. Default mode reads spec REQs and autonomously tests in a real browser via Playwright MCP. Also supports running existing Playwright test files, visual regression, and accessibility audits.
Check how well the current implementation matches the feature spec and evaluate code quality. Runs spec compliance review followed by code quality review. Optionally runs unit/integration test audit, logging audit, and security audit when strategy files exist. Does not modify code.
| name | image-optimizer |
| description | Optimize images to WebP format. Scans a directory, converts jpg/png/gif/bmp/tiff to WebP using sharp, reports compression results. Run with input/output path arguments. |
| argument-hint | [input directory] [optional: output directory] |
Convert project images to WebP. Uses the bundled optimize-images.js script with sharp.
$ARGUMENTS provides paths, use thempublic/images/, public/assets/, src/assets/, assets/node -e "require('sharp')" 2>/dev/null || npm install --no-save sharp
The script is at .claude/skills/image-optimizer/optimize-images.js:
# Replace originals with WebP
node .claude/skills/image-optimizer/optimize-images.js public/images
# Separate output directory
node .claude/skills/image-optimizer/optimize-images.js public/images public/images-webp
# Custom quality (90) and max dimensions (2560x1440)
node .claude/skills/image-optimizer/optimize-images.js public/images public/images 90 2560 1440
| Argument | Default | Description |
|---|---|---|
| input_dir | (required) | Directory to scan for images |
| output_dir | same as input | Where to write WebP files. Same dir = replace originals |
| quality | 80 | WebP quality 1-100 |
| max_width | 1920 | Downscale wider images (no upscaling) |
| max_height | 1080 | Downscale taller images (no upscaling) |
After conversion, find and replace old image references:
grep -rn "\.png\|\.jpg\|\.jpeg" --include="*.tsx" --include="*.ts" --include="*.css" src/ app/
Replace .png / .jpg extensions with .webp in source code.
npx tsc --noEmit # or npx next build