AD

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.zip

Installs 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.
84 charsno explicit “when” trigger
Intermediate

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

You give it
Environment variable name, Zod schema, domain, setting name
You get back
Configured server-side environment variable integrated into user settings

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.

SkillInstallsUpdatedSafetyDifficulty
add-setting-env (this skill)42moReviewIntermediate
app-specific-patterns42moNo flagsIntermediate
javascript-typescript-typescript-scaffold34moReviewBeginner
supabase-architecture-variants027dReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

drizzle

lobehub

Drizzle ORM schema and database guide. Use when working with database schemas (src/database/schemas/*), defining tables, creating migrations, or database model code. Triggers on Drizzle schema definition, database migrations, or ORM usage questions.

238873

zustand

lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

113434

react

lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

3480

typescript

lobehub

TypeScript code style and optimization guidelines. Use when writing TypeScript code (.ts, .tsx, .mts files), reviewing code quality, or implementing type-safe patterns. Triggers on TypeScript development, type safety questions, or code style discussions.

2877

project-overview

lobehub

Complete project architecture and structure guide. Use when exploring the codebase, understanding project organization, finding files, or needing comprehensive architectural context. Triggers on architecture questions, directory navigation, or project overview needs.

1548

linear

lobehub

Linear issue management guide. Use when working with Linear issues, creating issues, updating status, or adding comments. Triggers on Linear issue references (LOBE-xxx), issue tracking, or project management tasks. Requires Linear MCP tools to be available.

10117

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.

46

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

31

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".

02

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.

10

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.

00

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.

73206

Search skills

Search the agent skills registry