From hairyf-skills-4
Builds and runs browser extensions using Vue 3, Vite, TypeScript, and Vitesse WebExtension template for Chrome/Firefox with popup, options, sidepanel, and content script UIs.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin hairyf-skills-4This skill uses the workspace's default tool permissions.
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.
GENERATION.mdassets/ci.ymlreferences/best-practices-setup-patterns.mdreferences/best-practices-type-safe-messaging.mdreferences/core-ci.mdreferences/core-manifest.mdreferences/core-overview.mdreferences/core-project-structure.mdreferences/features-background.mdreferences/features-components-icons.mdreferences/features-content-script.mdreferences/features-cross-context.mdreferences/features-dev-workflow.mdreferences/features-pack-release.mdreferences/features-storage.mdreferences/features-testing.mdreferences/features-types-and-env.mdreferences/features-views.mdreferences/features-vite-build.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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 |