configuration-management

Centralizes environment variable access through a typed, Zod-validated config module.

1|Updated Jun 9, 2026
One-click install
npx skills add https://github.com/VilnaCRM-Org/claude-plugins --skill configuration-management-vilnacrm-org
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: configuration-management
Source: https://github.com/VilnaCRM-Org/claude-plugins/tree/main/plugins/react-frontend-sdlc/skills/configuration-management
Command: npx skills add https://github.com/VilnaCRM-Org/claude-plugins --skill configuration-management-vilnacrm-org

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Scattered process.env reads across components and hooks make configuration untyped, unvalidated, and prone to silent production failures. This Skill enforces a single validated config module so missing or malformed variables fail the build at boot instead of degrading silently in production. ## Core Features & Use Cases - Typed config layer: Routes all environment variable reads through a Zod-validated module (config/env.ts or config/env/), with ESLint no-restricted-syntax banning direct process.env access everywhere else. - Boot-time validation: Schema parsing runs at module load, throwing with the variable name and reason so bad configuration becomes a deployment blocker, not a runtime condition. - Layered env files: Manages .env, .env.production, and .env.example together, including an env-sync check asserting key parity between .env and .env.example. - Use Case: When adding a new NEXT_PUBLIC_GRAPHQL_API_URL variable, declare it in .env.example, add a URL-validating schema entry, set values in the layered files, and read it only from the config module. ## Quick Start Add a new environment variable to this project following the typed config module pattern and update the schema and env example files.

Frequently Asked Questions about configuration-management

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

FAQPage Schema
How do I add a new environment variable in a Next.js app?▼

Declare the variable in .env.example with an explanatory comment, add it to the Zod schema with a real validation type such as a URL check or enum, set the value in .env and the production overlay, then read it only from the config module.

How do I fix an ESLint no-restricted-syntax error on process.env?▼

Move the read into the typed config module instead of suppressing the rule. The ban covers both process.env.X and process['env'] spellings, and only the config module, tests, and stories are exempt.

Why does my build fail at boot with a Zod validation error?▼

The config schema parses at module load, before application code runs, so a missing or malformed variable throws immediately with the variable name and reason. Fix the value in the layered env files rather than adding a default, which would ship a silent no-op.

Does this config pattern work for a component library or Storybook project?▼

No. The component-library shape has no bootable app or barrel, so components read process.env directly. The typed config layer applies to React SPA and Next.js repository shapes only.

Why does process.env[name] return undefined in a static export build?▼

In statically exported builds, public variables are inlined only for literal member expressions. A dynamic read like process.env[name] cannot be inlined and evaluates to undefined in the browser bundle.