メニュー
Convert PNG or WebP source images to AVIF format for use as parallax layers, with optional background removal.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/nirholas/scroll-zoom-thing --skill convert-imagesコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Generate consistent AI image prompts for each parallax depth layer from a scene description.
Scaffold a complete CSS 3D parallax hero for MkDocs Material from scratch — home.html, home.css, and mkdocs.yml.
Index of all scroll-zoom-thing skills.
SOC 職業分類に基づく
SKILL.md を表示中
| name | convert-images |
| description | Convert PNG or WebP source images to AVIF format for use as parallax layers, with optional background removal. |
| version | 0.1.0 |
| triggers | ["when the user has PNG or WebP images and needs AVIF files","when the user wants to convert their layer images","when the user asks how to export images for the parallax"] |
| inputs | [{"name":"source_dir","type":"string","required":false,"description":"Directory containing source images (default \"raw/\")"},{"name":"output_dir","type":"string","required":false,"description":"Output directory for AVIF files (default \"docs/assets/hero/\")"},{"name":"quality","type":"integer","required":false,"description":"AVIF quality 0–100 (default 70)"},{"name":"remove_background","type":"boolean","required":false,"description":"Whether to run background removal before conversion (default false)"}] |
| outputs | ["AVIF files in docs/assets/hero/","shell script the user can run locally if tools are not available in the environment"] |
| constraints | ["do not overwrite existing AVIF files without user confirmation","report file sizes before and after conversion"] |
Convert source images to AVIF for use as parallax layers.
The parallax hero expects AVIF files in docs/assets/hero/. This skill
converts PNG or WebP source files and optionally removes backgrounds for
mid/foreground layers.
Check which conversion tools are available before proceeding:
command -v cavif && echo "cavif available"
command -v ffmpeg && echo "ffmpeg available"
command -v magick && echo "ImageMagick available"
command -v rembg && echo "rembg available"
Use the first available tool. If none are available, generate a shell script the user can run on their local machine.
cavif (preferred):
cavif --quality 70 input.png -o output@4x.avif
ffmpeg (fallback):
ffmpeg -i input.png -c:v libavc -crf 30 output@4x.avif
ImageMagick (last resort):
magick input.png -quality 70 output@4x.avif
For mid/near/foreground layers that need transparency:
rembg i input.png output_nobg.png
# then convert
cavif --quality 70 output_nobg.png -o layer@4x.avif
If rembg is not available, generate a requirements file:
rembg[gpu]
And instruct the user to run: pip install rembg[gpu] && rembg i input.png output.png
Output files should follow the convention expected in home.html:
| Layer | Filename |
|---|---|
| Far background | 1-landscape@4x.avif |
| Mid background |
2-plateau@4x.avif |
| Near midground | 5-plants-1@4x.avif |
| Foreground | 6-plants-2@4x.avif |
If the user has different filenames, update home.html to match — do not
rename files without asking.
Generate this script for users without local tools:
#!/usr/bin/env bash
set -euo pipefail
QUALITY=70
SRC="${1:-raw}"
OUT="${2:-docs/assets/hero}"
mkdir -p "$OUT"
for f in "$SRC"/*.png "$SRC"/*.webp; do
[ -f "$f" ] || continue
base=$(basename "${f%.*}")
echo "Converting $f → $OUT/${base}@4x.avif"
cavif --quality "$QUALITY" "$f" -o "$OUT/${base}@4x.avif"
done
echo "Done. Files in $OUT:"
ls -lh "$OUT"/*.avif
0.1.0 — Initial skill.