Standardmรครig ist der Prompt ausgewรคhlt, der zuerst die Quelle prรผft. Sie kรถnnen zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prรผfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich fรผr eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fรผgen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prรผfen und installieren.
Ein direkter Befehl รผberspringt den Prรผf-Prompt. Prรผfen Sie die Quelle, bevor Sie ihn ausfรผhren.
โ Organizing env vars just before deployment
โ Missing variables, naming inconsistency, deployment delays
โ Establish convention at design stage
โ Consistent naming, clear categorization, fast deployment
Environment Variable Naming Rules
Prefix
Purpose
Exposure Scope
Example
NEXT_PUBLIC_
Client-exposed
Browser
NEXT_PUBLIC_API_URL
DB_
Database
Server only
DB_HOST, DB_PASSWORD
API_
External API keys
Server only
API_STRIPE_SECRET
AUTH_
Authentication
Server only
AUTH_SECRET, AUTH_GOOGLE_ID
SMTP_
Email service
Server only
SMTP_HOST, SMTP_PASSWORD
STORAGE_
File storage
Server only
STORAGE_S3_BUCKET
โ ๏ธ Security Principles
- Never expose anything except NEXT_PUBLIC_* to client
- API keys and passwords must be server-only variables
- Never commit sensitive info in .env files
.env File Structure
Project Root/
โโโ .env.example # Template (in Git, values empty)
โโโ .env.local # Local development (Git ignored)
โโโ .env.development # Development env defaults
โโโ .env.staging # Staging env defaults
โโโ .env.production # Production defaults (no sensitive info)
โโโ .env.test # Test environment
.env.example Template
# .env.example - This file is included in Git# Set actual values in .env.local# ===== App Settings =====
NODE_ENV=development
NEXT_PUBLIC_APP_URL=http://localhost:3000
# ===== Database =====
DB_HOST=
DB_PORT=5432
DB_NAME=
DB_USER=
DB_PASSWORD=
# ===== Authentication =====
AUTH_SECRET= # openssl rand -base64 32
AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=
# ===== External Services =====
NEXT_PUBLIC_API_URL=
API_STRIPE_SECRET=
SMTP_HOST=
SMTP_USER=
SMTP_PASSWORD=
Environment-wise Value Classification
Variable Type
.env.example
.env.local
CI/CD Secrets
App URL
Template
Local value
Per-env value
API endpoints
Template
Local/dev
Per-env value
DB password
Empty
Local value
โ Secrets
API keys
Empty
Test key
โ Secrets
JWT Secret
Empty
Local value
โ Secrets
Environment Variable Validation
// lib/env.ts - Validate env vars at app startupimport { z } from'zod';
const envSchema = z.object({
// RequiredDATABASE_URL: z.string().url(),
AUTH_SECRET: z.string().min(32),
// Optional (with defaults)NODE_ENV: z.enum(['development', 'staging', 'production']).default('development'),
// Client-exposedNEXT_PUBLIC_APP_URL: z.string().url(),
});
// Validation and type inferenceexportconst env = envSchema.parse(process.env);
// Type-safe usage// env.DATABASE_URL โ autocomplete supported
// โ Tied to specific typefunctioncalculateOrderTotal(order: Order) {
return order.items.reduce((sum, item) => sum + item.price, 0)
}
// โ Generalized with interfaceinterfaceHasPrice { price: number }
function calculateTotal<T extendsHasPrice>(items: T[]) {
return items.reduce((sum, item) => sum + item.price, 0)
}
// Can be used in various placescalculateTotal(order.items)
calculateTotal(cart.products)
calculateTotal(invoice.lineItems)
6.2 Component Design
Composable Components
// โ Hardcoded structurefunctionUserCard({ user }: { user: User }) {
return (
<divclassName="card"><imgsrc={user.avatar} /><h3>{user.name}</h3><p>{user.email}</p></div>
)
}
// โ ComposablefunctionCard({ children, className }: CardProps) {
return<divclassName={cn("card", className)}>{children}</div>
}
functionAvatar({ src, alt }: AvatarProps) {
return<imgsrc={src}alt={alt}className="avatar" />
}
// Use by combining
<Card>
<Avatarsrc={user.avatar}alt={user.name} /><h3>{user.name}</h3><p>{user.email}</p>
</Card>
Props Extensibility
// โ Limited propsinterfaceButtonProps {
label: stringonClick: () =>void
}
// โ Extend HTML attributesinterfaceButtonPropsextendsReact.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'default' | 'outline' | 'ghost'size?: 'sm' | 'md' | 'lg'
}
// All button attributes available
<Buttontype="submit" disabled={isLoading}>
Save
</Button>
6.3 Extraction Criteria
When to Extract as Function
1. Same logic used 2+ times
2. Logic is complex enough to need a name
3. Logic that needs testing
4. Can be used in other files
When to Extract as Component
1. Same UI pattern repeats
2. Has independent state
3. Is a reusable unit
4. JSX over 50 lines
