Extension UI
Build professional, polished Chrome extension interfaces. Do NOT just explain — execute the workflow.
Workflow (Execute This)
Step 1: Detect context
- Check framework:
package.json → React / Vue / Svelte / Vanilla
- Check existing UI files: popup, sidepanel, options, content scripts
- Check if Tailwind / shadcn / DaisyUI already configured
- Identify extension type: popup-only, sidepanel, full options page
Step 2: Analyze existing UI
If UI files exist:
- Read component files for layout, spacing, color usage
- Check for dark mode support (
prefers-color-scheme or class="dark")
- Check accessibility: semantic HTML, aria-labels, focus management
- Check for Chrome design language alignment
Report findings: what's good, what needs improvement, priority fixes.
Step 3: Recommend UI stack
| Framework |
Recommended Stack |
| React |
shadcn/ui + Tailwind (best component quality) |
| React (minimal) |
Tailwind only + custom compact theme |
| Vue |
DaisyUI + Tailwind |
| Svelte |
Tailwind + svelte-headlessui |
| Vanilla |
Custom CSS with CSS variables |
Step 4: Implement improvements
Apply fixes in priority order:
- Dark mode support (critical — many users use dark mode)
- Proper sizing constraints (see
references/extension-ui-constraints.md)
- Typography and spacing for small surfaces
- Accessibility fixes (keyboard nav, aria, focus)
- Loading/error/empty states
- Animations (subtle, fast, purposeful)
Extension UI Constraints (Summary)
| Surface |
Size |
Key Constraints |
| Popup |
max 800x600px |
Closes on outside click, no resize |
| Sidepanel |
320-400px wide |
Full height, persistent |
| Options page |
Full tab |
Standard web page |
| Content script UI |
Injected |
CSS isolation via shadow DOM |
Full details: references/extension-ui-constraints.md
Dark Mode (Required)
Always implement dark mode. Extensions live in both light/dark browser themes.
/* CSS variables approach */
:root { --bg: #ffffff; --text: #111827; --border: #e5e7eb; }
@media (prefers-color-scheme: dark) {
:root { --bg: #1f2937; --text: #f9fafb; --border: #374151; }
}
Store user preference override in chrome.storage.sync.
Typography for Small Surfaces
- Base font: system font stack — no custom fonts (bundle size + render speed)
- Popup base size: 13-14px (readable without overflow)
- Line height: 1.4-1.5 (tighter than web default)
- Font weights: 400 (body), 500 (label), 600 (heading)
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
Color Palette (Chrome-aligned)
- Primary:
#1a73e8 (Google Blue) or brand color
- Surface:
#ffffff / #1f2937 dark
- Border:
#dadce0 / #374151 dark
- Text primary:
#202124 / #f9fafb dark
- Text secondary:
#5f6368 / #9ca3af dark
- Success:
#34a853, Error: #d93025, Warning: #fbbc04
Animations
- Duration: 100-200ms (popup feels instant)
- Easing:
ease-out for entrances, ease-in for exits
- Avoid layout-triggering animations (
transform, opacity only)
- Always respect
prefers-reduced-motion
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
Accessibility Checklist (Quick)
Full checklist: references/accessibility-checklist.md
References
references/extension-ui-constraints.md — Size limits, layout patterns per surfacereferences/design-system-setup.md — shadcn/ui, DaisyUI, Tailwind setupreferences/ux-patterns.md — Loading, error, empty states, onboardingreferences/accessibility-checklist.md — Full a11y requirements and testing
Related Skills
extension-create — Scaffold new extension with framework choiceextension-analyze — Analyze existing extension codebaseextension-assets — Icons, images, asset optimization
1---2name: extension-ui3description: Build polished Chrome extension UIs (popup/sidepanel/options). Analyze existing UI, suggest improvements, set up design systems, enforce a11y and UX best practices.4---56# Extension UI78Build professional, polished Chrome extension interfaces. Do NOT just explain — execute the workflow.910## Workflow (Execute This)1112### Step 1: Detect context13141. Check framework: `package.json` → React / Vue / Svelte / Vanilla152. Check existing UI files: popup, sidepanel, options, content scripts163. Check if Tailwind / shadcn / DaisyUI already configured174. Identify extension type: popup-only, sidepanel, full options page1819### Step 2: Analyze existing UI2021If UI files exist:22- Read component files for layout, spacing, color usage23- Check for dark mode support (`prefers-color-scheme` or `class="dark"`)24- Check accessibility: semantic HTML, aria-labels, focus management25- Check for Chrome design language alignment2627Report findings: what's good, what needs improvement, priority fixes.2829### Step 3: Recommend UI stack3031| Framework | Recommended Stack |32|-----------|------------------|33| React | shadcn/ui + Tailwind (best component quality) |34| React (minimal) | Tailwind only + custom compact theme |35| Vue | DaisyUI + Tailwind |36| Svelte | Tailwind + svelte-headlessui |37| Vanilla | Custom CSS with CSS variables |3839### Step 4: Implement improvements4041Apply fixes in priority order:421. Dark mode support (critical — many users use dark mode)432. Proper sizing constraints (see `references/extension-ui-constraints.md`)443. Typography and spacing for small surfaces454. Accessibility fixes (keyboard nav, aria, focus)465. Loading/error/empty states476. Animations (subtle, fast, purposeful)4849---5051## Extension UI Constraints (Summary)5253| Surface | Size | Key Constraints |54|---------|------|-----------------|55| Popup | max 800x600px | Closes on outside click, no resize |56| Sidepanel | 320-400px wide | Full height, persistent |57| Options page | Full tab | Standard web page |58| Content script UI | Injected | CSS isolation via shadow DOM |5960Full details: `references/extension-ui-constraints.md`6162---6364## Dark Mode (Required)6566Always implement dark mode. Extensions live in both light/dark browser themes.6768```css69/* CSS variables approach */70:root { --bg: #ffffff; --text: #111827; --border: #e5e7eb; }71@media (prefers-color-scheme: dark) {72 :root { --bg: #1f2937; --text: #f9fafb; --border: #374151; }73}74```7576Store user preference override in `chrome.storage.sync`.7778---7980## Typography for Small Surfaces8182- Base font: system font stack — no custom fonts (bundle size + render speed)83- Popup base size: 13-14px (readable without overflow)84- Line height: 1.4-1.5 (tighter than web default)85- Font weights: 400 (body), 500 (label), 600 (heading)8687```css88font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;89```9091---9293## Color Palette (Chrome-aligned)9495- Primary: `#1a73e8` (Google Blue) or brand color96- Surface: `#ffffff` / `#1f2937` dark97- Border: `#dadce0` / `#374151` dark98- Text primary: `#202124` / `#f9fafb` dark99- Text secondary: `#5f6368` / `#9ca3af` dark100- Success: `#34a853`, Error: `#d93025`, Warning: `#fbbc04`101102---103104## Animations105106- Duration: 100-200ms (popup feels instant)107- Easing: `ease-out` for entrances, `ease-in` for exits108- Avoid layout-triggering animations (`transform`, `opacity` only)109- Always respect `prefers-reduced-motion`110111```css112@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }113```114115---116117## Accessibility Checklist (Quick)118119- [ ] Tab order logical, all interactive elements reachable120- [ ] Icon-only buttons have `aria-label`121- [ ] Color contrast 4.5:1 minimum122- [ ] Focus visible (not just `:focus-visible` removed)123- [ ] Semantic HTML (`button` not `div`, `nav` for nav)124125Full checklist: `references/accessibility-checklist.md`126127---128129## References130131- `references/extension-ui-constraints.md` — Size limits, layout patterns per surface132- `references/design-system-setup.md` — shadcn/ui, DaisyUI, Tailwind setup133- `references/ux-patterns.md` — Loading, error, empty states, onboarding134- `references/accessibility-checklist.md` — Full a11y requirements and testing135136## Related Skills137138- `extension-create` — Scaffold new extension with framework choice139- `extension-analyze` — Analyze existing extension codebase140- `extension-assets` — Icons, images, asset optimization
quangpl