New Series

/new-series -- Automated Content Series Builder

> Note for the public release. This skill was extracted from a private content-production project. It references an internal Canvas 2D engine, renderer, fonts, and brand assets that are NOT bundled in this repo, so it will not run end-to-end out of the box. It is published as a reference blueprint: read it to see the full workflow and adapt the patterns to your own stack.

> Note for the public release. This skill was extracted from a private content-production project. It references an internal Canvas 2D engine, renderer, fonts, and brand assets that are NOT bundled in this repo, so it will not run end-to-end out of the box. It is published as a reference blueprint: read it to see the full workflow and adapt the patterns to your own stack.

> Note for the public release. This skill was extracted from a private content-production project. It references an internal Canvas 2D engine, renderer, fonts, and brand assets that are NOT bundled in this repo, so it will not run end-to-end out of the box. It is published as a reference blueprint: read it to see the full workflow and adapt the patterns to your own stack.

You are building a content series inside the your project project at /.

MANDATORY: ALL rendering uses Canvas 2D (CanvasRenderingContext2D). Never use HTML/CSS for visual content. Never use WebGL/Three.js. Every visual element is drawn with ctx.fillRect(), ctx.fillText(), ctx.drawImage(), roundedRect(), Path2D, etc. The Canvas 2D engine at @/lib/engine/ is the foundation of every single animation in this project.

---

Step 1: Ask TWO Questions

Before doing ANYTHING, ask these two questions:

Question 1: Format

> What are we making? > 1. Carousel -- Canvas 2D slides (1080x1440), exported as PNG at 4x (4320x5760) > 2. IG Reel -- Canvas 2D animation (1080x1920 portrait), exported as MP4 via WebCodecs > 3. YouTube video -- Canvas 2D animation (1920x1080 landscape), exported as MP4 via WebCodecs

Question 2: Visual Pattern

> Pick a visual pattern or describe a new one? > > Existing Canvas 2D patterns: > | # | Pattern | Example Series | Good For | > |---|---------|---------------|----------| > | 1 | Terminal typing | coresignal, claude-plugins | Commands, code, prompts | > | 2 | VS Code mockup | claude-setup | File structures, configs | > | 3 | Split view (terminal + result) | claude-plugins | Before/after, input/output | > | 4 | Card reveal (spring pop) | puttingonvercel | Logos, comparisons, features | > | 5 | Apple Notes typing | solofounder CTA | CTA slides | > | 6 | Word-by-word spring reveal | coresignal part3 | Hero text, headings | > | 7 | Dot-flow board | newseo | Flowcharts, processes | > | 8 | Film strip layout | claude-shortcuts | Multi-frame sequences | > | 9 | Number count-up | solofounder part10 | Stats, revenue, metrics | > | 10 | Staggered list entry | claude-plugins CTA | Feature lists, bullet points | > | 11 | New -- describe it | -- | Custom visual concept |

Wait for answers before proceeding.

---

Step 2: Auto-Name the Series + Parse the Script

Auto-generate the series name and slug by understanding the script's topic. Do NOT ask you for the name. Examples:

• Script about Claude Code tricks -> slug: claude-tricks, title: "Claude Code Tricks"
• Script about Vercel deployment -> slug: vercel-deploy, title: "Deploying on Vercel"
• Script about Coresignal data -> slug: coresignal, title: "Coresignal"

Rules for slugs: lowercase, hyphenated, short (1-3 words max), descriptive.

Then break the script into individual parts/slides. Each distinct line, concept, or visual idea = one part.

Present a table for approval (include the auto-generated name):

Series: "" (/)

| Part | Script Line | Canvas 2D Visual Concept |
|------|------------|--------------------------|
| 1    | "line..."  | Terminal window with typing animation (roundedRect + fillText) |
| 2    | "line..."  | Card reveal with spring pop (scale transform + springInterpolate) |
| ...  | ...        | ... |

Wait for approval or adjustments before building. you can override the name if needed.

---

Step 3: Research (MANDATORY -- ALWAYS DO THIS)

Before writing a single line of code, ALWAYS research the topic on the web. This is not optional. Even if you think you know, verify.

3a: Topic Research

• WebSearch the topic/product/brand mentioned in the script
• Understand what it is, how it works, key features -- so your visuals are accurate
• If the script mentions a product (e.g., Coresignal, Replit, Vercel), research what it actually does

3b: Logo Research (MANDATORY for any brand/product)

• WebSearch for the exact SVG path data from Simple Icons (https://simpleicons.org) or the brand's GitHub repo
• Search query: " svg path" site:simpleicons.org or " logo svg path data"
• Extract the EXACT d="..." attribute from the SVG -- do NOT approximate or draw logos freehand
• Use new Path2D(svgPathString) to render on Canvas 2D
• NEVER use PNG/image assets for logos -- always SVG paths via Canvas 2D Path2D API
• NEVER guess or approximate a logo -- if you can't find the exact SVG path, tell you

3c: Design Research (pixel-perfect)

• WebSearch for exact hex colors, dimensions, typography, corner radii, spacing
• Get platform-specific measurements (iOS notification height, Slack sidebar width, etc.)
• Every visual must be pixel-perfect -- research actual screenshots, design specs, Apple HIG, Material Design, etc.
• If referencing any UI (macOS window, terminal, VS Code, etc.), look up the exact pixel values -- never estimate

3d: Google Trends Validation (MANDATORY for new content ideas)

ALWAYS pull real Google Trends data before committing to a topic. Use the SerpAPI Google Trends API to validate that the topic has real search interest and is trending in the right direction.

API endpoint: https://serpapi.com/search.json?engine=google_trends&q=&date=today+3-m&api_key=

• Compare up to 5 topics in one query (comma-separated)
• Use date=today+3-m for 3-month trend (best for content decisions)
• Look for: Average interest score, peak value, growth trajectory (surging vs flat vs declining)
• Reject topics with flat/declining trends unless they have very high baseline interest
• Prioritize topics with 100+ peak and clear upward trajectory
• Present the trend data to you in a table format before finalizing topics

The SerpAPI key is stored in the project memory at memory/api-keys.md. Always use WebFetch to call the API.

Example query for Claude Code content:

https://serpapi.com/search.json?engine=google_trends&q=claude+code+mcp,claude+code+hooks,claude+code+plugins&date=today+3-m&api_key=

This step applies to content ideation and topic selection. Skip it only when you has already decided on the exact topic and just needs it built.

3e: ASCII Wireframe Before Building (MANDATORY)

Before coding ANY slide layout, draw an ASCII wireframe in the chat showing the exact structure. This ensures both sides agree on what is being built before a single line of code is written.

Example:

┌──────────┬──────────────────────┐
│          │ SKILL.md editor      │
│ Sidebar  │ (syntax highlighted) │
│ (tree)   │                      │
├──────────┼──────────────────────┤
│ TERMINAL │ OUTPUT PREVIEW       │
│ $ claude │ (mini webpage)       │
└──────────┴──────────────────────┘

Rules:

• Label every section with its name and purpose
• Show proportions (50/50, 30/70, etc.)
• Show borders, dividers, and panel hierarchy
• Wait for your approval before building
• Draw a new wireframe for EVERY layout variation or change

3f: Personalize All Content (MANDATORY)

Every visual must be personalized to your brand. Never use generic placeholders.

• Name: you
• Brand: Lead Gen Man (leadgenman)
• Products: your project (notifymotion.com), TiltIt (tiltit.video)
• VS Code title bars: Show "-- you" or the project name
• Code/config examples: Reference your real projects, brand colors (#FF6B35), tech stack (Next.js, Canvas 2D, Zustand, Supabase, Stripe)
• Terminal commands: Use real project names like "notifymotion" or "tiltit", not "my-app"
• SKILL.md content inside carousels: Reference your coding standards, not generic rules

This makes every piece of content feel authentic and personal -- not AI-generated template content.

---

Step 4: Build Everything

MANDATORY: Use parallel subagents for EVERYTHING possible. This is non-negotiable.

• Research phase: If researching 4+ topics, launch 4+ parallel agents (one per topic)
• Build phase: If building slides 3-8, launch 6 parallel agents (one per slide)
• Research + build: Launch research agent AND build agent simultaneously
• Never sequential: If two tasks don't depend on each other, they MUST run in parallel
• Single message, multiple Agent calls: Always send one message with multiple Agent tool blocks

you expects maximum parallelism at all times. Sequential work when parallel is possible = wasted time.

4a: Create the Hub Page

Reel/Video hub: app//page.tsx Carousel hub: app//carousel/page.tsx

Hub page pattern:

'use client';
import Link from 'next/link';

const PARTS = [
  { num: 1, title: 'Title', desc: 'Description', href: '//part1', ready: true },
  // ... one entry per part
];

export default function SeriesHub() {
  return (
    
      {/* Header */}
      
        
          SERIES TYPE
        
        
          Series Title
        
        
          N parts
        
      

      {/* Items */}
      
        {PARTS.map(p =>
          p.ready ? (
            
              
                {p.num}
                
                  {p.title}
                  {p.desc}
                
                →
              
            
          ) : (
            
              {p.num}
              
                {p.title}
              
              Soon
            
          )
        )}
      
    
  );
}

4b: Create Each Part/Slide

Use the format-specific template below. ALL content is rendered via Canvas 2D API.

---

FORMAT A: IG Reel (1080x1920 Portrait Video)

File pattern: app//part/page.tsx

Canvas 2D Engine Imports (MANDATORY)

'use client';

import { useEffect, useRef } from 'react';
import { createPlaybackLoop } from '@/lib/engine/animation-loop';
import { springInterpolate } from '@/lib/engine/spring';
import { easings } from '@/lib/engine/easing';
import { roundedRect } from '@/lib/engine/drawing-utils';
import type { AnimationConfig } from '@/lib/templates/types';
import Link from 'next/link';
import ReelExportButton from '@/components/reel-export/ReelExportButton';

Canvas Dimensions

const CW = 1080;  // Canvas width (portrait)
const CH = 1920;  // Canvas height (portrait)

Wallpaper Background (Canvas 2D -- cover-fit + dark overlay)

Default wallpaper: macOS Sequoia Dark

const WALLPAPER_URL = 'https://wsrv.nl/?url=512pixels.net/downloads/macos-wallpapers-6k/15-Sequoia-Dark-6K.jpg&output=webp&w=1920';

Other wallpapers available:

• macOS Ventura Dark: https://wsrv.nl/?url=512pixels.net/downloads/macos-wallpapers-6k/13-Ventura-Dark.jpg&output=webp&w=1920
• macOS Sonoma Dark: https://wsrv.nl/?url=512pixels.net/downloads/macos-wallpapers-6k/14-Sonoma-Dark.jpg&output=webp&w=1920
• Local Sonoma Horizon: /wallpapers/sonoma-horizon.png

Canvas 2D wallpaper drawing (cover-fit math):

if (wallpaper && wallpaper.complete) {
  const scale = Math.max(CW / wallpaper.naturalWidth, CH / wallpaper.naturalHeight);
  const dw = wallpaper.naturalWidth * scale;
  const dh = wallpaper.naturalHeight * scale;
  ctx.drawImage(wallpaper, (CW - dw) / 2, (CH - dh) / 2, dw, dh);
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';  // Dark overlay (0.38-0.70 range)
  ctx.fillRect(0, 0, CW, CH);
} else {
  ctx.fillStyle = '#0A0A0F';  // Fallback solid
  ctx.fillRect(0, 0, CW, CH);
}

Animation Config

const ANIM_CONFIG: AnimationConfig = {
  duration: 6.0,           // Total seconds
  fps: 60,                 // Always 60 for reels
  entryAnimation: 'spring-drop',
  entryDuration: 1.6,      // Spring entry phase
  holdDuration: 4.4,       // Content visible phase
  exitAnimation: 'fade',
  exitDuration: 0,         // NO exit (reel rules: no fade-out)
  spring: { stiffness: 280, damping: 22, mass: 1 },
};

drawScene Function (Canvas 2D -- the core)

5-param signature for ReelExportButton:

function drawScene(
  ctx: CanvasRenderingContext2D,
  entryProgress: number,      // 0-1 during entry
  holdProgress: number,       // 0-1 during hold
  exitProgress: number,       // 0-1 during exit
  wallpaper: HTMLImageElement | null
) {
  ctx.clearRect(0, 0, CW, CH);

  // 1. Wallpaper + dark overlay (Canvas 2D)
  // ... (see wallpaper pattern above)

  // 2. Spring entry transform (Canvas 2D transforms)
  const sp = springInterpolate(entryProgress, { stiffness: 280, damping: 22, mass: 1 });
  const alpha = easings.easeOutQuad(Math.min(1, entryProgress * 2.5));
  const entryScale = 0.85 + 0.15 * Math.min(1.02, sp);

  ctx.save();
  ctx.globalAlpha = alpha;
  ctx.translate(CW / 2, CH / 2);
  ctx.scale(entryScale, entryScale);
  ctx.translate(-CW / 2, -CH / 2);

  // 3. ALL CONTENT drawn with Canvas 2D API:
  //    ctx.fillRect(), ctx.fillText(), ctx.drawImage(),
  //    roundedRect(), ctx.beginPath(), ctx.arc(),
  //    new Path2D(svgString) for logos,
  //    ctx.createLinearGradient() for gradients

  // 4. Sequenced reveals during hold phase:
  //    if (holdProgress > 0.3) { ... draw element 2 ... }
  //    if (holdProgress > 0.6) { ... draw element 3 ... }

  ctx.restore();
}

Spring Physics Configs (from engine)

Common presets:

{ stiffness: 280, damping: 22, mass: 1 }  // Default (most parts)
{ stiffness: 300, damping: 22, mass: 1 }  // iOS notification
{ stiffness: 260, damping: 24, mass: 1 }  // Gentle entry
{ stiffness: 350, damping: 20, mass: 1 }  // Snappy pop
{ stiffness: 320, damping: 20, mass: 1 }  // Fast settle
{ stiffness: 400, damping: 30, mass: 1 }  // Snappy, no overshoot
{ stiffness: 300, damping: 15, mass: 1 }  // Bouncy overshoot

Easing Functions Available

easings.linear          // t
easings.easeInQuad      // t^2
easings.easeOutQuad     // t(2-t) -- most common for fade-in
easings.easeInOutQuad   // smooth both
easings.easeInCubic     // t^3
easings.easeOutCubic    // (t-1)^3+1 -- MOST USED for deceleration
easings.easeInOutCubic  // smooth both
easings.easeOutBack     // overshoot
easings.easeOutElastic  // elastic oscillation

Animation Sequencing Patterns

Time-based sequencing (preferred for complex animations):

const tProg = (t: number, s: number, d: number) => Math.max(0, Math.min(1, (t - s) / d));

// Title at t=0s, duration 0.6s
const titleP = springInterpolate(tProg(currentTime, 0, 0.6), SPRING);

// Subtitle at t=0.5s, duration 0.5s
const subP = springInterpolate(tProg(currentTime, 0.5, 0.5), SPRING);

holdProgress-based sequencing (for simpler animations):

// Element 1: holdProgress 0.0-0.3
if (holdProgress > 0) {
  const p = easings.easeOutCubic(Math.min(1, holdProgress / 0.3));
  ctx.globalAlpha = p;
  // draw element 1...
}

// Element 2: holdProgress 0.3-0.6
if (holdProgress > 0.3) {
  const p = easings.easeOutCubic(Math.min(1, (holdProgress - 0.3) / 0.3));
  ctx.globalAlpha = p;
  // draw element 2...
}

Staggered items:

items.forEach((item, i) => {
  const delay = 0.05 * i;
  const p = Math.max(0, Math.min(1, (holdProgress - 0.2 - delay) / 0.1));
  const alpha = easings.easeOutQuad(p);
  ctx.globalAlpha = alpha;
  // draw item...
});

React Component

export default

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [manthanpatelll](https://github.com/manthanpatelll)
- **Source:** [manthanpatelll/leadgenman-video-skills](https://github.com/manthanpatelll/leadgenman-video-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.