arch-webext-vue

Name: arch-webext-vue
Author: hairyf

github.com/hairyfDevelopment2699 installsUpdated 2w ago

About arch-webext-vue

A skill set for creating and maintaining browser extensions with Vitesse WebExt, a Vite-powered starter using Vue 3 and TypeScript. It documents the extension structure, build and release workflow, storage, messaging, and testing.

Key features

01Project structure and manifest guidance
02Multi-config Vite builds
03Popup, options, and sidepanel views
04Storage and cross-context messaging
05Testing and packaging workflows

Use cases

01Starting an extension with Vitesse WebExt
02Building popup and content-script views
03Sharing data across extension contexts
04Testing and packaging an extension

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hairyf/skills --skill arch-webext-vue

After installing, type/arch-webext-vuein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

GENERATION.md

assets/

ci.yml

references/

best-practices-setup-patterns.md

best-practices-type-safe-messaging.md

core-ci.md

core-manifest.md

core-overview.md

core-project-structure.md

features-background.md

features-components-icons.md

features-content-script.md

features-cross-context.md

features-dev-workflow.md

features-pack-release.md

features-storage.md

features-testing.md

features-types-and-env.md

features-views.md

features-vite-build.md

Details

From the project README

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

Comments

Markdown supported

Details

Author: hairyf
Repository: hairyf/skills
Category: Development
Installs: 99
GitHub stars: 26

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.