From content-bots
Render structured CarouselSpec JSON into exact Instagram carousel slide artifacts using HTML/CSS and browser screenshots. Use when Codex needs to turn carousel-generator or format-adapter output into PNG slides, HTML previews, contact sheets, or deterministic visual compositions with exact text, cards, badges, step indicators, shadows, overlap, and z-index depth. Do not use as a bitmap asset generator; use imagegen only for supporting images or textures that will be embedded into the rendered layout.
How this skill is triggered — by the user, by Claude, or both
Slash command
/content-bots:carousel-rendererThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Turn a `CarouselSpec` into final slide artifacts. The renderer owns final
Turn a CarouselSpec into final slide artifacts. The renderer owns final
composition. Image generation may provide supporting assets, but must not be
used to compose final text-heavy slides.
Validate and write an HTML preview:
python3 skills/carousel-renderer/scripts/render_carousel.py path/to/spec.json --validate-only
Render PNG slides:
python3 skills/carousel-renderer/scripts/render_carousel.py path/to/spec.json
Default output:
output/carousels/<title-slug>/index.html
output/carousels/<title-slug>/slide-01.png
Use --out-dir, --width, and --height for explicit exports.
CarouselSpec from carousel-generator or format-adapter.visual_system, not deprecated visual_direction.render_carousel.py --validate-only first.index.html for layout quality, exact text, and visual rhythm.--validate-only to export PNG slides.Read references/rendering-contract.md when changing input handling,
validation rules, or output artifacts.
Accepted JSON wrappers:
{ "carousel": { ... } }{ "carousel_spec_json": { "carousel": { ... } } }{ "adaptation": { "carousel": { ... } } }{ "format_adaptation_spec_json": { "adaptation": { "carousel": { ... } } } }Every slide must include:
visual_system.layoutvisual_system.typevisual_system.containersvisual_system.assetsvisual_system.ui_calloutsvisual_system.depthvisual_system.motion_hintvisual_system.render_notes1080x1350.Run tests after editing the script:
python3 -m unittest discover -s tests -p 'test_*.py'
Validate the skill:
python3 /Users/segun/.codex/skills/.system/skill-creator/scripts/quick_validate.py skills/carousel-renderer
Sample input lives at references/carousel-spec-example.json.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub segunmarcaida/fannel-content-bots-plugin --plugin content-bots