How do I install the Arch Webext Vue skill?

Run npx skillmds@latest add hairyf-skills/arch-webext-vue in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Arch Webext Vue safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Arch Webext Vue?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Arch Webext Vue free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Arch Webext Vue?

hairyf (@hairyf-skills) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Arch Webext Vue by hairyf-skills — Agent Skill

Name: Arch Webext Vue
Rating: 4.666666666666667 (3 reviews)
Author: hairyf

File contents

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.

Core References

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

Features

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

Best Practices

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

---name: arch-webext-vuedescription: 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.--- 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. ## Core References | Topic | Description | Reference | |-------|-------------|-----------| | Overview | Features, stack, when to use | [core-overview](references/core-overview.md) | | Project structure | Folders, entry points, scripts | [core-project-structure](references/core-project-structure.md) | | Manifest | Dynamic manifest, MV3, Firefox vs Chrome | [core-manifest](references/core-manifest.md) | | CI | GitHub Actions — lint, typecheck, build, test, optional E2E | [core-ci](references/core-ci.md) | ## Features | Topic | Description | Reference | |-------|-------------|-----------| | Vite build | Multi-config, shared config, background/content, dev stub | [features-vite-build](references/features-vite-build.md) | | Background | Entry, webext-bridge, side panel, content script HMR | [features-background](references/features-background.md) | | Content script | Entry, Vue in shadow DOM, styles | [features-content-script](references/features-content-script.md) | | Views | Popup, options, sidepanel—entry pattern, setupApp | [features-views](references/features-views.md) | | Storage | useWebExtensionStorage, shared logic | [features-storage](references/features-storage.md) | | Cross-context | webext-bridge messaging between contexts | [features-cross-context](references/features-cross-context.md) | | Dev workflow | pnpm dev vs dev-firefox, load extension, stub HTML | [features-dev-workflow](references/features-dev-workflow.md) | | Pack & release | pack:zip, crx, xpi, clear, start:chromium/firefox | [features-pack-release](references/features-pack-release.md) | | Testing | Vitest unit tests, Playwright E2E, fixtures, extensionId | [features-testing](references/features-testing.md) | | Types & env | __DEV__, __NAME__, global/shim/modules.d.ts, env.ts | [features-types-and-env](references/features-types-and-env.md) | | Components & icons | Auto-import components and icons, Iconify | [features-components-icons](references/features-components-icons.md) | ## Best Practices | Topic | Description | Reference | |-------|-------------|-----------| | Setup patterns | setupApp, common-setup, shared components/styles | [best-practices-setup-patterns](references/best-practices-setup-patterns.md) | | Type-safe messaging | ProtocolMap in shim.d.ts for webext-bridge | [best-practices-type-safe-messaging](references/best-practices-type-safe-messaging.md) |

Frequently asked questions

Arch Webext Vue