← ClaudeAtlas

renderlisted

Capture deterministic infographic frames, assemble GIF output, measure motion/seam/file size, and run the render acceptance gates before shipment.
imMamdouhaboammar/linkedin-animated-infographics · ★ 2 · Data & Documents · score 68
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-