chrome-extension-ui
Skill2 starsChanged 8 months agoMITView on GitHub
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.
In this repository6 other files it gives its agents.
- .agents/skills/chrome-extension/AGENTS.mdAGENTS.md
- .agents/skills/chrome-extension-ui/AGENTS.mdAGENTS.md
- chrome-devtoolsSkill
- chrome-extensionSkill
- ui-ux-pro-maxSkill
- web-design-guidelinesSkill
The file
We split this skill into the rules it gives an agent
1 rule. About 0 are common, 1 is distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 102
Read individual reference files for detailed explanations and code examples:
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
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 |
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.