skills.rest
videojs
videojsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

create-vite-plugin

Implement Vite and Rolldown plugins with correct hooks, ordering, and tests.

931|91|Updated Aug 13, 2025
Search Tags:#plugin#Frontend#Transform#build tooling#hmr#Rolldown#VITE
One-click install
npx skills add https://github.com/videojs/v10 --skill create-vite-plugin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-vite-plugin
Source: https://github.com/videojs/v10/tree/main/.agents/skills/create-vite-plugin
Command: npx skills add https://github.com/videojs/v10 --skill create-vite-plugin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Writing Vite plugins requires choosing between Rolldown and Vite plugin APIs, managing hook ordering, environment lifecycles, and serve/build activation, and mistakes lead to subtle build or dev-server bugs.

Core Features & Use Cases

  • Plugin Architecture Guidance: Classify requirements to decide between a raw Rolldown plugin, build.rolldownOptions.plugins, or a top-level Vite plugin.
  • Lifecycle and Ordering Rules: Apply enforce, per-hook order, apply gating, and environment-aware state management correctly.
  • Testing Strategy: Cover direct Rolldown tests, programmatic Vite serve/build tests, and worker or multi-environment scenarios.
  • Use Case: When asked to make a source transform available in Vite with rebuild-on-config-change, produce a host-generic Rolldown transform wrapped in a thin Vite adapter with explicit activation and tests.

Quick Start

Create a Vite plugin that transforms my source files and rebuilds when its configuration changes.

Frequently Asked Questions about create-vite-plugin

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Vite plugin?▼

Classify the requirement first: use a raw Rolldown plugin for host-generic resolution, loading, and transforms, or a Vite plugin for config, environments, dev server, HTML, or HMR behavior. Then set explicit serve/build activation and prove behavior with programmatic tests.

When should I use a Rolldown plugin instead of a Vite plugin?▼

Use a Rolldown plugin for module resolution, loading, transforms, graph work, and output generation that should also work in tsdown or direct Rolldown. Use Vite's extended interface only for config hooks, environments, middleware, HTML, and HMR.

What is the difference between enforce and hook order in Vite plugins?▼

The enforce field moves the entire plugin into a Vite pre or post tier around core plugins, while Rolldown object hooks can set order for a single hook. Prefer the narrowest ordering mechanism and prove ordering with behavior tests.

Does the Vite config hook support adding plugins?▼

No, adding plugins from the config hook has no effect because plugins were already resolved. The config hook may mutate config or return a deeply merged partial config, and final values should be read in configResolved.

Why does my Vite plugin break with SSR or worker builds?▼

Resolve, load, and transform hooks run per environment, so shared mutable state breaks under concurrent SSR, RSC, or worker builds. Use environment-aware APIs or fresh plugin instances, and note that worker.plugins requires a factory function.

Related Skills

Explore More Software Engineering Skills→
robinxinrobinxin

vite

Configure and migrate Vite projects to Vite 8 Rolldown.

Community
Advanced
egorfedorovegorfedorov
39

book-factory

Generate and validate book artifacts with deterministic packaging and integrity checks.

Community
Advanced
SteveGJonesSteveGJones
41

sample-skill

Validate installer plugin integration by copying a sample skill into the plugin structure.

Community
Basic
tungnguyen10tungnguyen10

vite

Configure, extend, and migrate Vite frontend build tool projects.

Community
Intermediate