메뉴
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
Build and maintain React Native apps with Expo SDK, EAS Build, EAS Update, and Continuous Native Generation. Use when configuring Expo projects, adding native modules, building binaries, or shipping over-the-air updates.
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).
| 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 |
