add-setting-env
Configures and types environment variables for server-side framework settings.
Install
mkdir -p .claude/skills/add-setting-env && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/698" && unzip -o skill.zip -d .claude/skills/add-setting-env && rm skill.zipInstalls to .claude/skills/add-setting-env
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Add server-side environment variables that control default values for user settings.Key capabilities
- →Define environment variables with Zod validation
- →Update server configuration types
- →Assemble server global configuration
- →Merge server settings into user stores
- →Update .env.example files
How it works
It defines environment variables using Zod for validation, updates server configuration types, assembles the global server configuration, and merges these settings into the user store.
Inputs & outputs
When to use add-setting-env
- →Add new environment variable
- →Configure default user settings
- →Update server config types
About this skill
Adding Environment Variable for User Settings
Add server-side environment variables to configure default values for user settings.
Priority: User Custom > Server Env Var > Hardcoded Default
Steps
1. Define Environment Variable
Create packages/env/src/<domain>.ts (import path stays @/envs/<domain> — tsconfig maps to packages/env/src/* first):
import { createEnv } from '@t3-oss/env-core';
import { z } from 'zod';
export const get<Domain>Config = () => {
return createEnv({
server: {
YOUR_ENV_VAR: z.coerce.number().min(MIN).max(MAX).optional(),
},
runtimeEnv: {
YOUR_ENV_VAR: process.env.YOUR_ENV_VAR,
},
});
};
export const <domain>Env = get<Domain>Config();
2. Update Type (if new domain)
Add to packages/types/src/serverConfig.ts:
import { User<Domain>Config } from './user/settings';
export interface GlobalServerConfig {
<domain>?: PartialDeep<User<Domain>Config>;
}
Prefer reusing existing types from packages/types/src/user/settings.
3. Assemble Server Config (if new domain)
In apps/server/src/globalConfig/index.ts:
import { <domain>Env } from '@/envs/<domain>';
export const getServerGlobalConfig = async () => {
const config: GlobalServerConfig = {
<domain>: cleanObject({
<settingName>: <domain>Env.YOUR_ENV_VAR,
}),
};
return config;
};
4. Merge to User Store (if new domain)
In src/store/user/slices/common/action.ts:
const serverSettings: PartialDeep<UserSettings> = {
<domain>: serverConfig.<domain>,
};
5. Update .env.example
# <Description> (range/options, default: X)
# YOUR_ENV_VAR=<example>
6. Update Documentation
docs/self-hosting/environment-variables/basic.mdx(EN)docs/self-hosting/environment-variables/basic.zh-CN.mdx(CN)
Example: AI_IMAGE_DEFAULT_IMAGE_NUM
// packages/env/src/image.ts (import as @/envs/image)
AI_IMAGE_DEFAULT_IMAGE_NUM: z.coerce.number().min(1).max(20).optional(),
// packages/types/src/serverConfig.ts
image?: PartialDeep<UserImageConfig>;
// apps/server/src/globalConfig/index.ts
image: cleanObject({ defaultImageNum: imageEnv.AI_IMAGE_DEFAULT_IMAGE_NUM }),
// src/store/user/slices/common/action.ts
image: serverConfig.image,
// .env.example
# AI_IMAGE_DEFAULT_IMAGE_NUM=4
How it compares
This skill provides a structured, code-based approach for integrating environment variables into user settings, unlike manual configuration.
Compared to similar skills
add-setting-env side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| add-setting-env (this skill) | 4 | 2mo | Review | Intermediate |
| app-specific-patterns | 4 | 2mo | No flags | Intermediate |
| javascript-typescript-typescript-scaffold | 3 | 4mo | Review | Beginner |
| supabase-architecture-variants | 0 | 27d | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by lobehub
View all by lobehub →You might also like
app-specific-patterns
growilabs
GROWI main application (apps/app) specific patterns for Next.js, Jotai, SWR, and testing. Auto-invoked when working in apps/app.
javascript-typescript-typescript-scaffold
sickn33
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
supabase-architecture-variants
jeremylongshore
Execute choose and implement Supabase validated architecture blueprints for different scales. Use when designing new Supabase integrations, choosing between monolith/service/microservice architectures, or planning migration paths for Supabase applications. Trigger with phrases like "supabase architecture", "supabase blueprint", "how to structure supabase", "supabase project layout", "supabase microservice".
web-frameworks
mrgoonie
Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.
open-notebook-lm-guidelines
RainLib
Core project guidelines, architecture, and UI styling instructions for the FerrisMind (openNotebookLm) AI workspace project. Use this whenever working on the frontend or backend of this project.
payload
payloadcms
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.