Chrome Extension Ui
This is a comprehensive ruleset for building Chrome extension UIs that actually work well. It covers 42 rules across component selection, accessibility, popups, side panels, content scripts, and feedback patterns, all organized by priority so you know what matters most. The source material is solid on the fundamentals like when to use a popup versus a side panel, why Shadow DOM matters for content script injection, and how to handle the annoying popup auto-close behavior. What I appreciate is the focus on accessibility and keyboard navigation as critical priorities rather than afterthoughts. If you're building any kind of Chrome extension interface or reviewing extension code, this gives you a structured checklist based on Manifest V3 best practices.
- skills.sh installs
- 732
- GitHub stars
- 222
- last updated
- Aug 21, 2026
Install
$ npx -y skills add pproenca/dot-skills --skill chrome-extension-ui --agent claude-codeInstalls into .claude/skills of the current project.
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)
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/pproenca/dot-skills
- Categories
- Automation & Workflows, Design & UI/UX
- First seen
- Jun 3, 2026
More from pproenca/dot-skills
All 100- Shadcn732
- Chrome Extension729
- Shell704
- Tailwind657
- Refactor651
- Expo561
- React496
- Tailwind Responsive Ui470
- Tailwind Ui Refactor467
- Zustand453
- Debug444
- Ios Design436
- Feature Spec431
- Feature Arch423
- React Testing Library418
- Jscodeshift416
- Expo React Native Coder415
- Tdd415
- Humanize409
- React Optimise403
- Knip Deadcode390
- Rails Hotwire380
- Ts Google378
- Nginx C Module Design369
Recommended
More Automation & Workflows
supabase-pentestyoanbernabeu/supabase-pentest-skillsOrchestrate a complete Supabase security audit with guided step-by-step execution and ownership confirmation.725skills.sh installs
pubmed-databasedavila7/claude-code-templatesDirect REST API access to PubMed. Advanced Boolean/MeSH queries, E-utilities API, batch processing, citation management. For Python workflows, prefer biopython 713skills.sh installs
client-onboardingjoellewis/finance_skillsDesign and implement end-to-end client onboarding workflows from prospect intake through funded account, covering KYC verification, document collection, e-signa701skills.sh installspre-trade-compliancejoellewis/finance_skillsGuide the design and implementation of automated pre-trade compliance systems that validate orders before execution. Use when building a compliance rule engine 699skills.sh installs
team-narrativedonchitos/claude-code-game-studiosOrchestrate the narrative team: coordinates narrative-director, writer, world-builder, and level-designer to create cohesive story content, world lore, and narr697skills.sh installs
creatormarswaveai/skillsCreator workflow — generate platform-ready content packages. Triggers on: "创作", "写公众号", "小红书", "口播", "creator", "content workflow", "帮我写一篇", "生成内容", "write an a696skills.sh installs