vite-advanced
Advanced Vite 8 patterns including Rolldown-powered builds, advancedChunks, Environment API, plugin development, SSR configuration, library mode, and build optimization. Use when customizing build pipelines, creating plugins, or configuring multi-environment builds.
- Installs
- 259
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/yonatangross/orchestkit --skill vite-advanced- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads vite-advanced automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Vite Advanced Patterns
A wrapper around Vite 8 (Rolldown-powered), not a copy of its documentation. Vite's own docs are the source of truth for config keys, API surface, and migration mechanics. This skill carries the house delta plus four enforceable rules.
Vite 8 replaces the esbuild+Rollup pipeline with Rolldown (Rust-based unified
bundler) and is the default for new projects. advancedChunks supersedes
manualChunks; build.rollupOptions becomes build.rolldownOptions.
Upstream coverage (do not restate)
Fetch these from Vite rather than expecting them here. Rows marked with a rule keep a narrower, enforceable house subset in that rule file: read the rule for the house position, fetch the doc for the full API.
| Topic | Fetch from |
|---|---|
Vite 7 to 8 migration: rolldownOptions, transformWithOxc, moduleType: 'js', removed hooks and output formats, browser target bumps | https://vite.dev/guide/migration |
Rolldown adoption path, rolldown-vite, Oxc, advancedChunks group syntax (house subset stays in rules/vite-advanced-chunks.md) | https://vite.dev/guide/rolldown |
Build options: target, minify, sourcemap, cssCodeSplit, cssMinify, assetsInlineLimit, chunkSizeWarningLimit | https://vite.dev/config/build-options |
Dependency pre-bundling and optimizeDeps include/exclude/force | https://vite.dev/guide/dep-pre-bundling |
| SSR: client and server entry points, middleware-mode dev server, production server wiring, streaming | https://vite.dev/guide/ssr |
Environment API config and per-environment build output (house subset stays in rules/vite-environments.md) | https://vite.dev/guide/api-environment |
Environment API for plugins: this.environment, perEnvironmentPlugin, applyToEnvironment | https://vite.dev/guide/api-environment-plugins |
Environment API for frameworks: createBuilder, buildApp, ModuleRunner | https://vite.dev/guide/api-environment-frameworks |
Plugin hook reference, virtual modules, enforce/apply, handleHotUpdate (house subset stays in rules/vite-plugin-hooks.md) | https://vite.dev/guide/api-plugin |
Env variables and modes, .env files, the VITE_ prefix | https://vite.dev/guide/env-and-mode |
Deploying a static site and verifying with vite preview | https://vite.dev/guide/static-deploy |
Library mode is not in the table: references/library-mode.md and
rules/vite-lib-config.md still carry it in full.
House delta
Read references/ork-delta.md for the rules Vite's docs do not
state: the Vite 8 adoption path for existing production apps, the VITE_ secrets
rule, the production sourcemap setting, the house build budget, the vite preview
gate, chunk-name stability across the advancedChunks migration, the visualizer
diff requirement, and the node_modules/.vite cache-clearing step.
House config
Not a Vite tutorial: these are the settings the delta above makes non-negotiable, in the shape we actually ship them.
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
build: {
// 'hidden' emits maps for the error reporter without publishing source.
// Never true (publishes source) and never 'inline' (inflates every JS file).
sourcemap: 'hidden',
rollupOptions: {
output: {
// Carry existing chunk NAMES across the manualChunks to advancedChunks
// migration. A renamed group changes its filename and invalidates that
// chunk for every returning visitor, even with identical contents.
advancedChunks: {
groups: [
{ name: 'vendor', test: /node_modules/, priority: 10 },
{ name: 'app', priority: 0 },
],
},
},
},
},
});
# Prove the build. `vite build` exiting 0 means the bundler finished, not that the
# app runs: base-path mistakes and dev-only env vars survive a green build.
vite build && vite preview # then walk the routes, console must be clean
# Diff the chunk graph before and after any chunk-config change.
npx vite-bundle-visualizer
# Stale pre-bundle cache mimics a broken plugin. Clear it BEFORE editing plugin code.
rm -rf node_modules/.vite && vite --force
VITE_-prefixed variables are inlined into the client bundle at build time. They are public bundle content, never secrets. Audit.env.productionbefore deploy.
Rules
| Rule | Covers |
|---|---|
rules/vite-advanced-chunks.md | Chunk splitting: advancedChunks groups, priority, maxSize, minShareCount |
rules/vite-environments.md | environments config for client, SSR, and edge; per-environment outDir |
rules/vite-lib-config.md | Library mode externals, dual ESM/CJS output, exports map, type declarations |
rules/vite-plugin-hooks.md | Hook order, virtual modules via resolveId + load, enforce and apply |
Key Decisions
| Decision | Recommendation |
|---|---|
| New projects | Vite 8 (default) |
| Existing production apps | Stage the upgrade through rolldown-vite before committing |
| Multi-env builds | Environment API (environments config) |
| Plugin scope | Use this.environment for env-aware plugins |
| SSR | Middleware mode for dev, separate builds for prod |
| Chunks | advancedChunks for Vite 8, manualChunks for Vite 7 compat |
Related Skills
ork:react-server-components-framework- SSR integrationork:storybook-testing- Component testing with Vitestork:performance- Core Web Vitals targets behind the build budget
References
Load on demand with Read("references/<file>"):
| File | Content |
|---|---|
ork-delta.md | House rules that Vite's docs do not state |
library-mode.md | Building publishable npm packages |
FAQ
What does the vite-advanced skill do?
Advanced Vite 8 patterns including Rolldown-powered builds, advancedChunks, Environment API, plugin development, SSR configuration, library mode, and build optimization. Use when customizing build pipelines, creating plugins, or configuring multi-environment builds.
How do I install vite-advanced?
Run npx skills add https://github.com/yonatangross/orchestkit --skill vite-advanced in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vite-advanced/ (personal) or .claude/skills/vite-advanced/ (project).
Which AI agents can use vite-advanced?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is vite-advanced safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains vite-advanced?
It is published by yonatangross in yonatangross/orchestkit. It has 259 recorded installs.
More from yonatangross/orchestkit
devops-deployment
yonatangross/orchestkit
Use when setting up CI/CD pipelines, containerizing applications, deploying to Kubernetes, or writing infrastructure as code. DevOps & Deployment covers GitHub Actions, Docker, Helm, and Terraform patterns.
responsive-patterns
yonatangross/orchestkit
Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devices, and mobile-first patterns for React applications. Use when building responsive layouts or container queries.
architecture-decision-record
yonatangross/orchestkit
ADR templates in the Nygard format with context, decision, consequences, and alternatives. Use when writing ADRs, recording an architectural decision, or evaluating options.
ui-components
yonatangross/orchestkit
UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations.
rag-retrieval
yonatangross/orchestkit
Retrieval-Augmented Generation patterns for grounded LLM responses. Use when building RAG pipelines, embedding documents, implementing hybrid search, contextual retrieval, HyDE, agentic RAG, multimodal RAG, query decomposition, reranking, or pgvector search.
zustand-patterns
yonatangross/orchestkit
Reference for Zustand 5.x state management including slices, middleware, Immer, useShallow, persistence, selectors, and devtools integration. Documents 7 core patterns with TypeScript examples and anti-patterns. Use when building React state management with Zustand instead of Redux.
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.