graphic-gif
Creates animated looping GIFs from CSS animations (default) or AI image-to-video. 800×800px default, 6 animation types, 4 style presets. Trigger when user says "create an animated gif", "make a looping gif", "animated banner", "CSS animation gif", "social media animation", "make this loop", "animated graphic", or "motion graphic".
npx skills add Varnan-Tech/opendirectory --skill graphic-gif --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# graphic-gif Generates an animated looping GIF from CSS animations or an AI image-to-video API. Output: `animation.gif`. Unlike every other `graphic-` skill that outputs a static PNG or PDF, this skill outputs an animated `.gif`. Uses CSS `@keyframes` animations captured frame-by-frame via Playwright and the Web Animations API (Option A, default), or an AI image-to-video pipeline via Kling (Option B). --- ## Critical Rules (read before every generation) 1. **Default is css-animated.** Never use `ai-generated` unless explicitly requested. 2. **Canvas is 800×800px square.** All `clamp()` values computed at 800px (1vw = 8px). 3. **Single self-contained HTML.** All CSS inline in `<style>`. Font CDN `<link>` only external dependency. 4. **Never dump HTML in chat.** Save to file, show summary only. 5. **Frame capture uses Web Animations API seeking.** NOT `setTimeout` loops, NOT `animation-delay` tricks. 6. **Exact frame count:** `Math.floor(duration_seconds * fps)` frames. The frame at `t=duration_ms` MUST NOT be captured — it duplicates `t=0` and causes a visible stutter at the loop point. 7. **No placeholder boxes.** CSS-generated visuals only. No "image goes here" elements. 8. **Sim
- Critical Rules (read before every generation)
- Step 1: Intake
- Step 2: Internal Architecture (never shown to user)
- Step 3: HTML Generation (css-animated path)
- Step 4: Self-QA (fix every failure before Step 5)
- Step 5: Export
- Step 6: Output Summary
- AI-Generated Path (Option B)
- Prompt Tips (show when user asks for guidance)
ffmpeg -i input.mp4 -vf "fps=12,scale=800:800:flags=lanczos,palettegen=stats_mode=diff" palette.png
ffmpeg -i input.mp4 -i palette.png -vf "fps=12,scale=800:800:flags=lanczos,paletteuse=dither=bayer:bayer_scale=5" output.gif
mkdir -p [slug]
open [slug]/animation.html
bash [skill-root]/scripts/export-gif.sh \
node -e "
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: W, height: H } });
await page.goto('file://[slug]/animation.html');What does the graphic-gif skill do?
Creates animated looping GIFs from CSS animations (default) or AI image-to-video. 800×800px default, 6 animation types, 4 style presets. Trigger when user says "create an animated gif", "make a looping gif", "animated banner", "CSS animation gif", "social media animation", "make this loop", "animated graphic", or "motion graphic".
How do I install it?
Run `npx skills add Varnan-Tech/opendirectory --skill graphic-gif --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Varnan-Tech/opendirectory, a repository with 571 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.