메뉴
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 직업 분류 기준
| 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
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.