Abhi5415/tiktok-comparison-infographic

TikTok Comparison Infographic

End-to-end workflow for producing a comparison infographic (1080×1920 PNG) for TikTok. Invoked by the user with /tiktok-comparison-infographic.

The full method with render specs, props format, and content guidelines is in docs/tiktok-comparison-infographic-method.md. Read that file before starting.

Workflow with Approval Gates

Phase 1: Ideation (→ user approves topic)

The user may invoke this skill in two ways:

• With a topic: User provides a specific comparison (e.g., "worrying vs planning").
• Without a topic: Claude picks topics based on keyword map and dedup check.

1. Dedup Check — Read ALL content/tiktok-infographic/*/brief.md files. Don't duplicate comparisons already produced.
2. Read keyword map — Read docs/tiktok-keyword-map.md for validated search queries and content gaps.
3. Ideation — Present 2-3 comparison topic options. Each should:
   • Map to active search queries (say keywords in captions/on-screen text)
   • Have a "wrong" side the viewer recognizes in themselves (validation)
   • Have a "right" side that describes what Clarido enables (without naming it)
4. Present topics to the user and wait for approval before proceeding.

Phase 2: Content (→ user approves brief)

5. Write structured content for the approved topic:
   • Left title / right title
   • Left description / right description (one-line summaries under illustrations)
   • 2 sections:
     • Section 1 ("Feels Like" / "Sounds Like"): 5 bullet points per side — specific, visceral, behavioral
     • Section 2 ("Example"): First-person italic quotes showing internal monologue
6. Generate caption & hashtags — 1-2 sentences (identity-driven). 3-5 niche hashtags. Never use #fyp, #viral, #science.
7. Create content folder (content/tiktok-infographic/YYYY-MM-DD_HHMM_slug/) and save brief.md.
8. Present the full brief to the user and wait for approval before proceeding.

Phase 3: Asset Generation (automated)

After content approval, generate illustrations:

9. Write illustrations.json — Save to assets/illustrations.json:

   [
     {"name": "infographic-{left-concept}-icon", "prompt": "Scene description for left side icon"},
     {"name": "infographic-{right-concept}-icon", "prompt": "Scene description for right side icon"}
   ]
   

10. Generate illustrations: pipenv run python3 scripts/tiktok/illustrations.py <illustrations-json> <output-dir>
    • 2 illustrations, portrait 1024×1536, transparent bg, brand style
11. Copy to Remotion public: cp assets/illustrations/*.png ../../videos/public/ (from content folder)

Phase 4: Render (automated)

12. Write props.json — Save to content folder with all content mapped to the ComparisonInfographic props interface. Icon filenames must match the generated illustration names.
13. Render: cd videos && npx remotion still ComparisonInfographic out/{slug}.png --props=../{content-folder}/props.json
14. Copy PNG back to content folder.

Phase 5: Deliver (automated)

15. Email: Send the rendered PNG with caption and hashtags to both [email protected] and [email protected] using the Google Workspace MCP. Send two separate emails (one per recipient). Format:
    • To: [email protected] and [email protected] (use [email protected] as user_google_email for both sends)
    • Subject: {Left Title} vs {Right Title} — TikTok Infographic
    • Body: Caption text followed by hashtags, all on one line. Plain text ready to copy-paste into TikTok.
    • Attachment: The rendered PNG file from the content folder (use path option)

Content Folder Structure

content/tiktok-infographic/YYYY-MM-DD_HHMM_slug/
├── brief.md                # Topic, sections, caption, hashtags
├── assets/
│   ├── illustrations/      # 2 PNGs (brand style icons)
│   └── illustrations.json  # Specs for regeneration
├── props.json              # Remotion render props
└── slug.png                # Final rendered image

Critical Details

• Remotion component: ComparisonInfographic — registered in Root.tsx under <Folder name="Infographics">
• Render as still: Use npx remotion still, NOT npx remotion render (it's a single-frame PNG, not a video)
• Icon filenames: Must match exactly between illustrations.json names, props.json icon fields, and files in videos/public/
• Image size: Illustrations generated at 1024×1536 portrait — do NOT use 1024×1024
• Run end-to-end: Generate illustrations, render the PNG, AND email it — don't stop at code

Key Files

• Method doc: docs/tiktok-comparison-infographic-method.md
• Remotion component: videos/src/ComparisonInfographic/index.tsx
• Illustration generator: scripts/tiktok/illustrations.py
• Keyword map: docs/tiktok-keyword-map.md
• Brand reference images: assets/illustrations/overwhelmed-filing-cabinet.png, floating-yellow-balloon.png, planting-yellow-seedling.png