ReddRadar
Agent skill
add-setting-env
Guide for adding environment variables to configure user settings. Use when implementing server-side environment variables that control default values for user settings. Triggers on env var configuration or setting default value tasks.
Install this agent skill to your Project
npx add-skill https://github.com/lobehub/lobehub/tree/canary/.agents/skills/add-setting-env
SKILL.md
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 src/envs/<domain>.ts:
import { createEnv } from '@t3-oss/env-nextjs';
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 src/server/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
// src/envs/image.ts
AI_IMAGE_DEFAULT_IMAGE_NUM: z.coerce.number().min(1).max(20).optional(),
// packages/types/src/serverConfig.ts
image?: PartialDeep<UserImageConfig>;
// src/server/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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
lobehub/lobehub
task
lobehub/lobehub
i18n
Internationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.
lobehub/lobehub
data-fetching
Data fetching architecture guide using Service layer + Zustand Store + SWR. Use when implementing data fetching, creating services, working with store hooks, or migrating from useEffect. Triggers on data loading, API calls, service creation, or store data fetching tasks.
lobehub/lobehub
recent-data
Guide for using Recent Data (topics, resources, pages). Use when working with recently accessed items, implementing recent lists, or accessing session store recent data. Triggers on recent data usage or implementation tasks.
lobehub/lobehub
hotkey
Guide for adding keyboard shortcuts. Use when implementing new hotkeys, registering shortcuts, or working with keyboard interactions. Triggers on hotkey implementation or keyboard shortcut tasks.
lobehub/lobehub
debug
Debug package usage guide. Use when adding debug logging, understanding log namespaces, or implementing debugging features. Triggers on debug logging requests or logging implementation.
Didn't find tool you were looking for?