Agent skill · remotion-dev
no-pointer
Apply Remotion Studio's pointerless interaction styling to clickable controls. Use when adding or revising Studio buttons or links that should use the default cursor, brighten on hover, and show focus decoration only for keyboard navigation.
What it needs
About 1k tokens when loaded.
What this skill does
No Pointer Use the established Studio interaction convention for clickable controls: Set cursor: 'default'; do not use cursor: 'pointer'. Drive purely visual hover styling through HOVERABLECLASSNAME and hoverableStyle() from packages/studio/src/helpers/hoverable.ts. Do not add React hover state for color or background changes. Keep the background unchanged unless the surrounding component already uses a shared background-hover convention. For a text-only action, use TRANSPARENT for both idleBackground and hoverBackground. Use LIGHTTEXT (#A6A7A9) as the idle color and WHITE (white) as the hover color. Icons and nested text must follow the same state; inspect the element that paints the pixels if the Studio CSS reset blocks inheritance. Focus styling Remove the default outline and pointer-focus shadow, but preserve a visible keyboard focus indicator. Add FOCUSVISIBLEONLYCLASSNAME from packages/studio/src/helpers/hoverable.ts to the control alongside HOVERABLECLASSNAME. The shared class implements this pattern: Never remove the :focus-visible indicator. Keep hidden actions out of the tab order until they are discoverable. Verify In a running Studio, check the control's computed styles in all relevant states: idle and hovered cursor: default; idle color: rgb(166, 167, 169); hovered color: rgb(255, 255, 255); pointer focus: no outline or box shadow; keyboard Tab focus: the standard FOCUSBOXSHADOW is visible. For Studio code changes, run:
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills remotion-dev/no-pointer