메뉴
Workflow for diagnosing and fixing layout instability, text jumping, resizing issues, and rendering inconsistencies in Remotion animations.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Workflow for building scalable messaging systems on Microsoft Azure using queues, event-driven architecture, pub/sub systems, service buses, and cloud-native communication patterns.
Workflow for implementing observability systems on Microsoft Azure using logging, monitoring, tracing, telemetry, metrics, dashboards, and production-grade cloud diagnostics.
Workflow for creating procedural systems in Blender using Geometry Nodes, procedural materials, node-based modeling, and non-destructive generation techniques.
Workflow for creating precise hard surface models in Blender using clean topology, subdivision workflows, bevel systems, and production-ready modeling techniques.
Workflow for using Claude to generate Blender Python scripts, automate 3D workflows, and create procedural scenes, animations, and assets directly inside Blender.
End-to-end workflow for setting up Blender, rigging a character, and creating a simple animation with a clear output (rendered animation).
| name | remotion-layout-debugging |
| description | Workflow for diagnosing and fixing layout instability, text jumping, resizing issues, and rendering inconsistencies in Remotion animations. |
This skill enables Claude to diagnose and resolve layout instability issues in Remotion projects.
The workflow focuses on:
The goal is to ensure animations remain visually stable and professional even when dynamic content changes during playback.
Before starting:
Install Node.js: https://nodejs.org
Verify installation:
node -v
npm -v
npm init video
npm run dev
Recommended tools:
Recommended extensions:
Optional:
Use this skill when:
Do NOT use this skill for:
Fix a subtitle card that jumps vertically while text types onto the screen.
Claude should:
Final result should:
One of the most common causes of layout instability is dynamic resizing during animation.
Examples:
Claude should proactively detect:
Stable containers prevent visual jumping.
Recommended strategy:
Example approach:
Invisible Full Text
↓
Animated Visible Text Overlay
This ensures:
Animation logic should not directly control layout structure.
Preferred approach:
Avoid:
All motion should remain:
Preferred systems:
useCurrentFrame()spring()Avoid:
Layout issues are often invisible during fast playback.
Claude should inspect:
Frame-level validation improves:
Start by reproducing the layout instability consistently.
Identify:
Typical symptoms:
Check for:
Determine whether:
Preserve stable layout sizing.
Recommended fix:
This prevents:
Separate:
Example structure:
Stable Container
↓
Invisible Placeholder
↓
Animated Text Overlay
This improves:
Check:
Ensure:
Before export validate:
Render output:
npm run build
or:
npx remotion render
The final output should include:
The workflow itself should remain:
The agent should:
The workflow should optimize for: