About studio-css-reset
A CSS guidance skill for Remotion Studio contributors. It explains how `.css-reset` applies styles to reset containers and why nested elements need explicit styling.
Key features
- 01Describes reset container scope
- 02Lists properties set by the reset
- 03Explains descendant style behavior
- 04Recommends explicit nested-element styling
Use cases
- 01Style text inside a reset container
- 02Style SVG shapes within Studio UI
- 03Diagnose why parent styles do not affect descendants
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/studio-css-resetin Claude Code to confirm it loaded.
Bundled filesagents/openai.yaml
Details
From the project READMEStudio CSS reset
Studio uses .css-reset containers to limit the effect of user styles on its UI. The bundler injects this rule in packages/bundler/src/setup-environment.ts:
.css-reset, .css-reset * {
font-size: 16px;
line-height: 1.5;
color: white;
font-family: Arial, Helvetica, sans-serif;
background: transparent;
box-sizing: border-box;
}
The rule applies to each reset container and every descendant, but only to the properties shown. It does not cover elements outside those containers or prevent a stronger user CSS rule from winning.
Must-follow rule
Do not rely on inheritance for a property in this reset. Each descendant receives its own reset value, so styling a parent alone will not style nested text or SVG shapes. Set the needed value on the element that renders it, or use a CSS selector that explicitly styles that descendant.