What problem does it solve?
Remotion Studio applies a global CSS reset that targets both the reset container and every descendant, which can cause nested text and SVG icons to render with incorrect color, typography, sizing, hover states, or truncation. This Skill provides a systematic approach to diagnosing the actual painted element and applying explicit local styles to fix the visual regression.
Core Features & Use Cases
- Element-Level Diagnosis: Inspect the specific span, div, path, or rect that paints pixels rather than only its parent, and compare computed styles across idle, hovered, selected, focused, and disabled states.
- Explicit Local Style Application: Set concrete font, color, and layout properties on text wrappers and SVG icons, using
color: 'inherit' only when the styled element directly paints the content.
- Compact Row Layout Preservation: Apply fixed icon dimensions,
flexShrink: 0, and proper text truncation styles to maintain consistent row height and ellipsis behavior.
- Use Case: When a Studio sidebar row shows the wrong icon color on hover because the reset sets
color: white on the inner <path>, use this Skill to pass a concrete state color to the icon component and verify the computed style in a running Studio.
Quick Start
Use the studio-css-reset skill to diagnose why nested labels and icons in the Remotion Studio sidebar lose their hover color and apply explicit local styles to fix the reset inheritance issue.
