القائمة
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: