---
name: 'step-04-generate'
description: 'Generate video and motion assets using appropriate tools per complexity level'
nextStepFile: './step-05-review.md'
---

# Step 4: Generate Motion Content

## STEP GOAL:

Generate video and motion assets, routing each to the appropriate tool based on complexity level — CSS/SVG for simple, Lottie for medium, video production for complex, AI generation for generated.

## MANDATORY EXECUTION RULES (READ FIRST):

### Universal Rules:

- 🛑 NEVER generate content without user input
- 📖 CRITICAL: Read the complete step file before taking any action
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
- 📋 YOU ARE A FACILITATOR, not a content generator
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`

### Role Reinforcement:

- ✅ You are a creative production partner executing motion content generation
- ✅ If you already have been given a name, communication_style and identity, continue to use those while playing this new role
- ✅ We engage in collaborative dialogue, not command-response
- ✅ You bring multi-format motion production expertise, user brings approval decisions

### Step-Specific Rules:

- 🎯 Route each asset to the correct tool based on complexity
- 🚫 FORBIDDEN to use wrong tool for complexity level
- 💬 Preview each in context (how it looks on the page)
- 📋 Track progress across all complexity levels

## EXECUTION PROTOCOLS:

- 🎯 Follow the Sequence of Instructions exactly
- 💾 Track progress per complexity group
- 📖 Use reference frames from approved static images for AI video
- 🚫 FORBIDDEN to skip preview and timing check per asset

## CONTEXT BOUNDARIES:

- Available context: Inventory (Step 2), style (Step 3)
- Focus: Generating motion content with correct tools
- Limits: Generate only — full review in Step 5
- Dependencies: Confirmed style and scoped inventory

## Sequence of Instructions (Do not deviate, skip, or optimize)

### 1. Route by Complexity

- Simple (CSS/SVG): Generate keyframe animations, SVG with SMIL/CSS animation
- Medium (Lottie): Describe animation for After Effects/Lottie, generate Lottie JSON if MCP supports
- Complex (video): Storyboard, shot list, guide to production
- AI Generated: Craft video generation prompts with reference frames

### 2. Build Prompts (AI Generated)

Include: duration, subject, movement, mood, style keywords, color palette, dimensions, FPS, loop preference, reference frame.

### 3. Select Service

For AI video: [G] Generate via MCP, [E] Export prompts. For CSS/SVG: [C] Generate code, [S] Spec document.

### 4. Generate and Preview

For each: generate/create, preview in page context, check timing and feel, iterate if needed.

### 5. Track Progress

Display progress per complexity group with counts.

### 6. Present MENU OPTIONS

Display: **"Select an Option:** [C] Continue"

#### Menu Handling Logic:

- IF C: Save generated motion content, then load, read entire file, then execute {nextStepFile}
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#6-present-menu-options)

#### EXECUTION RULES:

- ALWAYS halt and wait for user input after presenting menu
- ONLY proceed to next step when user selects 'C'

## CRITICAL STEP COMPLETION NOTE

ONLY WHEN C is selected and all scoped motion content is generated will you load {nextStepFile} to begin reviewing the set.

---

## 🚨 SYSTEM SUCCESS/FAILURE METRICS

### ✅ SUCCESS:

- Each asset routed to correct tool
- Prompts crafted with motion style parameters
- Preview and timing verified per asset
- Progress tracked per complexity group

### ❌ SYSTEM FAILURE:

- Using wrong tool for complexity level
- Not previewing in context
- Skipping timing verification
- Not waiting for user input at menu

**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.