skills.rest
remotion-dev
remotion-devOFFICIAL
Explore all skills by this author →
Website𝕏@remotionGitHub

no-pointer

Apply Remotion Studio pointerless cursor and keyboard focus styling to clickable controls.

57.9k|4.4k|Updated Jun 23, 2020
Search Tags:#focus#cursor# styling#hover# accessibility#Remotion#Studio
One-click install
npx skills add https://github.com/remotion-dev/remotion --skill no-pointer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: no-pointer
Source: https://github.com/remotion-dev/remotion/tree/main/.agents/skills/no-pointer
Command: npx skills add https://github.com/remotion-dev/remotion --skill no-pointer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Remotion Studio controls must follow a consistent interaction convention that avoids the browser's default pointer cursor and preserves keyboard accessibility. Without a shared rule, buttons and links drift into inconsistent hover colors, missing focus indicators, or accidental React state for purely visual changes.

Core Features & Use Cases

  • Pointerless cursor convention: Sets cursor: 'default' on Studio controls and drives hover styling through the shared HOVERABLE_CLASS_NAME and hoverableStyle() helpers.
  • Keyboard focus preservation: Removes the default outline and pointer-focus shadow while keeping a visible :focus-visible indicator via FOCUS_VISIBLE_ONLY_CLASS_NAME.
  • Color and background rules: Uses LIGHT_TEXT (#A6A7A9) for idle and WHITE for hover, with TRANSPARENT backgrounds for text-only actions.
  • Use Case: When adding a new toolbar button or inline link to the Remotion Studio, apply this convention so the control matches every other Studio interaction and remains accessible to keyboard users.

Quick Start

Use the no-pointer skill to update this Remotion Studio control so it uses the default cursor, the shared hoverable hover styling, and a keyboard-only focus indicator.

Frequently Asked Questions about no-pointer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style a Remotion Studio button without the pointer cursor?▼

Set `cursor: 'default'` on the control and apply `HOVERABLE_CLASS_NAME` from `packages/studio/src/helpers/hoverable.ts`. Drive hover color changes through `hoverableStyle()` instead of React state so styling stays consistent across Studio.

What hover color should Remotion Studio controls use?▼

Use `LIGHT_TEXT` (`#A6A7A9`) as the idle color and `WHITE` for the hover color. For text-only actions, set both `idleBackground` and `hoverBackground` to `TRANSPARENT` so the surrounding background is preserved.

How do I keep keyboard focus visible without the default outline?▼

Add `FOCUS_VISIBLE_ONLY_CLASS_NAME` alongside `HOVERABLE_CLASS_NAME`. The shared CSS removes the default outline and box shadow on `:focus`, then reapplies the `FOCUS_BOX_SHADOW` only on `:focus-visible` for keyboard users.

Why does my Studio control lose its hover color on nested icons?▼

The Studio CSS reset can block color inheritance. Inspect the element that actually paints the pixels and apply the idle and hover colors directly to that element so icons and nested text follow the same state.

When should I not use the pointerless convention in Remotion Studio?▼

Avoid it for controls that intentionally need the browser's `pointer` cursor, such as draggable handles or non-Studio surfaces. Also keep hidden actions out of the tab order until they are discoverable to keyboard users.

Related Skills

Explore More Design & Creative Skills→
raintree-technologyraintree-technology
102

hig-components-menus

Design Apple HIG-compliant menus and buttons across Apple platforms.

Official
Intermediate
adobecomadobecom
1

mas-unit-test-runner

Automate unit test execution and analysis in MAS Studio.

Official
Intermediate
dembrandtdembrandt
33

button-states

Define complete visual interaction states for buttons and clickable elements.

Official
Intermediate
yyong008yyong008

seeksaas-ui

Guides UI component development with Shadcn UI and Tailwind CSS v4.

Community
Intermediate