with one click
frontend-technical-spec
Defines frontend environment variables, component design, and data flow patterns. Use when configuring React environment.
Menu
Defines frontend environment variables, component design, and data flow patterns. Use when configuring React environment.
PRD、ADR、Design Doc、UI Spec、作業計画書の作成を支援。技術ドキュメントの作成・レビュー時、または「UI Spec/画面設計/コンポーネント分解」が言及された時に使用。
統合テストとE2Eテストを設計。モック境界と振る舞い検証ルールを適用。E2Eテスト、統合テスト作成時に使用。
サブエージェントのタスク分担と連携を調整。規模判定と自律実行モードを制御。大規模タスク分割時に使用。
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.
Designs integration and E2E tests with mock boundaries and behavior verification rules. Use when writing E2E or integration tests.
Coordinates subagent task distribution and collaboration. Controls scale determination and autonomous execution mode.
| name | frontend-technical-spec |
| description | Defines frontend environment variables, component design, and data flow patterns. Use when configuring React environment. |
TypeScript-based React application implementation. Architecture patterns should be selected according to project requirements and scale.
process.env does not work in browser environments// Build tool environment variables (public values only; client-exposed vars need the VITE_ prefix)
const config = {
apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:3000',
appName: import.meta.env.VITE_APP_NAME || 'My App'
}
// Does not work in frontend
const apiUrl = process.env.API_URL
.env files in Git (same as backend)Correct Approach for Secrets:
// Security risk: API key exposed in browser
const apiKey = import.meta.env.VITE_API_KEY
const response = await fetch(`https://api.example.com/data?key=${apiKey}`)
// Correct: Backend manages secrets, frontend accesses via proxy
const response = await fetch('/api/data') // Backend handles API key authentication
React Component Architecture:
State Management Patterns:
useState for component-specific stateMaintain consistent data flow throughout the React application:
Single Source of Truth: Each piece of state has one authoritative source
Unidirectional Flow: Data flows top-down via props
API Response -> State -> Props -> Render -> UI
User Input -> Event Handler -> State Update -> Re-render
Immutable Updates: Use immutable patterns for state updates
// Immutable state update
setUsers(prev => [...prev, newUser])
// Mutable state update (avoid)
users.push(newUser)
setUsers(users)
unknown) -> Type Guard -> State (Type Guaranteed)// Type-safe data flow
async function fetchUser(id: string): Promise<User> {
const response = await fetch(`/api/users/${id}`)
const data: unknown = await response.json()
if (!isUser(data)) {
throw new Error('Invalid user data')
}
return data // Type guaranteed as User
}
Use the appropriate run command based on the packageManager field in package.json.
test - Run teststest:coverage - Run tests with coveragetest:coverage:fresh - Run tests with coverage (fresh cache)test:safe - Safe test execution (with auto cleanup)cleanup:processes - Cleanup Vitest processesQuality checks are mandatory upon implementation completion:
Phase 1-3: Basic Checks
check - Biome (lint + format)build - TypeScript buildPhase 4-5: Tests and Final Confirmation
test - Test executiontest:coverage:fresh - Coverage measurementcheck:all - Overall integrated check