mcpField
N
no-pointer

no-pointer

github.com/remotion-dev设计与 UI68.6k271 次安装今天更新
代码仓库

关于 no-pointer

用于在 Remotion Studio 中规范可点击控件、悬停状态和键盘焦点的编码技能，并指导逐状态检查样式。

主要功能

  1. 01控件使用默认光标
  2. 02使用共享悬停样式辅助项
  3. 03统一闲置与悬停颜色
  4. 04保留键盘可见焦点样式
  5. 05逐状态验证样式

适用场景

  1. 01更新 Studio 中的可点击控件
  2. 02移除指针式光标
  3. 03保留键盘焦点指示器

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/remotion-dev/remotion --skill no-pointer

安装后在 Claude Code 中输入/no-pointer确认已加载。

附带文件agents/openai.yaml

详细介绍

无指针

可点击控件请遵循 Studio 已确立的交互约定：

  • 设置 cursor: 'default'；不要使用 cursor: 'pointer'。
  • 通过 packages/studio/src/helpers/hoverable.ts 中的 HOVERABLE_CLASS_NAME 和 hoverableStyle() 实现纯视觉悬停样式。不要为颜色或背景变化添加 React 悬停状态。
  • 除非周围组件已使用共享的背景悬停约定，否则保持背景不变。对于纯文本操作，请将 TRANSPARENT 同时用于 idleBackground 和 hoverBackground。
  • 将 LIGHT_TEXT（#A6A7A9）用作闲置颜色，将 WHITE（white）用作 悬停颜色。图标和嵌套文本也必须遵循相同的状态；如果 Studio CSS 重置样式阻止继承，请检查实际绘制像素的元素。

焦点样式

移除默认轮廓和指针焦点阴影，但保留可见的键盘焦点指示器。将 packages/studio/src/helpers/hoverable.ts 中的 FOCUS_VISIBLE_ONLY_CLASS_NAME 与 HOVERABLE_CLASS_NAME 一起添加到控件上。共享类实现了以下模式：

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

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

绝不要移除 :focus-visible 指示器。在隐藏操作可被发现之前，不要让它们进入 Tab 顺序。

验证

在运行中的 Studio 中，检查控件在所有相关状态下的计算样式：

  • 闲置和悬停时的光标：default；
  • 闲置颜色：rgb(166, 167, 169)；
  • 悬停颜色：rgb(255, 255, 255)；
  • 指针焦点：无轮廓或盒阴影；
  • 键盘 Tab 焦点：显示标准的 FOCUS_BOX_SHADOW。

对于 Studio 代码更改，请运行：

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

评论

支持 Markdown