Scaffold wxt extension

Skill turntuptechnologies-ai/skills/skills/scaffold-wxt-extension

ブラウザ拡張機能を新規に作るとき。「拡張機能を作る」「WXT で拡張を立ち上げ」等で使う。WXT + React + TypeScript + Tailwind CSS v4 + Vitest の構成で雛形を用意する。土台（CLAUDE.md・git）は new-project-init を先に使う。From its SKILL.md

Install

npx -y skills add turntuptechnologies-ai/skills --skill scaffold-wxt-extension

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.3 KB, ~1.1k tokens by cl100k_base, as published. Nobody here has run it

ブラウザ拡張 scaffold（WXT + React + TS + Tailwind）

WXT ベースで、Chrome / Firefox 両対応の拡張を雛形生成する。

stack

パッケージマネージャ: pnpm
フレームワーク: WXT + React 19（@wxt-dev/module-react）
スタイル: Tailwind CSS v4（@tailwindcss/vite）
テスト: Vitest（jsdom）
型チェック: tsc --noEmit
アイコン: @wxt-dev/auto-icons（任意）

手順

初期化 — 空ディレクトリで WXT を初期化し、React テンプレートを選ぶ。
```
pnpm dlx wxt@latest init .
# テンプレートで react / TypeScript を選択
pnpm install
```
Tailwind v4 を追加
```
pnpm add tailwindcss @tailwindcss/vite
```
wxt.config.ts の vite plugins に tailwindcss() を足し、エントリ CSS に @import "tailwindcss"; を書く。
Vitest を追加
```
pnpm add -D vitest jsdom
```

package.json の scripts を揃える

{
  "dev": "wxt",
  "dev:firefox": "wxt -b firefox",
  "build": "wxt build",
  "build:firefox": "wxt build -b firefox",
  "zip": "wxt zip",
  "compile": "tsc --noEmit",
  "test": "vitest run",
  "postinstall": "wxt prepare"
}

wxt.config.ts の骨子

import { defineConfig } from 'wxt';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  modules: ['@wxt-dev/module-react'],
  vite: () => ({ plugins: [tailwindcss()] }),
  manifest: {
    name: '{{ 拡張名 }}',
    description: '{{ 説明 }}',
    permissions: [/* 例: 'activeTab', 'storage' */],
    host_permissions: [/* 必要な対象オリジンのみ。広すぎる権限を避ける */],
  },
});

動作確認 — pnpm dev（Chrome）/ pnpm dev:firefox。型・テストは pre-pr-checks で確認。

ルール・コツ

権限は最小限に。 permissions / host_permissions は必要なものだけ。<all_urls> は避ける。
エントリポイントは entrypoints/（popup, content, background 等）。UI は React コンポーネントで作る。
postinstall: wxt prepare を入れると型生成が走り、初回 clone 後の型エラーを防げる。
Firefox 配布も視野なら build:firefox / zip:firefox も用意する。

補足

機密値（API キー等）はコードに埋め込まない。設定 UI かビルド時の環境変数で扱う。

完了条件

以下を全て満たしたら完了。満たせない項目があれば、黙って省略せず理由を報告する。

pnpm install が通り、pnpm dev で拡張が起動する
scripts（dev/build/zip/compile/test/postinstall）が揃っている
Tailwind v4 が vite plugin + エントリ CSS で有効になっている
manifest の permissions / host_permissions が必要最小限（<all_urls> を使っていない）
機密値をコードに埋め込んでいない

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.