# Animated Content

Finds slow animated GIFs and suggests video conversion where it helps.

- Repository: https://github.com/thedaviddias/Front-End-Checklist (74621 stars)
- Category: Media
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add thedaviddias/Front-End-Checklist --skill animated-content -g -a claude-code -y`
Codex: `npx skills add thedaviddias/Front-End-Checklist --skill animated-content -g -a codex -y`
Cursor: `npx skills add thedaviddias/Front-End-Checklist --skill animated-content -g -a cursor -y`
Gemini CLI: `npx skills add thedaviddias/Front-End-Checklist --skill animated-content -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add thedaviddias/Front-End-Checklist`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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