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.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

interface:
  display_name: 'No Pointer'
  short_description: 'Apply Studio pointerless interaction styling'
  default_prompt: 'Use $no-pointer to make this Remotion Studio control follow the pointerless hover and keyboard-focus convention.'

---
name: no-pointer
description: 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.
---

# 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 `HOVERABLE_CLASS_NAME` 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 `LIGHT_TEXT` (`#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 `FOCUS_VISIBLE_ONLY_CLASS_NAME` from
`packages/studio/src/helpers/hoverable.ts` to the control alongside
`HOVERABLE_CLASS_NAME`. The shared class implements this pattern:

```css
.__remotion-focus-visible-only:focus {
  outline: none;
  box-shadow: none;
}

.__remotion-focus-visible-only:focus-visible {
  box-shadow: ${FOCUS_BOX_SHADOW};
}
```

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 `FOCUS_BOX_SHADOW` is visible.

For Studio code changes, run:

```bash
bunx turbo run make --filter='@remotion/studio'
bunx turbo run lint test --filter='@remotion/studio'
```