anybox: Skill for Codex

前端 UI 样式模板

用途

使用这个 skill 为小型产品级 UI 基础组件套用一致、可复用的样式基础。优先读取目标应用已有的设计 token、组件模式和相邻样式，再用本 skill 的模板补齐缺失部分。

工作流程

1. 在写样式之前，先检查目标应用已有的 token、基础样式和相邻组件。
2. 将本 skill 的语义 token 映射到本地 token，避免在已有等价 token 时硬编码颜色。
3. 只在需要时加载对应参考文档：
   • 右键菜单、自定义上下文菜单：读取 references/context-menu.md。
   • 页面滚动条、长滚动容器：读取 references/scrollbar.md。
4. 基础组件样式要保持紧凑、可操作、可复用。除非组件明确属于某个业务功能，否则避免使用过于业务化的命名。
5. 完成前检查亮色主题、暗色主题、键盘操作、鼠标操作、视口边缘定位、禁用状态和长文本。

基础规则

• 优先使用现有 CSS 变量。常见映射包括 surface、elevated surface、border、primary text、secondary text、focus outline、shadow、radius 和 motion duration。
• 菜单样式优先服从应用已有的 semantic token。常见映射包括 dropdown/menu surface、tree/list row hover surface、hover text、danger text/surface、border、font family、shadow 和 radius。
• 菜单和控件圆角保持克制。普通应用基础组件使用 4px 到 8px，除非当前设计系统明确使用其他圆角；浮层菜单窗口的外层圆角可比菜单项或小控件略大 1px 到 2px，优先使用本地 menu/dropdown radius token。
• 菜单宽度要贴合内容。不要让短标签菜单套用过宽的通用 selector 宽度；图标 + 短文本的应用选择菜单优先让面板用 width: max-content / fit-content 按最长项推断宽度。此类菜单不要继承 184px、220px 这类通用 min-width；用 min-width: 0 或很小的内容下限，只保留视口保护用的 max-width。菜单项本身仍应 width: 100% 填满已推断出的面板宽度，确保每一行 hover/selected 背景等宽。
• 菜单项默认不要有背景块。只有 hover、focus、active、selected 或 highlighted 状态才显示背景；按钮触发的下拉菜单也遵守这一点。
• 交互行使用稳定尺寸：固定最小高度、明确图标槽位、文本省略、可选快捷键槽位。
• 短右键菜单、短下拉菜单和按钮触发的动作菜单默认不显示、不预留右侧滚动条槽位；只有菜单项确实可能超过视口时才允许内部滚动。紧凑弹层即使需要滚动，也优先隐藏可见 scrollbar，避免右侧出现拖动条或空白槽位；谨慎使用 scrollbar-gutter: stable。
• 页面级、主内容区和长列表的可见滚动条采用轻量标准样式：轨道透明或贴合页面背景，不画外框；滑块窄、圆角胶囊、低对比中性灰，默认不抢视觉，hover 或拖动时才略微加深；不要使用彩色、渐变、阴影、加宽滚动条或常驻背景槽。具体实现读取 references/scrollbar.md。
• 紧凑菜单不常驻显示解释性小字。将说明放在 hover tooltip、title、aria-describedby 或详情面板里；菜单行内只保留主标签、状态/动作词和必要图标。
• 破坏性操作使用语义变体。不要依赖菜单项位置来编码危险样式。
• 动作菜单优先使用 role="menu" 和 role="menuitem"。根据应用交互模型一致地使用 aria-disabled 或 disabled。
• 带搜索框的菜单使用同一套菜单 surface、radius、hover、focus token；搜索框固定在顶部，下面的结果区才滚动，但不要显示右侧拖动条或预留 scrollbar 区域。语义上可使用 role="dialog" 包含 searchbox + listbox，不要为了套用普通菜单角色而牺牲搜索输入的可访问性。
• 可能被滚动容器或 overflow 裁剪的浮层菜单，使用 portal 或 fixed 定位渲染。
• 除非产品明确接管该区域，否则保留输入框、textarea、可编辑内容和 webview 中的浏览器原生右键菜单。
• 不要给工具型 UI 添加装饰性卡片、夸张阴影、渐变或营销页式视觉处理。