Skills
.Work. You
Rest

vite-syntax-env-vars

Official

Safeguard env vars in Vite projects.

Software Engineering#security#vite#env#mode#import.meta.env#dotenv-expand#envPrefix
AuthorOpenAEC-Foundation
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Use when configuring environment variables, using .env files, creating custom modes, or debugging env variable issues. Prevents exposing secrets by omitting the VITE_ prefix and misconfiguring .env file precedence. Covers import.meta.env built-ins, .env file loading order, VITE_ prefix requirement, dotenv-expand, custom modes, NODE_ENV vs mode, ImportMetaEnv TypeScript, HTML %ENV%, and loadEnv().

Core Features & Use Cases

  • Understand import.meta.env built-ins and their runtime vs build-time behavior.
  • Master the .env loading order across development, production, and custom modes, including OS env overrides.
  • Enforce safe exposure by prefixing client vars with VITE_ and using loadEnv(), TS typings, and HTML replacements.
  • Practical scenarios: configuring dev servers, enabling custom modes, and debugging env-related issues.

Quick Start

Configure your project to expose only VITE_-prefixed variables and verify env loading order by inspecting import.meta.env in your app.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: vite-syntax-env-vars
Download link: https://github.com/OpenAEC-Foundation/OpenAEC-Workspace-Composer/archive/main.zip#vite-syntax-env-vars

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.