Agent skill
chrome-extension-ui
Chrome Extensions UX/UI design and implementation guidelines for popups, side panels, content scripts, and options pages. Triggers on tasks involving browser extension UI, manifest v3, chrome APIs.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/chrome-extension-ui
SKILL.md
Chrome Extensions UX/UI Best Practices
Comprehensive UX/UI 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.
When to Apply
Reference these guidelines when:
- Building new Chrome extension user interfaces
- Choosing between popup, side panel, or content script UI
- Implementing accessible, keyboard-navigable interfaces
- Designing loading states, error handling, and feedback patterns
- Creating options pages and settings persistence
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Component Selection | CRITICAL | comp- |
| 2 | Accessibility & Navigation | CRITICAL | access- |
| 3 | Popup Design | HIGH | popup- |
| 4 | Side Panel UX | HIGH | panel- |
| 5 | Content Script UI | MEDIUM-HIGH | inject- |
| 6 | Visual Feedback | MEDIUM | feedback- |
| 7 | Options & Settings | MEDIUM | options- |
| 8 | Icons & Branding | LOW-MEDIUM | brand- |
Quick Reference
1. Component Selection (CRITICAL)
comp-popup-vs-sidepanel- Choose Side Panel for Persistent Taskscomp-content-script-ui- Use Content Scripts for In-Page UIcomp-single-purpose- Design for Single Purposecomp-minimal-permissions- Request Minimal Permissionscomp-action-tooltip- Provide Descriptive Action Tooltips
2. Accessibility & Navigation (CRITICAL)
access-keyboard-navigation- Enable Complete Keyboard Navigationaccess-focus-visible- Maintain Visible Focus Indicatorsaccess-aria-labels- Use ARIA Labels for Icon-Only Buttonsaccess-color-contrast- Ensure Sufficient Color Contrastaccess-focus-trap- Avoid Keyboard Focus Trapsaccess-semantic-html- Use Semantic HTML Elements
3. Popup Design (HIGH)
popup-size-constraints- Design Within Popup Size Limitspopup-instant-render- Render Popup Content Instantlypopup-primary-action- Make the Primary Action Obviouspopup-auto-close- Handle Popup Auto-Close Gracefullypopup-external-js- Keep JavaScript in External Filespopup-dynamic-switch- Use Dynamic Popups for State-Based UI
4. Side Panel UX (HIGH)
panel-non-distracting- Design Non-Distracting Side Panelspanel-tab-vs-window- Choose Tab-Specific vs Window-Wide Panelspanel-responsive-width- Design for Variable Panel Widthspanel-page-context- Sync Panel Content with Page Contextpanel-lazy-sections- Lazy Load Panel Sections
5. Content Script UI (MEDIUM-HIGH)
inject-shadow-dom- Use Shadow DOM for Style Isolationinject-z-index- Use Maximum Z-Index for Overlaysinject-document-ready- Inject UI After DOM Readyinject-unique-ids- Use Unique IDs to Prevent Conflictsinject-cleanup- Clean Up Injected Elements on Removal
6. Visual Feedback (MEDIUM)
feedback-loading-states- Show Loading States for Async Operationsfeedback-error-messages- Write Actionable Error Messagesfeedback-badge-status- Use Badge for At-a-Glance Statusfeedback-success-confirmation- Confirm Successful Actionsfeedback-notifications- Use Notifications Sparinglyfeedback-progress-indication- Show Progress for Long Operations
7. Options & Settings (MEDIUM)
options-embedded-page- Use Embedded Options for Simple Settingsoptions-sync-storage- Sync Settings Across Devicesoptions-auto-save- Auto-Save Settings on Changeoptions-sensible-defaults- Provide Sensible Default Settings
8. Icons & Branding (LOW-MEDIUM)
brand-icon-sizes- Provide All Required Icon Sizesbrand-distinctive-icon- Design a Distinctive Toolbar Iconbrand-badge-text- Keep Badge Text Under 4 Charactersbrand-consistent-styling- Maintain Consistent Visual Stylebrand-web-store-assets- Create Quality Web Store Assets
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions - Category structure and impact levels
- Rule template - Template for adding new rules
Reference Files
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
Didn't find tool you were looking for?