Menu
Guidance on using runtime-env with Vite to distinguish between runtime and build-time environment variables.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.
Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.
Archive multiple completed changes at once. Use when archiving several parallel changes.
Continue working on an OpenSpec change by creating the next artifact. Use when the user wants to progress their change, create the next artifact, or continue their workflow.
Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
Fast-forward through OpenSpec artifact creation. Use when the user wants to quickly create all artifacts needed for implementation without stepping through each one individually.
| name | runtime-env-vite-plugin |
| description | Guidance on using runtime-env with Vite to distinguish between runtime and build-time environment variables. |
| metadata | {"workflows":["./references/01-setup.md","./references/02-discovery.md","./references/03-migration.md"],"guides":["./references/the-string-trap.md"]} |
This skill ensures that environment variables are handled correctly in Vite projects by distinguishing between build-time (static) variables and runtime (dynamic) variables. It enforces a sequential workflow to ensure proper analysis and clean implementation.
You MUST apply this skill when:
@runtime-env/vite-plugin.This skill MUST be executed in the following order. Do not skip steps:
runtimeEnv for type safety.parseInt, JSON.parse) during migration.npx runtime-env gen-ts after updating the schema.index.html before the app entry point.default keyword in .runtimeenvschema.json. All environment values must originate from the environment..env files. They are read-only sources of truth.import { runtimeEnv } from ... or similar. runtimeEnv is a global.gen-ts or gen-js scripts to package.json.