chrome-extension-ui

Name: chrome-extension-ui
Author: pproenca

github.com/pproenca设计与 UI218725 次安装11 周前更新

代码仓库

关于 chrome-extension-ui

面向 Chrome Extension 界面开发者的 Manifest V3 UX/UI 指南，按影响优先级整理设计规则，涵盖界面选择、无障碍、反馈和设置。

主要功能

01涵盖 8 类 UX/UI 主题
02提供 42 条优先级规则
03指导 Popup 与 Side Panel 选择
04包含键盘导航和无障碍建议
05涵盖加载状态与错误反馈

适用场景

01设计 Chrome Extension 界面
02选择 Popup、Side Panel 或页面内界面
03改善键盘操作和无障碍
04设计设置页与状态反馈

安装

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

$npx skills add https://github.com/pproenca/dot-skills --skill chrome-extension-ui

安装后在 Claude Code 中输入/chrome-extension-ui确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md

metadata.json

assets/templates/

_template.md

references/

_sections.md

access-aria-labels.md

access-color-contrast.md

access-focus-trap.md

access-focus-visible.md

access-keyboard-navigation.md

access-semantic-html.md

brand-badge-text.md

brand-consistent-styling.md

brand-distinctive-icon.md

brand-icon-sizes.md

brand-web-store-assets.md

comp-action-tooltip.md

comp-content-script-ui.md

comp-minimal-permissions.md

comp-popup-vs-sidepanel.md

comp-single-purpose.md

feedback-badge-status.md

feedback-error-messages.md

feedback-loading-states.md

feedback-notifications.md

feedback-progress-indication.md

feedback-success-confirmation.md

inject-cleanup.md

inject-document-ready.md

inject-shadow-dom.md

inject-unique-ids.md

详细介绍

Chrome 扩展程序 UX/UI 最佳实践

全面的 Chrome 扩展程序 UX/UI 设计指南，针对 Manifest V3 进行了优化。包含 8 个类别下的 42 条规则，并按影响优先级排序，为扩展程序界面开发和代码审查提供指导。

适用场景

在以下情况下可参考这些指南：

构建新的 Chrome 扩展程序用户界面
在弹出窗口、侧边栏或内容脚本界面之间进行选择
实现无障碍且支持键盘导航的界面
设计加载状态、错误处理和反馈模式
创建选项页并持久化设置

按优先级排列的规则类别

优先级	类别	影响	前缀
1	组件选择	严重	`comp-`
2	无障碍与导航	严重	`access-`
3	弹出窗口设计	高	`popup-`
4	侧边栏体验	高	`panel-`
5	内容脚本界面	中高	`inject-`
6	视觉反馈	中	`feedback-`
7	选项与设置	中	`options-`
8	图标与品牌	低中	`brand-`

快速参考

1. 组件选择（严重）

comp-popup-vs-sidepanel - 持续性任务应选择侧边栏
comp-content-script-ui - 使用内容脚本构建页面内界面
comp-single-purpose - 围绕单一用途进行设计
comp-minimal-permissions - 仅请求必要权限
comp-action-tooltip - 为操作提供描述性工具提示

2. 无障碍与导航（严重）

access-keyboard-navigation - 支持完整的键盘导航
access-focus-visible - 保持焦点指示器清晰可见
access-aria-labels - 为仅含图标的按钮使用 ARIA 标签
access-color-contrast - 确保足够的颜色对比度
access-focus-trap - 避免键盘焦点陷阱
access-semantic-html - 使用语义化 HTML 元素

3. 弹出窗口设计（高）

popup-size-constraints - 在弹出窗口的尺寸限制内进行设计
popup-instant-render - 立即渲染弹出窗口内容
popup-primary-action - 突出显示主要操作
popup-auto-close - 妥善处理弹出窗口自动关闭
popup-external-js - 将 JavaScript 保存在外部文件中
popup-dynamic-switch - 使用动态弹出窗口呈现基于状态的界面

4. 侧边栏体验（高）

panel-non-distracting - 设计不造成干扰的侧边栏
panel-tab-vs-window - 选择按标签页还是按窗口显示侧边栏
panel-responsive-width - 针对不同的侧边栏宽度进行设计
panel-page-context - 让侧边栏内容与页面上下文同步
panel-lazy-sections - 延迟加载侧边栏区域

5. 内容脚本界面（中高）

inject-shadow-dom - 使用 Shadow DOM 隔离样式
inject-z-index - 为叠加层使用最大 Z-index
inject-document-ready - 在 DOM 就绪后注入界面
inject-unique-ids - 使用唯一 ID 防止冲突
inject-cleanup - 移除时清理注入的元素

6. 视觉反馈（中）

feedback-loading-states - 显示异步操作的加载状态
feedback-error-messages - 编写可执行的错误消息
feedback-badge-status - 使用徽章一目了然地展示状态
feedback-success-confirmation - 确认操作已成功
feedback-notifications - 谨慎使用通知
feedback-progress-indication - 显示长时间操作的进度

7. 选项与设置（中）

options-embedded-page - 简单设置使用内嵌选项
options-sync-storage - 在不同设备间同步设置
options-auto-save - 设置更改时自动保存
options-sensible-defaults - 提供合理的默认设置

8. 图标与品牌（低至中）

brand-icon-sizes - 提供所有必需的图标尺寸
brand-distinctive-icon - 设计独特的工具栏图标
brand-badge-text - 徽章文本保持在 4 个字符以内
brand-consistent-styling - 保持视觉风格一致
brand-web-store-assets - 制作优质的网上商店素材

使用方法

阅读各个参考文件，了解详细说明和代码示例：

章节定义 - 分类结构和影响级别
规则模板 - 添加新规则的模板

参考文件

文件	描述
references/_sections.md	分类定义和排序
assets/templates/_template.md	新规则模板
metadata.json	版本和参考信息

支持 Markdown

登录后评论