studio-css-reset
Installation
SKILL.md
Studio CSS Reset
Remotion Studio's reset targets both the reset container and every descendant. A child does not necessarily inherit the visual styles of its parent: the reset may give that child its own computed value instead.
Diagnose the affected element
Inspect the element that actually paints the pixels, not only its parent:
- For text, inspect the
span,div, or other text wrapper. - For SVG icons, inspect the painted
path,circle, orrectas well as the outersvg. - Compare computed styles in every relevant state: idle, hovered, selected, focused, and disabled.
- Check whether the value comes from an inline style, SVG presentation attribute, inheritance, or the
.css-reset, .css-reset *rule.
Apply explicit local styles
Do not assume that styling the row, button, or outer SVG is enough.
For text wrappers, explicitly set the visual properties the component depends on, such as: