← ClaudeAtlas

extension-devlisted

Detect Chrome extension framework/stack, find proper docs, implement features, and debug across service worker, content script, and popup contexts.
andrewr303/claude-codex-plugin-lab · ★ 0 · Code & Development · score 60
Install: claude install-skill andrewr303/claude-codex-plugin-lab
# Extension Dev Detect the stack, find docs, implement the feature, debug. Do NOT just explain — execute the workflow. ## Workflow (Execute This) ### Step 1: Detect framework and UI stack Run detection (see `references/framework-detection.md`): ```bash ls wxt.config.ts plasmo.config.ts vite.config.ts manifest.json 2>/dev/null cat package.json | grep -E '"wxt|plasmo|crxjs|react|vue|svelte"' ``` | File found | Framework | |---|---| | `wxt.config.ts` | WXT | | `package.json` has `plasmo` | Plasmo | | `vite.config` has `@crxjs` | CRXJS | | `manifest.json` in root, none above | Vanilla | ### Step 2: Fetch framework docs and style guides Use `docs-seeker` skill or web search to find proper docs for the detected stack. **Extension framework docs:** - WXT: https://wxt.dev/ | Plasmo: https://docs.plasmo.com/ | CRXJS: Vite plugin docs - Chrome APIs: https://developer.chrome.com/docs/extensions/reference/api - Permissions: https://developer.chrome.com/docs/extensions/reference/permissions-list **UI framework docs** (fetch based on detected framework): | Framework | Docs | Style Guide | |-----------|------|-------------| | React | https://react.dev | https://react.dev/learn | | Next.js | https://nextjs.org/docs | https://nextjs.org/docs/app | | Vue | https://vuejs.org/guide | https://vuejs.org/style-guide | | Svelte | https://svelte.dev/docs | https://svelte.dev/docs | | SolidJS | https://solidjs.com/docs | https://solidjs.com/guides | | Angular | https://angular.dev/guide | ht