add-setting-env
Add server-side environment variables that control default values for user settings.
Works with
---
name: add-setting-env
description: Add server-side environment variables that control default values for user settings.
license: Apache-2.0
---
# 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):
```typescript
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`:
```typescript
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`:
```typescript
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`:
```typescript
const serverSettings: PartialDeep<UserSettings> = {
<domain>: serverConfig.<domain>,
};
```
### 5. Update .env.example
```bash
# <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
```typescript
// 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
```More Accessibility skills
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
ui-ux-pro-max
nextlevelbuilder/ui-ux-pro-max-skill
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

