← ClaudeAtlas

extension-createlisted

Auto-scaffold Chrome extensions with WXT or Plasmo. Ask user for name/features, scaffold, configure entrypoints. Use when: create extension, scaffold, new extension.
andrewr303/claude-codex-plugin-lab · ★ 0 · Code & Development · score 60
Install: claude install-skill andrewr303/claude-codex-plugin-lab
# Extension Create (WXT & Plasmo) Auto-scaffold a Chrome extension project. Do NOT just explain — execute the workflow. ## Workflow (Execute This) ### Step 1: Gather requirements from user Ask the user to confirm: 1. **Extension name** (kebab-case, e.g. `my-tab-manager`) 2. **Short description** (1 sentence) 3. **UI framework**: React / Vue / Svelte / Vanilla (default: React) 4. **Features needed** (pick from list below): - Popup UI - Content script (modify pages) - Background service worker - Side panel - Options page - Context menu - Tab management / Storage / Active tab only ### Step 2: Pick scaffolder based on framework choice | Framework | Recommended Scaffolder | Why | |-----------|----------------------|-----| | React | **Plasmo** or WXT | Plasmo has CSUI, quickstarts | | Vue | **WXT** | First-class Vue support | | Svelte | **WXT** | First-class Svelte support | | Vanilla TS | **WXT** | Lightest setup | ### Step 3: Scaffold **WXT** — multi-framework, file-based entrypoints: ```bash npx wxt@latest init <name> --template <react|vue|svelte|vanilla> cd <name> && pnpm install ``` **Plasmo** — React-first, auto-manifest, rich quickstarts: ```bash # Basic React npm create plasmo --with-src # With Tailwind CSS npm create plasmo -- --with-tailwindcss # With specific template (see https://docs.plasmo.com/quickstarts) npm create plasmo -- --with-redux ``` Quickstarts: https://docs.plasmo.com/quickstarts Full docs: https://docs.plasmo.com/ ### Step 3