studio-css-reset

Name: studio-css-reset
Author: remotion-dev

54kstars3.9kforks

How to install studio-css-reset?

remotion-dev/remotion/studio-css-reset

$npx -y skills add remotion-dev/remotion --skill studio-css-reset

Installs into the current project.

Summary

Guidance for Remotion Studio UI changes where the global CSS reset affects nested elements. Use when editing packages/studio UI, especially when adding wrapper spans, inline icons, labels, buttons, compact rows, or any nested text whose typography, color, sizing, or truncation mu

Files · 1

View on GitHub

SKILL.md

1	# Studio CSS Reset
2
3	Remotion Studio applies a broad CSS reset to UI elements. Treat every new nested element as reset-styled unless the local component gives it explicit visual styles.
4
5	When changing Studio UI:
6
7	- Do not rely on a parent button or container for visible child text styles. Give wrapper spans or divs explicit `fontFamily`, `fontSize`, `lineHeight`, and either `color` or `color: 'inherit'`.
8	- Preserve compact-row layout when introducing icon-plus-label markup. Use fixed icon dimensions, `flexShrink: 0`, and explicit label truncation styles such as `minWidth`, `overflow`, `textOverflow`, and `whiteSpace`.
9	- Recheck hover and non-hover states after adding wrappers. The label should not grow, change row height, lose ellipsis, or change color unexpectedly.
10	- Prefer fixing the shared Studio component once when the reset issue appears in a repeated row pattern.
11
12	For Studio code changes, run at least the focused Studio checks:
13
14	```bash
15	bunx turbo run make --filter='@remotion/studio'
16	bunx turbo run lint test --filter='@remotion/studio'
17	```

People who liked this also viewed

6 picks

Type

studio-css-reset

54kstars3.9kforks

View on GitHub

How to install studio-css-reset?

remotion-dev/remotion/studio-css-reset

$npx -y skills add remotion-dev/remotion --skill studio-css-reset

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Studio CSS Reset
2
3	Remotion Studio applies a broad CSS reset to UI elements. Treat every new nested element as reset-styled unless the local component gives it explicit visual styles.
4
5	When changing Studio UI:
6
7	- Do not rely on a parent button or container for visible child text styles. Give wrapper spans or divs explicit `fontFamily`, `fontSize`, `lineHeight`, and either `color` or `color: 'inherit'`.
8	- Preserve compact-row layout when introducing icon-plus-label markup. Use fixed icon dimensions, `flexShrink: 0`, and explicit label truncation styles such as `minWidth`, `overflow`, `textOverflow`, and `whiteSpace`.
9	- Recheck hover and non-hover states after adding wrappers. The label should not grow, change row height, lose ellipsis, or change color unexpectedly.
10	- Prefer fixing the shared Studio component once when the reset issue appears in a repeated row pattern.
11
12	For Studio code changes, run at least the focused Studio checks:
13
14	```bash
15	bunx turbo run make --filter='@remotion/studio'
16	bunx turbo run lint test --filter='@remotion/studio'
17	```

People who liked this also viewed

6 picks

Type