frontend-technical-spec
Technical Design Rules (Frontend)
Basic Technology Stack Policy
TypeScript-based React application implementation. Architecture patterns should be selected according to project requirements and scale.
Environment Variable Management and Security
Environment Variable Management
- Use build tool's environment variable system:
process.envdoes not work in browser environments - Centrally manage environment variables through configuration layer
- Implement proper type safety with TypeScript
- Properly implement default value settings and mandatory checks
// Build tool environment variables (public values only)
const config = {
apiUrl: import.meta.env.API_URL || 'http://localhost:3000',
appName: import.meta.env.APP_NAME || 'My App'
}
More from shinpr/ai-coding-project-boilerplate
documentation-criteria
Guides PRD, ADR, Design Doc, UI Spec, and Work Plan creation. Use when creating or reviewing technical documents, or when "UI spec/screen design/component decomposition" is mentioned.
12project-context
Provides project-specific prerequisites for AI execution accuracy. Use when checking project structure.
10coding-standards
Detects code smells, anti-patterns, and readability issues. Use when implementing features, reviewing code, or refactoring.
9technical-spec
Defines environment variables, architecture design, and build/test commands. Use when configuring environment or designing architecture.
9task-analyzer
Analyzes task essence and selects appropriate skills. Returns scale estimates and metadata. Use when starting tasks or selecting skills.
9typescript-rules
Applies type safety and error handling rules. Enforces no-any policy and type guards. Use when implementing TypeScript or reviewing types.
9