renderlisted
Install: claude install-skill imMamdouhaboammar/linkedin-animated-infographics
# Render and ship
## Purpose
Convert an approved static/animated artboard into deterministic render evidence and final GIF output. Rendering is an acceptance stage, not a place to redesign the story.
Read `helper/GUIDE.md` first. Render evidence feeds `post-critic` and `story-verifier` through `build/render-report.json`.
## Use when
Use when capturing frames, building a GIF, diagnosing blank/jittery/oversized output, measuring seam or changed pixels, running render QA, or preparing a final LinkedIn image GIF.
## Inputs
- approved `build/post.html`
- duration/fps from verified motion timing when animated
- output file-size budget
- expected frame-zero state and safe-zone constraints
## Outputs
Return GIF/static render output plus `build/render-report.json` containing frame-zero, mobile legibility, motion percentage, seam result, duration/fps, file size, and any blocking render finding.
## Procedure
1. Use the one-command path when possible:
```bash
bash ${CLAUDE_PLUGIN_ROOT}/scripts/render.sh build/post.html build/post.gif --duration 6.0 --fps 12.5
```
2. The underlying deterministic stages are:
```bash
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/capture_frames.py build/post.html --out build/frames --duration 6.0 --fps 12.5 --selector "#artboard"
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/build_gif.py build/frames --out build/post.gif --fps 12.5 --max-mb 5 --colors 128
```
3. Read `references/qa-gates.md`, `references/production-pipeline.md`, and `references/pixel-perfect-