/img skill for AI

SKILL.md

name	img
description	Use this skill when the user runs /img or asks to process, optimize, or convert images for their Rails app. Converts PNG exports from Sketch (or any PNG) to WebP using cwebp, places the result in app/assets/images/, and outputs the ready-to-use image_tag ERB snippet. Triggers on /img <filename>, "process this image", "convert to webp", "optimize this PNG for Rails".

img skill

Converts a PNG to WebP and outputs the Rails image_tag ERB snippet.

What it does

1. Accepts a PNG filename (or path) and optional display width
2. Checks that cwebp is available
3. Converts the PNG to WebP at quality 85
4. The destination output will be the same path as the original png
5. Outputs the image_tag ERB snippet

Usage

/img <filename_or_path> [display_width_px]

Examples:

• /img hero-illustration.png
• /img ~/Desktop/exports/onboarding-step1.png 400
• /img exports/ 600 (batch — all PNGs in a directory)

Steps

1. Parse input

Extract:

• input — file path or directory
• display_width — optional integer (px). If omitted, look at the dimensions of the png and divide by 2. The originals are 2x their desired size.

2. Check dependencies

which cwebp

If missing, tell the user to install it:

• macOS: brew install webp
• Ubuntu: sudo apt install webp

Then stop.

3. Find the Rails root

Look for config/application.rb walking up from the current directory. The assets destination is <rails_root>/app/assets/images/.

If no Rails root found, output the WebP in the same directory as the source and warn the user.

4. Convert

Single file:

cwebp -q 85 "<input.png>" -o "app/assets/images/<name>.webp"

Batch (directory):

for f in <dir>/*.png; do
  name=$(basename "$f" .png)
  cwebp -q 85 "$f" -o "app/assets/images/${name}.webp"
done

Strip any @2x suffix from the output filename — e.g. hero@2x.png → hero.webp.

5. Output the ERB snippet

For each converted file, print:

<%= image_tag "filename.webp", alt: "" %>

If display_width was provided:

<%= image_tag "filename.webp", alt: "", width: 400 %>

Analyze the image to generate the alt text.

6. Report

Print a short summary:

• Original file size
• WebP file size
• % reduction
• Destination path

Notes

• Quality 85 is a good default. If the user wants to adjust, accept -q <value> as an optional flag.
• Do not convert if the output WebP already exists and is newer than the source PNG, unless the user passes --force.
• The skill assumes PNGs are exported at 2x from Sketch. It does not rescale — sizing is handled via CSS.