菜单
Workflow for updating homepage marketing videos and static first-frame images. Includes ffmpeg and ImageMagick commands for extracting first frames and optimizing videos for web (MP4/H.264 and WebM/VP9) at specific resolutions for desktop and mobile.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Cliparr media editor/export workflow guidance for HLS playback, source selection, Mediabunny export, timeline normalization, subtitle burn-in, metadata tagging, media proxy behavior, and memory-sensitive export changes. Use when an agent changes or reviews files under apps/frontend/src/components/editor, apps/frontend/src/lib media/export helpers, apps/server media proxy/provider playback paths, or shared provider playback contracts.
Use this skill when changing, reviewing, or adding Cliparr LogTape logging in frontend, server, shared helpers, or tests. Covers Cliparr category taxonomy, wide-event boundaries, flat dot-notated fields, context, redaction/noise rules, no-console enforcement, and validation for logging PRs.
Cliparr repository Git workflow for naming branches, commits, pull requests, preflight validation, and publish flows with package-scoped Conventional Commit syntax. Use when an agent is creating or suggesting branch names, commit messages, PR titles, PR descriptions, or using git/gh to publish local Cliparr changes, especially for squash-merge release notes and semantic PR title validation.
基于 SOC 职业分类
| name | cliparr-www-assets |
| description | Workflow for updating homepage marketing videos and static first-frame images. Includes ffmpeg and ImageMagick commands for extracting first frames and optimizing videos for web (MP4/H.264 and WebM/VP9) at specific resolutions for desktop and mobile. |
Use this skill when you need to replace the preview videos or static screenshots on the Cliparr homepage (apps/www).
| Asset Type | Resolution | Image Path | Video Paths |
|---|---|---|---|
| Desktop | 1600x886 | apps/www/src/assets/screenshot.webp | apps/www/public/preview.mp4, apps/www/public/preview.webm |
| Mobile | 402x874 | apps/www/src/assets/mobile-pwa-preview.webp | apps/www/public/mobile-pwa-preview.mp4, apps/www/public/mobile-pwa-preview.webm |
desktop-source.mov (or .mp4) and mobile-source.mov (or .mp4).Extract the first frame as a PNG, then convert it to optimized WebP.
Desktop:
ffmpeg -i desktop-source.mov -frames:v 1 desktop-frame.png
magick desktop-frame.png -quality 72 apps/www/src/assets/screenshot.webp
rm desktop-frame.png
Mobile:
ffmpeg -i mobile-source.mov -frames:v 1 mobile-frame.png
magick mobile-frame.png -quality 72 apps/www/src/assets/mobile-pwa-preview.webp
rm mobile-frame.png
Generate optimized MP4 and WebM versions.
MP4 (H.264):
ffmpeg -i desktop-source.mov -vf "scale=1600:886" -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -an apps/www/public/preview.mp4
WebM (VP9):
ffmpeg -i desktop-source.mov -vf "scale=1600:886" -c:v libvpx-vp9 -crf 30 -b:v 0 -deadline good -cpu-used 1 -an apps/www/public/preview.webm
MP4 (H.264):
ffmpeg -i mobile-source.mov -vf "scale=402:874" -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -an apps/www/public/mobile-pwa-preview.mp4
WebM (VP9):
ffmpeg -i mobile-source.mov -vf "scale=402:874" -c:v libvpx-vp9 -crf 30 -b:v 0 -deadline good -cpu-used 1 -an apps/www/public/mobile-pwa-preview.webm
ls -lh apps/www/public/preview.* apps/www/public/mobile-pwa-preview.* apps/www/src/assets/*.webp
pnpm dev:web
apps/www/src/pages/index.astro still shows the static image.After updating the assets, ensure the Picture component in apps/www/src/pages/index.astro still has matching width and height attributes to avoid layout shifts.