Technical Design Rules (Frontend)

Prerequisite Detection

Inspect package.json, the lockfile, TypeScript/build configuration, CI definitions, and representative components before applying a tool- or framework-specific rule. Treat React, Vite, Next.js, a state library, form library, or script as available only when repository evidence names it. Label surrounding-pattern conclusions as inferred. When a missing decision changes rendering architecture, compatibility, security, or verification, stop and name the exact evidence or user decision required.

Basic Technology Stack Policy

These rules apply when repository configuration confirms a TypeScript-based React application. Select architecture by mapping current requirements and constraints to component responsibilities, state ownership, server/client boundaries, and observable verification points.

Environment Variable Management and Security

Environment Variable Management

• Use the build tool's client-exposure mechanism: Browser code can read only values explicitly exposed by the configured bundler/framework; server-only environment access remains outside client bundles
• Centrally manage environment variables through configuration layer
• Parse exposed values at one typed configuration boundary before application use
• Give a value a default only when requirements define valid behavior for absence; otherwise fail startup/build validation with the variable name and expected format