Apply Remotion Studio’s interaction conventions to buttons and links: keep the default cursor, brighten text and icons on hover, and show a visible focus indicator for keyboard navigation using shared styling helpers.
中文简介正在准备中。当前显示英语简介。
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.
安装前可以查看交给 AI 代理的指令内容。
Use the established Studio interaction convention for clickable controls:
cursor: 'default'; do not use cursor: 'pointer'.HOVERABLE_CLASS_NAME and
hoverableStyle() from packages/studio/src/helpers/hoverable.ts. Do not add
React hover state for color or background changes.TRANSPARENT for both idleBackground and hoverBackground.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.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:
.__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.
In a running Studio, check the control's computed styles in all relevant states:
default;rgb(166, 167, 169);rgb(255, 255, 255);Tab focus: the standard FOCUS_BOX_SHADOW is visible.For Studio code changes, run:
bunx turbo run make --filter='@remotion/studio'
bunx turbo run lint test --filter='@remotion/studio'
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Add a reported Remotion bug to the bugs API with its affected versions, a short title, and upgrade guidance. Follow the existing entry format and place the new record first so recent bugs appear at the top.
中文简介正在准备中。当前显示英语简介。
Add a Remotion command-line or configuration option, or convert a hardcoded flag into a shared option definition. Connect parsing, configuration setters, help entries, and generated documentation so the option is consistently available and documented.
中文简介正在准备中。当前显示英语简介。
Add a new effect to @remotion/effects, including its implementation, package entry points, documentation, interactive demo, and preview images. Follow the package conventions and verify the changes with tests, formatting checks, and builds.
中文简介正在准备中。当前显示英语简介。
Add a person to the Remotion experts page by placing their portrait, entering their profile and contact links, and generating an expert card image. The instructions specify file locations, profile fields, and how to verify card generation.
中文简介正在准备中。当前显示英语简介。
Create a new @remotion package within the Remotion monorepo, a repository containing multiple packages. Set up its files, register it across the project, and prepare documentation, usage examples, and build configuration.
中文简介正在准备中。当前显示英语简介。
Add a new sound effect to @remotion/sfx, from registering the audio file to exporting its URL and documenting its use. The workflow covers playback examples, attribution, navigation entries, waveform generation, and the package build.
中文简介正在准备中。当前显示英语简介。