[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FE99BG6WVCF11YVZWDZRN1":3,"skill-same:01M6FE99BG6WVCF11YVZWDZRN1":55},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":28,"linkOnly":29,"markdownContent":30,"markdownBody":30,"frontMatter":31,"refName":32,"commitSha":33,"skillDirectory":34,"forksCount":35,"repositoryHtmlUrl":36,"repositoryHomepageUrl":37,"ownerHtmlUrl":38,"ownerBlogUrl":6,"ownerDescription":39,"updatedAt":40,"install":41,"resources":54},"01M6FE99BG6WVCF11YVZWDZRN1","chrome-extension-ui",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Fchrome-extension-ui\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[23,24,25,26,27],"chrome","ui","chrome extension","extension","chrome extension ui","2026-11-10 10:12:30",false,"# Chrome Extensions UX\u002FUI Best Practices\n\nComprehensive UX\u002FUI design guide for Chrome Extensions, optimized for Manifest V3. Contains 42 rules across 8 categories, prioritized by impact to guide extension UI development and code review.\n\n## When to Apply\n\nReference these guidelines when:\n- Building new Chrome extension user interfaces\n- Choosing between popup, side panel, or content script UI\n- Implementing accessible, keyboard-navigable interfaces\n- Designing loading states, error handling, and feedback patterns\n- Creating options pages and settings persistence\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | Component Selection | CRITICAL | `comp-` |\n| 2 | Accessibility & Navigation | CRITICAL | `access-` |\n| 3 | Popup Design | HIGH | `popup-` |\n| 4 | Side Panel UX | HIGH | `panel-` |\n| 5 | Content Script UI | MEDIUM-HIGH | `inject-` |\n| 6 | Visual Feedback | MEDIUM | `feedback-` |\n| 7 | Options & Settings | MEDIUM | `options-` |\n| 8 | Icons & Branding | LOW-MEDIUM | `brand-` |\n\n## Quick Reference\n\n### 1. Component Selection (CRITICAL)\n\n- [`comp-popup-vs-sidepanel`](references\u002Fcomp-popup-vs-sidepanel.md) - Choose Side Panel for Persistent Tasks\n- [`comp-content-script-ui`](references\u002Fcomp-content-script-ui.md) - Use Content Scripts for In-Page UI\n- [`comp-single-purpose`](references\u002Fcomp-single-purpose.md) - Design for Single Purpose\n- [`comp-minimal-permissions`](references\u002Fcomp-minimal-permissions.md) - Request Minimal Permissions\n- [`comp-action-tooltip`](references\u002Fcomp-action-tooltip.md) - Provide Descriptive Action Tooltips\n\n### 2. Accessibility & Navigation (CRITICAL)\n\n- [`access-keyboard-navigation`](references\u002Faccess-keyboard-navigation.md) - Enable Complete Keyboard Navigation\n- [`access-focus-visible`](references\u002Faccess-focus-visible.md) - Maintain Visible Focus Indicators\n- [`access-aria-labels`](references\u002Faccess-aria-labels.md) - Use ARIA Labels for Icon-Only Buttons\n- [`access-color-contrast`](references\u002Faccess-color-contrast.md) - Ensure Sufficient Color Contrast\n- [`access-focus-trap`](references\u002Faccess-focus-trap.md) - Avoid Keyboard Focus Traps\n- [`access-semantic-html`](references\u002Faccess-semantic-html.md) - Use Semantic HTML Elements\n\n### 3. Popup Design (HIGH)\n\n- [`popup-size-constraints`](references\u002Fpopup-size-constraints.md) - Design Within Popup Size Limits\n- [`popup-instant-render`](references\u002Fpopup-instant-render.md) - Render Popup Content Instantly\n- [`popup-primary-action`](references\u002Fpopup-primary-action.md) - Make the Primary Action Obvious\n- [`popup-auto-close`](references\u002Fpopup-auto-close.md) - Handle Popup Auto-Close Gracefully\n- [`popup-external-js`](references\u002Fpopup-external-js.md) - Keep JavaScript in External Files\n- [`popup-dynamic-switch`](references\u002Fpopup-dynamic-switch.md) - Use Dynamic Popups for State-Based UI\n\n### 4. Side Panel UX (HIGH)\n\n- [`panel-non-distracting`](references\u002Fpanel-non-distracting.md) - Design Non-Distracting Side Panels\n- [`panel-tab-vs-window`](references\u002Fpanel-tab-vs-window.md) - Choose Tab-Specific vs Window-Wide Panels\n- [`panel-responsive-width`](references\u002Fpanel-responsive-width.md) - Design for Variable Panel Widths\n- [`panel-page-context`](references\u002Fpanel-page-context.md) - Sync Panel Content with Page Context\n- [`panel-lazy-sections`](references\u002Fpanel-lazy-sections.md) - Lazy Load Panel Sections\n\n### 5. Content Script UI (MEDIUM-HIGH)\n\n- [`inject-shadow-dom`](references\u002Finject-shadow-dom.md) - Use Shadow DOM for Style Isolation\n- [`inject-z-index`](references\u002Finject-z-index.md) - Use Maximum Z-Index for Overlays\n- [`inject-document-ready`](references\u002Finject-document-ready.md) - Inject UI After DOM Ready\n- [`inject-unique-ids`](references\u002Finject-unique-ids.md) - Use Unique IDs to Prevent Conflicts\n- [`inject-cleanup`](references\u002Finject-cleanup.md) - Clean Up Injected Elements on Removal\n\n### 6. Visual Feedback (MEDIUM)\n\n- [`feedback-loading-states`](references\u002Ffeedback-loading-states.md) - Show Loading States for Async Operations\n- [`feedback-error-messages`](references\u002Ffeedback-error-messages.md) - Write Actionable Error Messages\n- [`feedback-badge-status`](references\u002Ffeedback-badge-status.md) - Use Badge for At-a-Glance Status\n- [`feedback-success-confirmation`](references\u002Ffeedback-success-confirmation.md) - Confirm Successful Actions\n- [`feedback-notifications`](references\u002Ffeedback-notifications.md) - Use Notifications Sparingly\n- [`feedback-progress-indication`](references\u002Ffeedback-progress-indication.md) - Show Progress for Long Operations\n\n### 7. Options & Settings (MEDIUM)\n\n- [`options-embedded-page`](references\u002Foptions-embedded-page.md) - Use Embedded Options for Simple Settings\n- [`options-sync-storage`](references\u002Foptions-sync-storage.md) - Sync Settings Across Devices\n- [`options-auto-save`](references\u002Foptions-auto-save.md) - Auto-Save Settings on Change\n- [`options-sensible-defaults`](references\u002Foptions-sensible-defaults.md) - Provide Sensible Default Settings\n\n### 8. Icons & Branding (LOW-MEDIUM)\n\n- [`brand-icon-sizes`](references\u002Fbrand-icon-sizes.md) - Provide All Required Icon Sizes\n- [`brand-distinctive-icon`](references\u002Fbrand-distinctive-icon.md) - Design a Distinctive Toolbar Icon\n- [`brand-badge-text`](references\u002Fbrand-badge-text.md) - Keep Badge Text Under 4 Characters\n- [`brand-consistent-styling`](references\u002Fbrand-consistent-styling.md) - Maintain Consistent Visual Style\n- [`brand-web-store-assets`](references\u002Fbrand-web-store-assets.md) - Create Quality Web Store Assets\n\n## How to Use\n\nRead individual reference files for detailed explanations and code examples:\n\n- [Section definitions](references\u002F_sections.md) - Category structure and impact levels\n- [Rule template](assets\u002Ftemplates\u002F_template.md) - Template for adding new rules\n\n## Reference Files\n\n| File | Description |\n|------|-------------|\n| [references\u002F_sections.md](references\u002F_sections.md) | Category definitions and ordering |\n| [assets\u002Ftemplates\u002F_template.md](assets\u002Ftemplates\u002F_template.md) | Template for new rules |\n| [metadata.json](metadata.json) | Version and reference information |\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fpproenca\u002Fdot-skills\u002Fchrome-extension-ui",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":42,"prompt":52,"zipAvailable":53},[43,46,49],{"tool":44,"command":45},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill chrome-extension-ui",{"tool":47,"command":48},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill chrome-extension-ui",{"tool":50,"command":51},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill chrome-extension-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fpproenca\u002Fdot-skills\u002Fchrome-extension-ui\u002FSKILL.md",true,[],[56,70,80,89,95,102],{"skillNo":57,"name":58,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":66,"publishedAt":28},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[61],{"categoryNo":62,"categoryName":63,"taxonomyType":64,"taxonomyTypeDesc":65},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[67,68,69],"model","model hierarchy","model hierarchy skill",{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":76,"publishedAt":28},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[75],{"categoryNo":62,"categoryName":63,"taxonomyType":64,"taxonomyTypeDesc":65},[77,78,79],"MCP","zoom","zoom mcp",{"skillNo":81,"name":82,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":85,"publishedAt":28},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[86,87,88,78],"sdk","zoom apps sdk","apps",{"skillNo":90,"name":91,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":28},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[91],{"skillNo":96,"name":97,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":101,"publishedAt":28},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[100],{"categoryNo":62,"categoryName":63,"taxonomyType":64,"taxonomyTypeDesc":65},[97],{"skillNo":103,"name":104,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":28},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[104]]