Scaffold wxt extension

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

Turnt Up Technologies株式会社の Claude Code プラグインマーケットプレイス

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

0 stars0 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.

What its author says it does

Copied from the file, not written here

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

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> を使っていない）
機密値をコードに埋め込んでいない