Animated Content
Finds slow animated GIFs and suggests video conversion where it helps.
Install
npx skills add thedaviddias/Front-End-Checklist --skill animated-content -g -a claude-code -y- Repository
- thedaviddias/Front-End-Checklist74.6k
- Category
- Media
- Updated
- 4d ago
- License
- MIT
- Context cost
- Lightabout 298 tokens
- Runs scripts
- No, instructions only
What it does
Use when auditing slow page loads, heavy assets, or rendering delays related to Convert animated GIFs to video. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
Convert animated GIFs to video
Large animated GIFs can significantly increase page weight and consume excessive CPU/memory, leading to slower page loads and poor scrolling performance.
Quick Reference
- Use
<video>instead of large GIFs for animations - GIFs are significantly larger than MP4/WebM
- Videos allow for better control and performance
Check
Check for large animated GIFs that could be replaced with more efficient video formats like MP4 or WebM.
Fix
Convert animated GIFs to MP4 or WebM and use the <video> tag with autoplay, loop, muted, and playsinline attributes.
Explain
Explain why video formats are more efficient than GIFs for animated content and how they improve performance.
Code Review
Review the routes, assets, and loading behavior that affect Convert animated GIFs to video. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/performance/animated-content
