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)

2. Accessibility & Navigation (CRITICAL)

3. Popup Design (HIGH)

4. Side Panel UX (HIGH)

5. Content Script UI (MEDIUM-HIGH)

6. Visual Feedback (MEDIUM)

7. Options & Settings (MEDIUM)

8. Icons & Branding (LOW-MEDIUM)

How to Use

Read individual reference files for detailed explanations and code examples:

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?

Be as detailed as possible for better results