Skip to main content
affpapa.org
RU EN
skill CX Codex

chrome-extension-ui — Claude Code skill: Chrome extension UI rules

A rule set for Chrome extension interfaces: when to use a popup versus a side panel, how to keep navigation keyboard-accessible, how to handle loading and errors.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add pproenca/dot-skills --skill chrome-extension-ui -a claude-code
Open on GitHub

What chrome-extension-ui does

The skill packs 42 rules into 8 categories, ordered by impact. Component selection and accessibility sit at the top as critical, followed by popup design, side panel UX, content script UI, visual feedback, options pages and icons. Each rule has its own file under references/ with an explanation and code examples.

Rules carry prefixes: comp- covers the popup versus side panel versus content script decision, access- covers keyboard navigation, focus and ARIA, and the rest are popup-, panel-, inject-, feedback-, options-, brand-. Some of them address the usual breakage points: popup size limits, style isolation with Shadow DOM, maximum z-index for overlays, and cleaning up injected elements when they are removed.

Everything targets Manifest V3 and the Chrome APIs. Install is one command through npx skills add from the pproenca/dot-skills repository, MIT licensed. If this is your first extension, start with the comp- and access- categories — they are marked critical, and reworking them later costs more.

What it helps with

  • pick between popup, side panel and content script for a given task
  • make the extension UI fully keyboard navigable
  • fit popup content inside the allowed size limits
  • isolate an injected widget's styles from the host page
  • show loading and error states around async Chrome API calls

Example prompts for the agent

  • Help me design the extension UI: I need a persistent task list, popup or side panel?
  • Review my popup for accessibility: focus handling, ARIA labels, contrast
  • Inject a widget into the page with Shadow DOM and remove it on cleanup

How to install chrome-extension-ui

1Skills CLI (Vercel)

npx skills add pproenca/dot-skills --skill chrome-extension-ui -a claude-code

2Manually: put the files in place

~/.claude/skills/chrome-extension-ui/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/chrome-extension-ui/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about chrome-extension-ui

How do I install chrome-extension-ui in Claude?

Run npx skills add pproenca/dot-skills --skill chrome-extension-ui -a claude-code. The skill lands at ~/.claude/skills/chrome-extension-ui/SKILL.md.

What does chrome-extension-ui do?

It gives the agent a set of Chrome extension UX/UI rules: component selection, accessibility, popups, side panels, content script UI, loading states, options and icons.

Which manifest version do the rules target?

Manifest V3 and the Chrome APIs. Categories are ordered by impact, so the critical component selection and accessibility rules come first.

Source text

SKILL.md · MIT 
---
name: chrome-extension-ui
description: 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.
---

# 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`](references/comp-popup-vs-sidepanel.md) - Choose Side Panel for Persistent Tasks
- [`comp-content-script-ui`](references/comp-content-script-ui.md) - Use Content Scripts for In-Page UI
- [`comp-single-purpose`](references/comp-single-purpose.md) - Design for Single Purpose
- [`comp-minimal-permissions`](references/comp-minimal-permissions.md) - Request Minimal Permissions
- [`comp-action-tooltip`](references/comp-action-tooltip.md) - Provide Descriptive Action Tooltips

### 2. Accessibility & Navigation (CRITICAL)

- [`access-keyboard-navigation`](references/access-keyboard-navigation.md) - Enable Complete Keyboard Navigation
- [`access-focus-visible`](references/access-focus-visible.md) - Maintain Visible Focus Indicators
- [`access-aria-labels`](references/access-aria-labels.md) - Use ARIA Labels for Icon-Only Buttons
- [`access-color-contrast`](references/access-color-contrast.md) - Ensure Sufficient Color Contrast
- [`access-focus-trap`](references/access-focus-trap.md) - Avoid Keyboard Focus Traps
- [`access-semantic-html`](references/access-semantic-html.md) - Use Semantic HTML Elements

### 3. Popup Design (HIGH)

- [`popup-size-constraints`](references/popup-size-constraints.md) - Design Within Popup Size Limits
- [`popup-instant-render`](references/popup-instant-render.md) - Render Popup Content Instantly
- [`popup-primary-action`](references/popup-primary-action.md) - Make the Primary Action Obvious
- [`popup-auto-close`](references/popup-auto-close.md) - Handle Popup Auto-Close Gracefully
- [`popup-external-js`](references/popup-external-js.md) - Keep JavaScript in External Files
- [`popup-dynamic-switch`](references/popup-dynamic-switch.md) - Use Dynamic Popups for State-Based UI

### 4. Side Panel UX (HIGH)

- [`panel-non-distracting`](references/panel-non-distracting.md) - Design Non-Distracting Side Panels
- [`panel-tab-vs-window`](references/panel-tab-vs-window.md) - Choose Tab-Specific vs Window-Wide Panels
- [`panel-responsive-width`](references/panel-responsive-width.md) - Design for Variable Panel Widths
- [`panel-page-context`](references/panel-page-context.md) - Sync Panel Content with Page Context
- [`panel-lazy-sections`](references/panel-lazy-sections.md) - Lazy Load Panel Sections

### 5. Content Script UI (MEDIUM-HIGH)

