From dev-toolbox
Add a new environment variable end-to-end — secret store (e.g. Key Vault), Zod validation in lib/env.ts, source map, .env.example, local .env. Triggers when adding or modifying env vars in the Next.js frontend.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dev-toolbox:nextjs-env-varThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill guides the full workflow for adding a new environment variable to a Next.js frontend that uses a `lib/env.ts` Zod-validated source-mapped pattern.
This skill guides the full workflow for adding a new environment variable to a Next.js frontend that uses a lib/env.ts Zod-validated source-mapped pattern.
Ask the user for:
NEXT_PUBLIC_MY_FEATURE)urlEnv(), boolEnv(), secretEnv(), enumEnv([...]), listEnv(...), or raw z.string().optional() or a .default(value)?Instruct the user to add the secret manually to the project's secret backend (Azure Key Vault, AWS Secrets Manager, Vercel env settings, etc.):
Secret name: <VARIABLE_NAME> (use the backend's naming convention — e.g. hyphens for Key Vault)
Remind them to authenticate (az login, aws sts get-caller-identity, Vercel login) before adding the secret, then pull it locally (pnpm env:pull:force or equivalent).
lib/env.tsEdit <frontend-app>/lib/env.ts:
a) Add to the Zod schema object (first argument of createEnv):
b) Add to the source map (second argument of createEnv):
process.env.VARIABLE_NAME referenceNEXT_PUBLIC_* vars at build timeExample for a new feature flag:
// In schema:
NEXT_PUBLIC_FT_ENABLE_MY_FEATURE: boolEnv().default(false),
// In source map:
NEXT_PUBLIC_FT_ENABLE_MY_FEATURE: process.env.NEXT_PUBLIC_FT_ENABLE_MY_FEATURE,
.env.exampleEdit <frontend-app>/.env.example:
After all edits:
pnpm check-types to verify the Zod schema compilesimport { env } from '@/lib/env'process.env anywhere except lib/env.tsurlEnv, boolEnv, secretEnv, etc.)lib/env.tsNEXT_PUBLIC_FT_ENABLE_*NEXT_PUBLIC_ prefixnpx claudepluginhub tk-kamyk/dev-tools --plugin dev-toolboxCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.