CommunityImagengithub.com

story-sequence

Build an Instagram story sequence (9:16 photo frames with text boxes) or a 4:5 carousel from your own photos, on a live page you edit with Claude (words, red and green emphasis, accent box, crop, zoom, position, order), then export final JPGs exactly as approved. Use when you say "/story-sequence", "make a story sequence", "story frames", "make a carousel", or drop phone photos for a story.

¿Qué es story-sequence?

story-sequence is a Claude Code agent skill that build an Instagram story sequence (9:16 photo frames with text boxes) or a 4:5 carousel from your own photos, on a live page you edit with Claude (words, red and green emphasis, accent box, crop, zoom, position, order), then export final JPGs exactly as approved. Use when you say "/story-sequence", "make a story sequence", "story frames", "make a carousel", or drop phone photos for a story.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/eoin-oss/story-sequence-skill/tree/main

Installed? Explore more Imagen skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Story sequence

A story that gets replies is 4 jobs in the right order. This skill drafts the words with you, builds a page you edit live, and exports the frames exactly as you approved them.

The look

  • One real photo per frame, full bleed, 1080x1920. Your own snaps, never stock or AI.
  • Black rounded boxes, white bold sans, centred. One thought per box, 1 to 5 boxes per frame.
  • Markup per line (one line = one box):
    • [[word]] = red emphasis (the pain)
    • {{word}} = green emphasis (the win)
    • a line starting ! = red box, white text (the hook line that has to pop)
    • a line starting * = the accent box, one per frame max (default white box, black text; set your brand's accent in theme)
  • Every frame but the last ends on .... The last frame is the call to action with your keyword.
  • Text sits in the photo's empty space (sky, headspace, floor), never on a face. Keep it inside the IG safe area (y 250 to 1580).
  • Copy rules: no invented numbers or proof, your own words. Other people's faces: get their OK first.

Carousels

Same look, same page, same renderer: set "format": "carousel" in the doc for 1080x1350 (4:5) slides, safe area y 80 to 1270, no "..." rule. Over-under = a text group on the top and bottom of each slide.

The structure

Every sequence is one TYPE and runs HOOK -> AMPLIFIER -> VALUE -> CTA (optional). Label all of it before building.

  • Types: documentation (your week, loose, few boxes, no CTA) · wins (results) · value (process, breakdown, case study, a free drop) · limiting belief (contrarian open, the objection, the reality, proof, CTA). Two may mix.
  • Hook, frame 1, pick one: recency, relevancy (their fears or desires), celebrity jacking, proximity (same city or situation), conflict, weird.
  • Amplifier, frame 2 or 3, never later: social proof, desire, roadblock, controversial, personal story, information gap, call out, negative assumption ("and no, it's not X, Y or Z"), risk reversal, celebrity jacking, reference, visual, scarcity, killing expectations. No amplifier by frame 3 = fix it before the page goes live.
  • Value: a tool, resource, insight, step-by-step, relatable story with a lesson, or entertainment. It has to make them feel something.
  • Guardrails: scarcity only if real. Controversial = against an idea, never a person. Celebrity jacking = well-known public figures only. Reference = real sources only. Proof comes from your proof bank (real results, DMs, screenshots, each with a date, a source and an OK to show), never invented.
  • Weekly rotation (3): Mon documentation, no CTA · Wed value, a free drop with a keyword to get it · Fri wins or limiting belief with your offer keyword. Only one story a week asks for the sale. Never the same keyword twice in a week.
  • Log after posting: type, hook, amplifier, CTA, replies, and per-frame exits and forward taps from IG insights.

Flow (Claude runs this)

  1. Photos. Dump phone snaps in a folder. Run python3 scripts/prep.py "<folder>" <job dir> [[email protected] ...]: sorts into images/ + videos/, full-res to <job>/full/, 1080px web copies to <job>/pub/photos/, optional video stills. Look at every photo.
  2. Words (gate 1). Draft the beats in chat, labelled per The structure (type, hook, amplifier by frame 3, value, CTA or none), each mapped to a photo, proof from the proof bank. The creative is yours: edit it or say go.
  3. The page. Copy assets/page.html to <job>/pub/<slug>.html, replace {{TITLE}} and {{STORIES}} (one story: [["main","Story"]]; a week: [["mon","Mon"],["wed","Wed"],["fri","Fri"]], each its own doc story/<key>, shown as tabs). Publish it as a claude.ai Artifact with capabilities: {"db": {}, "user": {}} and files = every photos/<stem>.jpg. Seed each doc in the artifact's database (collection story): {title, theme: {accent, accentInk}, photos: [stems], frames: [{photo, fx, fy, zoom, size, top, topY, bottom, botY}]} (topY = top of the top group, botY = bottom of the bottom group, in 1920px frame space; start at 270 / 1560).
  4. Edit together. You edit on the page (it autosaves) or tell Claude; Claude reads the doc before every change and writes only its own edits, pinned to the version it read, so it never overwrites yours.
  5. Export (on your go). Save the doc as JSON, then python3 scripts/render.py <doc.json> <job>/full <out folder> --sheet. The renderer mirrors the page's CSS, so the export matches what you approved. Fix or flag every CHECK: it prints, and look at the contact sheet before posting.

Needs Python 3 with Pillow (pip install pillow); prep.py uses macOS sips for HEIC and ffmpeg for video stills.

Skills relacionados