Vibe Index
🎯

runtime-env-vite-plugin

🎯Skill

from runtime-env/runtime-env

VibeIndex|
What it does

Configures Vite projects to handle runtime environment variables with proper distinction between build-time and dynamic variables.

runtime-env-vite-plugin

Installation

npxRun with npx
npx --package @runtime-env/cli runtime-env gen-js --output-file runtime-env.js
npxRun with npx
npx -p @runtime-env/cli runtime-env gen-js --output-file runtime-env.js
npxRun with npx
npx -p @runtime-env/cli runtime-env gen-ts --output-file runtime-env.d.ts
npxRun with npx
npx -p @runtime-env/cli runtime-env interpolate --input-file index.html --output-file index.html
npxRun with npx
npx -p @runtime-env/cli runtime-env --schema-file ...
πŸ“– Extracted from docs: runtime-env/runtime-env
Need more details? View full documentation on GitHub β†’
1Installs
-
AddedFeb 4, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

Guidance on using runtime-env with Vite to distinguish between runtime and build-time environment variables.

Overview

# runtime-env-vite-plugin

This skill ensures that environment variables are handled correctly in Vite projects by distinguishing between build-time (static) variables and runtime (dynamic) variables.

When to apply

Reference these guidelines when:

  • Setting up a Vite project that requires environment variables.
  • Writing code that accesses environment variables in a Vite project.
  • Configuring index.html that uses environment variables.
  • Refactoring existing Vite projects to properly use runtime environment variables.
  • Reviewing code for proper environment variable usage in Vite projects.
  • Optimizing CI/CD pipelines

Overview

Use this skill when working on a Vite-based project that uses @runtime-env/vite-plugin. It provides guidance on configuration, usage in code, and usage in index.html.

Rules

  • [Setup runtime-env plugin](./rules/setup-runtime-env-plugin.md): How to configure Vite, index.html, and the schema.
  • [Use runtime public env in JS/TS](./rules/use-runtime-public-env-in-js-ts.md): How to access dynamic variables in your code.
  • [Use runtime public env in index.html](./rules/use-runtime-public-env-in-index-html.md): How to use interpolation in your HTML.
  • [Add new environment variables](./rules/add-new-environment-variables.md): How to add new variables with proper types and validation.