メニュー
Build and run browser extensions with Vue 3 and Vite (Vitesse WebExtension template). Use when scaffolding or maintaining a Chrome/Firefox extension with popup, options, sidepanel, and content script UI.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Migrate a React Native project from NativeWind to Uniwind. Use when the user wants to replace NativeWind with Uniwind, upgrade from NativeWind, switch to Uniwind, or mentions NativeWind-to-Uniwind migration. Handles package removal, config migration, Tailwind 4 upgrade, cssInterop removal, theme conversion, and all breaking changes.
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent-* color props, platform/data/state/responsive variants, CSS variables, custom utilities, withUniwind for third-party components, cn/tailwind-merge, tailwind-variants, safe area utilities, gradients, fonts, React Navigation, UI kits, diagnostics, troubleshooting, and Uniwind Pro features. Does not cover NativeWind migration.
Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.
Use Tailwind CSS to style React Native components across web and native
End-to-end testing patterns with Playwright for full-stack Python/React applications. Use when writing E2E tests for complete user workflows (login, CRUD, navigation), critical path regression tests, or cross-browser validation. Covers test structure, page object model, selector strategy (data-testid > role > label), wait strategies, auth state reuse, test data management, and CI integration. Does NOT cover unit tests or component tests (use pytest-patterns or react-testing-patterns).
Keep JavaScript/TypeScript dependencies fresh with safety rails and monorepo support.
| name | arch-webext-vue |
| description | Build and run browser extensions with Vue 3 and Vite (Vitesse WebExtension template). Use when scaffolding or maintaining a Chrome/Firefox extension with popup, options, sidepanel, and content script UI. |
| metadata | {"author":"hairy","version":"2026.1.30","source":"Generated from https://github.com/antfu-collective/vitesse-webext, scripts located at https://github.com/antfu/skills"} |
arch-webext-vue skills cover Vitesse WebExt: a Vite-powered WebExtension starter with Vue 3, TypeScript, UnoCSS, and webext-bridge. It uses multi-entry Vite for popup/options/sidepanel, separate configs for background and content script, dynamic manifest generation, and shared setup and storage patterns. Use these skills when creating or maintaining a browser extension with this stack.
The skill is based on vitesse-webext (antfu-collective/vitesse-webext), generated at 2026-01-30.
| Topic | Description | Reference |
|---|---|---|
| Overview | Features, stack, when to use | core-overview |
| Project structure | Folders, entry points, scripts | core-project-structure |
| Manifest | Dynamic manifest, MV3, Firefox vs Chrome | core-manifest |
| CI | GitHub Actions — lint, typecheck, build, test, optional E2E | core-ci |
| Topic | Description | Reference |
|---|---|---|
| Vite build | Multi-config, shared config, background/content, dev stub | features-vite-build |
| Background | Entry, webext-bridge, side panel, content script HMR | features-background |
| Content script | Entry, Vue in shadow DOM, styles | features-content-script |
| Views | Popup, options, sidepanel—entry pattern, setupApp | features-views |
| Storage | useWebExtensionStorage, shared logic | features-storage |
| Cross-context | webext-bridge messaging between contexts | features-cross-context |
| Dev workflow | pnpm dev vs dev-firefox, load extension, stub HTML | features-dev-workflow |
| Pack & release | pack:zip, crx, xpi, clear, start:chromium/firefox | features-pack-release |
| Testing | Vitest unit tests, Playwright E2E, fixtures, extensionId | features-testing |
| Types & env | DEV, NAME, global/shim/modules.d.ts, env.ts | features-types-and-env |
| Components & icons | Auto-import components and icons, Iconify | features-components-icons |
| Topic | Description | Reference |
|---|---|---|
| Setup patterns | setupApp, common-setup, shared components/styles | best-practices-setup-patterns |
| Type-safe messaging | ProtocolMap in shim.d.ts for webext-bridge | best-practices-type-safe-messaging |
