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.
소스 정보
- 저장소
- remotion-dev/remotion
- 최근 소스 활동
- 2026년 8월 21일 12:57
- 감지된 SKILL.md 언어
- 영어
- 스타
- 64,425
- 포크
- 5,086
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
2 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- 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'
```
GitHub에서 보기