extension-uilisted

# Extension UI Build professional, polished Chrome extension interfaces. Do NOT just explain — execute the workflow. ## Workflow (Execute This) ### Step 1: Detect context 1. Check framework: `package.json` → React / Vue / Svelte / Vanilla 2. Check existing UI files: popup, sidepanel, options, content scripts 3. Check if Tailwind / shadcn / DaisyUI already configured 4. 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: 1. Dark mode support (critical — many users use dark mode) 2. Proper sizing constraints (see `references/extension-ui-constraints.md`) 3. Typography and spacing for small surfaces 4. Accessibility fixes (keyboard nav, aria, focus) 5. Loading/error/empty states 6. Animations (subtle, fast, pu