القائمة
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يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف 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.