UI patterns for Chrome Extension interfaces covering popup design, options pages, side panel layouts, responsive design, dark mode, accessibility, form handling, and navigation patterns. Use when designing extension user interfaces.
View on GitHubfrancanete/fran-marketplace
chrome-extension-expert
chrome-extension-expert/skills/ui-patterns/SKILL.md
January 20, 2026
Select agents to install to:
npx add-skill https://github.com/francanete/fran-marketplace/blob/main/chrome-extension-expert/skills/ui-patterns/SKILL.md -a claude-code --skill ui-patternsInstallation paths:
.claude/skills/ui-patterns/# Chrome Extension UI Patterns
## Popup UI
### Popup Constraints
- **Max size:** 800px wide × 600px tall
- **Min size:** 25px × 25px
- **Behavior:** Closes on outside click
- **Lifecycle:** Recreated each time opened
### Basic Popup Structure
```html
<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="popup-container">
<header class="popup-header">
<img src="icons/icon32.png" alt="Logo" class="logo">
<h1>Extension Name</h1>
</header>
<main class="popup-content">
<!-- Main content -->
</main>
<footer class="popup-footer">
<button id="options">Settings</button>
</footer>
</div>
<script src="popup.js"></script>
</body>
</html>
```
### Popup Styles
```css
/* popup.css */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 350px;
min-height: 200px;
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
color: #333;
}
.popup-container {
display: flex;
flex-direction: column;
min-height: 200px;
}
.popup-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid #e0e0e0;
}
.popup-header h1 {
font-size: 16px;
font-weight: 600;
}
.popup-content {
flex: 1;
padding: 16px;
overflow-y: auto;
}
.popup-footer {
padding: 12px 16px;
border-top: 1px solid #e0e0e0;
display: flex;
justify-content: flex-end;
gap: 8px;
}
```
### Popup Patterns
**Quick Actions List:**
```html
<ul class="action-list">
<li class="action-item" data-action="save">
<span class="action-icon">💾</span>
<span class="action-text">Save Page</span>
<span class="action-shortcut">⌘S</span>
</li>
<li class="action-item" data-action="share">
<span class="action-icon">📤</span>
<span class="action-text">Share</span>
</li>
</ul>
```
```css
.ac