extension-ui
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-schemeorclass="dark") - Check accessibility: semantic HTML, aria-labels, focus management
More from quangpl/browser-extension-skills
extension-analyze
Audit Chrome extensions for security issues, best practice violations, performance problems, and CWS compliance. Scans manifest, code, CSP, message handlers, storage, and dependencies.
23extension-create
Auto-scaffold Chrome extensions with WXT or Plasmo. Ask user for name/features, scaffold, configure entrypoints. Use when: create extension, scaffold, new extension.
22extension-manifest
Generate and validate manifest.json with optimal permissions for Chrome MV3 extensions. Analyzes code to determine minimum permissions. Use when: manifest, permissions, manifest.json.
21extension-dev
Detect Chrome extension framework/stack, find proper docs, implement features, and debug across service worker, content script, and popup contexts.
20extension-assets
Generate and manage all Chrome extension assets: icons (16–128px), CWS listing images, promotional tiles, and public/ folder setup. Supports ImageMagick, Gemini API, and manual prompt templates.
19extension-review
Scan extension source code for Chrome Web Store rejection risks. Generates report with issues, root causes, and fixes. Use when: review, pre-submit, rejection, CWS compliance, store review.
18