Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

baoyu-compress-image — Claude Code skill: what it does, how to install

Compresses images into WebP or PNG using local tools like sips and cwebp. Handy for optimizing assets directly inside your repository.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add JimLiu/baoyu-skills --skill baoyu-compress-image -a claude-code
Open on GitHub

What baoyu-compress-image does

The skill runs scripts/main.ts and selects the best tool installed on your machine following a set order: sips, cwebp, ImageMagick, or Sharp. By default, it converts images to WebP at quality 80 and overwrites the original file. If you want to keep the source asset, pass the --keep option.

Execution requires bun or npx. The CLI handles single files or processes directories recursively with the -r flag. Custom preferences for output format and default quality can be set up in an EXTEND.md file within the repository or your user home directory.

Install it if you regularly prepare web assets and want to avoid manual conversions in desktop apps.

What it helps with

  • convert PNG or JPEG assets to WebP
  • compress a folder of images recursively
  • reduce image file size before committing code
  • route compression through the best available tool on the machine

Example prompts for the agent

  • Compress images in ./public/images recursively with quality 75
  • Convert hero.png to webp and keep the original file
  • Optimize preview.png to reduce its file size

How to install baoyu-compress-image

1Skills CLI (Vercel)

npx skills add JimLiu/baoyu-skills --skill baoyu-compress-image -a claude-code

2Manually: put the files in place

~/.claude/skills/baoyu-compress-image/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/baoyu-compress-image/

From the same set18

The whole set →
baoyu-post-to-wechat JimLiu Publishes articles and image posts to WeChat Official Accounts via API or Chrome CDP. Useful when managing a WeChat blog and draft queue directly from your coding assistant. Claude Code CX Codex Cursor +1 34,400installs baoyu-image-gen JimLiu Generates images via OpenAI, Google, DashScope, and other APIs directly inside your coding agent. Handles text prompts, image references, and parallel batch jobs. Claude Code CX Codex Cursor +1 33,600installs baoyu-infographic JimLiu Turns your text into an infographic: picks a layout and style, writes the prompt, renders the image. Claude Code CX Codex Cursor +1 32,800installs baoyu-markdown-to-html JimLiu Turns a Markdown file into styled HTML with inline CSS and WeChat-ready themes. Useful when an article has to go out with its own look. Claude Code CX Codex Cursor +1 32,200installs baoyu-cover-image JimLiu Generates article cover images across five dimensions: type, palette, rendering, text and mood. Useful when a post or longread needs a header image. Claude Code CX Codex Cursor +1 32,100installs baoyu-article-illustrator JimLiu Inspects article structure, picks key spots for graphics, and generates consistent raster illustrations. Use it when an article needs visuals planned directly inside your coding agent. Claude Code CX Codex Cursor +1 31,900installs baoyu-slide-deck JimLiu Turns content into slide images: an outline with style rules first, then individual PNGs. Built for reading and sharing, not live presenting. Claude Code CX Codex Cursor +1 31,200installs baoyu-comic JimLiu A skill that builds original knowledge comics with panel layouts and batch image generation. Useful when you need a comic about a topic, a biography or a tutorial. Claude Code CX Codex Cursor +1 29,900installs

Similar

interface-design Dammyjay93 This skill guides product UI work for dashboards, admin panels, SaaS apps, and tools. Use it when hierarchy, states, visual direction, and design-system consistency matter. Claude Code CX Codex Cursor +1 30,700installs taste-design official google-labs-code Generates agent-ready DESIGN.md files for Google Stitch screens. It sets strict rules for typography, palettes, and spring motion to avoid generic UI tropes. Claude Code CX Codex Cursor +1 20,100installs html-ppt lewislulu Create static HTML slide decks from templates, with themes, animations and keyboard navigation. Useful when turning notes or text into a presentation. Claude Code CX Codex Cursor +1 20,800installs tailwind-design-system Seth Hobson Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns. Claude Code CX Codex Cursor 70,180installs react-doctor millionco Audits React codebases for architecture, accessibility, and rendering issues. Computes a health score from 0 to 100 and helps patch regressions. Claude Code CX Codex Cursor +1 19,000installs frost-sequence-camera-orbit heygen-com Builds a 22.5-second scene where an orbiting camera follows an ice logo that breaks apart, reforms into two text moments, and fades. Claude Code CX Codex Cursor +1 9,800installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about baoyu-compress-image

How to install baoyu-compress-image in Claude Code?

Run npx skills add JimLiu/baoyu-skills --skill baoyu-compress-image -a claude-code in your terminal.

What does baoyu-compress-image require to run?

It needs either bun or npx installed. Image processing relies on whichever local tool is present: sips, cwebp, ImageMagick, or Sharp.

Does baoyu-compress-image overwrite original files?

Yes, by default it replaces the source file with the compressed output. Use the --keep flag if you want to retain the original image.

Source text

SKILL.md · MIT
---
name: baoyu-compress-image
description: 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.
version: 1.56.1
metadata:
  openclaw:
    homepage: https://github.com/JimLiu/baoyu-skills#baoyu-compress-image
    requires:
      anyBins:
        - bun
        - npx
---

# Image 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 in priority order — the first one found wins:

| Priority | Path | Scope |
|----------|------|-------|
| 1 | `.baoyu-skills/baoyu-compress-image/EXTEND.md` | Project |
| 2 | `${XDG_CONFIG_HOME:-$HOME/.config}/baoyu-skills/baoyu-compress-image/EXTEND.md` | XDG |
| 3 | `$HOME/.baoyu-skills/baoyu-compress-image/EXTEND.md` | User home |

If none found, use defaults.

**EXTEND.md supports**: Default format, default quality, keep-original preference.

## Usage

```bash
${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

```bash
# 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.

© JimLiu · MIT · JimLiu/baoyu-skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor