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.
Install
npx skills add https://github.com/pproenca/dot-skills --skill chrome-extension-uiSKILL.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 |
Related skills
vercel-react-best-practicesvercel-labs751KReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.vercel-composition-patternsvercel-labs361KReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.vercel-react-view-transitionsvercel-labs135KGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions viewpick-ui-libraryemilkowalski124KPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.