- [`inject-shadow-dom`](references/inject-shadow-dom.md) - Use Shadow DOM for Style Isolation
- [`inject-z-index`](references/inject-z-index.md) - Use Maximum Z-Index for Overlays
- [`inject-document-ready`](references/inject-document-ready.md) - Inject UI After DOM Ready
- [`inject-unique-ids`](references/inject-unique-ids.md) - Use Unique IDs to Prevent Conflicts
- [`inject-cleanup`](references/inject-cleanup.md) - Clean Up Injected Elements on Removal

### 6. Visual Feedback (MEDIUM)

- [`feedback-loading-states`](references/feedback-loading-states.md) - Show Loading States for Async Operations
- [`feedback-error-messages`](references/feedback-error-messages.md) - Write Actionable Error Messages
- [`feedback-badge-status`](references/feedback-badge-status.md) - Use Badge for At-a-Glance Status
- [`feedback-success-confirmation`](references/feedback-success-confirmation.md) - Confirm Successful Actions
- [`feedback-notifications`](references/feedback-notifications.md) - Use Notifications Sparingly
- [`feedback-progress-indication`](references/feedback-progress-indication.md) - Show Progress for Long Operations

### 7. Options & Settings (MEDIUM)

- [`options-embedded-page`](references/options-embedded-page.md) - Use Embedded Options for Simple Settings
- [`options-sync-storage`](references/options-sync-storage.md) - Sync Settings Across Devices
- [`options-auto-save`](references/options-auto-save.md) - Auto-Save Settings on Change
- [`options-sensible-defaults`](references/options-sensible-defaults.md) - Provide Sensible Default Settings

### 8. Icons & Branding (LOW-MEDIUM)

- [`brand-icon-sizes`](references/brand-icon-sizes.md) - Provide All Required Icon Sizes
- [`brand-distinctive-icon`](references/brand-distinctive-icon.md) - Design a Distinctive Toolbar Icon
- [`brand-badge-text`](references/brand-badge-text.md) - Keep Badge Text Under 4 Characters
- [`brand-consistent-styling`](references/brand-consistent-styling.md) - Maintain Consistent Visual Style
- [`brand-web-store-assets`](references/brand-web-store-assets.md) - Create Quality Web Store Assets

## How to Use

Read individual reference files for detailed explanations and code examples:

- [Section definitions](references/_sections.md) - Category structure and impact levels
- [Rule template](assets/templates/_template.md) - Template for adding new rules

## Reference Files

| File | Description |
|------|-------------|
| [references/_sections.md](references/_sections.md) | Category definitions and ordering |
| [assets/templates/_template.md](assets/templates/_template.md) | Template for new rules |
| [metadata.json](metadata.json) | Version and reference information |

© pproenca · MIT · pproenca/dot-skills

Similar skills

Everything for Frontend and UI →
chrome-extension samber Guides agents through Chrome extension work with Manifest V3. Use it for manifests, content scripts, background logic, browser APIs, and Chrome Web Store releases. CX Codex +1 4,500installs chrome-extension-development Mindrally Walks your agent through Manifest V3 extension work: manifest, service worker, content scripts, popup UI, and Chrome Web Store publishing. CX Codex +1 2,800installs chrome-extension-dev-js-typescript-cursorrules-pro PatrickJS A Cursor rule that points the agent at one set of conventions for building Chrome extensions in JavaScript and TypeScript. ★ 41,011repo stars chrome-extensions GoogleChrome Guides building and publishing Chrome Extensions using Manifest V3 standards. It sets concrete rules for service workers, side panels, and store reviews. CX Codex +1 10,900installs browser-extension-builder sickn33 Guides the architecture and implementation of Manifest V3 browser extensions for Chrome and Firefox. Useful when structuring content scripts, popups, and service workers. CX Codex +1 2,000installs clerk-chrome-extension-patterns clerk Guides integration of @clerk/chrome-extension into Chrome extensions. Helps configure popup sign-in, service worker session tokens, and OAuth delegation via syncHost. CX Codex +1 14,400installs

From the same set46

terminal-ui A skill with 42 rules for TypeScript terminal interfaces: rendering, keyboard input, prompts. Useful when you build a CLI on Ink or Clack. CX Codex +1 836installs typescript-refactor A skill with 47 rules for refactoring TypeScript and React/TSX: type architecture, narrowing, generics, and modern TS 6.0 / React 19 features. CX Codex +1 788installs react-refactor Architectural refactoring skill with 40 rules for React codebases. Guides component decomposition, custom hook design, and module boundaries. CX Codex +1 776installs shadcn A skill with 58 shadcn/ui rules that tells your agent how to add components, build forms and keep accessibility intact. CX Codex +1 724installs chrome-extension A skill with 67 rules for Chrome Extensions on Manifest V3. Useful when you write a service worker, a content script, or migrate off MV2. CX Codex +1 717installs shell A skill with 49 rules for bash and POSIX sh: quoting, strict mode, error handling. Useful whenever the agent writes or reviews a script. CX Codex +1 692installs refactor A skill with 43 refactoring rules drawn from Martin Fowler's catalog and Clean Code. Useful when you want the agent to restructure code by a fixed set of rules instead of guessing. CX Codex +1 641installs expo Expo and React Native performance guide that directs coding agents to optimize app launch, bundle size, list virtualization, and memory usage. CX Codex +1 553installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor